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.
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:
Image: Waterson, S. (2016). Design Patterns [Screenshot]. Retrieved
Image: Waterson, S. (2016). Christopher Alexander Hypothesis [Screenshot].
Retrieved from https://vimeo.com/159663778
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
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
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
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
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
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.
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
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
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
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.