Week 3 Lecture: Design Patterns

This week’s lecture is an introduction to the idea of design patterns for screens. This lecture addresses patterns used for mobile, desktop and laptop devices with a focus on desktop.

Firstly are a few notes:

  • Mobile design issues are very different to desktop design issues.
  • It is easier to design a mobile screen first and then have it adapter to larger screens.
  • Responsive design has resulted in similar looking and functioning websites.

CA quote.pngNext is a mention of an architect called Christopher Alexander. A book of his called “A Pattern Language” shows effective patterns for constructing buildings so that they are safe and practical yet attractive. A quote from his book (image above) is mentioned to demonstrate that patterns are just that.

The rest of the lecture goes over common design patterns that are important to keep in mind.

  1. Hamburger Buttons – The are three parallel horizontal lines denoting a hidden menu of buttons.
  2. Account Registration Forms – These are what need to be filled out to sign up for a website. An important note here is to divide registration into smaller sections to make the process flow easier.
  3. Long Scroll – This refers to sites that opt for a large scroll instead of pages. This technique helps sites which lure users through storytelling. Breaking a scroll into sections can also help mimic a multipage site.
  4. Card layouts – This is the practice of containing content into small rectangles. Cards commonly include: a title, a username, various icons, a picture and possibly a brief text description.
  5. Hero Images – These are large high definition images that take up a lot of the initial view. They are effective at quickly catching user attention. Cards commonly follow hero images in layouts that use them.
  6. Animation – These add to the storytelling experience of a site making it more entertaining and attractive. These are divided into two categories being: high impact large scale animation like pop up notifications and small scale animation like hover tools. There are many types of animation including:
    • loading animations
    • navigation and menus (nonscrolling) animation
    • hover animations
    • gallery and slideshow animations
    • motion animations
    • scrolling background animations/video
  7. Material design – This is a design style developed by Google that uses shadow effects, movement and depth to create a more realistic design. The design is minimalist and clean to focus on the user experience
  8. Responsive Design – This is a site design method making a site easy to restructure to fit any screen efficiently. This is an increasingly popular practice because of the rise of mobile devices.
  9. Flat design – This practice has been around for a while and is compatible with material, responsive and minimalist web design.

The Important Point

What I felt was the most important point was the last one. This was to not follow trends just because they are cool. This is because such trends:

  • Can detract individuality from a product or site
  • May not be effectively compatible with a product or site as cool factor alone may not be able to carry it.


Christopher Alexander quote from A Pattern Language [image] Retrieved 12th March 2017 from https://vimeo.com/159663778



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