Week 3: Design Patterns

Summary

This week’s lecture pod focused on introducing screen design basics as well as design patterns for the screen.

Patterns are conventions that are developed in terms of user interface and page composition. It is essential to identify the differences in mobile, tablet, laptop and desktop screen design.

It is suggested that interactive designers initially start their designs for on small screen rather than a larger screen in order to prioritise, choose and alter our mental structure. This method is often referred to as a ‘mobile first’ approach. Therefore, starting by designing on a smaller screen is more effective rather than adapting a larger design to a smaller one.

Christopher Alexander outlines that design patters go beyond style and visual repetition and should be viewed as similar and reusable solutions that have a working function, often seen in interface and software design. He also depicts the fact that there are other methods of finding design solutions than patterns, and can sometimes be deceptive if used through indiscretion.

Examples of recent design patterns for screen: 

  1. The Hamburger Menu 

Screen Shot 2017-03-12 at 11.37.12 AMWaterson, S. (2016, February). GDIDMPOD03 [Video Podcast Recording]. Retrieved from https://vimeo.com/159663778

  • widespread and easily recognisable
  • consists of three parallel horizontal lines
  • used as a button in a graphical user interface
  • saves space on the screen

2. Account registration 

Screen Shot 2017-03-12 at 11.37.54 AMWaterson, S. (2016, February). GDIDMPOD03 [Video Podcast Recording]. Retrieved from https://vimeo.com/159663778

  • shows a form to fill out or a social account to sign up with 
  • reduced chunk of required fields to reduce friction and encourages users to flow through the process

3. Long Scroll

Screen Shot 2017-03-12 at 11.38.09 AMWaterson, S. (2016, February). GDIDMPOD03 [Video Podcast Recording]. Retrieved from https://vimeo.com/159663778

  • often utilised by sites that want to lure users through storytelling
  • can still mimic multipage sites by breaking the scroll into clear sections
  • it simplifies navigation
  • an example of this is the apple watch

4. Card Layouts 

Screen Shot 2017-03-12 at 11.38.27 AMWaterson, S. (2016, February). GDIDMPOD03 [Video Podcast Recording]. Retrieved from https://vimeo.com/159663778

  • presents information in bite sized chunks
  • suitable for scanning
  • is presented as miniature “content containers” or condensed web pages
  • their rectangular shape makes them easy to rearrange for different device screens

5. Hero Images 

Screen Shot 2017-03-12 at 11.39.02 AMWaterson, S. (2016, February). GDIDMPOD03 [Video Podcast Recording]. Retrieved from https://vimeo.com/159663778

  • high definition hero images are the fastest way to grab a user’s attention
  • compression codecs and advances in bandwidth have allowed users to no longer suffer from slow load times when processing these high definition images
  • a common layout when utilising this pattern includes a hero image above the scroll followed by either a zig-zagging section or a card spaced arrangement

6. Animation 

Screen Shot 2017-03-12 at 11.39.54 AM
Waterson, S. (2016, February). GDIDMPOD03 [Video Podcast Recording]. Retrieved from https://vimeo.com/159663778

  • enhances a sites storytelling
  • makes the experience more interactive and entertaining
  • it’s essential that the chosen animation adds to the site’s story elements and personality
  • large-scale animation: parralax scrolling, gallery and slideshow, pop-up notifications)
  • small-scale animation: spinners, hover tools, loading bars

Below are some common animations used within websites:

Waterson, S. (2016, February). GDIDMPOD03 [Video Podcast Recording]. Retrieved from https://vimeo.com/159663778

7. Material Design 

Screen Shot 2017-03-12 at 11.41.58 AMWaterson, S. (2016, February). GDIDMPOD03 [Video Podcast Recording]. Retrieved from https://vimeo.com/159663778

  • the goal is to create a clean design that will focus on the user experience
  • it has a lot in common with another growing trend; flat design (due to its minimalistic look)
  • uses depth and shadow in contrast to flat design

An example of material design:

– When google launched its new style language in 2015, they adapted shadow effects and the concepts of movement and depth in order to create designs that appear more realistic to the user.

8. Responsive Design 

Screen Shot 2017-03-12 at 11.42.18 AMWaterson, S. (2016, February). GDIDMPOD03 [Video Podcast Recording]. Retrieved from https://vimeo.com/159663778

  • recently popular due to the rise of mobile internet usage
  • is a relatively simple and cheap way for a business to build a fully functional, mobile friendly website
  • common issues with responsive design can include performance
  • tends to be minimalistic
  • most suitable to work with card layouts

9. Flat Design 

Screen Shot 2017-03-12 at 6.19.47 PM.pngWaterson, S. (2016, February). GDIDMPOD03 [Video Podcast Recording]. Retrieved from https://vimeo.com/159663778

  • is compatible with other trends such as minimalist design, responsive design and material design

Reflection 

This lecture has given me a different perspective and has expanded my knowledge on the different techniques of UI AND UX design.

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