wireframes

Working with HD Wireframes

Working with text

How text is written on a website determines how successful the website will be. Well written text will build trust, educate, sell products, and get viewers to return.

Best practices when adding text to a wireframe

  • Select a sans-serif typeface or another typeface that is designed for readability for body copy
  • Use white space well
  • Break up paragraphs and get to the point
  • Do not use different colors for the body text
  • Create hover-over effects for hyperlinks and have the links a different color from the rest of the text
  • Always double check spelling and grammar
  • Cite any references and resources used
  • Link additional information to other parts of the website (a great practice for web presence and search ability)
  • Give viewers the ability to save and share the content
  • Write content that is easy to skim & scan
  • Know the audience
  • Engage the viewer

Working with color

Hi-definition wireframes show the client what their website will look like as a final product. Providing the client with a Hi-definition wireframe vs. a low-fidelity wireframe can make a world of difference impression-wise with the client. It can also save you time by showing the client how the colors, images, media components, etc. they wanted will work together as a finished piece.

Best practices when adding Hi-definition Wireframes

  • Determine what color palette your client wants to use
  • Make sure the color palette compliments the images you are using
  • The first showing of the wireframe should be with the low fidelity wireframe
  • When presenting the hi-definition wireframe explain to your client this is only a visual representation – no code has been done yet
  • Keep the focus on the flow of the website – do not let the visual reference distract the client

Selecting colors

To help you select colors please review these different color scheme websites:

Picking complementary colors is critical as a designer. This website helps you select the correct complementary colors.

Maybe you would like to pick colors for your wireframe from photos you found? This website allows you to upload a photo and provides you with a color scheme to use!