What are the main principles? Are there any?

Intro to Web Design What are the main principles? Are there any? The Purpose of Web Design 1. Create a clear visual hierarchy of contrast, so you...
0 downloads 3 Views 3MB Size
Intro to Web Design

What are the main principles?

Are there any?

The Purpose of Web Design 1. Create a clear visual hierarchy of contrast, so you can see at a glance what is important and what is peripheral 2. Define functional regions of the page 3. Group page elements that are related, so that you can see structure in the content

The Purpose of Web Design

…but how is this achieved?

Visual Pattern Recognition • Gestalt: German for “whole shape” • The human mind considers objects in their entirety before, or in parallel with, perception of their individual parts… • …so the whole is other than the sum of its parts! • Gestalt psychology: laws of our ability to acquire and maintain meaningful perceptions in a chaotic world.

Principles of Pattern Recognition

We see columns!

1. Proximity Elements that are close to each other are perceived as more related than elements that lie farther apart

We see rows!

2. Similarity: Viewers will associate and treat as a group elements that share consistent visual characteristics

We see two lines crossing, not four lines meeting in the middle!

3. Continuity: We prefer continuous, unbroken contours and paths, and the vast majority of viewers will interpret the figure below as two crossed lines, not four lines meeting at a common point

We see a white rectangle overlying four circles, not four circles that each have a section missing

4. Closure: We have a powerful bias to see completed figures, even when the contours of the figure are broken or ambiguous.

5. Figure-Ground Relationships • Our perception alternates between two possible interpretations of the same visual, but we cannot see both at once • Proximity has a strong effect: it’s easier to see the goblet when it’s wider and the “faces” are farther apart

5. Figure-Ground Relationships • Our perception alternates between two possible interpretations of the same visual, but we cannot see both at once • Proximity has a strong effect: it’s easier to see the goblet when it’s wider and the “faces” are farther apart

5. Figure-Ground Relationships • Our perception alternates between two possible interpretations of the same visual, but we cannot see both at once • Proximity has a strong effect: it’s easier to see the goblet when it’s wider and the “faces” are farther apart

5. Figure-Ground Relationships • …as for a web page, visual elements that are relatively small will be seen as discrete elements against a larger field: – The small element will be seen as the “figure” and the larger field as the “ground” around the figure.

6. Uniform Connectedness • Uniform connectedness refers to relations of elements that are defined by enclosing elements within other elements, regions, or discrete areas of the page.

Uniformity + Proximity + Enclosure

7. 1 + 1 = 3 Effects • The white space between two visual elements forms a third visual element and becomes visually active as the elements come closer together • 1 + 1 = 3: in closely spaced elements the ground may form an active part of the overall design (i.e., why white space is important)

Principles of Pattern Recognition 1. 2. 3. 4. 5. 6. 7.

Proximity Similarity Continuity Closure Figure-ground relationships Uniform connectedness 1 + 1 = 3 effects

A Few Key Principles of Web Design • • • • • • •

Emphasis Contrast Balance Alignment Consistency White space Keep it simple!

Emphasis • The focal point that will grab the viewer’s attention; it’s “the call to action”

More examples: http://tympanus.net/codrops/2011/10/08/25-examples-of-emphasis-applied-in-webdesign/

Contrast • Readers first see pages as large masses of shape and color, with foreground elements contrasting against the background field. • Then they begin to pick out specific information, first from graphics if they are present • And only after this do they start parsing the harder medium of text and begin to read individual words and phrases

Contrast • Need balance between text and visual elements: – A page of solid text: no obvious cues to the structure of the information – A page dominated by poorly designed or overly bold graphics or typography will distract users seeking substantive content

• Need balance between attracting the eye with visual contrast and providing a clear sense of organization • Can be achieved through the variations in contrast that result from proximities, groupings, figure-ground relationships, and headings

…however •

Horizontal rules, decorative graphic bullets, prominent icons, etc. –

• • •

apply each sparingly (if at all) to avoid a patchy and confusing layout

Avoid bold, highly saturated primary colors except in regions of maximum emphasis Subtle, desaturated colors make the best choices for backgrounds or minor elements Color palettes chosen from nature as a guide to color harmony

Balance • As elements are grouped together in a design, they create visual weight. • Typically, this weight must be balanced out by an equal and opposite weight in order to achieve balance in the design. • Not doing so results in a design that feels unstable • Can be symmetrical and asymetrical

Alignment • The arrangement of elements in such a way that the natural grid lines created by them match up precisely (continuity, closure) • Such elements become unified and form a greater whole (again Gestalt!) • Unaligned elements tend to fall apart

Consistency • Repetition is not boring • Gives your site a consistent graphic identity • Allows users to adapt quickly to your design and to predict with confidence the location of information and navigation controls across the pages of your site.

White Space Graphic design is ultimately the management of white space: the ground field behind all figure elements on the page

White Space: some useful articles • http://webdesignledger.com/tips/whitespace-theunderutilized-design-element • http://webdesignledger.com/inspiration/21-inspiringexamples-of-white-space-in-web-design • http://blog.teamtreehouse.com/white-space-in-web-designwhat-it-is-and-why-you-should-use-it

Keep it simple! • • • • •

Functionality and content determines the look Prefer the conventional over the eccentric Never let the framing overwhelm the content Design should never intrude on the experience For some users simplicity is critical: with a lack of spatial cues and with radically different approaches to navigation, vision-impaired users or people with cognitive disabilities can easily get disoriented or lost

• The best style is one that viewers never notice

Sources • Web Style Guide, 3rd Edition by Patrick J. Lynch and Sarah Horton http://webstyleguide.com/

• Slides by Dr. Bettina Fabos https://docs.google. com/presentation/d/19U7T5Nqp6mEII2SZhhxPWh5SB7xmpB8zHaO9K2XOcY/pub? start=false&loop=false&delayms=3000#slide=id.p

• …and the World Wide Web

Suggest Documents