Visual communication at the core of UI Design

1. Color
   • Use no more than five colors in a single layout. Color should be used sparingly to highlight important information
2. Typography
   • All fonts should be legible and appropriate for the communication style
3. Layout
   • Present content in a way that guides readers through in a logical hierarchy.
   • Aligning the elements in a layout with each other will help maintain consistency.
4. Callouts
   • Use callouts sparingly to hight only key information
5. Space
   • keep significant negative space. When too much information is in a layout, messaging becomes cluttered and incoherent.
6. Illustration
   • illustration should match tone and subject matter. Only include if it enhances the content.
7. Iconography
   • icons should be simple, easy to understand and universal; they're meant to enhance comprehension, never distract.
8. Data
   • don't overwhelm the reader with multiple graphs of single data points when one combine will suffice
9. Proportion
   • the eye can be deceiving; make sure items are appropriately sized in data visualizations so as not to skew data.
10. Simplicity
    • avoid unnecessary design, including 3D charts, ornamental illustration or extraneous elements.

UI vs. UX

UI focuses on:

• visual design
• colors
• graphic design
• layouts
• typography

UX focuses on:

• interactive design
• wireframes & prototypes
• information architect
• user research
• scenarios

Colors

Components of Colors

• Hue - Position of the colour in the spectrum,
• Saturation - Purity of the colour
• Value - Amount of light intensity. Measure of how bright a colour is.

Color design guidelines

• Draw attention or highlight items.
  • helps in searching tasks
  • helps in promoting elements for sale
• Communicative organization and relationship
  • which items go together
• indicate state
  • which elements are ready

Use colors sparingly:

• colors can be distracting if not used properly
• if used for information association (coding), then provide a legend

Use of themes

Use a limited number of colors:

• use 2-4 colours for normal application
• assign a color to a meaning (consistently)
• idea promoted by the use of themes

Consider the background/foreground relationships

• foreground and background should contrast in hue, saturation and brightness

• helps focus on clarity not based on colours

• remember that some people are colour blind

Typography and Fonts

Typography refers to the different types of composition and printing, process using various embossed characters and shapes, as well as the art of using different types of characters for aesthetic and practical purposes.

Fonts have moods.

Purpose

What we can express using different fonts:

• mood (happy, serious, old-fashioned, etc)
• importance
• organization of material
  • typed input vs instructions vs headings

Guidelines

• limit the number of fonts and styles in any screen to 2 or 3
• give a consistent meaning to each font and size
• avoid fancy fonts for informative content
• avoid tiny fonts/ ensure proper text size is used
• ensure text is legible across platforms