Lecture notes, Week 3

Lecture pod 3

This weeks lecture pod an introduction to screen design basics and design patterns for screens. All about recurring patterns in the design world and what it means for designers and users.

Patterns are simply recognizable conventions in terms of user interface. Designers must put thought into page composition, whether the product is being viewed on desktop or mobile. There are very different paradigms and patterns that we can use for mobile in contrast to desktop.

A new approach to design is the mobile first movement. This movement basically places mobile screen design ahead of everything else in a small to large hierarchy. This way of doing things is proven to be more effective than applying a large screen design to a smaller one. It forces us to prioritize and alter our mental structure which is accustomed to the larger screen.


Architect Christopher Alexander outlined pattern languages in his aptly named book, A Pattern Language. He claimed that “pattern design should go beyond ornamentation and repeating imagery”, and he goes on to say “all patterns are free to evolve under the impact of new experience and observation.” A main point to take from his book is patterns are simply just patterns. There’s a time and place for everything and some patterns aren’t appropriate for what you’re doing.

User interface pattern proliferation: Responsive design is a cookie-cutter new fad resembling most of the WordPress site templates. In our modern era we’ve adapted to a certain way of doing things in terms of design, here are some examples of common patterns that have adapted into a design standard:

  1. Hamburger menu. Those three tasty horizontal lines everyone is bound to recognize. It’s always set in the top left/right so the drawer can slide out and hide the main content. The drawer is a menu of pages/options, usually includes navigation buttons, chat, contact etc. Tapping back to the main content gets rid of it. It’s an effective way of saving precious screen real estate.

  2. Account registration. When you try to register for account to sign up, clever little multi-step form wizards reduce confusion and make the steps look simpler than they are to users. Breaks the steps down to appear more manageable.

  3. Long scroll. Good for mobile and an interesting storytelling tool. A cool example of this is the Apple watch, which is advised by the manufacturers to have as little scrolling as possible.

  4. Card layouts. Pioneered by Pinterest,  this pattern includes info cards in small chunks. Perfect for scanning and rearranging in different device spread points, due to their small rectangular shapes. The anatomy often includes a title, username, picture and various icons. They’re likened to small webpages.

  5. Hero images. Large high definition images are fast and easy ways to grab user attention, especially as our tech increases and we have access to more bandwidth. Slow load times a thing of the past. Hero images are often implemented above the scroll, followed by a zig-zagging section or a card based arrangement.

  6. Animation. It’s used primarily to enhance a sites storytelling, easily making a site more interactive and entertaining. It comes with its pros and cons though, you must carefully consider the usage of animation in a site because it can easily be done poorly and awkwardly. There are two groups: Large scale animations. These are engaging interaction tools, such as parallax backgrounds and popup notifications. The second are small scale animations. These are simply to add flavor to a site, like spinners, load bars and don’t require any user input. Loading animations are used to entertain and notify users that the device is loading, these are popular in flat and basic designs. They should be simple and have no sound. Navigation and menus are often animated to save precious screen space. Hover animations give an intuitive feel to a site when an element is hovered on, but beware, this doesn’t work for mobile! Gallery’s and slideshows are effective way to show multiple images without exhausting the users. Great for showcasing work like in a portfolio. Motion animation is a dynamic way to draw a users attention using visual hierarchy. Scrolling background animations give control to a user, they can determine how the animation unfolds and gives them a sense of control. Also adds visibility to a site and helps it stand out but this should be moderated as its very distracting and overbearing if done wrong. Subtly is important and animations should transition gently and work with the site.

  7. Material design. In 2015 our heroes at Google launched its new style language, material design. Places emphasis on shadows and gradients, depth and realism. Aims to create clean design that will focus on user experience, and is mostly praised by critics.

  8. Responsive design. It’s a brand new craze brought on by mobile and its here to stay. It’s a very simple way to design a multi functional cross platform site, usable across desktop to mobile! It has some issues, namely performance and load times. It’s minimalist to keep size down, works well with the card layout pattern as they restructure easily.

  9. Flat design. This design pattern been around for ages, it’s very compatible with a range of things. Apple ios religiously uses flat design on their screens.

While all of these are wonderful new trends, we as designers shouldn’t implement them just to look cool and hip. These should be used only to enhance user experience and to work in synergy with the site.

Featured image source: Lecture pod 3 


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s