UI Design Patterns

About ~ Common navigation patterns

UI visual design

It is often mistaken that the user interface is only about the aesthetics of the design, rather it is more a tool within it’s interactivity. The design space between the user and the product. Good UI should aim to balance aesthetics and interactivity.

Fig.1Screen Shot 2017-05-07 at 3.57.02 AMDesign patterns

Design patterns are reusable elements of structure and control that users recognise instantly. Commonly utilised in navigation systems.


Common navigation patterns

  • Navigation tabs
  • module tabs
  • Horizontal dropdowns
  • Vertical dropdowns
  • Accordian menu
  • Shortcut dropdown
  • Fat footer
  • Home link
  • Breadcrumbs
  • Carousel
  • Event calendar
  • Article list



Design patterns can be really helpful to the user experience, shortcutting methods, managing navigation, saving space and essentially reducing memory load through recognition (icons). Although, there is a realisation that utilising these patterns inappropriately could be detrimental. If its abstract in unfamiliarity, user effort to associate symbol and function could become frustrating.


References ~


Sarah, W. (2017). GDIDM_POD07: 102265 Interactive Digital Media User Interface Visual Design Patterns. [Lecture recording]. Retrieved 05/05/2017, from https://vimeo.com/161435877