The Tribune

By DEIDRE M. BASTIAN THIS IS a topic that pops up periodically, mainly because more web agencies are now incorporating a formal 'wire framing' process. Anyone who has ever built or designed a website will tell you that wire framing happens in some form or fashion, and is fairly casual, whether sketched on the back of a napkin or on a white board. Before exploring the elements and advantages of wire framing, let's pause for a minute to discuss precisely what wireframes are. Wireframes are simply a skeleton of the site you intend to build, and are used early in the development cycle to establish a basic structure of a web page. Short answer: It is a visual guide to illustrate what a Web page would look like without using any graphics or text. A web development project is much like the blueprint for a house, and illustrates the architecture of the site as well as detailing functional bits and pieces. Sure, you could build a house without a floor plan, but the extra few minutes you spend sketching out the details will save lots of time down the road. As a methodical person, I believe that by 'sketching' the layout you can forecast potential problems or issues, and resolve them before designing. We all have our individual version of 'reality', and critics may feel that technically wire frames may not be necessary. But, if we use the analogy of house floor plans, I believe it is pretty close to insanity to start without them. Benefits of Wire framing: While it is tempting to skip the wireframe step and proceed immediately to design, from a practical perspective the wireframes ensure the page content and functionality are positioned correctly, based on business needs, vision and scope. From a cost standpoint, bear in mind that design changes are inevitable. I've yet to see one that didn't involve multiple (and often extensive) revisions. Changes can escalate to thousands of dollars, which causes designers to almost become reluctant - due to time and costs involved - to address design issues. Furthermore, we are aware that one of the most essential factors in web design is "content find-ability". If users are becoming more web savvy and still cannot navigate to where they wish, you can guess what will happen. Yes, they will deviate to another site. With regard to software, if you haven't used "off-the-shelf" wire framing software such as Mockingbird, Expression Web, 'Axure' or 'Microsoft Visio', I suggest you do, as they are perfect for wire framing. Or, in its simplest form, paper and pencil wireframes still work beautifully. Subsequently, wireframes allow developers a test run to determine whether the overall navigational scheme is intuitive, incomprehensible or somewhere in between. Not only do they help the document flow, they greatly reduce errors in the CSS/layout. Wireframes do not contain finished design elements, but are normally produced in grayscale. Focusing on design hardly offers true results. The point to remember is that Wireframes are crucial internal documents that ensure we have thought through every moving piece. When site navigational issues come to light after designs are completed, it is similar to realising your ceilings are too low after the house has been built. Changes to navigation can run the gamut, but are prohibitively expensive to correct. I think this suggests one reason why many sophisticated websites with dazzling designs still deliver an overall inferior experience. I love how wireframes help to prevent a headache from an initial standpoint. Ironically, there is always this tendency to compromise effectiveness in an effort to contain costs and keep a project on schedule. Consider this: If you provide programmers with marching orders without the benefit of a wireframe, you're really asking them to complete a job with one hand tied behind their back. Once you've gotten your wireframe drawn, discuss it with the client without using unnecessary technical jargon. Designers have an obligation to offer clients a clear understanding of what is to be expected. Gently walk clients through using the blueprint/architect analogy with a similar level of detail, and don't forget to offer helpful feedbacks. Here is an excellent video on wire frame: Http://www.youtube.com/watch?v=vXLDqaH9vkE My premise is simply this. While Wireframe is evidently a great way to start, remember it is not a cure-all. Time constraints are what I believe is the key. Inevitably, Wireframe leads a client to rethink their approach on a more strategic level, and gives web developers a clear path that clarifies directions for better decision-making. Subsequently, even though it is so tempting to jump right into the actual design model, I don't see the wisdom in doing so before planning. So, until we meet again, fill your life with memories rather than regrets! Have fun and stay on top of your game. * NB: The columnist welcomes feedback at deedee2111@hotmail.com About the Columnist: Ms Bastian is a trained graphic designer who has qualifications of M.Sc., B.Sc., A.Sc. She has trained at institutions such as: Miami Lakes Technical Centre, Success Training College, College of the Bahamas, Nova Southeastern University, Learning Tree International, Langevine International and Synergy Bahamas.