The seven elements of design are line, shape, texture, space, size, value, and color.

Line

Any mark connecting two points, has length. Lines can be used to organize information (rules), highlight or stress (underline), connect bits of  information, define a shape, outline an image (border), create a grid (tables), create a graph, create a pattern or rhythm by drawing many lines, direct the viewer's eye, create a sense of motion, or suggest a motion.

Shape

Objects that have height and width.  Shape can be used to crop a photo in an interesting way, symbolize an idea (octagonal = stop), make a block of copy visually interesting, create a new format, highlight information, imply letterforms, tie the work to the subject matter, tie together various elements on a layout. 

Texture

The look or feel of an object's surface. Texture can be used to relate an image to its background, suggest a mood or personality, create contrast, fool the eye, provoke an emotion, create a feeling of richness or depth, or add liveliness and activity.

Space

The distance or area between or around an object. Space can give the eye a rest, create ties between elements, form positive and negative shapes, highlight an element, make a layout easy to follow, create tension between elements, make a page appear dynamic, and help make type legible.

Size

How large or small an object is. Size can indicate the importance of an element by making it bigger, bring elements forward (by making larger), recede them in the background (by making smaller), give a sense of scale (showing an object of known size adjacent to one of unknown size), make elements easier to see, get something noticed, contrast two elements for interest, break up space in an interesting way, make elements fit together, and establish a consistent look and feel throughout the piece.

Value

The darkness or lightness of an object. Value can visually separate different kinds of copy, lead the eye across the page,  create a pattern, give the illusion of depth or volume, provide an understated, subtle feeling, make a layout dramatic, emphasize an element, and make objects appear in front or behind each other (dark areas tend to recede).

Color

The hue, saturation, and brightness of an object. Color can highlight important copy, attract the eye, make objects appear to vibrate (try purple/green or orange/blue combos), tie a layout together, help organize, set off different parts of a chart/graph, create a mood, group elements together, provoke an emotional response.

Balance

Equal distribution of weight. Create a feel of balance by repeating a specific shape at regular horizontal or vertical intervals, centering elements on the page, balancing a block of text with an image, using a few odd shapes in a mix with regular shapes, lightening a heavy text document with a bright image, leaving ample white space around blocks of text or photos, having a large light area in the center with a dark edge, offsetting a large dark image with several small ones, or dividing the page into an equal number of vertical columns or horizontal rows.

Rhythm

Repetition of elements. Create rhythm by repeating a series of similarly shaped elements along a baseline, repeating a series of progressively larger elements with larger white spaces between, making all text the same size but have increasingly larger images, alternating dark bold type with light thin type, alternating dark pages with light pages, repeating a similar shape, repeating an element in the same location on every page, or by using lots of tightly spaced elements or a few loosely spaced ones.

Emphasis

Objects that stand out tend to be noticed first. Create emphasis by placing a small element in the middle of a large one, surrounding an illustration with lots of text, using a series of evenly spaced regular shapes adjacent to an irregular one, placing something important on an angle or curve, using bold for headings and lighter faces for body copy, placing a large image next to small text, juxtapositioning a monochrome image with a colored one or a 3-D image with something flat, reversing a headline, using colored type or an unusual type face, or placing a list of benefits in a tinted box. 

Unity

All of the elements appear to belong together. Create unity by repeating a color, shape, or texture throughout the piece, grouping related elements together, picking visuals that share a common color, theme, or shape, lining up photos and text on a common baseline, limiting type type families to one or two choices,  using type styles consistent throughout, using common color palette throughout, placing pull quotes near the source, putting a border around the edge, or grouping elements with lines, screens, or tints.

Research in the area of eye tracking and cognitive capture suggest several concepts that are especially important in user interface design.

Foveal Aspect

Foveal aspect refers to the area of a surface a pair of human eyes can take in without moving or relocating gaze. This area, representing roughly a two degree angular spread, is the area where maximum information is detectable.  In a practical sense, this aspect ratio is found to be sixteen units wide by nine units high (16:9), notably the same aspect ration of modern wide screen HD television receivers. The brain can easily "zoom out" to say a 775 by 435 pixel "big picture" or "zoom in" to a 150 by 85 pixel detail. As a rule of thumb, then,  the optimal height of a feature is approximately 56% of the width.

Cognitive Chunking

Research suggests that most people can easily recognize up to four details at a glance but each additional item beyond four becomes more inefficient, proportionately requiring more and more time to grasp the meaning.  Beyond about seven details, the mind must focus greater concentration to absorb the information.  This "refocusing" of attention shifts the brain away from the main thought process and the reader becomes distracted in the detail.  This suggests that "chunking" menu options out in groups of seven or less is beneficial to the user. Similar logic applies to breaking up lists and table rows as much as possible.

Optimal Screen Width

A study of web metrics suggests that the most popularly used monitor at this time features a 800 by 600 display resolution, typically with 72 dots per inch (dpi). Allowing for the screen real estate consumed by browser window borders and scroll bars, 775 px seems to be the maximum practical width that will work on the majority of browsers without scrolling. Note, however,  that a small number of fairly old monitors are still in use with display resolutions of 640 by 480. Users should be able to view the entirety of the content without horizontal scrolling, and minimal vertical scrolling.

Printers tend to have problems reproducing content exceeding about 640 px in width, thus suggesting a practical limiting width of content intended to be printed.  With a display width of 775 px, one could practically allow 135 px for a left navigation bar, suppress the left nav with CSS and produce a perfect printer friendly full width output.

Font Size

The practical minimum size for any text font is 9px. Below this the characters become unintelligible. Take care to ensure when using relative font sizes that the smallest setting will not fall below that point. For accessability purposes, headings and body copy expressed in H and P tags should be sized using ems rather than fixed lengths (px or pt) to allow the user to adjust type sizes to preference. Note that Mozilla based browsers render fonts two sizes larger than MSIE browsers at the same settings.

Section 508 Compliance

Where section 508 compliance is a design requirement for a user interface, thought must be given to how a person with various disabilities will be able to access the information and services provided. For example, screen readers will only render pure text, so the use of meaningfully descriptive "alt" attributes in <img> elements is critical. Tables should be used solely for rendering tabular data, positioning should be done with CSS tableless design practices. Tables should be fully commented, captioned, and titled to facilitate grasping the meaning of the data presented. Graphs should have accompaning tabular data. Font sizes should be specified in relative terms (em) to allow the user to increase sizes where necessary. Alternative content pages may be necessary. Javascript and Flash capabilities may be disabled in the user's browser, or as in some cases, may not even be a capability of the browser. Color alone must not be used to display information (for example, using a red background to indicate merchandise out of stock, and green to indicate those in stock). Means should be provided to bypass, or jump over, navigatonal links at the top of a page to go directly to main content. Another consideration is the use of proper semantic design of web forms. One way to test 508 compliance is to view the site through a "Lynx" style browser and see how the site degrades. While ADA compliance does impose some limitations on the design professional, it is still possible to develop attractive websites with a high degree of accessablity. Even if it isn't possible to achieve full ADA compliance and satisfyly the client's aesthetic needs, one should strive to get as close as possible even on non-compliant projects as most compliance items are simply good web standards practices.

Effective design should carry the theme through all related types and formats:

Traditional Print Formats

• Newsletter (communicates information with style)
• Poster (captivates a moving audience)
• Brochure (presents information to a client's audience)
• Letterhead (Expresses identity through stationery)
• Advertisement (Promotes sales of a product or service)
• Logo (Expresses identity through a symbol)
• Packaging (Attracts attention to a product)

Web Formats

• Vanity Sites (Client wants a web presence, but has no specific purpose in mind)
• Promotional Sites (Client wants to promote/advertise products for purchase off web)
• Informational Sites (Client wants to furnish info without a sales agenda i.e. support, reference etc.)
• Catalog sites (Offers a variety of products for sale via shopping carts)
• Single product sites (Offers a single featured product for sale via long copy sales letter)
• Service sites (Offers a service for immediate Internet delivery i.e. web mail, chat, weather, news, quotes)
• Portal sites (Access to client resources)

Internet Formats other than web

• Email campaigns (Opt in and Squeeze Page/Autoresponder)
• Blogging (Web Logging)
• Video content (Flash movies-- utube)
• RSS (Syndication channels and feeds)
• Social Networking (MySpace, FaceBook, etc)
• Wiki (colaborative content)
• SEO (search engine optimization - improving organic search results)
• SEM (search engine marketing --pay per click advertising)

Newsletters

Design should be appropriate to the character of the client, have a strong masthead to identify the name of the publication and its purpose, have room on the back for mailing information, should feature a consistent basic layout to establish is place as part of a series but be distinctively different from issue to issue, invite the reader inside (table of contents on cover with brief description of each article), visually separate headlines, subheads, body copy, and captions by having a design for each (for example, bold sans-serif headlines with light serif body copy), and remain consistent with design elements throughout.

Posters

Design should use large type that can be read from distances of 10 to 15 times the width of the piece, have a relatively simple layout as viewers typically only get a glance at the piece, include all relevant information, feature a single dominent element to attract the eye, have the most important message emphasized by size, color, or value, feature art that relates to the message, have its type and images arranged in a logical manner (i.e. left to right or top to bottom), could use unusual or tightly cropped images, and use bold intense colors so it will be noticed at a distance.

Brochures

Design should be unified throughout, be designed for long shelf life, have an inviting image on the front to draw the reader inside, have its content arranged to be easily understood, prominently display clear reader response instructions, be sized to best suit it's purpose, and have a careful and functional arrangement to faciltate the reader's experience with it.

Letterheads

Design should clearly identify the sender with name and logo, display the sender's address and phone in an easy to find location, leave ample room for a message, avoid overpowering the message, reflect the client's character and personality, comply with postal requirements for envelopes and labels, clearly distinguish between information about the sender and the content of the message, have a design that works for everything from business card to letter, and, if possible, include indicators to mark location of inside address, salutation, and body.

Advertisements

Design should prominently display the company's logo, address, and phone number where it can easily be found, make it simple to use provided coupons (include name and address on all coupons), have a large headline, strong border, strong background, or lots of white space to make it stand out, make it easy for the reader to respond, emphasize the call to action, deliver main message simply and directly, be appropriate for its content, be distinguishable for competitors, and use grid alignment to organize the elements and arrangement.

Logos

Design should be distinctive, appropriate for client, project a positive image, distinguish the company, product, or service, express the client's personality, be legally protectable, reproduce well in a variety of sizes, works on all the client's applications, have lasting appeal, fit the client's color budget, capable of being read at any size, easily interpreted by anyone, and work in either black and white or color.

Packaging

Design should stand out from shelf competitors, protect its contents, show an attractive visual, provide differentiation between different similarly packaged items, clearly identify its contents,  be easy to read, should work on all sides, convey effectively to the intended audience, and reflect the personality of the store where it will be offered.

Interactive websites invariably need webforms to transmit information back to the web server for server side processing. Typical uses for webforms include:

• Capture information into a database
• Extract information from a database
• Capture information and transmit via email
• Perfom a service (e.g. return a value from inputted data)

Webform designs fall into several categories, as follows:

• Vertical Single Column Layout
• Vertical Multi Column Layout
• Horizontal Layout
• Marginal Alignment Layout
• Semantic Layout (using fieldsets)
• Traditional Layout (labels on the left, elements on the right, line up in the middle)
• Random Layout (example: search boxes)