Design patterns are a starting point for all user interaction planning. As Christopher Alexander, author of ‘A Pattern Language’ mentions, “patterns are hypotheses… free to evolve under the impact of new experiences and observation”. This implies that any design patterns must be altered to suit the aims of the project and the needs of the user. They provide a basic platform for which the designer is responsible to build upon. A new movement, mobile first, suggests that designing for a smaller device first means the adaption to a larger desktop would be easier. The lecture continues to review the most popular design patterns for desktop screens, which are as follows:

UI Pattern Proliferation

• A lot of a sites are very similar in user interface design patterns
• There’s no point in reinventing something that doesn’t need to change

Hamburger

• The 3 bar menu      
  • Top left or right
  • A drop down
  • Saves space on screen – especially on smaller screens
  • Main content in hidden

Hamburger Menu Icon [Image] Retrieved 2019, May 15 from https://uxplanet.org/the-ultimate-guide-to-the-hamburger-menu-and-its-alternatives-e2da8dc7f1db

Account Registration

• Form to fill out or a button to use a social account to sign up
• Encourage users to complete one step at a time not a huge form on one page
• Typeform.com

Long Scroll

• Think Facebook/Instagram
• Storytelling
• Can still access multi page sites

Card Layouts

• Pioneered by Pinterest
• Each card represents each different section of content
• A card can be any size – will have a title, username, picture,
  • Condensed webpage

Hero Images

• The increased internet speeds allow for large images to load faster
• Above the scroll followed by a card layout section

National Geographic. (2019). Documentary Agency. Retrieved from https://www.nationalgeographic.com/

Animation

• Must be added strategically
• Can really enhance the user experience
• Small scale – spinners, loading bars,

Loading animations

• Popular for flat or minimal or portfolio design
• Should not use sound

Loading Animation [Image] Retrieved 2019, May 15 from https://codemyui.com/git-kraken-inspired-rotate-loading-animation/

Navigation and menus (non scrolling animations)

• Space saver

Hover animations

• Instant visual feedback
• Don’t work for mobile obviously

Gallery and slideshow animations

Motion animation

• Visual hierarchy

Scrolling and background animation

• Should be used in moderation

Material Design

• Appears more realistic
• Shadows, minimalistic look
• Popular
• Creates depth
• Flat design – apple IOS
• Popular for app design

Responsive Design

• Works well with cards

Flat Design

• Compatible with other design patterns

Alexander, C. (1977). A pattern language. Oxford, England: Oxford University Press.
Waterson, S. (2019). GDIDMPOD03a [Online Lecture]. Retrieved from  https://vimeo.com/319375751