Notes
- Conventions that have developed in terms of user interface and in terms of page composition
- Mobile Screens
- Tablet Screens
- Desktop Screens
- Generally mobile design is prioritised first, then tablet, laptop and desktop, but depends on the situation and design
- Different patterns used for different screens
- A pattern language
“Each pattern represents our current best guess as to what arrangement of the physical environment will work to solve the problem presented.”
Alexander, C (1977) Oxford University Press, Oxford.
- Patterns are just patterns, not only just a way of getting solutions for design
- UI Pattern Proliferation
Similar UI design patterns, themes, templates; Not necessarily bad. Example: most sites use the same design pattern for cart and checkout design
Example of common design patterns
Hamburger Menu
- Saves space
Account Registration
- Often displayed in small steps to keep users attention and engagement rather then display all required steps at once
- Typeforms.com
Long Scroll
- Lure Users through storytelling
Card Layout
- Pioneered by Pinterest
- Content containers
- Easy rearrangement
- Contain, title, username, icon, image
- Minitare condensed web pages
Hero Images
- Large web banner to get users attention
Animation
- More attractive and entertaining
- Depends on the situation
- Small scale animations; loading animations
- Navigation and menus (nonscroling)
- Hover animations
- Gallery and slideshow
- Motion
- Scrolling background animations/videos
Material Design
- Shadow effects and designed to appear more realistic
- Minilistic
- Similar to flat design
- More depth
Responsive Design
- Relatively new and very useful in todays age with multiple devices using the same website
Flat design
Summary:
Design patterns are the patterns commonly seen through user interface design on digital media, primarily websites and programs. Responsive and adaptive websites are commonly used in today’s climate of varying devices with different resolutions, mobiles, tablets, laptops and desktops. They adapt to the correct form for the correct screen resolutions allowing for a much better user experience. Design patterns can also be seen in user interface design, for example, the design of checkout screens are very similar to allow for familiarity and trust with the user.
Reflection:
Through this lecture pod I was able to learn of a fraction of the vast range of varying design patterns coming down to styling, and UI design. I did quite a bit of extra research into design patterns and was able to learn a lot of everyday designs that I interact with take advantage of design patterns to allow, which I found to reinforce the idea of them being used to create a sense of similarity and trust with users.
