Webdev:Design Gotchas: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
(Created page with '* Variable content ** Different languages have longer or short text lengths, this affects height and width of elements ** Content changes over time, design should be flexible eno...')
 
No edit summary
Line 1: Line 1:
== Overview ==
Many designs given to webdev are missing certain elements or have common layout issues that affect buildout. Below is a list of them.
== Common Design Issues ==
* Variable content
* Variable content
** Different languages have longer or short text lengths, this affects height and width of elements
** Different languages have longer or short text lengths, this affects height and width of elements

Revision as of 20:28, 9 April 2009

Overview

Many designs given to webdev are missing certain elements or have common layout issues that affect buildout. Below is a list of them.


Common Design Issues

  • Variable content
    • Different languages have longer or short text lengths, this affects height and width of elements
    • Content changes over time, design should be flexible enough to handle changes
    • Form field labels can't be next to form fields
  • Error states and messaging
    • Every form needs to have error styling and messaging for error conditions
  • Interaction states/flows
    • Many UI elements have hover/up/down states that need to be designed
  • Link colors, underlines
  • Color palette
  • Base font sizes and styling for headers, links, lists, bold, etc.