Week 7: UI Visual Design Patterns

Week 7: UI Visual Design Patterns

Screen Shot 2017-04-11 at 4.20.17 pm





Image retrieved from https://vimeo.com/161435877

UX (User Experience):


  • User stories
  • User Research
  • Usability Testing

UI (User Interface):

  • Layout
  • Visual Design
  • Branding

Common Navigation Patterns:

  • Tabs: navigation tabs, module tabs
  • Menu: Horizontal and Vertical dropdown menu, Accordion Menu
  • Hierarchy: Shortcut dropdown, home link, breadcrumbs
  • Content: carousel, event calendar, article list


  • They are an example of “skeuomorphism”, which is the design concept of making items represented and resembled by their real world counterparts.
  • Skeuomorphism is used in many design fields, including user interface, web design, architecture, ceramics and interior design.
  • When will you use tabs? When your content needs to be separated in sections and using a flat navigation structure, that gives a clear indication of current location.

Drop Down Menu:

  • Used when the user needs to navigate amongst sections of a website, but space for navigation is limited.
  • They save space by organising and concealing information.
  • However, they can often be difficult to use.
  • You will use a dropdown menu when there are between 2-9 sections of content that need a hierarchical navigation structure.

Drawer Menus:

  • Main benefit of these is space saving, and quick access to all key menu items at once.

Search Bar with Dropdown:

  • Adding a shortcut to the most frequently used functionality, the path can be lessened, and the confusion can be decreased.
  • You will need these as a shortcut to an otherwise hierarchical structure.
  • You will use it when there are specific functionality or pages that are more frequently used than other parts of the website.

Big Footer:

  • Use these when the user needs a mechanism that will enable them to quickly access specific sections of a site or application, and bypass the navigational structure set up for the user at the top.
  • Use this as a shortcut to an otherwise hierarchical structure.


  • Site’s logo is always link to the site’s starting location, normally the front page of a site.
  • Site’s logo or link to “Home” must be on every single page of your site.


  • Inform users of their location in relation to the entire site hierarchy.
  • The site is easier to understand when it is laid out in a breadcrumb, than if it is put into a menu.
  • Breadcrumbs take up minimal space, and even though not all users, use them, they still hint at the structure of the website and the current location of the page in question.
  • The term, ‘breadcrumb’, is quite deceptive as it implies the history of how the user got to the page. A more correct term will be to describe the current locations place in the hierarchy of the website.
  • You will use these when the structure of the website follows a strict hierarchical structure, of similar format and content.


  • You will use this when the user needs to browse through a set of items and possibly select one of them.
  • Use it when there is a large set of items to show, but you want to let the user concentrate his/her attention only on a set few items at a time.
  • You would use this when you will like to tease the user by letting him/her know that there are more items available than what is currently shown.
  • Use it when there is not enough space to show all the items at once.
  • You will use it when you have highly visual items to display such as movie posters, album covers, products, designs etc.
  • You will not use it when the items are not visual, such as links to text articles or PDF documents.


Good UI design should strive for a balance between aesthetics and effortless interactivity.
Your UX (User Experience) needs to be as efficient as possible. This is determined by the quality of the UI. It is important to include a homepage link on every page of a site.  The link may be embedded within a logo or simply in the text ‘Home’.

Week 3: Design Patterns

Week 3: Design Patterns

  • screen design basics & design patterns for screen
  • user interaction and page composition – differentiation between mobile, tablet, laptop and desktop screens

“Mobile First”

  • “mobile first” is new buzz word in the screen design sector
  • designing for mobile first is a more effective design approach
  • process begins for smaller screens then adapted to larger screens
  • movement forces you to prioritise information, and to alter mental structure which is accustomed to larger screens

UI Pattern Proliferation

  • many similar UI designs
  • example: WordPress and their theme sites
  • common UI design patterns are easy to navigate and use
  • design patterns have matured and there is also no real reason to reinvent UI patterns and little innovation for UI patterns.

9 popular design patterns/trends:

  • Hamburger Button (menu)
  • On scrolling
  • Account registration
  • Card layouts
  • Hero Images
  • Scrolling and background animation
  • Material design
  • Flat design

Hamburger button

Screen Shot 2017-03-12 at 22.09.00.png
Image retrieved from https://vimeo.com/159663778
Screen Shot 2017-03-12 at 22.12.04.pngImage retrieved from https://vimeo.com/159663778


Design Patterns represent excellent practice, but trends should not always be followed. Design patterns represent popular techniques, but make sure it’s suitable. For instance, a ‘single page infinite scroll’ concept may be not the best use for an e-commerce website, as it is typically used for a less complicated layout.