Summary:

• Provided a brief introduction to screen design basics and design pattern
• Christopher Alexander states that design patterns and interactive design go beyond style and are more than just visual repetition, they’re similar and reusable solutions that have a working function often seen in interface and software design
• There are nine types of design patterns commonly used as described below:
  • 1. The Hamburger Menu: 3 parallel horizontal bars, used as a button, usually displayed on the top left or top right of a website and typically results in a menu of pages or options. They’re favoured for saving space on the screen.
  • 2. Account Registration: A pattern for registering an account which might include either a form fill out or social account button to sign up. People are more likely to start a small process when presented with a small step rather than engage in a long list of steps presented all at once.
  • 3. Long Scroll: A technique that works well for sites that want to lure users with storytelling as the entire site is laid out through one continuous scroll. You can mimic multipage site layouts by breaking the scroll into clear sections.
  • 4. Card Layouts: A site layout using only cards, pioneered by Pinterest. Cards are everywhere on the web because they provide information in bite-sized chunks and they each represent one unified concept, usually including a title, a username, a picture and various icons. These are useful for responsive layouts as their rectangular container makes it easy to rearrange on different devices.
  • 5. Hero Images: A large banner image used to grab the user’s attention. Often used above the scroll followed by either a zig zagging section or card spaced arrangement.
  • 6. Animation: Split between large scale and small scale animations used to enhance a site’s storytelling. Large scale animations are primarily used as an attraction tool and have more impact on the user e.g. parallax scrolling and pop up notifications. Small scale animations are used to entertain users during tedious processes and include spinners, hover tools and loading bars which don’t require any user input. Check out this article about websites utilising parallax scrolling: https://speckyboy.com/parallax-scrolling-web-design-inspiration/
  • 7. Material Design: In 2015, Google launched it’s new style language, “material design”, utilising shadow effects, and the concepts of movement and depth to create designs that appear more realistic to the user. The goal was to create a clean design that will focus on user experience.
  • 8. Responsive Design: Can easily restructure to fit any breakpoint or screen size. Great to work with cards.
  • 9. Flat Design: The absence of 3-Dimensional effects such as drop shadows to create a user interface that only uses simple 2-Dimensional elements and bright colours. Check out this article about websites utilising flat design: https://speckyboy.com/flat-web-design/