Wednesday, February 3, 2010

{Point of View} Wireframes

"A website wireframe (also "web wire frame", "web wireframe", "web wireframing") is a basic visual guide used in web design to suggest the layout of fundamental elements in the interface." 

Wireframing is an indispensable step in the website design process. By planning with sitemaps and wireframes the designer can speak with clients and developers using a common, simple visual language. Once agreeing upon content and structure, presenting your designs becomes much easier as you've built upon agreed organizational methods. It aids in the design process by giving you a framework and scaffold on which to begin designing. There's no set ways and many tools for wireframing, I start with pencil sketches and then make Illustrator wireframes to present.

Read the concise Wikipedia entry on wireframes and create your own wireframes to plan how you will layout your essays. Approach each wireframe from a different structural perspective. Sketch them out first, then create Adobe Illustrator versions of the 3 you think are best. Create a simple understandable legend to codify areas, for example simple boxes to represent areas of content, color or gray scale coding of outlines or areas can help you differentiate content and define hierarchy.

Include the following:
  • authors
  • titles
  • text (do not put the actual text in, can be: white space/lines/bars/grey areas)
  • diagrams
  • other supplemental content (can be broken down by type, i.e. /bio/commentary/critique/points for/points against/photo/video)
  • buttons (if you foresee any hiding and revealing of content)


Check out some good wireframing methods here on this aptly named blog, Wireframes:


No comments:

Post a Comment