ART DIRECTION / ART PROGRESSION
Abigail Kartika Darmowinoto / 0350525 / Bachelor of Design in Creative Media
Art Direction / Taylor's University
Project : Recreating Video Game Design - Art Progression
Last Progression:
- Character Design : Luisa and Michelle
- Environment Design : Cecilia and Devina
- UI/UX Design : Abigail
For start, I decided with the flowchart of the game first:
I did several brainstorming of game UI layouts on Pinterest:
Other's Progression:
- CHARACTER DESIGN
These are the characters' ideation made by Luisa(Right) and Michelle
(Left).
- ENVIRONMENT
We planned on making what the environment would look like, and later
be created by Devina:
and Cecilia as well:
WEEK 6 PROGRESSION
I proceed on creating more screen and better version of the
flowcharts:
This time, I refer to several real games UI like for example, the minimap
can be found on general MMORPG games, which I refrenced from Honkai Star
Rail, and the simple UI style and right aligned UI I reference from Brawl
Stars.
Michelle's progression:
WEEK 7 PROGRESSION
I started on creating the screens on the Adobe Illustrator. I started with
the main screen and followed by several other screens. I tried to place
Michelle's character designs into the UI.
I also created the rounded version of the UI:
I asked on my teammates on how is it, and they said it looks nice but
they prefer the rounded one.
So, I created the rest of the screen style into rounded:
I tried to attempt on the logo:
These are me and my other team member's latest progression for the week.
we have presentation as well for this week:
Before the presentation, we have a small issue:
I got feedback from my teammates that maybe the font is a bit weird, so I looked for some other fonts, and the other teammates helped me to choose font. They gave several choices:
Okay so I'm giving a solution, why don't we put the font we used first on the ppt and later show these fonts we're choosing to miss, and Michelle and Cecilia were okay, and Devina and Luisa I'm not sure because they're sitting far away. So I thought it won't matter, so I put it and got removed last minute by Luisa :'))), which I just noticed when I presentated my part, that part is gone XD you can just at least let me know....
WEEK 8 PROGRESSION
Proceeding on, I tried to refine the UI into Figma. So I tried to create several screens and flows:
I helped Cecilia on creating several item designs for the grooming room:
Which I referenced from Pinterest:
She likes it, and she feel glad I helped.
The minigames I made are:
WEEK 9-10 PROGRESSION
Continuing, I created several other screens on Figma. I'm still waiting for the environment to be fully colored. In the meantime, I'm asking my groupmates on what kind of font they want from the previous progression, because to be honest I'm still feel not good for the font, after what happened :')
I combined and paired several fonts I've filtered due to copyright, variations of the fonts, and style, and I created a poll on the What'sApp group, for them to choose easily:
The choosen 2 are Coiny-Fredoka and Fraiche-Fredoka. They seem more to Fraiche-Fredoka, so I changed the body texts into Fredoka, since I've already use Fraiche previously.
I began to work with the minigame ideation and how it works:
- Connect The Color
Inspired from the connect the color games:
- Paint The Nails / Cut The Nails
Inspired from one of Adorable Home's Minigame:
- Collect The Food
WEEK 12-14 PROGRESSION
I started on implementing several icons on the Figma, and started to do the rough color first (because I feel like it will be more efficient and I won't be stress with the deadline if I do it now). I helped with environment team to color because they haven't finished. It was a chaotic day.
Highlight of what I did so far during these 2 weeks:
1. I began to do the UI shading and highlighting as well.
2. I decided to put a shadow of the cat and clown cat as a background:
A. Simple Button - function: small option, small choice
- Border
- Shading
- White Highlight
- Green Color for Active State, Purple Color for Neutral State
B. Illustrative Button - function: bigger option, bigger choice
5. Changed all black color into #303030, to make it blend more with other color.
6. Doing Environment Design Team to do detailing for 2 rooms:
I decided to do the shading and highlighting in substitute of the environment team, but only for 2 out of 3 rooms, because I need it fast to finalize the figma.
note: base color and all the designs made by environment team, except the items mentioned previously
GROOMING ROOM
MEETING ROOM
7. Yellow Highlight as indicators of chosen / interactable:
8. Finalising Minigames Items and Wardrobe Icons
Glad Michelle helped with creating several game assets I have made previously to color and detailing:
9. Map Component
When press can open map - finished several minutes before presentation due to waiting for the map design
Just a bit out of context...
Last minute before submission, after the submission they talked about the environment and said that the environment doesn't fit the cat design style (when the cat is only one colored no shading while the environment is full shading highlight and effect). They thought of removing all the shading and highlighting and effects I did, but I'm not sure whether on the final submission it got removed or not. (If yes then I regret helping XD - because when I worked with one of the environment and asked for feedback they said it's good and okay :))) -no words can describe how hurtful is it XD-
SUBMISSION
UI INTERACTABLES
FINAL COMPILATION
final submission - video compilation
FINAL PRESENTATION
final submission - presentation
FEEDBACKS
CHARACTER DESIGN
- Put the hat and other elements of the costume on birthday
- Futuristic look can but not too futuristic, still include the cute or birthday party element
- In the cafeteria, remove the door
- Make only 3 rooms (lobby + meeting room, playroom, grooming)
- It's still Among us
- Add something that is related to clown things (it's giving a hint to the player that the impostor is a clown, etc)
- The shapes towards rounded - to indicate our game identity.
- Copy-paste is your best friend
- Play in colour scheme/ utilize colour
- Straight-forward
- Well done
- Logo: Prefer the Abi's sketch, the last one ("O" with batman's face)
It was an interesting module and fun to work with, and the groupmates seems supportives so I really enjoyed working on this team. However, the project journey's not limited to fun only, there are several emotions as well like anger, anxiety, and such. I feel okay with the current group, however it'll be nice if we communicate more and efficiently. As a group member I want to be heard and given feedbacks and maybe anything that's helpful. I feel like it's a bit unfair if something is decided on one individual without asking others' opinions. I feel like we are pillars, and we have our own strength and weakness and we can't give the same treatment to each of us. However I sometimes noticed that some members lack of awareness on lending help to other members who's struggling, but I understand it may be because they have their own workload as well. But I like how some members keep letting know their progression and ask feedbacks on their work, it makes the group feel as a group.
Comments
Post a Comment