Visual Design

Visual design focuses on the aesthetics of a site and its related materials by strategically implementing images, colors, fonts, and other elements. A successful visual design does not take away from the content on the page or function. Instead, it enhances it by engaging users and helping to build trust and interest in the brand.

Basic Elements of Visual Design

The basic elements that combine to create visual designs include the following:

• Lines connect two points and can be used to help define shapes, make divisions, and create textures. All lines, if they’re straight, have a length, width, and direction.
• Shapes are self-contained areas. To define the area, the graphic artist uses lines, differences in value, color, and/or texture. Every object is composed of shapes.
• Color palette choices and combinations are used to differentiate items, create depth, add emphasis, and/or help organize information. Color theory examines how various choices psychologically impact users.
• Texture refers to how a surface feels or is perceived to feel. By repeating an element, a texture will be created and a pattern formed. Depending on how a texture is applied, it may be used strategically to attract or deter attention.
• Typography refers to which fonts are chosen, their size, alignment, color, and spacing.
• Form applies to three-dimensional objects and describes their volume and mass. Form may be created by combining two or more shapes and can be further enhanced by different tones, textures, and colors.

Principles for Creating a Visual Design

A successful visual design applies the following principles to elements noted above and effectively brings them together in a way that makes sense. When trying to figure out how to use the basic elements consider:

• Unity has to do with all elements on a page visually or conceptually appearing to belong together. Visual design must strike a balance between unity and variety to avoid a dull or overwhelming design.
• Gestalt, in visual design, helps users perceive the overall design as opposed to individual elements. If the design elements are arranged properly, the Gestalt of the overall design will be very clear.
• Space is “defined when something is placed in it”, according to Alex White in his book, The Elements of Graphic Design. Incorporating space into a design helps reduce noise, increase readability, and/or create illusion. White space is an important part of your layout strategy.
• Hierarchy shows the difference in significance between items. Designers often create hierarchies through different font sizes, colors, and placement on the page. Usually, items at the top are perceived as most important.
• Balance creates the perception that there is equal distribution. This does not always imply that there is symmetry.
• Contrast focuses on making items stand out by emphasizing differences in size, color, direction, and other characteristics.
• Scale identifies a range of sizes; it creates interest and depth by demonstrating how each item relates to each other based on size.
• Dominance focuses on having one element as the focal point and others being subordinate. This is often done through scaling and contrasting based on size, color, position, shape, etc.
• Similarity refers to creating continuity throughout a design without direct duplication. Similarity is used to make pieces work together over an interface and help users learn the interface quicker.

Reference: http://www.usability.gov/what-and-why/visual-design.html

Design Elements in a Text or a Presentation

Content and design

• Content is only one component of a presentation
  • Subject matter combined with effective use of visual design can contribute to a successful presentation
  • Studies have shown that including images and graphs improves audience learning and recall
• Good visual design affects both the learning and perception of content
  • However, the validity of information is influenced by the manner in which it is presented

Text

• Convey only the most important concepts
  • Avoid text-heavy slides
• Audiences are less likely to read paragraphs/run-ons
• Remove unnecessary and redundant information
• Break information down using bullets/numbers
• Yet, ensure that you are not losing meaning information

Font

• Select a readable font
  • Use sans serif typefaces for body text, such as Arial or Helvetica
  • Cursive/stylistic fonts are difficult to read and distracting
• Use no more than two font styles
• Consistency improves professionalism limits distractions for audience

Font styles

• Use bold to emphasize important points
• Avoid underlines
  • Easily confused with links
  • Makes text more difficult to read
• Use colors for emphasis, but consider:
  • Aesthetics, readability, color blindness, etc.
• Colors may appear differently on different displays Use contrasting colors for backgrounds and text

Font size

• Use no more than three font sizes
• Ensure those farthest away will be able to view your content
  • Generally, it is best to use 24+ point size

Numbered lists

• Use numbers for ordered lists
• Example: Who are the 5 best rappers of all time?

1. Dylan 1
2. Dylan 2
3. Dylan 3
4. Dylan 4, and
5. Dylan 5

Bulleted lists

• Use bullets for unordered lists
• No special priority, sequence, or hierarchy

• Example: Who are the 5 best rappers of all time?
  • Dylan 1
    • Dylan 2
      • Dylan 3
        • Dylan 4, and
          • Dylan 5

Graphics

• Effective way to communicate with your audience
• Graphics should:
  • Depict and reinforce important concepts
  • Help the audience understand your concepts and maintain interest
  • Be relevant, high-quality, professional, consistent, and age appropriate
• Graphics should not:
  • Distract
  • Substitute for meaningful content

Dieter Rams’ 10 Principles of Good Design

Good design:

1. Is innovative – The possibilities for progression are not, by any means, exhausted. Technological development is always offering new opportunities for original designs. But imaginative design always develops in tandem with improving technology, and can never be an end in itself.
2. Makes a product useful – A product is bought to be used. It has to satisfy not only functional, but also psychological and aesthetic criteria. Good design emphasizes the usefulness of a product whilst disregarding anything that could detract from it.
3. Is aesthetic – The aesthetic quality of a product is integral to its usefulness because products are used every day and have an effect on people and their well-being. Only well-executed objects can be beautiful.
4. Makes a product understandable – It clarifies the product’s structure. Better still, it can make the product clearly express its function by making use of the user’s intuition. At best, it is self-explanatory.
5. Is unobtrusive – Products fulfilling a purpose are like tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained, to leave room for the user’s self-expression.
6. Is honest – It does not make a product appear more innovative, powerful or valuable than it really is. It does not attempt to manipulate the consumer with promises that cannot be kept.
7. Is long-lasting – It avoids being fashionable and therefore never appears antiquated. Unlike fashionable design, it lasts many years – even in today’s throwaway society.
8. Is thorough down to the last detail – Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect towards the consumer.
9. Is environmentally friendly – Design makes an important contribution to the preservation of the environment. It conserves resources and minimizes physical and visual pollution throughout the lifecycle of the product.
10. Is as little design as possible – Less, but better – because it concentrates on the essential aspects, and the products are not burdened with non-essentials. Back to purity, back to simplicity.