Week 3: Lecture Notes

Design Patterns

• Mobile First? Starting with a small screen is effective because it forces us to prioritise. choose and alter our mental structure which is accustomed to the larger screens as a desk stop

Christopher Alexander first discovered design patterns

• 

• Key points in the book

• The book goes beyond style and more than just visual repetition
• They’re similar and reusable solutions that have a working function often seen as an interface and software design
• This book uses words to describe patterns supported by drawings, graphs and charts
• It describes exact methods for constructing practical safe and attractive designs at every scale in entire regions, through cities, neighbourhoods, gardens, buildings, rooms etc…

Design Pattern examples:

1. Hamburger menu – found on apps/sites
2. Account registration – “”
3. Long scroll – scrolling on apple iwatch/iPhone
4. Card layouts – information such as a title, username, picture and various icons
5. Hero images
   • Fastest way to grab user’s attention
   • Commonly found above the scroll followed by a zig zag section on cord spaced arrangement
6. Animation
   • Scale animations – interaction tool more impacts on users, pop up notification
   • Small scale animation – spinners, hover tool, loading bars
   • Loading animations – popular for flat design minimal designs, portfolios
   • Navigation & Menus (non-scrolling) animation – can be used to save screen space, they reveal a menu by clicking on a specific button & preventing a jarring transition.
   • Hover animations – gives a more tuative feel to a site, as users’s, mouse over content an example of this is tool tips
   • Gallery & Slideshow – effective way to show images without over-burning the users, i.e great for photography sites
   • Motion animation – eyes are a natural drawing to motion which is a perfect tool for drawing a user’s attention. It can also be helpful with visual hierarchy, it can help add interest & intrigue to forms, cause for actions and menu items
   • Scrolling Background animation/video – smooth scrolling relies an animation relies on animation and gives further control to the user to determine the pace of how the animation unfolds.
7. Material Design –
   • in 2015 google launched it’s new style language material design
   • it uses shadow effects of concepts of movement & depth in order to create designs that appear move realistic to the user
   • Material design is limited to app design
   • intended to provide user interface & user experience across devices
   • the goal of material design is to create clean design that will focus on user experience
8. Responsive design –
   • Represents relatively simple and cheap way foe businesses that are fully functional website.
   • Comes with some issues if not carried out properly – most important is the performance
   • Tends to be minimalistic to keep the page height down & size
   • Great to work with cards
9. Flat design – e.g. apple IOS

Reflection

I think the most important part of this lecture pod is from the start of the video where Sarah discusses a movement which is happening at the moment called ‘mobile first’, which means starting with a small screen. As said by Sarah, “it’s more effective rather than adapting to a larger design to a smaller one, because it forces us to prioritise, choose & alter our mental structure which is accustomed to the larger screens as a desktop computer”.

I completely agree with this statement because it helps the user to learn the process along the way resolving in adaptations which is important taking this certain aspect of work into a different industry for example.