Design Patterns

From mobile, tablet to desktop there are many different design patterns that can be used, whilst any could be used there are some that are more suitable than others.

Starting from mobile:

  • Designing from a small screen means you are forced to prioritize, choose and alter our mental structure.


  • The hamburger icon is a commonly used pattern to toggle between a menu and the main content area, kind of like a digital drawer.


Account Registration

  • Designed for simplicity and easy to follow steps.


Long Scroll

  • One page designs
  • Functions well on apple watch because there is limited space on the screen so scrolling would be the effective way for gathering/ presenting information.
  • Good for luring people into the story of the website.

Card Layouts

  • Pinterest
  • Information in bite size chunks, perfect for scanning
  • Miniature condensed web pages


Hero Image

  • High Definition hero images grab the reader instantly


  • Interactive
  • Entertaining
  • Loading animations help to entertain people while going through the tedious act of waiting.
  • Hover effects help give off an intuitive feel to navigating a website.
  • Motion animations can help to add interest.

Responsive Web Design

  • Works well with cards
  • Easy to restructure
  • Flexible

When choosing a design pattern be sure to think about whether the pattern is suited to your own project. Don’t be swayed towards one because it was well executed in another website, what is the context of it? Will it work well? What is the purpose?


Leave a Reply

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

You are commenting using your 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