Skip to content

Principles of User Interface Design

22/03/2017

PARC principles – four basic principles do UI design:

  • Proximity
  • Alignment
  • Repetition
  • Contrast

Proximity

Group related items together – one cohesive, visual unit.

Non-related items should not be grouped together – causes confusion.

If more than 3 to 5 items on page, try to group elements. Don’t spread separate elements around corners or middle of page.

Check page visually, where does eye track when moving down the page?

Once elements are grouped, ensure sufficient white space between groups helping to define visual units.

 

Alignment

Every item should have a connection to something else on the page.

Align along “hard vertical edges”. E.g. using left or right alignment for text created a “hard vertical edge” as opposed to centring.

Centred alignment = more formal, sedated, ordinary and often boring look.

Don’t combine flush left and flush right on same page.

Combine flush left with good use of proximity.

Don’t combine centred headlines over flush left/right text. Set all headings etc. to the same vertical alignment.

Align image captions with strong line of photograph.

Alignment helps connect & unify elements on page, also creates sense of calm and security for the reader.

Contrast

If two items not exactly the same, make them different.

Strong contrast adds to interest and attractiveness.

Use in titles, headings & subheadings, and page segments. Helps user to identify what is going on.

Easiest way to contrast is with typeface. Can also use colours, spacing and textures etc.

Creates focal point(s). Use also alignment and proximity.

Don’t be afraid to make some items small to contrast with large items, or use blank space.

Don’t use typefaces, colours, graphics etc that are too similar. Make them different to contrast and add interest.

Repetition

Some design aspect repeats through entire piece of work. May be bold font, certain bullet, colour, format, shape etc.

Unifies all parts of design. Provides consistency & visual unity.

Helps control user’s eye and movement through page.

Organises page into visual units.

Adds visual interest – more interesting it is, the more likely it is to be read.

 

Advertisements
Leave a Comment

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: