Lecture Notes

Design Patterns

  • ‘Mobile first’ is a new movement for the design process, starting small and growing out.
  • Design patterns go beyond style and visual repetition; they are similar and reusable solutions that have a working function in interface and software design. (Alexander, C, 1997)
  • One of the side effects of responsive design has made a lot of sites look similar; the rise of wordpress and the booming theme market also causes this.
  • Design patterns have matured, and as such, there’s little in the way of innovation in UI patterns.
  • Some common patterns:
    • The hamburger menu; three horizontal parallel lines to show a drop down menu, today it’s used to save space.
    • Account registration; to sign up, users are more inclined to follow through the process if it has a limited number of steps.
    • Long scroll; you can mimic page separation by segmenting the long scroll with blocks, and has a storytelling feel.
    • Card layouts; they are small unified concepts that are easy for users to scan, and easy to rearrange for design purposes.
    • Hero images; one of the fastest ways to gather attention do to humans being visually-focused.
    • Animation; enhances a site’s storytelling, loading and hover animations are an example and tend to be minimalist.
    • Material design; is uses shadow effects for depth, movement and shadow which are appealing to users.
    • Responsive design; tends to be minimalistic as to lessen the amount of elements in the design.
    • Flat design

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