Lecture Pod Three

Summary Points:

  • Patterns in Design.
  • Patterns are present in screen design and can solve different types of problems.
  • Patterns should not be the only way we work through solutions.
  • Patterns must always be used appropriately.


Being able to recognise and understand the different patterns for on screen design is important for identify what might be useful for our own design, and what might be detrimental. In order to understand what may be appropriate, it is important to understand what they are. In this week lecture, eight different on screen patterns were explained in the hopes that we will understand when and where we should use them.

  • The Hamburger Button: This is a small button that wits in the upper areas of the screen. It has become the universal sign for a hidden menu. It is popular for saving space and is best utilised on a full image background, or for a neater minimalist display.
  • Account Registration: This is a multi step form that siphons critical information and allows the user to flow through processes, allowing them to engage more with the steps.
  • The Long Scroll: This works best for sites that rely heavily on story telling to engage with users. It allows for simpler navigation that does not detract from the main screen.
  • Card Layouts: This pattern allows information to be presented in smaller segments. It is best for scanning and makes displaying information easier across different screens. Information that is often displayed on card layouts includes a title, a username/author, a picture, and icons.
  • Animation: This is used to enhance a site’s story telling ability. It consists of six main types.
    • Loading animation: these are used to occupy the users attention during loading times.
    • Navigation Menus: These save space and uses animation to smoothly transition between main screens and hidden menus.
    • Hover animations: These allow for a more intuitive, but are not suitable for mobile.
    • Galleries: These are effective for displaying multiple pictures, or for presenting a portfolio.
    • Motion Navigation: This engages more with the user and is helpful for adding interest in the site.
    • Scrolling and Background Animation: This allows the user to have more control over the site. It is excellent for adding visibility and interest, but can also be distracting if over used.
  • Material Design: This uses a more realistic approach for displaying on screen information, utilising shadows and movement to create this look. It focuses more on user experience.
  • Responsive Design: This has increased in popularity due to the increased use of mobile devices. It is simple and cheap and focuses on keeping page sizes to a minimum to increase performance.
  • Flat Design: This practice has been around for a while and is compatible with the other patterns above. It is used to combine different patterns to better suit a site’s purpose.

All of these patterns are useful in their own ways, however it is important to for them to be used according with their purpose rather than for their popularity. A Pattern should be used based on its effectiveness and its benefit to the user.


Lecture: Sarah Waterson. (2017). GDIDM_POD03: 102265 Interactive Digital Media. [Video File] Retrieved 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

Powered by WordPress.com.

Up ↑

%d bloggers like this: