Annabel Crawford's Blog

Summary

• Patterns are conventions that are developed in terms of user interface and page composition.
• Design patterns are not just for style and visuals.
• The side effects of responsive designs are that designs look similar, this is due to the way we have consumed the web, which has resulted in alot of common user interface designs and patterns.
• Design patterns have matured and therefore, there is little innovation when it comes to the user interface patterns or ui patterns.

Common Design Patterns

• Hamburger Menu – The hamburger button’s a symbol that contains 3 parallel horizontal lines, often displayed at the top right or left of the user interface. The selection of the hamburger button results in a menu of pages or options and is used to save space.
• Account Registration – Is either as a form to fill out or a button that will allow you to user social accounts to sign up. Account registrations make using the interface more manageable, as they are presented with small steps rather than a long list of steps all at once.
• Long Scroll – The techniques works well for sites that want to lure users through storytelling. It can mimic multi page sites by breaking the scroll into clear sections and it simplifies navigation.
• Card layouts – This layout presents the information as content containers and each card is a unified concept. They are easily rearranged and provide information such as a title, unsername, picture or a brief description.
• Hero Images – It is a common layout is the fastest way to grab the users attention. It is often positioned at the top of a user interface.
• Animation – Used to enhance a sites storytelling making the experience more interactive and entertaining:
  • Large scale animations – used as an interactive tool and has more impact on users e.g. pop up notifications
  • Small scale animations – Examples include spinners, hover tools and loading bars and don’t require any user input.
  • Loading animations – used to entertain users during a tedious experience
  • Navigation and menus (non-scrolling) animation – Used to save screen space and reveals a menu
  • Hover animations – Give a more intuitive feel to the site as users mouse over content. Helps to give instant visual feedback if a user is unsure of a feature’s function.
  • Galleries and Slideshow Animations – Used to showcase mulitple images
  • Motion animation – Helps to draw users attention and is userful for visual hierarchy. Helps to add interest and intrigue to forms, such as call to actions and menu items.
  • Scrolling background animations/videos – Adds visiblity to a site and gives further control to the user.
  • Material design – Utilises movement, shadow and depth to create more realistic designs. Creates clean design that focuses on user experience
• Responsive design
• Flat design – Is focused on a minimalist use of simple elements, typography and flat colours and less stylistic techniques, such as drop shadows.

Reflection

I think the most important aspect of this lecture pod was learning about all the different types of design patterns and how they can effectively improve a users interactive experience. With information on a varity of different design patterns it gives me inspiration to utilise these techniques and designs in future projects to improve its interactive experience, as there are some design patterns that I haven’t used before, especially card layouts, since I haven’t experimented or utilised them before. Card layouts could give a unified layout and help order content nicely. It is also useful to know that they each solve different problems, and some might not be appropriate for some solutions.