Design Patterns – Week 3

  • Design for mobile first; it’s easier adapting a smaller design for a bigger screen than the other way around
  • Patterns solve a design problem (but they’re not the only solution)

Patterns:

1. The Hamburger Menu

  • Easily recognisable
  • Often displayed top left or right of user interface
  • Reveals menu when clicked

2. Account Registration

3. Long Scroll

4. Card Layouts

  • Include information such as: title, username, text, image
  • Miniature condensed webpages

5. Hero Images

6. Animation

  • Enhance storytelling
  • Examples: loading animations, navigation and menus (non scrolling) animation, hover animations, gallery and slideshow animations, motion animations, scrolling background animations/videos

7. Material Design

  • Make designs feel more realistic to the user

8. Responsive Design

9. Flat Design

Sarah Waterson. (2019, February 24). Week 3: Design Patterns for screen [Video File]. Retrieved from https://vimeo.com/319375751
Sarah Waterson. (2019, February 24). Week 3: Design Patterns for screen [Video File]. Retrieved from https://vimeo.com/319375751
Sarah Waterson. (2019, February 24). Week 3: Design Patterns for screen [Video File]. Retrieved from https://vimeo.com/319375751
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s