Week 3 Design Patterns

Week 3

Lecture Notes

In the field of contemporary design, it is commonly considered best practise to design for mobile interfaces first, starting at the smallest design space and working up to the largest design space. Priority of design most commonly flows from mobile devices first, to tablet or phablet design second, and finally laptop or computer design.

Over the years internet design has boomed, and the need for design “patterns” or “staples” has emerged. Many websites have grown to look similar to each other, as they often use similar design patterns or elements that have become commonplace and understandable for the user. This is in part to the growth of the “theme market” field of design, and the acceptance and usage of generally accepted modes and elements of design for webpages and responsive content.

Some repeating patterns in design today include:

The Hamburger Menu (button) – saves space on the screen, and denotes a hidden menu

menu-alt-256.png
Figure 1. Hamburger Menu Icon (Miller, 2017)

Account Registration – neatly wraps up the process of the registering an account with a service or page, by using commonplace questions and prompts for information

gallery_register
Figure 2. Account Registration Form (Unknown)

Long Scroll – allows users to view a page in segments via long scrolling, essentially presenting the page all at once, yet not completely visible immediately.

trendytuesday_long-scrolling7
Figure 3. Long Scrolling Page (Wix. 2013)

Card Layouts – pioneered by Pinterest, this layout is a common design template used for webpage and responsive content design today.

9_silktricky_awwwards_cards
Figure 4. Card Layout Design (Unknown)

Animation – including:

  • large scale animations
  • small scale animations (such as loading animations)
  • navigation animations
  • hover animations
  • gallery and slideshow animations
  • scrolling
  • live wallpaper

Material Design – realistic looking design complete with shadows and texture

material
Figure 5. Material Design (Unknown)

Responsive Design – Design which targets responses according to users behaviour and environment, depending on the size of the screen which the user is viewing the design on, meaning content shifts and responds to various screen sizes.

Flat Design – Design which uses minimal elements that suggest 3-dimensional images, and depicts a “flat” image/design.

01-website-flat-design-examples
Figure 6. Flat Design (Unknown 2017)
Feature Image Unknown (2015) Card Design. Retrieved from https://www.webtimiser.de/webdesign-trends-2015/
Figure 1 Miller, T. (2017). Hamburger Menu Icon. Retrieved from https://www.iconfinder.com/icons/134216/hamburger_lines_menu_icon
Figure 2 Unknown. Account Registration Form. Retrieved from http://docs.orchardproject.net/en/latest/Documentation/Contributing-a-module-or-theme-to-the-gallery/
Figure 3 Wix (2013). Long Scrolling Page. Retrieved from https://au.pinterest.com/pin/498351515000033395/
Figure 4 Unknown (2015) Card Design. Retrieved from https://www.webtimiser.de/webdesign-trends-2015/
Figure 5 Unknown. Material Design.
Figure 6 Unknown (2017) Flat Design. Retrieved from http://oknation.nationtv.tv/blog/atimenews/2017/01/06/entry-2

 

Advertisements

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 )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s