Wireframe prototyping get feature’s where you want them quickly.
To Create a Wireframe Prototype is one of the first steps any web designer must take when using rapid prototyping methods. Figuring where the features of a site will go on each page in the main objective. Good homepage designs attempt to deliver a summary of all that a site has to offer in a visually appealing fashion.
But before the graphical “look” of a site takes form it is most important to figure where everything should go. The provided example of a wireframe for the homepage of the site is just a sketch on graph paper. Alright techies I didn’t do it on paper, I drew it out on my iPad using a stylus and the app iDraw.
I used to draw all these out on paper but the iPad saves me time on scanning. Either way the idea is to keep things as a rough sketch so as not focus too much on the form. The goal of these wireframes is function. How do we put together the features in a logical fashion that will be easily scanned by the user. On the homepage it is very important to think about chunking up content. Chunking is a term used for the technical breakdown of information into its most important hierarchies and making the most out of the smallest amount of space.
In the first illustration the wireframe shows the “Call to action” feature broken down into 3 parts. This represents the heirarchical breakdown of an advertising message.
C. Action statment
The second illustration shows how the placement of each feature was determined based on level of importance. The primary navigation, Logo, and WordMark are placed last; not because they are unimportant but because behavior of website users conducted over years of eye track and heat map usability testing shows that users are more attracted to the larger calls to action and although being very aware of the brand logo and the primary navigation, are less likely to use them as a first interaction unless that have already visited the site before.