Learning about Designs

I was enrolled on an 8-weeks course titled UX Academy Foundations by Design Lab. Intended to be a introductory course before one decides to delve deeper into the design industry. Learners are expected to spent a minimum of 10 hours a week on this course in order to complete it on time.  

Below are my takeaways and brief reflection of the course.

Week 1: Visual Design Basics

We learnt about 3 things: 1) Composition hierarchy; 2) Text structure hierarchy; 3) Layout, Spacing, Alignment.

These concepts help with leading the eyes, thoughts, actions, and even emotions of the person interacting with your design.

Week 2: UI Design Principles

Tapped into visual design principles, interface design principles, Gestalt principles.

Gestalt principles: Brains perceive whole and parts as separate entity.

Gestalt principles organise information based on these aspects:

1) Proximity: Things that are near to each other are part of the same group.

2) Similarity: Things that have the same shape, or same colour, and same size is part of the same group/ are related to each other.

3) Continuity: Eyes tend to follow a path, if given in any form (e.g. line, curve, sequence).

4) Closure: Brain fills in blanks to perceive an object as a whole (e.g. WWF logo).

5) Simplicity: less is more.

6) Figure-Ground: eyes isolate shape from foreground.

7) Symmetry: Things is symmetry is perceived as connected

Interface Design Principles provides best practice for design of content and functions through:

1) Visibility: Making things obvious, surface and repeat objects.

2) Feedback: Inform a person that their actions has been acknowledged, managed expectations provide sense of safety and correctness.

3) Constraints: Less actionable options, the better.

4) Mapping: Intuitive controls that matches functions it delivers

5) Consistency: Functions are presented/triggered in similar/same way

6) Affordance: Appearance of hints on how to use given functions.

There are then 5 usability principles to bear in mind when designing: 1) Is it easy to learn how to complete a task? (Learnability); 2) Can one troubleshoot errors when completing task? (Error prevention & error forgiveness); 3) Can task be done fast? (Efficiency); 4) Can one remember how to complete the task again? (Memorability); 5) Is it aesthetically pleasing and delightful to use? (Satisfaction)

These principles seems to try to ensure that the person interacting with the design feels safe and significant, again back to satisfying Maslow's Hierarchy of Needs.

Week 3: UI Design Elements

A brief introduction to interface elements such as text input, toggle, icon, menu, slide, buttons.  Then touched on many ways of navigation and way finding.  Then touched on size and scale in UI design.

Recommended desktop text is between 20-28px, while mobile text size should be between 16-20px.  

Fun tip: Text can be increased in scale of 2 or 4px for consistency between body and heading text.

Week 4: Design Evaluation & Critiques

There were 13 aspects listed as guides for evaluating or critiquing designs. Here goes: 1) Aesthetic impressions, 2) White space used appropriately, 3) Hierarchy of elements, 4) Rhythm & Balance, 5) Colour & Constrast, 6) Size of elements, 7) Alignment, 8) Proximity & Grouping, 9) Modularity/Style, 10) Usability, 11) Consistency, 12) Responsiveness on mobile & tablet, 13) Accessibility.

Week 5: Designing for Multiple Devices

Before designing for different device screen sizes, do look into the analytics of the site or review types of devices frequently used for what you are designing for.

Then work on fixing elements to be used across devices (e.g. navigation, hero image, list display, gallery, CTA buttons, footer, etc).  Create app skeleton/wireframes, ensure navigation is available, segment information, check for native components available to be utilised on devices (e.g. camera, mic, GPS). Touch targets should be between 42 - 72px, but 60px is the standard size recommended.

When wireframing, focus on:

1) Hierarchy of information and functions: what interactive element is prioritised and how the elements work.

2) Range of features and functions: what are the various content and functions available, and what do they do or how they work.

3) Rules of display: how different information is displayed in different states (e.g. logged in vs out, selected vs not selected, completed vs in progress)

4) Scenario-based interface display change: if option 1 selected, show this; if option 2 selected, show that.

Week 6: Images, Icons, and Logos

Types of imagery includes: Iconography, diagrams, data visualisation, user profiles, content imagery.  

When choosing photos, make sure it is cohesive.  Consider if it is to be used as foreground or background. If text were to be placed on image, consider using contrasting image colour to text colour, or use boxed text on image, or add gradient to part of image to pop the text, add half transparent rectangle over the image, or do a field blur to enable legibility of the text on it.

When designing icon (although there plenty of free ones to download and use), make sure you define a grid (preferably square), add padding, adjust the placement and density of the icon. Also, remember to name files and folders for your icons.

If you need images or icons to be responsive to device screen sizes, try resizing or stacking vital content, and try progressive disclosure or carousel display for non-vital ones.

40 x 40 is a recommended frame size for icons or logos. Use guide lines to create paddings. Recommended line width for mobile is 4px.

Week 7: Colour & Typography

Knowing and understanding the terminologies used in the field of colours and typography was a good knowledge to pick up in this course.  Although this may be easily learned by googling or talking to a designer, the deliberateness of a curriculum-based education helps introduces the necessary vocabulary for the field of knowledge one is pursuing.

Hue = Colour (ROY.G.BIV)

Value/Luminosity = Relative lightness or darkness

Saturation = how subtle of vibrant the grey tones of the colour is.

Opacity = Transparency of the colour against a background

UI design colour tip: 60-30-10 rules as a starting point. 60% of the interface is a background hue, 30% the primary/brand colour, 10% a secondary colour palette.

When designing, it is helpful to have a style tile to guide your decisions. Style tile includes elements such as your colour palette (hues).  Your palette should contain at least 3 hues: neutral, primary, and secondary colour.  You can then use HSL (Hue, Saturation, Luminosity) to obtain a range of colour palettes to work with.  For the same hue, try creating 9 or 10 values, so you can then mix and match the colour contrasts to different UI states (e.g. inactive state, hover state, active state).

UI design typography tip: Choose a font that works well across different sizes and weights (thin, normal, semibold, bold, etc). Choose one with large x-height (the height of the lowercase against the uppercase letters in the font).  Choose a font with easily distinguisable letterforms (e.g. letter "o" vs number "0", letter "i" vs number "1").

Week 8: Design Challenge

This week was given to enable one to summarise and reapply learnings from week 1 to 7.

TL; DR: 3 star rating

Generally, it is a good foundation for learning Figma to practise some of the principles taught.  The course highlighted more UI than UX knowledge for me. I mainly practised the software navigations and the principles, second.  The mentorship was useful to dig deeper into the why's or how's of the field.  However, 8 weeks ain't gonna be enough to even scratch the surface of the design field and industry.  I guess that's why the enrolment into the UX Academy course comes next.

Unfortunately, I went in with expectations for more UX than UI knowledge.  If only there's a diagnosis test of sort to help you decide which course of their to enroll in to ensure optimum outcomes and benefits of your learning.