Lecture Pod 3

The pod begins outlining its intention to discuss screen design basic an design patterns for screen. ‘By patterns, we mean conventioned developed in terms of user interface’ Waterson begins. Patterns can differentiate between mobile, tablet, laptop and desktop.

There is a movement beginning to suggest ‘mobile first’ – meaning designing for mobile first is a good approach. Starting with a small screen is more effective to adapt to a larger than vice versa. Mobile first design forces us to prioritise, choose and alter our mental structure.

Christopher Alexander, author of A Pattern Language, discusses design patterns in interactive design. Going beyond style and more than just visual repetition. The book describes methods for constructing practical, safe and attractive designs at every scale.

Some patterns to be familiar with include:

The Hamburger Menu
3 parallel horizontal lines that are widely used and remain well recognised by the community. It is commonly used to save space and hide a menu. For example, a website with a large photo background may use a hamburger menu to keep it’s sleek design minimal.

Account Registration
This may include a form to fill out, or a button that links to a social media account in order to sign up. People are more likely to continue with a process, as long as it is a small step rather than a long list of steps presented all at once.

Long Scroll
Thanks to mobile devices, everyone is accustomed to long scroll. It works well for sites that want to lure users through story telling. The site can also be broken up in one page with the use of clear headings. An apple watch relies on scrolling.

Card Layouts
Pioneered by pinterest. It presents information in bite sized chunks, and is great for scanning. Each card represents one unified concept. Cards commonly include a title, a username, a picture and icons.

Hero Images
The fastest way to grab a users attention. The use of a large image followed by a card spaced arrangement is a very common theme used in web design.

It is used to enhance a sites storyline, making it more attractive. There are two groups of animation; large scale, used primarily as an interaction tool to paralex scroll or small scale, spinners, hover tools and loading bars.
Loading animations tend to be popular for popular, flat and portfolio design.
Navigation menus can also be animated, such as a slide.
Hover effects give a more intuitive tool for instant visual feedback – these do not work for mobile.
Background animations add visibility to a site to add moderation, creating a gentle movement to an entire image.

Material Design
The use of shadow effects, movement and depth to create designs that is more realistic. It is clean design that focuses on user experience. An example of flat design is Apple IOS

Responsive Design
With the increase of responsive design, many sites look similar. The rise of wordpress sites and the booming theme market are to blame for this. However, similarity is not bad as it will still function the same.

It tends to be minimalistic, and works with cards.


Following trends are popular techniques for good reason. However, adapt patterns to suit your page.


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