Week 3: Design Patterns


There is a current movement called ‘mobile first’, which simply means designing the smaller screen first (such as a mobile phone) rather than adapting a large screen to a small one. The process across the devices would begin with mobile phone, through to an iPad/tablets, laptop and desktop.

The use of mobile first forces us to prioritise and alter the mental structure of the site. Meaning that as we progress through each device we can change the interface and experience to suit the screen and device use.

Patterns are not the only way to solve a problem, you must choose what is best to solve a problem and deliver the best result. Examples of web design trends and patterns are:

  1. The Hamburger Button:
    Called the hamburger button because it closely resembles a generic hamburger, this icon is the three horizontal lines used for a menu/navigation. It is conservative of space and is best used for mobile devices or smaller screens. It is a combination of the drawer menu and reveal-hide patterns.
  2. Account Registration:
    Smaller steps that are broken down across multiple pages are more effective than all the steps on one page/larger steps. This is because the user feels that smaller steps over multiple pages is an easier, faster and manageable process.
  3. Long Scroll:
    Works well for a storytelling process and breaking the pages of the site into sections which are apart of the long scroll – again a commonly used feature and mostly used on mobile devices.
  4. Card Layouts:
    The card layout is great for scanning and delivering information in small chunks. The shapes of the cards enable a dynamic and flexible layout and arrangement system.
  5. Material Design:
    Focused on user experience, it is a minimalistic design approach, similar to that of Flat Design. It uses shadow and concepts of depth to give a realistic look.

Others include: Flat Design, Responsive Design, Hero Images, Animation (multiple sub-categories), and Background Animation and Video.


Although the trends are great, you don’t have to or need to follow them. It is vital that you always consider to design what’s best for your audience and market. Consider the user experience and interface. Click here to read an article about the Best 10 Web Design Trends of 2016.

Screen Shot 2017-03-13 at 11.34.24 am


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