From mobile, tablet to desktop there are many different design patterns that can be used, whilst any could be used there are some that are more suitable than others.
Starting from mobile:
- Designing from a small screen means you are forced to prioritize, choose and alter our mental structure.
- The hamburger icon is a commonly used pattern to toggle between a menu and the main content area, kind of like a digital drawer.
- Designed for simplicity and easy to follow steps.
- One page designs
- Functions well on apple watch because there is limited space on the screen so scrolling would be the effective way for gathering/ presenting information.
- Good for luring people into the story of the website.
- Information in bite size chunks, perfect for scanning
- Miniature condensed web pages
- High Definition hero images grab the reader instantly
- Loading animations help to entertain people while going through the tedious act of waiting.
- Hover effects help give off an intuitive feel to navigating a website.
- Motion animations can help to add interest.
Responsive Web Design
- Works well with cards
- Easy to restructure
When choosing a design pattern be sure to think about whether the pattern is suited to your own project. Don’t be swayed towards one because it was well executed in another website, what is the context of it? Will it work well? What is the purpose?