A LINE A.png

WHAT IS A SITE MAP?

A LINE A.png
 

A sitemap is a blueprint for your website. It displays the relationships between your site’s pages and its content elements.  It is also a resource that we can refer back to throughout the project. Here's an example >>

 
emd-website-flowcharts-example-01-.jpg

EXAMPLE OF
A SITE MAP

 
A LINE A.png
 

WHY A SITEMAP IS AN
IMPORTANT FIRST STEP FOR YOUR WEBSITE DESIGN PROJECT

 
A LINE A.png

• 1 •

PUTS EVERYONE ON THE SAME PAGE

A web design project involves the participation of many different people, specifically the client and the website designer. By outlining a solid, agreed-upon plan at the beginning of a project, the entire process tends to flow better.

• 2 •

ESTABLISHES THE SITE’S GOALS AND PURPOSE

Once a sitemap is created, the pieces of a website are more easily plugged into place and will provide a seamless website experience for visitors.

 

• 3 •

PREVENTS CREATION OF DUPLICATE CONTENT

If you map out a sitemap beforehand, you will be able to avoid redundancy by determining early on where all your content should be located. This will show you the best opportunities to convert site visitors to buyers.

• 4 •

SETS UP A CLEAR CONVERSION FUNNEL PATH

If you want to generate leads with digital marketing, you must have a clear conversion path. i.e. get those site visitors to you so you can close the deal. To achieve the best results, this process should start in the sitemap phase. Then, you can make sure your visitors are properly directed from your calls-to-action on each web page.

 
1 pink odc.jpg
 
 
A LINE A.png

What is a wireframe? 

A LINE A.png

Wireframes are simple black and white layouts that are used to show the site map flow.  They essentially outline the specific size and placement of page elements, site features, conversion areas and navigation for your website.

We often say that they are much like a blue print to a home, where you can easily see the structural placement of your plumbing, electrical and other structural elements without any interior design treatments. Here are several examples >>

 
 
ODC WIREFRAMES EXAMPLE.jpg
 
A LINE A.png
 

WHY WIREFRAMES ARE
IMPORTANT TO THE WEBSITE DESIGN & BUILD PROCESS

 
A LINE A.png
 

• 1 •

WIREFRAMES DISPLAY SITE ARCHITECTURE, VIRTUALLY
 

Taking the sitemap to wireframe starts the first real concrete visual process for a project. Wireframes turn the abstract nature of a flow chart into something real and tangible.

Also wireframes allows for everyone to look objectively at a website’s ease of use, conversion paths, naming of links, navigation placement and feature placement.

• 2 •

WIREFRAMES ALLOW FOR CLARIFICATION OF SITE FEATURES
 

Wireframing specific project features on a website provides a clear communication to a client how these features will function, where they will live on the specific page and how useful they might actually be. For example, we will suggest functions such as “hero image,” “CTA,” “product filtering,” “light boxes”, "image carousel", and tons of other types of features.

 

• 3 •

WIREFRAMES PUSH USABILITY TO THE FOREFRONT

 

This is the one of the most important points of the entire wireframing process. Creating wireframes pushes usability to the forefront in showcasing page layouts at their core. Remember that, while your website is a portfolio of sorts, it is a vehicle to you so you can book that new client! :)

• 4 •

WIREFRAMES HELP MAKE THE DESIGN PROCESS ITERATIVE

 

Instead of trying to combine the functionality/layout and creative/branding aspects of the website in one step, wireframes ensure that these elements are taken in one at a time. This allows you to provide feedback earlier in the process.

•5•

WIREFRAMES SAVE TIME ON THE ENTIRE PROJECT

 

Wireframing saves time in a multitude of ways. We will make sure that the design flow is thoughtful and considered, there is a universal understanding of the flow/goals. Again, it allows us to be on the same page!

 

•6•

EXPERIENCE SHOW THAT
IT WORKS


Building a website is a process. Wireframing is one of those parts of the web process that should not be skipped, just as you wouldn’t build a house without a blueprint, or live in it without decoration. Each step has an important place in a larger process.

 
d.png
1 pink odc.jpg