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