APPLICATION DESIGN I: PROJECT 2
29/08/2022 - 19/09/2022 (Week 01 - Week 04)
ALICIA TENG YI LING / 0345159 / BDCM
APPLICATION DESIGN I
PROJECT 2 / UI Documentation
Project 2 UI Documentation
Design Elements
Colour Palette
I wanted the actual app to be quite neutral, simple and minimalistic with
a simple focal point to emphasise certain points and tie together the
whole aesthetic and design. For that focal highlighting point, I went with
the colour green as I associate it with nature, cleanliness and vegetables
(I am re-designed a food/meal planning app!).
|
|
Fig 1.1.1 Colour Palette Swatches & Gradients |
Typography Scheme
I wanted responsive fonts for better app legibility and decided to
read up information on this section in an article (https://www.justinmind.com/ui-design/best-font-mobile-app).
I decided to go with Montserrat (Regular, Light and Semi Bold), it
is a clear, urban typography that is easy on the eyes and has great
legibility. Plus, it's just my personal preference in typefaces as a
designer.
|
|
Fig 1.2.1 Chosen Typeface |
Below is my testing for headlines, sub-headlines, and
sub-sub-headlines as well as paragraphs and text labels.
|
|
Fig 1.2.2 Headings, Paragraphs & Text Labels |
UI Elements
Buttons, Switches & Cards
Each button and card follows the chosen colour palette above (Figure
1.1.1).
|
|
Fig 1.3.1 Buttons: Primary Large, Secondary Medium, Special Small, & Switches |
|
|
Fig 1.3.2 Tertiary Small Buttons & Cards Style |
Iconography
All of the basic and food related icons were taken from a website (https://www.flaticon.com/). Although from different artists and packs, I tried to find icons
that were similar in line width and style to each other. Additionally,
I made sure to find inverted coloured versions of interactable icons
to show that they change when tapped.
|
|
Fig 1.4.1 Icons: Basic & Food Related |
Spacing & Layout
The two simple systems I came up with are used consistently throughout
the wireframes to provide a variety of UI layouts so the appearance of
the app is not too stale.
|
|
Fig 1.5.1 Grid System: Symmetric & Asymmetric |
Vertical Lists
On the side of the main home page screen is an icon that will display a
dropdown menu when activated in order to let the users access each section
of the application for ease of use.
|
|
Fig 1.6.1 Dropdown Menu |
Final UI Documentation Submission
FEEDBACK
(31/10/2022)
- UI Style Guide not complete
- Add more items and determine final design elements (card style/corner radius, choose input field design make it reflect the corners of the buttons, grid system and tertiary buttons)
- If choosing icon, make sure they are all the same line weight (inverse colours can be pressed or active)
- Make sure to use the green colour palette in moderation
(07/11/2022)
- Make sure all card styles and widths are consistent
- Maybe decrease the icon sizes (arrow and three dots)
- Can take icons from material.io to save time
REFLECTION
This was my first time making a type of UI style guide like this and was also my first time using the software Adobe XD! It was a little daunting at first to start using a software where I was so unfamiliar with the UI and it's functions. However, after a while of playing around, YouTube tutorials and utilising my experience from other Adobe software, I think I got the hang of it. It was fun, it gave me a peek into what it's like to design for an application
in a more professional setting. Being able to play around with colour swatches and gradients and picking out UI kits, typography and iconography and watching my design vision come to life and combine together is quite the satisfying feeling. I hope that my lo-fi rendition matches all the design elements and UI style guides that I picked out and eventually becomes a stunning working prototype.
Comments
Post a Comment