Interactive Design, Lecture Notes

UI Design Patterns

UI design is not so much about how an interactive looks but rather focuses on implementing the correct tools in order for the user to successfully accomplish their goals. Because the fundamental principles are so simple, it is easy to forget the basics and stray away from UI design. A strong UI should reflect a balance of good aesthetics and an effortless interactivity which guides the user through their experience.

Screen Shot 2017-04-16 at 10.04.51 PM

Screenshot from Lecture Pod 7


Taking the personas and scenarios developed, the designer is able to understand what UI patterns are appropriate and how to integrate them within the navigation flow to ensure a positive user experience.

Some common UI design patterns include:

TABS – content navigation which has 2-9 sections that require a flat format


DROPDOWN MENU –to navigate amongst sections of a hierarchal website


DRAWER MENU – saves space and quick access to key items

SEARCH BAR WITH DROPDOWN MENU – shortcut to access a frequent functionality or specific page

BIG FOOTER – quick access to specific sections to a site

HOME – ‘safe’ page for the user to start their navigation

BREADCRUMBS – to indicate the current place of the hierarchal website


CAROUSEL – condenses a large show of items so it does not detract from the user’s focus


For further information, Design Patterns is a website which has a great overview of UI patterns.