design for developers


TOC


design basics.


WT Analysis.

You don't need photoshop


we can rely on a solid CSS3 design

Originality and creativity is not the goal.


The goal is to deliver a good design.

Layout


Design basics (layout)

 
Whatever the elements of a page layout, its success
-both functionally and aesthetically - depends often on

emphasis

Increase size


Increase size


Probably the most common approach is to increase the size.

It's often considered as an overkill.

The more elements you enlarge, the more emphasis you loose.

Contrast


Contrast

 

Contrast


Increasing contrast, emboldening a phrase, or using a colour will create emphasis without exaggeration.

Separation


Separation


You can achieve maximum effect with minimum modification.

Rearrange the items by creating white space.


Colour


  • Strengthen an app's look and feel.
  • Emphasize an element in a long list to expedite scanning.
  • Accent a dynamic message.

Danger

Warning

Safety

colour

can establish a Hierarchy 

Heading

Date 13/01/1910

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.

Comments to this paragraph (12)

Heading

Date 13/01/1910

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.

Comments to this paragraph (12)

Contrast

http://snook.ca/technical/colour_contrast/colour.html

Heading
Date 13/01/1910 Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Comments to this paragraph (12)


line-height: 0;
Heading

Date 13/01/1910

Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.

Comments to this paragraph (12)


line-height: 5px;
padding: 0.5em;

whitespace



Whitespace



Whitespace



grouping and proximity

 

grouping and proximity

 
 
 
Information bandwidth 


User can learn an interface

..if the interface is consistent

mental sculpting

mental sculpting

consistency

Our current situation


design for developers

By rdpi

design for developers

  • 39