Visual Design

3. Prototype

In this step, use the following best practices for visual design of your application.

Requirements: Laptop/Desktop, Adobe Photoshop, Illustrator


  • Use Real or True text: True text is easy to enlarge in browsers and users with low vision can read the text which loosing the image quality. True texts are easy to translate. Screen readers will not read the text if the text is image and alternative text is not provided.
  • Careful about the line height (leading): Line spacing (leading) should be at least space-and-a-half within paragraphs. Paragraph spacing should be at least 1.5 times larger than the line spacing. There should be enough space between two lines which is easy for people with low vision and cognitive and learning impairments.
  • Use legible font size: It should not be less than 10 pts.
  • Avoid cursive & handwriting fonts: Cursive and handwriting fonts are not legible for users of old age and vision impairments.
  • Avoid extreme thick & thin line weights: People with cognitive and learning impairments don’t easily understand the text if the line weights are extremely thick and thin.

 Paragraph Styles

  • Keep line width shorter: Line width should not be more than 80 characters. Shorter lines are always easy to understand.
  • Keep left aligned text: Left aligned text is easier to read.
  • Full justification should be avoided.


  • Don’t be only color dependent: Use alternative text for the color in color selection pages. This will be helpful to find out correct color for the users with color blindness.
  • Use enough color contrast: Color contrast  should be enough to separate foreground and background.
  • Use Web Aim Color Picker: To check the level of contrast compliance:
  • Use different color: Underlined the links and use different color from the text.
  • Check colors for impairments option: Check the colors for impairments options In photoshop & illustrator to check how people with visual impairments see the colors.
  • Provide clear clues/indication  for error suggestion: Try to use red color for the error with a indication by selecting the text box with red outline.

Icons and Symbols

  • Use alternative text with icons: Icons and symbols are not always easy to understand. It is helpful to add the text with icon and symbol so that users with cognitive and learning impairments can easily understand.
  • Use common visual symbols: Common visual symbols for separating hyperlinks like (>, >>, /) are easier to read for users using assistive technology.