Application Design / Project 2
Abigail Kartika Darmowinoto / 0350525 / Bachelor of Design in Creative Media
Application Design / Taylor's University
Project 2 : UI StyleGuide
INSTRUCTIONS
<back to top>
fig 1.1, Module Information Booklet of Application Design
PROGRESSION
WEEK 5 EXERCISE:
We were tasked to recreate 5 pages from some applications
provided, Productive - Habit Tracker, Sectograph, Trip, AirBNB,
Premier League, Strava, using Adobe XD, Figma, AI, or PS.
I decided to go on with trip.com, since I love to travel. I actually confused
on whether it's creating the same design 100% or re-design, thus I go on with
making it 100% same because Mr. Shamsul mentioned to look on the pixels, size,
actual size, etc.
Moving on, I'm planning on making it on Figma because I want to learn
something new. If I use AI it'll just the same knowledge I have. I learnt on
how to use Figma.
fig 2.1, https://youtu.be/qpH7-KFWZRI, Week 5 (02/10/2022)
First, I screenshots all of the interface I planned to work on:
fig 2.2 trip.com interfaces, Week 5 (02/10/2022)
My confusion at first is how to make the template frame. But then I did it and
create my first one. Continuing, I started to make the basic layout first:
fig 2.3 trip.com layouting progress, Week 5 (02/10/2022)
I used Figma's first default typeface, and I noticed that it somehow looks
very similar with the app original design. Since Trip.com icons are quite
uncommon and I think they design the icons themselves, I decided not to search
for some random logos in Google, instead, I traced them up using AI and copy
paste it to Figma.
fig 2.4 trip.com logo trace, Week 5 (02/10/2022)
fig 2.5, recreate process with images, Week 5 (02/10/2022)
Mr. Shamsul said the recreation is very good, but there are something to note,
like less up the shadow in "tours and ticket" part, add gradient, colors can
add plugin to make it more dimmer.
So, I edited as his suggestion:
Here's a closer look:
(Left the recreated design - right the original)
WEEK 9 (24/10/2022):
After I finish all the breakdown I made in Miro, I started to define the styleguides.
Then, moving forward, I decide on which elements to use and remove. I
decided to go with Monny's default color, the pink and blue, because I feel
like that's Monny's branding.
I want to make Monny look simple yet still having the element of cuteness,
thus, I don't want to make the interface to looks too plain and serious.
Then, I also want it to have more modern look since majority of the survey
told that the design is too outdated.
For the typeface, I choose Quicksand, which is a sans-serif typeface. The
reason I choose this is because it offers the roundish look, which is having
the personality of "cheerful" (in my opinion), also modern look. I used it
on both of the headings and body, because I feel if this app is using too
many typefaces, it'll look very cramped and confusing.
fig 2.5, recreate with images final, Week 5 (02/10/2022)
PROJECT PROGRESSION:
After I finish all the breakdown I made in Miro, I started to define the styleguides.
I refer to this styleguides, one of the material provided by Mr.
Shamsul.
fig 2.6 UI Style guidelines, Week 10 (31/10/2022)
fig 2.7 Primary Color, Week 10 (31/10/2022)
QUICKSAND -
GOOGLE FONT
fig 2.8 Quicksand Preview, Week 10 (31/10/2022)
After that, I started to create the logo for categories to see whether
they suits or not. I planned it to have sharp but rounded edges to make
it look consistent with the styleguides:
fig 2.9 Icons created, Week 10 (31/10/2022)
Final:
fig 2.10 Final, Week 10 (31/10/2022)
FEEDBACKS
WEEK 6 (03/10/2022)
SPECIFIC FEEDBACKS:
- Drop shadow can be lighter
- Images in "attraction" page can use Figma's plugin to make it like darker/fader
- Very good
WEEK 10 (31/10/2022)
SPECIFIC FEEDBACKS:
- Very good, very clear can proceed to low fidelity prototype
- Images looks fun, can, but need to add label
- Good choice of using 1 typeface, if 2 will look cluttered
- Low fidelity prototype: make 1 main page, test in 2-3 person, don't guide, to know the effectiveness of the prototype
WEEK 11 (07/11/2022)
SPECIFIC FEEDBACKS:
- Can change the calendar and calculator following Samsung's design ✅
- Probably can ask first whether to add expense / income before going to the calculator window ✅
- Navigation button too big ✅
- Spacing between income expense too tight ✅
- Can change the open column into line ✅
- Add expense button not clear enough, can swipe the color ✅
It's a fun thing to do especially the design thinking here has to work.
However, at the same time it's difficult to maintain consistency between the
style. It'll really help if we know how to use Figma/XD library assets which
make it more easier. Myself personally needs to learn more especially in
making certain elements like calendar, calculator, because some elements need
to have the uniformity with the device we're going to use.
Working with gradients on Figma
*all images sourced from post
- Linear
- Radial
- Angle
- Diamond
Can be applied to:
- Shape
- Text
REFERENCE:
Designcode.io. (n.d.). Working with gradients on Figma. Retrieved
October 3, 2022, from
https://designcode.io/figma-handbook-gradients
The 6 key principles of UI design
*all images sourced from post
REFERENCE:
Maze. (2022, July 25). The 6 Key Principles of UI Design. Retrieved October
11, 2022, fromhttps://maze.co/collections/ux-ui-design/ui-design-principles/
Comments
Post a Comment