There is a movement beginning to suggest ‘mobile first’ – meaning designing for mobile first is a good approach. Starting with a small screen is more effective to adapt to a larger than vice versa. Mobile first design forces us to prioritise, choose and alter our mental structure.
Christopher Alexander, author of A Pattern Language, discusses design patterns in interactive design. Going beyond style and more than just visual repetition. The book describes methods for constructing practical, safe and attractive designs at every scale.
Some patterns to be familiar with include:
The Hamburger Menu
3 parallel horizontal lines that are widely used and remain well recognised by the community. It is commonly used to save space and hide a menu. For example, a website with a large photo background may use a hamburger menu to keep it’s sleek design minimal.
This may include a form to fill out, or a button that links to a social media account in order to sign up. People are more likely to continue with a process, as long as it is a small step rather than a long list of steps presented all at once.
Thanks to mobile devices, everyone is accustomed to long scroll. It works well for sites that want to lure users through story telling. The site can also be broken up in one page with the use of clear headings. An apple watch relies on scrolling.
Pioneered by pinterest. It presents information in bite sized chunks, and is great for scanning. Each card represents one unified concept. Cards commonly include a title, a username, a picture and icons.
The fastest way to grab a users attention. The use of a large image followed by a card spaced arrangement is a very common theme used in web design.
It is used to enhance a sites storyline, making it more attractive. There are two groups of animation; large scale, used primarily as an interaction tool to paralex scroll or small scale, spinners, hover tools and loading bars.
Loading animations tend to be popular for popular, flat and portfolio design.
Navigation menus can also be animated, such as a slide.
Hover effects give a more intuitive tool for instant visual feedback – these do not work for mobile.
Background animations add visibility to a site to add moderation, creating a gentle movement to an entire image.
The use of shadow effects, movement and depth to create designs that is more realistic. It is clean design that focuses on user experience. An example of flat design is Apple IOS
With the increase of responsive design, many sites look similar. The rise of wordpress sites and the booming theme market are to blame for this. However, similarity is not bad as it will still function the same.
It tends to be minimalistic, and works with cards.
Following trends are popular techniques for good reason. However, adapt patterns to suit your page.