Week Seven Lecture Notes – User Interface Visual Design Patterns

Interface Design is about the features that allow guidance and efficient usage of a website, as well as creating an impressionable layout and flow. A successful layout brings users back to use such product, with balance of design, and effortless interactivity.

Figure 1. Waterson, S. (2019). Week Seven: User Interface Visual Design Patterns [Screenshot of Podcast]. Retrieved April 11th, 2019, from https://vimeo.com/319376545.

When designing a layout for a website, you want all features and outcomes to result in a positive look and functionality. Its important to consider all aspects and function that will ensure a website or app will flow. User Interface and User Experience outlines exactly what interactive concepts will be put in place within your product.

Figure 2. Waterson, S. (2019). Week Seven: User Interface Visual Design Patterns [Screenshot of Podcast]. Retrieved April 11th, 2019, from https://vimeo.com/319376545.

Summary

User Interface design patterns are standard reference points. For example:

Figure 3. Waterson, S. (2019). Week Seven: User Interface Visual Design Patterns [Screenshot of Podcast]. Retrieved April 11th, 2019, from https://vimeo.com/319376545.
  • Tabs- Tabs are used in design to form structure and contain loads of information whilst saving room on the screen. The design idea came from actual tabs in a filing cabinet. The idea also represents skeuomorphism, which is the design concept of design objects representing real word counterparts. Tabs might also be used to when information needs separated into sections.
Figure 4. Waterson, S. (2019). Week Seven: User Interface Visual Design Patterns [Screenshot of Podcast]. Retrieved April 11th, 2019, from https://vimeo.com/319376545.
  • Dropdown Menu- Used when user needs to navigate amongst a large website. Dropdown menus conceal information and save space. Dropdown menus are used for hierarchical structure, especially with large amounts of content.
Figure 5. Waterson, S. (2019). Week Seven: User Interface Visual Design Patterns [Screenshot of Podcast]. Retrieved April 11th, 2019, from https://vimeo.com/319376545.
  • Drawer/Hamburger Menu- Used for quick access of content, space saving and easy navigation, especially on mobile devices.
Figure 6. Waterson, S. (2019). Week Seven: User Interface Visual Design Patterns [Screenshot of Podcast]. Retrieved April 11th, 2019, from https://vimeo.com/319376545.
  • Search Bar With Dropdown- Used for very simple and easy flow to find information and content on a website. Allows increased functionality to due to reduced amounts of effort and clicking on the website.
Figure 7. Waterson, S. (2019). Week Seven: User Interface Visual Design Patterns [Screenshot of Podcast]. Retrieved April 11th, 2019, from https://vimeo.com/319376545.
  • Big Footer- Quickly access specific features of the site. Used as a shortcut to another site with hierarchical structure, or to outline main functions, links or contacts.
Figure 8. Waterson, S. (2019). Week Seven: User Interface Visual Design Patterns [Screenshot of Podcast]. Retrieved April 11th, 2019, from https://vimeo.com/319376545.
  • Home- Especially used for a quick and easy navigation to always trust in when navigating a page, especially a very large and long website. A home button allows an easy passage to refresh, start over, or go back to main content. A safe start for users, especially for those who don’t use websites often. A homepage can be linked through a logo and should be available on each page of a site.
Figure 9. Waterson, S. (2019). Week Seven: User Interface Visual Design Patterns [Screenshot of Podcast]. Retrieved April 11th, 2019, from https://vimeo.com/319376545.
  • Breadcrumbs- Used for when a user needs to know their location on the website. When making an order, following instructions or reading through pages of information, breadcrumbs are a bookmark to know where you are, what you’re up to and where you’re going. Breadcrumbs allow greater understanding of the layout and functions of a website to users.
Figure 10. Waterson, S. (2019). Week Seven: User Interface Visual Design Patterns [Screenshot of Podcast]. Retrieved April 11th, 2019, from https://vimeo.com/319376545.
  • Carousel- Used to classify information, and allow the user to concentrate on one piece of content at a time. A carousel may be used to represent pictures and can also be used to entice a user by presenting a selection of content. A carousel may be used to save space and keep a simple structure and flow.
Figure 11. Waterson, S. (2019). Week Seven: User Interface Visual Design Patterns [Screenshot of Podcast]. Retrieved April 11th, 2019, from https://vimeo.com/319376545.
  • Tags- Allows relevant content to be linked to other content and allow easy access to browse and navigate through various pages.
Figure 12. Waterson, S. (2019). Week Seven: User Interface Visual Design Patterns [Screenshot of Podcast]. Retrieved April 11th, 2019, from https://vimeo.com/319376545.

Reflection

User interface visual design patterns plays a significant role in the aesthetic, feel, role and communication of a website or app. Ensuring the most appropriate patterns are used to compel your product design and concept are majorly important to how audiences are going to respond to a product. Design patterns determines the experience, participation, recommendation and projection of your overall ideas, research, experimentation and refining- to finally deliver your product as a whole.

Leave a comment