分類彙整: Web

Web Design: Color Schemes

發佈留言

Adopt from

The Principles of Beautiful Web Design, written by Jason Beaird, published by Sitepoint

http://designhomeinterior101.com/step3.html

Monochromatic Color Scheme

Consists of a single base color and any number of tints or shades of the color

From: http://www.rcs.k12.va.us/art/lessons/richards01a.jpg

Analogous Color Scheme

Consists of colors that are adjacent to one another on the color wheel.

From: http://designhomeinterior101.com/assets/Analogous-Color-Wheel.gif

Complementary Color Scheme

Consists of colors that are located opposite each other on the color wheel.

From: http://z.about.com/d/budgetdecorating/1/5/t/-/-/-/complimentary-2.jpg

Split Complementary Color Scheme

Use the two colors adjacent to your base color’s complement

From: http://0.tqn.com/d/budgetdecorating/1/5/s/-/-/-/splitcomplimentary.jpg

Triadic Color Scheme

Push our split-complements out one more notch on each side, so that all the colors are equally spaced.

From: http://www.beadworks.com/tools/images_pf/triad_red_orange.jpg

Tetradic Color Scheme

Combined with another complementary color scheme.

From: http://www.archiq.net/images/stories/Image/design/color/04.N03.H01%20-%20tetradic.jpg

Web Design: Layout and Composition – Part 2

發佈留言

Adopt from

The Principles of Beautiful Web Design, written by Jason Beaird, published by Sitepoint

Emphasis

Making a particular element draw the viewer’s attention.

One method of achieving such emphasis is by making that element into focal point.

Placement

Direct center of a composition is the point at which users look first.

Continuance

When out eyes start moving in one direction, they tend to continue along that path until a more dominant feature comes along. Using an arrow is using the idea of continuance.

Isolation

An item that stands out from its surroundings will tend to demand attention.

Contrast

Defined as the juxtaposition of dissimilar graphic elements, and is the most common method used to create emphasis in a layout. For example, difference created between graphic element and its surrounding.

Proportion

A principle of design that has to do with differences in the scale of objects.

Bread-and-butter Layouts

  • Left-column Navigation
  • Right-column Navigation
  • Three-colun Navigation

Web Design : Layout and Composition - Part 1

發佈留言

Adopt from

The Principles of Beautiful Web Design, written by Jason Beaird, published by Sitepoint

Defining Good Design

Usability Standpoint– effective presentation of information, and efficiency

Aesthetic Perspective – Presentation, hot animations and graphics.

Kind in mind that design is about communication.

Web Page Anatomy

  • Containing block
  • Logo
  • Navigation
  • Content
  • Whitespace

The Rule of Thirds

Image from http://www.flickr.com/photos/davegray/2370922423/

Balance

Equal weight on either side of a layout.

Symmetrical Balance occurs when the elements of a composition are the same on either side of an axis line. (bilaterally or radially)

Asymmetrical Balance involves objects of differing size, shape, tone, or placement. These objects are arranged so that they equalize the weight of the page. This kind of balance is versatile.

Unity

The way in which the different elements of a composition interact with one another.

Proximity - Placing objects close together within a layout creates a focal point toward which the eye will gravitate.

Repetition - Repetition of colors, shpaes, textures, or similar objects helps to tie a web pae design together so that it feels like a cohesive unit.