Crash Course: UI Design

Consistency and structure will make your users feel at home. Consistency is where the interface elements or the language is placed throughout the product.

As a designer, consider how you maintain consistency throughout your app. You can design your app using a consistent grid system such as the 8-point grid system or maintain a consistent colour scheme and navigational elements across screens.

There’s no need to reinvent the wheel if the wheel is doing a great job. 

For example:

• If you're unsure if an icon accurately represents a word, use the word in its place.
• Stick to common colour patterns, such as a shade of red to warn/alert a user, or green to mark something complete.
• When it comes to reading blocks of content, use the F-Shaped reading pattern. It means the most important content is placed at the top left corner.

Visual hierarchy is the arrangement of elements in a way that implies relative importance. It’s the designer’s effort to guide the order in which the eyes perceive the information presented. 

The way we perceive the importance of information is affected by several factors:

1. Typography
2. White space (negative space)
3. Colour

Good typography makes it easier to read. It consists of the following qualities:

• Legibility: Each letterform is distinguishable from one another.
• Readability: It is dependent on how you manipulate a particular typeface.
• Line length. If the line is too short, the reader's eye jumps from line to line, making it difficult to absorb information. The same is true if the line length is too long.
• Never centre large blocks of copy. It is much easier to read text that is left-aligned.

White space helps with readability and comprehension.

A study (LIN, 2004), found that good use of white space between paragraphs and in the left and right margin increases comprehension by almost 20%. 

A lot of people believe white space depends on 'taste' but we can use it intentionally to create a strong hierarchy.

Warm colours come towards you, while cool colours fade into the background. For example, a warm red can be used to bring the call-to-action forward, while a cooler blue can be used to recede the navigation further into the background.

The more colours there are, the less impact each individual colour will have.  

• At the most basic forms, UX design is what makes an interface useful.
• UI design is what makes an interface beautiful, including a blend of visual hierarchy and interface elements.

To help understand what makes a great interface, one should understand that the UI design is just one layer of the entire design process.

1. Strategy: Here, different research methods help to grasp the user's needs and how your product fits within a business context.
2. Scope: Defining functional specifications and content requirements.
3. Structure: Ideas should start to form a structure. Information architecture focuses on how the information is organised. User flows map out how users will move through the app.
4. The skeleton plane tries to achieve the structure of an interface design and information design.
5. Surface: This plane strives for a great sensory experience and visual design. This is where UI designers do the bulk of their work.