In the field of contemporary design, it is commonly considered best practise to design for mobile interfaces first, starting at the smallest design space and working up to the largest design space. Priority of design most commonly flows from mobile devices first, to tablet or phablet design second, and finally laptop or computer design.
Over the years internet design has boomed, and the need for design “patterns” or “staples” has emerged. Many websites have grown to look similar to each other, as they often use similar design patterns or elements that have become commonplace and understandable for the user. This is in part to the growth of the “theme market” field of design, and the acceptance and usage of generally accepted modes and elements of design for webpages and responsive content.
Some repeating patterns in design today include:
The Hamburger Menu (button) – saves space on the screen, and denotes a hidden menu
Account Registration – neatly wraps up the process of the registering an account with a service or page, by using commonplace questions and prompts for information
Long Scroll – allows users to view a page in segments via long scrolling, essentially presenting the page all at once, yet not completely visible immediately.
Card Layouts – pioneered by Pinterest, this layout is a common design template used for webpage and responsive content design today.
Animation – including:
- large scale animations
- small scale animations (such as loading animations)
- navigation animations
- hover animations
- gallery and slideshow animations
- live wallpaper
Material Design – realistic looking design complete with shadows and texture
Responsive Design – Design which targets responses according to users behaviour and environment, depending on the size of the screen which the user is viewing the design on, meaning content shifts and responds to various screen sizes.
Flat Design – Design which uses minimal elements that suggest 3-dimensional images, and depicts a “flat” image/design.
Feature Image Unknown (2015) Card Design. Retrieved from https://www.webtimiser.de/webdesign-trends-2015/
Figure 1 Miller, T. (2017). Hamburger Menu Icon. Retrieved from https://www.iconfinder.com/icons/134216/hamburger_lines_menu_icon
Figure 2 Unknown. Account Registration Form. Retrieved from http://docs.orchardproject.net/en/latest/Documentation/Contributing-a-module-or-theme-to-the-gallery/
Figure 3 Wix (2013). Long Scrolling Page. Retrieved from https://au.pinterest.com/pin/498351515000033395/
Figure 4 Unknown (2015) Card Design. Retrieved from https://www.webtimiser.de/webdesign-trends-2015/
Figure 5 Unknown. Material Design.
Figure 6 Unknown (2017) Flat Design. Retrieved from http://oknation.nationtv.tv/blog/atimenews/2017/01/06/entry-2