Designing for a mobile phone screen is what you should begin with, then continuously grow to the computer screen. This forces us to priorities our structure to work that they can be expanded and modified to fit the larger screens. Christopher Alexander was an architect, he discovered the language of pattern in his book. In interactive design, design patterns are more than just visual repetition, they are also reusable solutions that are often seen in software and interface design. “…each pattern represents our current best guess as to what arrangement of the physical environment will work to solve the problem presented.” (Alexander, 1977)

Sites for screen are very similar in terms of placement, theme and design, which is one of the biggest side effects of responsive design. This isn’t a bad thing, but it reveals how we have consumed the web over the years and have resulted in people being inspired from another pattern to use for their site.

A few common pattern items:

1. Hamburger Menu: An easily recognisable as a drop menu at either the top left or top right of the interface. This symbol is used to save space on the screen and allows the user to navigate their way through the application or website.  
2. Account Registration: This can include a form to fill out, or button that gives you access to a social account that you would need to sign up for. Multi-step forms are easier for the viewer to fill out as the flow is smooth without all the chunk in one page.
3. Long Scroll: These are perfect for websites that want to present their interface as a story. This can also simplify your navigation by minimising the amount on each page.
4. Card Layouts: This includes an image, title and a small caption rather than revealing a whole explanation of what is presented.
5. Hero Images: One of the fastest ways to grab the user’s attention.
6. Animation: makes the user’s experience more entertaining and interactive.
   • Loading Animations: entertain users while waiting, more popular for simple sites.
   • Navigation and menus (non scrolling) animation: used to save screen space
   • Hover Animations: when hovering over these animations it usually gives feedback to the user when unsure of what a section/button is for. Do not work for the mobile phone as we hover with a mouse
   • Gallery and Slideshow: show the users a roll of images without making the interface too chunky
   • Motion: great for catching the attention of the user. This adds interest and be intriguing to the user
   • Scrolling and Background Videos: This gives the user further control on the interface.
7. Material Design: these make design appear more realistic to the viewer, such as shadows for depth, highlight and boldness on sections, colour palettes and make the user experience very easy with a simple design.
8. Responsive Design: Creating a fully functional design on multiple devices and make it easy for the user to navigate through sections. This keeps the site minimalistic, simple, structured and organised.
9. Flat Design: works well with a minimalist and a responsive web design.

References:

Responsive Web Design [Image] (N/A). Retrieved March 19, 2019, from: https://www.vervesearch.com/best-practice-guides/responsive-web-design/