Internet Marketing - Matt Bailey [139]
Building Blocks
The next stage of wireframing is to use blocks to designate important areas of pages, such as text blocks (primary, secondary, related, footer, and so on), navigation areas, calls to action, and graphic elements. This stage develops the size of the page and the size of the elements from the initial layouts. This is where the first set of guidelines is established as the size of the blocked areas and the relationships between those block sizes are analyzed and measured to fit the screen width (see Figure 12-19).
Figure 12-19: Develop size relationships between elements.
Different block areas can be designated by different colors. This wireframe uses combinations of black and gray for text areas, green as action items, and blue as linked content or images. The primary purpose at this stage is the layout and size of the page elements and developing clear relationships between the elements in order to ensure that the message and purpose of the page is clear and that the calls to action are in place.
Iterations at this point consist of placement and size changes, and the beginnings of the labeling scheme can be developed at this point. Content is being developed behind the scenes, because the pages and structure have been defined, and the content can follow as the wireframes become more detailed.
Functional Layouts
Once the spatial relationships have been defined, the wireframes can move on to the final stages. Some prefer just to provide the layouts with specific function labels rather than put content in place, but the more clearly defined the wireframe, the more efficiently the development of the site will progress.
In this stage of wireframing, details are more developed. What follows is the development phase in which programmers implement function and artists apply graphics, color schemes, and layout. That isn’t to say that font sizes, color schemes, and white space can’t be defined in these stages; in fact, it may help the development as more detail work is applied and approved prior to the coding of the website.
If any special functions are necessary for navigational aids, visual cues, or other behaviors, these are noted in the functional layout specification. Scripts that will be necessary to expose text, tab-based navigation, or other functions on the page should be defined regarding how it will be developed and scripted and any specific language necessary for the function. By identifying these scripted tools on the website, any roadblocks to search crawlers or accessibility can be identified early and dealt with by change or adaptation.
A finished wireframe can provide enough detail that it can look and feel exactly like a website (see Figure 12-20). Many wireframes in the finished state can be easily coded into the live site, and the function and flow of the site can be witnessed and tested.
As mentioned, investing in this process saves both time and money. Defining layouts, functions, content paths, content arrangement, and flow are all handled in advance and can be agreed upon prior to developing a design and suffering through endless iterations. When goals are clearly defined and interpreted through the wireframes, the iteration process is limited because the business case has been made early, and all decisions are focused on the end result of conversions and profits.
Figure 12-20: Functional wireframe providing all necessary elements for the next stage of design
Review and Hands-On
Take a second look at your home page. Do you view it as a destination for your visitors or as a direction to the information contained on the website? Are visitors able to quickly see your business benefits and the available content in a fast,