In this weeks lecture it focuses on introducing, screen design basics and design patterns for screen, which is an important component to consider with designing interactive.

By patterns, it refers to the development of conventions of user interface and in terms of page composition. We need to distinguish what is the difference between, mobile, tablet, laptop and desktop screens.

What Device to Use?.png

Image: Waterson, S. (2016). What Device to Use? [Screenshot]. Retrieved

Architect Christopher Alexander states in his book that interactive design goes beyond style and more than just visual repetition. His book goes through aspects that are in relation to design patterns for screen.

In his book he states his hypothesis of:

Design Patterns.png

Image: Waterson, S. (2016). Design Patterns [Screenshot]. Retrieved

Christopher Alexander Hypothesis.png

Image: Waterson, S. (2016). Christopher Alexander Hypothesis [Screenshot].
Retrieved from

Christopher Alexander to sum up his quote, is referring to the idea of patterns are just patterns they may solve a design problem, but it really depends on what the actual problem is.

The lecture then continued towards demonstrating examples of screen designs that are frequently used in interactive design.

Example of recent design patterns for screen

1. The Hamburger Menu

Hamburger Menu.png

Image: Waterson, S. (2016). Hamburger Menu [Screenshot]. Retrieved

Designed by Norm Cox as part of a user interface for Xerox star, “The Hamburger” button is a symbol consisting of 3 parallel horizontal lines displayed and is used as a button in graphical design interface. Although some criticise this pattern use, the wide-spread makes it easy to recognise for users.

It is often displayed in top, left or right of user interface. It is best described as a combination of a drawn menu and the reveal hide button. Today icon is used to save space on the screen and to note the hidden menu.

2. Account Registration

Account Registration.png

Image: Waterson, S. (2016). Account Registration [Screenshot]. Retrieved

Account registration patterns are found in registration sites whether it will be forms to fill out or a button that will allow you to use a social site to sign up.

Its multistep wizards are also effective since they chunk out the required fields reduces friction and encourages user to flow through the process.

3. Long Scroll

Long Scroll.png

Image: Waterson, S. (2016). Long Scroll [Screenshot]. Retrieved

Long scroll patterns are commonly found in screen such as apple watch. It is important to place elements above the fold. This technique is effective for sites or applications that want to attract users through story telling.

4. Card Layouts

Card Layouts.png

Image: Waterson, S. (2016). Card Layouts [Screenshot]. Retrieved

Card layouts were first pioneered by Pinterest, which demonstrates a vast number of cards on the screen. These cards represent information in bite size and thus perfect for scanning.

Each card represents one unified concept. The rectangular shape makes it easier to divide each spread point on different devices. Information such as title, username, picture and various icons and text are located in the cards.

5. Hero Images

Hero Images.png

Image: Waterson, S. (2016). Hero Images [Screenshot]. Retrieved

High definition hero Images are one of the fastest ways of getting a users attention. Due to the advances in bandwidth and compress codex, users do not need to suffer from slow load times. Common layout is a hero image above the scroll, followed by a zigzag section or a card spaced arrangement.

6. Animation


Image: Waterson, S. (2016). Animation [Screenshot]. Retrieved

Animation is often used to enhance storytelling, making the site more interactive and entertaining. There are two forms of animation:

  • Life Scale Animation = used primarily as interaction tool and have more of an impact on users such as parallax scrolling and pop up notifications.
  • Small Scale Animation = include spinners, hover tools and loading dials which don’t require any user input.

7. Material Design

Material Design.png

Image: Waterson, S. (2016). Material Design [Screenshot]. Retrieved

Material Design uses shadow effects, as well as concepts of movement and depth in order to create designs that are more realistic to the user.

The goal of material design is to create a clean design layout that focuses on the users experiences, examples of this are demonstrated in the Apple IOS.

8. Responsive Design

Responsive Design.png

Image: Waterson, S. (2016). Responsive Design [Screenshot]. Retrieved

Responsive design is one of the most common forms of screen patterns used throughout interactive design. One of the side effects of responsive design is that majority of sites look similar such as word press sites and booming theme market is rising.

Having common user interface patterns are the result of how we consume the web. Design patterns have matured and as such there is little innovation when it comes to user interface patterns e.g. checkout will still be checkout.

9. Flat Design

Flat Design.png

Image: Waterson, S. (2016). Flat Design [Screenshot]. Retrieved

Flat design is a pattern that is basic and compatible with other screen pattern design such as responsive, minimalist and material design.

“ I think the most important aspect of the lecture would be the different types of screen designs that are available to use. That each designer should distinguish which best’s suites their interactive design based on purpose and meaning. Choosing the right design pattern is essential and therefore can be one of the key factors that either allows users to be attracted to the interactive design or be turned off. Therefore this a key process which designers need to complete an analysis on.”

Hence it is an essential process for designers when implementing screen pattern towards interactive designs.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your 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