Week 3 lecture pod…

In week’s 3 lecture pod we were introduced to screen design basics and design patterns for the screen. The term pattern in screen design refers to the conventions that have been developed in terms of user interface and page composition.

Before we explored the patterns and trends of screen design we were required to differentiate between mobile, tablet, laptop, and desktop screens.

Screen Shot 2017-03-10 at 12.43.45 pm
Image: Waterson, S. (2016). Mobile first. [photo] Retrieved from https://vimeo.com/159663778
The graphic above displays that starting with the smaller screen is a more effective way when creating interactive screen designs as it allows us to

  • Prioritise
  • choose
  • alter our mental structure


Architect Christopher Alexander mentions in ‘A pattern of language’ that interactive design is more than just style and visual repetition, its similar and reusable solutions that have working functions often seen in interface and software design. Throughout Alexander’s book he further describes methods for constructing practical, safe and attractive designs.

The Lecture pod continues with examples of patterns in screen designs.

Hamburger Menu

Screen Shot 2017-03-10 at 1.24.08 pm

The ‘hamburger’ menu was designed by Norm Cox and is the most recognisable symbol among screen designs. The button is a symbol consisting of three parallel horizontal lines shown on screen and is used in graphical interfaces. It’s usually located on the top left or right side of the UI and functions as a drawn menu displaying more options for the user. Its used when the UI contains a fairly amount of graphic content as it assists in saving space.

Account Registration

Screen Shot 2017-03-10 at 2.09.12 pm.png
Image: Waterson, S. (2016).Account Registration. [photo] Retrieved from https://vimeo.com/159663778
Registration patterns are usually found when the user wants to join or sign up to a particular site. A form or fill out is required or have the option of using a social account to join. They encourage users to flow through the process without being confronted with a long list of steps, allowing it to feel manageable.

Long Scroll

This pattern lures the users into a storytelling experience. One example of long scroll used by a device is the ‘Apple Watch’. The ‘Apple Watch’ limits the users by making them keep the total number of pages as small as possible to simplify navigation. The total effectiveness of this interactive product is subjective.

Card Layouts

Screen Shot 2017-03-10 at 2.09.50 pm
Image: Waterson, S. (2016). Card Layouts. [photo] Retrieved from https://vimeo.com/159663778

Screen Shot 2017-03-10 at 2.10.09 pm
Image: Waterson, S. (2016). Card Layouts. [photo] Retrieved from https://vimeo.com/159663778
This screen pattern was developed by Pinterest. It provides information in chunks, however the user is not confronted or overwhelmed. This could be due to each card representing one unified concept. They are seen as concept containers, their shape makes them easy to arrange for different devices. They commonly display the title, username, picture and varies icons.

Hero Images

Screen Shot 2017-03-10 at 2.10.26 pm
Image: Waterson, S. (2016). Hero Images. [photo] Retrieved from https://vimeo.com/159663778
Hero images are excellent at capturing the users attention by luring them in with high resolution images.


Screen Shot 2017-03-10 at 2.10.26 pm
Image: Waterson, S. (2016). Animation. [photo] Retrieved from https://vimeo.com/159663778
The use of animation in a UI makes the users experience more interactive, storytelling, entertaining and enjoyable. However as interactive designers we have to consider the relevance and the sites personality before adding an animation whether it be a large scale or small scale animation.

Large scale animation is usually used as an interaction tool, they have more of an impact on the users.

Small scale animation are for example spinners, hover tools and loading bars, they don’t require any user input.

Loading Animation

Screen Shot 2017-03-10 at 2.13.42 pm
Image: Waterson, S. (2016). Loading animations. [photo] Retrieved from https://vimeo.com/159663778
Loading animations are used to entertain users, their described as a ‘tease’ experience. They are popular in flat design, minimal design and portfolio sites. They are a simple use of animation and require no sound. The loading animation should correlate with the sites personality and colour palette.

Navigation and menu (non scrolling) Animation

Screen Shot 2017-03-10 at 2.15.30 pm
Image: Waterson, S. (2016). Navigation and menu. [photo] Retrieved from https://vimeo.com/159663778
This animation has become popular due to saving space on the screen and allowing a smooth transition when clicking on the button. The draw out effect provides the user with more options and allows them to be in control of the content.

Hover Animation

Screen Shot 2017-03-10 at 2.17.41 pm
Image: Waterson, S. (2016). Hover animation. [photo] Retrieved from https://vimeo.com/159663778
This type of animation radiates an intuitive feel to a site. However keep in mind that hover animations are unable to function on tablet and mobile screens as mouses are not used with those devices.

Gallery and slideshows

Screen Shot 2017-03-10 at 2.21.52 pm
Image: Waterson, S. (2016). Gallery and slideshows. [photo] Retrieved from https://vimeo.com/159663778
This animation is an effective way of showcasing graphic content without overwhelming the users. It’s commonly used in photography sites, product advertising sites, and portfolios.

Motion Animation

Screen Shot 2017-03-10 at 2.22.05 pm
Image: Waterson, S. (2016). Motion animation. [photo] Retrieved from https://vimeo.com/159663778
We humans rely heavily on our sight and are instantly drawn to movement, so there’s no surprise that motion animation is an excellent use of capturing users attention. Applying this type of animation adds interest and should be used to further enhance the purpose of the site.

Scrolling and Background Animations/ Videos

Screen Shot 2017-03-10 at 2.23.15 pm
Image: Waterson, S. (2016). Scrolling and background animations/videos. [photo] Retrieved from https://vimeo.com/159663778
The effect of smooth scrolling relies on animation. Scrolling provides the user with a sense of control as they decide the pace of the animation as it progresses. Using background animations adds visibility and should be used in moderation as it can distract users from the content of the site.

Material Design

Screen Shot 2017-03-10 at 2.25.35 pm
Image: Waterson, S. (2016). Material design. [photo] Retrieved from https://vimeo.com/159663778
Material design uses shadowing effects and concepts of movement and depth in order to create designs that seem more realistic to the user. The overall goal is to produce clean designs that focuses on the users experience.

Responsive Design

Screen Shot 2017-03-10 at 2.28.04 pm
Image: Waterson, S. (2016). Responsive design. [photo] Retrieved from https://vimeo.com/159663778
Thanks to mobile usage responsive design is becoming more popular from users of the whole demographic. Its a simple and cheap way of building a fully functioning mobile friendly website. However the consequences of responsive layouts would be the minimalistic styles and similarities between designs, making it more difficult to achieve something unique and fresh for users.

Flat Design

Screen Shot 2017-03-10 at 2.29.58 pm
Image: Waterson, S. (2016). Flat design. [photo] Retrieved from https://vimeo.com/159663778
Flat designs are used with a combination of other screen designs. They are compatible with other trends such as minimalistic design, material design and responsive design.

Important aspect







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