Would you build a white picket fence around your beautiful new home without knowing the dimensions? Let me answer the question for you – “most likely, no”. You would never cut corners building a home. Having a sound structure that is functional and keeps your family safe is essential, right?
Think of your new website design and development as a new home. It is your most important communication vehicle and it needs to speak to your audience, tell your story in an interesting way and be user-friendly. There needs to be a structure and base in place before putting all the elements together into one cohesive website design.
Below are two steps in building a website that are essential to the design and development of a powerful, efficient and effective “home":
1. Sitemap
Think of a sitemap as your table of contents. It demonstrates, at a glance, your navigation and all the content that fall underneath that particular header, as well as illustrates how the entire website will flow. It also shows the global buttons or content that will appear on every page of your website.
For instance, if you plan to build a three-story home:
Basement – includes a bedroom, full bath, walk-in closet, washer/dryer and a storage unit.
Main Floor – includes a living room, kitchen, dinning room, ½ bath and a hall closet.
Top Floor – includes two bedrooms, two full baths and two walk-in closets.
This blueprint of the home tells the architect what he/she needs to plan for when designing the framework. A blueprint is to a home what a sitemap is to web design. Here is an example of what a sitemap might look like:
Benefits:
- Clear navigation and information that will be found in every section.
- Allows you to be proactive in developing content, where needed.
- Saves time when building the wireframe.
- Gives an overarching view of the website.
2. Wireframe
A wireframe is like the architecture or framework of a home - where things are going to fit within the house. A wireframe is a stripped down version of the site and includes no images or colors, etc. It simply lays the foundation for website design. It gives our creatives a direction on where things will be placed and how the design pages will be structured. It helps to define the positioning of global and secondary navigation levels, as well as providing an area for widgets and utlilities. It also established the language, content and structure of interactions visitors will have with the website.
There are many programs out there that help with this process, such as Mockingbird. These programs allow you to build an architecture that is clickable, which gives the client a visual sense of what navigating through the site feels like.
Benefits:
- Provides a foundation for website design.
- Website design should move quicker and more efficiently with an approved wireframe.
- Saves dollars and potential hiccups on the backend. Making changes or tweaks to a design because of the lack of a wireframe can be very costly for the client.
- The wireframe process involves team brainstorming which will create a better user experience.
- Allows the client to pay more attention to the structure without the distraction that images and colors may cause.
Simply do a cost-benefit analysis of a website designed and developed without a sitemap and wireframe versus a website designed and developed with both Happy to share real life examples!
Sitemaps and wireframes are common steps for agencies to take. It is our job to educate the client on why this is an essential step in the process. Moiré does a sitemap and wireframe for every website build because we know the benefits and we understand the importance. This is half the battle of being a good partner.
Let us know what your experiences are with these phases of website design and development.
