The next phase of web design we will focus on is wireframing. Wireframing is a quick, efficient way to design your website without spending lots of time in Photoshop (or Illustrator, or whatever you use.) The reason for wireframing is basically to let you explore certain design directions to see if they will flow, allowing visitors to be able to find the content they will be looking for. There is no sense in making full Photoshop comps of your site until you know it will work like it should. Wireframing will save you all of that valuable time. After all, your client is paying you for your time. Don't waste their money!Wireframing should NOT be a detailed rendering of your website. Ideally, you will not use graphics of any kind. A true wireframe is simply a grid to check your usability, therefore no graphics are needed (or wanted.) Blank boxes are used as placeholders for graphics or photographs.
In early stages of wireframing, you may even want to greek your text. "Greeking" text refers to inserting unreadable or nonsensical text in your design, simply as a placeholder. Your computer's software may include "Lorem ipsum" text that can be used for greeking, to save you the time and trouble of filling in the text areas. As your wireframes develop, you may want to include your actual text to refine your design and test the spacing you will be working with.
I want you to read chapter 3 of the Web Style Guide online (first link - top right) very carefully. Wireframing is covered on page 4, but I want you to read (and study - there might be a QUIZ) then entire chapter. It is full of great ways to make your website more friendly and functional to your site's visitors.
Smashing Magazine has a list of 35 excellent wireframing resources.
You can also check out several cool YouTube videos on wireframing here:
You can make wireframes using pencil and papers (as long as they are neat!) but there are also several websites that offer the use of FREE wireframing tools. Anyone serious about the profession of web design and development should check them out:
So, get your wireframes going and next class we'll talk about PAPER PROTOTYPING!
HOMEWORK:
• Read chapter 3 of the Web Style Guide (study for QUIZ)
• Read/watch all the links I've included in this post
• Make a sample wireframe for any SINGLE PAGE on imdb.com using their existing navigation. Just focus on redesigning and recreating the site in a WIREFRAME.
• Read and start working on How to Build Your First Website
No comments:
Post a Comment