UI Visual Design

ux vs uiThe final lecture of this course is UI Visual Design Patterns, it focuses on navigation patterns.

So, what does this mean? It is how the site looks, feels and what exactly it is that the user is doing or using on the site. Things that are included are the various types of navigation patters. Which are Tabs, Dropdown Menus, Drawer Menus, Search Bar with Dropdown, Big Footer, Home, breadcrumbs. Below is a screenshot from the lecture that breaks down some each type of navigation menu.

nav patterns.JPG

so when does someone know when to use what menu navigation for what they are doing? It is rather simple once you learn what each ones’ purpose is. Here is a break down for each different type of menu navigation that has been listed.

  • Tab: for splitting information into sections when there is a lot of information (between 2 to 9 different sections) and the names for each section is short named.
  • Dropdown menus: is used for when a user needs to navigate through sections of a website, but there is a limitation in space (so ideally used with mobile devices). It is used when there are 2 to 9 different sections and all the sections are placed within hierarchy order.
  • Drawer menus: used for space saving and uses icons as menu navigations which open to show what the name of the navigation icon is (think hamburger menu).
  • Search Bar with Dropdown: adds a shortcut that allows the user to search for what it is exactly they want to find. It is based on a hierarchy order and is a shortcut to jump between sections.
  • Big Footer: the footer at the bottom of a page that shortcuts to different sections of the site.
  • Home: the sites logo or home button goes to the homepage or a safe space.
  • Breadcrumbs: used when a user needs to know their history, location and relation to a site displaying the track the user has gone to get to where they are. An example of this is any news site when the user goes through the site.

There are other types of navigation patterns. this has been covered within previous lectures and posts which is how the user goes through a site and showcases features, adds items and encourages interactivity with the user. The screenshot below. from the lecture, shows an example of content navigation pattern called a Carousel.


There are also tags (typically blue texts) that float on a page and are various sizes which use keywords that jump to different sections of a page.

This wraps up the lectures for this course as there is no more lectures and sadly this means that the weekly lecture posts have to stop.

UI Visual Design

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