User interface is all about layout, visual design and branding. Great UI should include aesthetics and effortless activity for the user, making their experience a memorable outcome. The user experience is what viewers interact with to make their experience for the site/app, when designing UX you need to think about positive outcomes for audiences and having to enjoy it. How the components of UI are used, affects the outcome of the user experience and how they feel when using it.

Common navigation patterns:

• Tabs
  • Navigation Tabs
  • Module tabs
• Menus
  • Horizontal Dropdown Menu
  • Vertical Dropdown Menu
  • Accordion Menu

• Jumping in hierarchy
  • Shortcut dropdown
  • Fat footer
  • Home link
  • Breadcrumbs
    
    
• Content
  • Carousel
  • Event calendar
  • Article list

Tabs is the most common navigation pattern used, they come from the inspiration of tabs in filing cabinets. Tabs are used when sectioning off content and be navigation to clearly state what section the user is in at the time (flat navigation structure). You would use the flat navigation structure when section titles are short and when you want the navigation to fill the page, when you want to reveal the highest available sections and even subsections.

Dropdown menus are used when the user navigates through a site when the space of the page is limited. These are used to save space and organising information into sections, more specifically subsections. You would usually use a drop down menu when there are 2-9 sections of content that need a hierarchical navigation structure. These allow quick access and space saving. Footers are also used when users are finding a specific section of the site or application, but also bypass the navigation at the top of the screen.