Usability and Visual Design Principles

Usability

• Usability means designing something easy to use, regardless of user experience.
• Good visual design promotes usability by creating a clear visual hierarchy of contrast.
• Good visual design makes it easy to identify important information at a glance.

Visual Hierarchy

• The most important information should be the most prominent.
• Visually related elements should be grouped together.
• Elements that are "nested" visually should clearly show their hierarchy.

Tools for Creating Visual Hierarchy

• Contrast in typeface, type style, type spacing, color, whitespace, and placement can be used to create visual hierarchy.

Whitespace

• Whitespace, or empty space, helps users distinguish important areas and perceive the page's structure.
• Use whitespace effectively to guide the user's eye and improve readability.

Designing for Low Vision

• Web accessibility includes designing for people with low vision, color blindness, and deafness.
• People with low vision often use screen magnifiers like ZoomText and MAGic.
• To accommodate low vision users:
  • Use true text instead of text in graphics.
  • Maximize color contrast.
  • Use flexible width layout (percentages instead of pixels).
• The WAVE tool from WebAIM can be used to identify color contrast errors on websites.

Two Column Layout with Flex-Box and Media Queries

• Flex-Box allows flexible and responsive layout design.
• Use a parent container element with the display: flex; property.
• Media queries can be used to adjust the layout based on screen size.
  • Use @media screen and (max-width: 520px) to create a layout for screens narrower than 520 pixels, changing flex-direction to column if necessary.
  • Media queries are useful for changing font sizes, suppressing navigation for a hamburger menu, hiding search boxes, adjusting column layouts, and positioning widgets and sidebars.

Example of Media Queries

• Use @media screen to target screen devices.
• Use max-width to specify a maximum screen width.
• Use min-width to specify a minimum screen width.
• Media Queries can be used to create different layouts and changes to a website based on the device size.
• Sample media queries:
  • Font size changing: @media (min-width: 1024px) { h1 { font-size: 3em; } }
  • Hamburger menu appearance: @media (max-width: 768px) { .nav-toggle { display: block; } }
  • Column layout adjustments: @media (min-width: 768px) { .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
• Several of the things you can accomplish with @media queries:
  • Change font sizes.
  • Hide or display navigation (using hamburger menus).
  • Hide search boxes.
  • Reduce column count in layouts.
  • Force widgets and sidebars to be displayed beneath main content.

This quiz covers essential principles of usability and visual design, focusing on how to create an effective visual hierarchy. Learn about the importance of contrast, whitespace, and accessibility in web design for users with varying needs. Test your understanding of these crucial concepts to enhance your design skills.