About – introduction to screen design basics and design patterns for screens.


Patterns are conventions that are developed in terms of user interface and page compositions. The style/personality and elements of the interface. It is the visual representations and entertainment that users encounter and sometimes react to. Patterns are useful in attracting attention and can aid in usability. While patterns are a major part of the interactivity, it isn’t the solution to the problem.

There are 4 screens to consider when designing patterns.

  • mobile
  • tablet
  • laptop
  • desktop

Familiar Pattern Designs

Hamburger menu – This is a widespread recognisable navigational function. Usually representing the menu of a site. It consists of 3 parallel horizontal lines, a graphical interface button. Conserves space on the screen

Account Registration – A fillable form that includes an input of user details with means to obtain an account. Are often presented as a process instead of displaying a full field as to not scare the user attention/effort.

Long Scroll – A navigational experience, continuous scroll. Typically popular for sites that are trying to attract with story-telling and are m0bile concentrated. Purpose is to simplify navigation.

Card Layouts – Pioneered by Pinterest. They’re content containers, representing information in bite size chunks, each displaying a unified concept. Usually rectangular in form.

Hero Images – Large HD banner images. Prominently placed as the first visual a user encounters. It is to present an overview of the sites most important content. A fast way to grab user attention.

Animation – Makes UX more attractive and entertaining. It can be placed into 2 groups. Large scale and small scale.

  • Large scale – primarily as interaction tools (parallax scrolls/pop up notifications)
  • Small scale – don’t require amass of user input (loading bars/hover tools)


Material/Flat Design – Is a focus of clean design. It is minimalistic and often used within flat design. Use of shadow for 3 dimensional effects is typical.

Responsive Design – An approach that focuses on user behaviour and environment based on screen/platform. Includes flexible grid layouts.


Design patterns shouldn’t be the solution to the problem, rather aid it. It should be appropriate to it’s audience and the need it is trying to meet. There are various elements and techniques that can attract users, however overcomplicating screens in attempt to lure could become a distraction.




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