Before we explored the patterns and trends of screen design we were required to differentiate between mobile, tablet, laptop, and desktop screens.
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
- 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.
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.
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.
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.
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 are excellent at capturing the users attention by luring them in with high resolution images.
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 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
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.
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
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.
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
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 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.
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 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.