About – introduction to screen design basics and design patterns for screens.
There are 4 screens to consider when designing patterns.
Familiar Pattern Designs
Hamburger menu – This is a widespread recognisable navigational function. Usually representing the menu of a site. It consists of 3 parallel horizontal lines, a graphical interface button. Conserves space on the screen
Account Registration – A fillable form that includes an input of user details with means to obtain an account. Are often presented as a process instead of displaying a full field as to not scare the user attention/effort.
Long Scroll – A navigational experience, continuous scroll. Typically popular for sites that are trying to attract with story-telling and are m0bile concentrated. Purpose is to simplify navigation.
Card Layouts – Pioneered by Pinterest. They’re content containers, representing information in bite size chunks, each displaying a unified concept. Usually rectangular in form.
Hero Images – Large HD banner images. Prominently placed as the first visual a user encounters. It is to present an overview of the sites most important content. A fast way to grab user attention.
Animation – Makes UX more attractive and entertaining. It can be placed into 2 groups. Large scale and small scale.
- Large scale – primarily as interaction tools (parallax scrolls/pop up notifications)
- Small scale – don’t require amass of user input (loading bars/hover tools)
Material/Flat Design – Is a focus of clean design. It is minimalistic and often used within flat design. Use of shadow for 3 dimensional effects is typical.
Responsive Design – An approach that focuses on user behaviour and environment based on screen/platform. Includes flexible grid layouts.
Design patterns shouldn’t be the solution to the problem, rather aid it. It should be appropriate to it’s audience and the need it is trying to meet. There are various elements and techniques that can attract users, however overcomplicating screens in attempt to lure could become a distraction.