Wireframes are an essential stage in building a website. The wireframe is a large part of the blueprint for the site whether it is hand-drawn or in digital format. It should give a clear understanding of what elements are on each page, where they should be displayed and why–to achieve the most cohesive balance and overall structure. As we always say, building a custom website is like building a custom house–you wouldn’t want to pick out your dining room wallpaper before you even decide if there will be a dining room!

Creating framework for a site always saves time and money. Why spend all the time to design a layout, when the message of that layout hasn’t been defined? Spending a few days to create a wireframe and test it as a prototype guarantees that a redesigned site will not create more problems versus fixing the ones already present. It will also allow time for the purposes and goals of a new site to be worked out and  should create user expectations and helps to develop an awareness of and familiarity with the site. In other words:

Great wireframes = great UI design.

Instead of getting caught up on colors and pictures, which can cause emotional responses that aren’t useful for deciding the overall mood of the site, the wireframe allows for the navigational structure  and layout (which should be intuitive) to take focus.

Wireframes force site designers and client to use simple shapes and lines to work out the flow and interaction for the user–a crucial step to ensure the user can easily move throughout the site to be shown what you want them to see and let them get where they need to go. The second a user gets frustrated with the site, they leave. The most common reason being frustration–poor user interface design.

When creating wireframes, the designer should not feel the need to be abstract or different. Most common elements that have been used on sites for years, such as top and side navigation, bread crumb trailing, headers and footers are very useful tools. A user knows and understands how these elements work and they expect them in an easy to use site. The creativity to mix these common elements with some innovative ideas is the key to a great wireframe design and a successful site.

Website beta launch: EOS Health

The Challenge: Make the user interface easy to navigate by condensing the variety of services, programs and target audience in a most logical way.

The Work: Information Architecture / User-Interface Design / Web Development (ActionScript, ASP.NET framework)

What’s Cool: Member account area /  Community area / Quick & Easy sign-up via Flash / Easy to navigate e-commerce section

Website beta launch: Tristan Clopet

Tristan Clopet.com

The Challenge: Give this rising star’s personal website the look and feel that his fan’s expect with all the elements that will make him the center of attention.

The Work: User Interface Design / Web Development (CMS) / Javascript Coding

What’s Cool: YouTube & iTunes integration / News & Events update via a custom content management system.

Website launch: Liquid Trading

Liquid Trading.co.uk

The Challenge: Create a web interface with a high-end look and feel that appeals to the international trader while retaining the necessary functionality that makes the website a great resource.

The Work: User Interface Design / Web Development (ActionScript)

What’s Cool: Flash intro, homepage map feature, easy login for members.

Website beta launch: Wet Nose Guide

The Challenge: Create a directory that truly served the needs of a dog owner looking for services in a nearby area.

The Work (in progress): Website Design / Web Development (custom content management system, php framework)

What’s Cool: Search by location feature integrated with Google Maps / Ability for business to add themselves and get reviewed.

Website beta launch: Sports Bistro

Sports Bistro.com

The Challenge: Create a clean interface that allows for both in-depth information and e-commerce functionality.

The Work: Information Architecture / User Interface Design / Web development (PHP framework)

What’s Cool: An easy to navigate left navigational menu / A homepage that gives immediate information on what purpose the website serves / User account information and E-commerce functionality controlled via custom content mangement system.

“Specifications Document.” “Information Architecture.” What they mean and why your website quote isn’t complete without them

So you’ve called a few website companies and they may have told you it’s necessary to complete a specifications document, information architecture, research or discovery phase, but what exactly is that, and why is it necessary before giving a quote for the work?

Would you start building a house before drafting a blue print?

Where would the windows go, how many bed rooms would you have, how high are the ceilings? Similar questions need to be answered before starting an e-commerce or Web 2.0 website. The website company should walk you through a number of questions, much like an architect would, in order to draw up a blueprint for your website. Everything from the number of pages, how your users log in, whether user comments need admin approval, the purchase process, etc. For the majority of websites, this process should take a professional company about 40-50 hours and produce a document of 20-30 pages. It’s a back and forth, collaborative process with about 8-10 hours of feedback required from the client, but no technical knowledge on their part.

What should you expect?

Depending on the size of your website project, you might get 15-20 pages, or over 300. Either way, it should include the following:

• Detailed sitemap of main pages and subpages
• List of all front-end and back-end features and how each works
• Exactly how many hours each feature is going to take to design and develop
• How the user makes a purchase and how the admin collects, if the site is e-commerce
• How comments, rating, or other interactive features work, for sites with Web 2.0 tools
• Wireframes for homepage and a few other main pages to determine layout and structure

Wireframes are not the design of the website; they're basic black and white sketches of the layout

What does this document mean for my site?

Now that the site has been appropriately planned out, you and the website company know exactly how many hours the website will take to complete. The company can now give you the most accurate quote for the work. The document is so detailed you could hand it to a web developer you’ve never met and they would be able to complete the project with almost no questions asked. With everything on paper, it’s also much easier to decide which features are essential to the launch of the site, and which features you may want to put on hold for a Phase II.

When can we actually start the website?

Now the fun part starts, picking colors, images and nailing down the look and feel of the website to lay on top of the wire frames already completed. For a professional website company the rest of the website is easy to complete because everything has been detailed out for all the members of the website team from the designers to the developers. It’s now a streamlined process to getting your website up and running. Most websites from this point take about 6-10 weeks to complete the site. While the website is finishing the development phase it’s now time to give the online marketing team a call to figure out the best steps to help users find your website. The website is built to convert users into leads, members and repeat traffic; now it’s time to start driving qualified users to the site through online marketing tactics like Search Engine Optimization (SEO).

Any large website needs careful planning and information architecture before development begins, and that means creating a specifications document. A successful website deployment depends on this document just as the house you live in began on paper as architectural blueprints. However, many web developers either don’t realize this, or don’t know how to create a spec doc. If you suffer from the latter affliction, here is a handy guide to our habitual process, as well as some helpful hints.

Planning

Before you begin on a spec doc, it is necessary to learn as much as possible about the client’s vision and goals. This can include a questionnaire with thoughtful questions that are formulated to provide relevant insight, an in-depth study of the client’s current website and the sites of any competitors, and a good old-fashioned brainstorming session with the client and other members of the design and development team.

Structure

A spec doc can be as short as 15-20 pages (say, for an ecommerce site selling only two or three different products) to over 300 pages (for a large ecommerce or news site), and anywhere in between.
However, they usually stick to the same basic structure:

• Purpose of the document
• Description of the project
• Front-end functionality
  • Common features
  • Sitemap and website structure
  • Description of every website page
  • Wireframes (home page and at least 2 other important pages)
  • Miscellaneous functionality
• Back-end functionality
• User cases
• Conclusion

Spec Doc Deliverables

After it is approved by both client and project manager, a well-crafted spec doc should allow designers and developers to move forward with a project, while avoiding any surprises for the client down the line. It should give precise estimates of the time it will take to complete the project, which helps to control the scope of work and to keep costs from rising during development. If the project is complicated, this document might use as a basis for further more detailed specification documents.

7 Tips for a successful specifications document:

1. The time spent on the spec doc should be proportional to the budget. Find out how much time is allocated to the spec doc and how detailed it should be. 15-30 hours are enough for brief document (15 pages and 3-4 wireframes), while a more detailed document takes no less than 50 hours. If the project has only 400 hours allocated, it makes no sense to spend 100 hours writing the specs.

2. Before you going into detailed specifications, always spend some time thinking about the new website, drawing its structure, and drafting wireframes for the most important pages. Start working on the specs only when you are more or less sure how website should work.

3. For wireframes, start with the home page. It usually includes links to all important sections of the website, so if the wireframe of the home page is ready, it will be much easier to work on other sections.

4. Understand in detail how all sections of the old website work, if you are working on the redesign of an existing site. If old sections are cut or left out, the corresponding or replacement sections on the new site should be noted. (This is also important when redirecting old URLs that may be linked to from outside sources.)

5. Do not leave empty sections “to be decided later”. Make sure that the spec document covers all website sections.  If anything is not clear, come up with the questions for the client.

6. Make sure that all functionality described in the spec doc is feasible.

7. Avoid possible misunderstandings. Most clients won’t have knowledge of HTML, JavaScript, etc., but you should still be able to make this document clear for him as well.