HEY THERE! Some videos have been reported as not playing correctly on mobile browsers. If you encounter issues, please switch to Desktop.
Thank you! (:

Technical UI Artist Portfolio

Anna Katsouli

VISUAL DEVELOPMENT / TECHNICAL UI DESIGN / ANIMATION / VFX / SHADERS

Abysmal

A building, simulation, management game developed for Ludum Dare 48. The team consisted of five members.

PROJECT LINK:

RELEASE DATE:

PLATFORMS:

ABYSMAL – (from left to right): (1) Main Menu & Credits, (2) Game HUD, (3) Ambience VFX, (4) Process Breakdown: Assets Integration

RESPONSIBILITIES

– Collaborated closely with the fellow artist to establish the game’s visual style and atmosphere.
– Designed, animated, and integrated the Main Menu and HUD elements.
– Created and integrated VFX by utilizing cropped parts from the character graphics and the Particle System component to enhance the visual experience.
– Created shaders to produce seamless gradient effects for the background and tile materials.

CREDITS

design & code: GeorgyAngelov, BloodyStupidViktor, Pulni
visuals: Nefi Louko, Virimine

GOALS

In this game jam, my primary aim was to enhance the overall look and feel of the game while challenging my recently acquired technical art skills within the given time constraints. Additionally, I sought to explore and experiment with UI design and engineering.

TOOLS

Unity Engine (GUI, Animation, Animator, Particle System (Shuriken), Shadergraph), C#, Visual Studio, Adobe Photoshop, Adobe Illustrator, Git

UI IMPLEMENTATION / MOTION DESIGN

Achievements UI

A scrollable list UI developed as a technical test for a recruitment process. All graphic assets were developed by the studio.

PROJECT LINK:

RELEASE DATE:

PLATFORMS:

TASKS

– Imported assets in Unity from Figma, – Card content scales based on text length, using the Unity Layout Components.
– Added support for multiple horizontal screen aspect ratios.
– Dynamically populate Achievements List.
– Designed motion graphics.

MOTION DESIGN THINKING

Subtle motion has been used with the intention to guide player gaze. 1) The title and counter appears first entering from the sides. 2) Cards fade in one by one. 3) Text appears based on hierarchy and reading order. 4) Icon uses an opposite motion to create contrast. 5) Scrollbar fades in to indicate that the list is now scrollable.

PROBLEMS AND SOLUTIONS

ISSUE 1: Nested Layouts kept breaking stuff.
SOLUTION: Had to refresh memory on layout structures, lots of googling and trial and error.

ISSUE 2: Dynamically populating card list resulted in UI not being updated correctly. SOLUTION: Used Coroutines and Animations to add a delay for the UI graphics update.

ISSUE 3: Scrollbar was jittery
SOLUTION: Scrollbar appears only after all the content elements (cards) have spawned.

TOOLS

– Unity Engine (GUI, Animation, Animator), C#, Visual Studio, Git, Adobe Photoshop

DIRECTION / PRODUCTION / ILLUSTRATION / GRAPHIC DESIGN

Banquet

A top-trumps card game clone that consists of 22 food and drink cards. Banquet is a personal project created in collaboration with Yasen Dokov.

PROJECT LINK:

RELEASE DATE:

PLATFORMS:

2021

Physical, Printed

Banquet – (from left to right): (1) Card back (2) Carrot Cupcake Card front, (3) Banner, (4) Mock-up Image

RESPONSIBILITIES

– Co-designed the game mechanics and rules.
– Led the visual identity of the game, created the visuals and wrote the texts.
– Oversaw the game’s production by assigning tasks, setting goals, and establishing deadlines, using Trello and the Kanban methodology.

CREDITS

Virimine & Yasen Dokov

 
 

 

 

TOOLS

Adobe InDesign, Adobe Photoshop, Trello, Google Suit

GOALS

Download Banquet’s Image Story to read what is more or less written below, in a more fun way.

The intention was to develop a physical card game, featuring foods and drinks for the buffet at my thesis presentation. Our aim was to craft a game tailored for a non-gamer audience. To achieve this, we decided to use the mechanics of a popular game, assuming that most people would be familiar with a top-trumps variant. Banquet was created specifically for social gatherings, aiming to break the ice and promote interactions among guests in a light-hearted and playful manner.

UNITY DEVELOPMENT / TECHNICAL UI ART / ANIMATION / VFX

Star Academy by Rocket Cola Studio

An educational game for children to learn essential skills in English.

PROJECT LINK:

RELEASE DATE:

PLATFORMS:

2023

Windows, Mac, Android, iOS

Star Academy – (from top to bottom): (1) Highlights Reel, (2) Main Menu Variations & Animation, (3) Victory Panel Variations & Animation, (4) Word Ride Full Gameplay, (5) Magical Forest Full Gameplay

RESPONSIBILITIES

– Use of the Unity’s GUI system for the development of multiple mini-game prototypes (from concept to final) based on the design guidelines.
– Usage of aforementioned prototypes as templates  to produce over 400 interactive exercises.

TOOLS

– Unity Engine (GUI, Particle System (Shuriken),  Animation, Animator, DOTween), C#, Visual Studio, Git, Adobe Photoshop, Trello, Google Suite

CREDITS

Rocket Cola Studio

ACHIEVEMENTS

Understanding both technical and artistic aspects assisted in saving time from development by :
– Creating and integrating visual assets with a detail-oriented and quality-focused approach, leading to less iterations and evaluations.
– Explaining technical processes to artists and designers in a clear and comprehensible manner, resulting in fast and effective decision making.

LESSONS

Working on a long-term project has provided valuable insights into the significance of code architecture, automation, and reusability. It has allowed me to grasp the fundamentals of code principles and patterns while learning to operate within established procedures and coding standards.
This experience allowed for the enhancement of problem-solving skills, gained insight, and a deeper understanding of production aspects.

UI / UX DESIGN

My Pet Companion

An animal-themed educational mobile game for kids.

PROJECT LINK:

RELEASE DATE:

PLATFORMS:

Mobile

RESPONSIBILITIES


– Managed the end-to-end design process, from screen flows and wireframes to interactive prototype and high fidelity designs.

TOOLS

– Figma, Trello, Google Suite

LESSONS

– Got the chance to develop my skills by gaining hands-on experience on the UI/UX design process.
– Became familiar with the guidelines and limitations of mobile game interfaces.
– Better understood the importance of wireframes and early prototypes for receiving UX feedback on the designs and gained a deeper appreciation for layouts.
– Improves my skills in Figma by using it throughout the whole process.

CREDITS

DragonTale Studios

ART DIRECTION / PRODUCTION / SHADERS

ARCHIVED

An abstract, experimental, first-person interactive experience demo developed as a digital art piece. ARCHIVED has been awarded The Art of Games in Greece 2023: Blossoms Grand Prix.

PROJECT LINK:

RELEASE DATE:

PLATFORMS:

ARCHIVED – Demo Teaser Trailer

RESPONSIBILITIES

– Oversaw the game’s concept and visual identity.
– Worked on the level design and created the graphics and shaders.
– Handled the production by assigning tasks, setting goals, and establishing deadlines, using Trello and the Kanban methodology.

TOOLS

Unity Engine (Particle System, Shadergraph), Adobe Premiere, Git, Trello, Google Suite

CREDITS

art direction, production, game design: virimine
code, game design: Thanasis Galianis
sound: Chris Douris

GOALS

Guided by a visionary approach, our intention was the creation of an abstract game-like experience fuelled by the need to explore the connection between art, data, digital space, and choice. Our aim was to evoke a sense of uncanny within the viewer, through the visual experimentation that defied the boundaries of 3D space. Our ultimate objective was to deliver a prototype that embodied our creative vision.

LESSONS

In this project, I gained a deeper understanding of the Unity Engine and shader creation. Additionally, I honed my skills in game production and recognized the significance of effective communication and management within a team setting. Specifically, I learned the importance of task prioritization and the need to align the project’s vision with the available resources for realistic results.

Shader Experiments, created in Unity Engine Shadergraph. Looped Videos made using Adobe Premier.

ART DIRECTION / PRODUCTION / SHADERS

ERGO/prhizomius

My thesis project for the MFA in Visual and Applied Arts. An interactive sculpture, consisting of an algorithmic entity simulation, projected through a screen and a cocoon-like shaped structure with an opening. The viewer can peek inside the structure to view the digital organism.

PROJECT LINK:

RELEASE DATE:

PLATFORMS:

private

2021

Windows, physical

ERGO/prhizomius – recorded excerpt from the real-time simulation

RESPONSIBILITIES

– Came up with the idea and led the project’s entire production process and design.
– Oversaw the art direction and visual development of the project.
– Explored various artworks, art styles, and artists to guide the project’s direction.
– Gathered inspiration and references from various sources to make sure that the execution was well rounded.
– Conducted extensive visual and conceptual research.
– Collaborated closely with artists and developers to bring the project to life while ensuring alignment with the project’s vision.
– Experimented with Shadergraph, creating some of the shaders.

TOOLS

Unity Engine (Shadergraph, Particle System, Post Processing), Processing 2.0, Adobe Photoshop, Adobe InDesign, Adobe Premiere, Git, Trello, Google Suite

GOALS

As my graduate project, I wanted to create an interactive virtual entity as a metaphor for life and engagement. Through the viewers’ gaze, their attention is transformed into data that affects the progress of the artwork-organism, nourishing it in order to grow. The lack of attention inhibits its growth and eventually leads to its decay. Thus, attention acquires a vital role in its survival and development, emphasizing its dependence on its audience.
The conjunction of biological and algorithmic patterns aims, through a sense of a synthetic organicity, at the creation of an otherworldly being. At the same time, they contribute to the parallel connection between its material and immaterial nature, inducing a dialogue between the real and the digital world.

CREDITS

artist: virimine
code: Yasen Dokov
structure technical design & implementation: Mina Katsouli, Rania Antipa

2D GRAPHICS / ANIMATION

Led Astray(2020) and Perish Alive(2020) – Graphics & Cel Animations, created with Adobe Photoshop.

Scroll to Top