Week 7: UI Visual Design Patterns


Don’t mistake UI with UX, UI is User Interface and it’s target is to present the user with the right tools to accomplish their goal(s).

Values of a User Experience (UX):

  • Look: Credibility, Trust and Harmony
  • Feel: “Joy of Use”, Interaction and Reaction
  • Usability: Functionality, Individuality and Predictability

Screen Shot 2017-04-12 at 1.02.37 pm

Common Navigation Patterns

Navigation tabs and Module tabs

A tab is a skeuomorphism; the design concept of making items represent/resemble their real world counterpart. Tabs are best used for organising and categorising large sums of information, often when there is 2 to 9 sections of data.

Dropdown Menu’s
Navigate amongst sections of the site, used for its size and space savviness.

Drawer Menu’s / Hamburger Button
Offers space saving and quick access to key navigation features and pages. Most commonly used in Apps or on websites with little content, such as a website for a band.

Search Bar with Dropdown
Shortcut within the website or app, identifies different hierarchal aspects of the site and and the shortcut offers users a quicker way to navigate.

Big Footer
For quick access to other functions and areas of the site that may not be accessible on the top/main navigation. It also offers external links to options like social media. These shortcuts are also displayed differently to that of the top navigation.

Home link / Home button
It’s become common that the logo displayed on the site is the home link/button. A home link/button should be on every page of the site.

When a user needs to know their location in the website. Breadcrumbs use minimal space and display the hierarchy of the site rather than the history of how the user arrived on the page.
Use when the structure of the site is a made of multiple sections and subsections, or to identify the current location in a process. e.g. a subscription or online payment system.

When the user needs to browse through a selection, often of very visual based nature such as images and videos. It can also be used to save space and tease other options, or depict a process or story as a hierarchy.


Understanding the connection between the user and the experience, and using the correct visual design patterns to balance aesthetics and effortless interaction.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s