Week 3: Design Patterns

Week 3: Design Patterns

  • screen design basics & design patterns for screen
  • user interaction and page composition – differentiation between mobile, tablet, laptop and desktop screens

“Mobile First”

  • “mobile first” is new buzz word in the screen design sector
  • designing for mobile first is a more effective design approach
  • process begins for smaller screens then adapted to larger screens
  • movement forces you to prioritise information, and to alter mental structure which is accustomed to larger screens

UI Pattern Proliferation

  • many similar UI designs
  • example: WordPress and their theme sites
  • common UI design patterns are easy to navigate and use
  • design patterns have matured and there is also no real reason to reinvent UI patterns and little innovation for UI patterns.

9 popular design patterns/trends:

  • Hamburger Button (menu)
  • On scrolling
  • Account registration
  • Card layouts
  • Hero Images
  • Scrolling and background animation
  • Material design
  • Flat design

Hamburger button

Screen Shot 2017-03-12 at 22.09.00.png
Image retrieved from https://vimeo.com/159663778
Screen Shot 2017-03-12 at 22.12.04.pngImage retrieved from https://vimeo.com/159663778


Design Patterns represent excellent practice, but trends should not always be followed. Design patterns represent popular techniques, but make sure it’s suitable. For instance, a ‘single page infinite scroll’ concept may be not the best use for an e-commerce website, as it is typically used for a less complicated layout.


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