Wireframes as Blueprints: Build a Solid Foundation for Your Skyscrap…Website
A common misconception about wireframes is that they are simply just for designers to lay out the components of the site and organize the content. In my experience, however, the wireframes are just as important to the developer and the writer as they are to the designer.
Look at a website like a skyscraper. The pages are the various floors. The navigation is the elevator. All of the site’s functionality (jquery, php, etc.) are the utilities. In this metaphor, the humble wireframe becomes the mighty blueprint. This slight change in perspective helps to drive your whole project, keeping your team unified in vision and goals.
When building your wireframes, include everyone on your team—content writers and developers can provide valuable insights that help to avoid problems in the production phase. A writer can help you organize the flow and organization of the content, as well as allocate space for specific content (floorplan, leases, and room assignments). Developers can help you add functionality to the wireframe and have valuable insight on user experience and user interface development (hardware, HVAC, utility access, and building materials).
Have you heard the phrase, “the devil is in the details?” Well, this is especially true during the wireframing stage of your site. Be sure to use exact pixel measurements and label everything as specifically as possible. This allows the developer to see the core structural version of the site in order to build the structure without having to sift through detailed design layers that correspond (in our skyscraper) to non-structural/non-functional considerations like carpet patterns, paint swatches, and window treatments. Believe or not, this extra bit of up-front work will save you time as a designer as well when you go to skin the site (interior design and landscaping). Including notes on functionality like slides, rollovers and dropdowns (fountains, fixtures, etc.), is also a great help to the developer and will give your client a very clear picture of how their user will interact with the site.
Creating a detailed and meticulously constructed wireframe will ensure that your website project starts off on the right foot with a solid foundation. In order to expedite the process and yield consistent results, you may want to build a wireframe template with guides, measurements, columns and default elements that you will commonly reuse.
Here is a download of the wireframe template we use for all of our sites a goBRANDgo! Feel free to update it and add to as you see fit. Enjoy, and happy blueprinting…er…wireframing!
How have you used wireframes to ensure success with your projects? What are your best practices for building great blueprints? Let me know in the comments. I’d love to hear from you.