Skip to main content

Meetup: A deep dive into site maps and wireframes

At our last Meetup we discussed the questions we ask in order to begin a web project. This month we’ll be discussing the steps we take to get to design. This involves everything from site maps, to copywriting, to wireframing and finally design.

So what is a sitemap?

A sitemap is a visual model of a website’s content typically organized in hierarchical fashion.

Why would you use a sitemap?

A sitemap helps you determine all the pages on your website before you spend time designing or developing the structure and helps guide copywriting, wireframes, overall usability and communication strategy. You can compare a sitemap to the outline you create before writing a research paper. It helps to plan your overall content structure.

Step 1: Research List all products, services, features, staff, documents, etc. that need to be present on the website.  Consider the existing sitemap and competitors’ sitemaps, if applicable, to compare content structures.  If you’re doing keyword research, do it before site-mapping. You’ll likely uncover a handful of keywords that may reveal new pages needed on the website.

Step 2: Execute The next step is to organize the “topics” that you’ve uncovered in order of importance. Be sure to list the website’s call to action as the most important in the list. You can then start arranging and rearranging these items into a hierarchy that seems the most logical.

Step 3: Testing Before you consider the sitemap complete, be sure to consult with colleagues, users, and customers to ensure there are no discrepancies on how the page structure is laid out.

Recommended sitemap toolSlickplan is a great tool for creating, customizing, and sharing sitemaps with clients and colleagues.

What is a Wireframe?

An image or set of images that displays the functional elements of a website or page, typically used for planning a site’s structure and functionality.

Why do you need to wireframe?

A wireframe will help determine the best way of representing the information you are trying to communicate on the website. Think of a wireframe like a blueprint to building a home.  By diagraming, you can best determine where elements of the home should go, before starting construction.

Where to begin?

When creating wireframes, you must consider how your web layouts will fall on varying screen sizes. We suggest starting with a flexible grid system. Designing to a grid will not only allow you to create an aesthetically balanced layout, but will also help guide mobile friendly layouts as you shift elements around for various resolutions.

This process is similar to building a puzzle. Your “puzzle pieces” are elements such as images, videos, headlines, copy, and navigation menus that need to be on your website. Determine which “pieces” are needed in the header, body and footer of your home page and internal landing pages, and start arranging! Similar to site-mapping, be sure your call to action is given top priority on all pages.

Here are a few tools you can use for wireframing tools:

Slides can be found below. If you have any questions, please leave a comment below or feel free to post in any of our online WordPress groups.

Upcoming events

 


Other resources

meetup-meetupmeetup-facebookmeetup-linkedinmeetup-google
About the Author

Ali Green

Co-Founder and Creative Director
Schooled in both design and marketing, Ali adds the analytical skills of an engineer to complicated digital marketing strategies.

View Ali's Profile

More from Our Blog

Case Studies: Telling Client Stories To Help Build Brand Awareness

Using stories of your existing clients and past projects gives your experience specificity. In marketing, we call these case studies—which is a boring name for...

Read More
white ruled book

Balancing the Creative and Technical Elements of a Website

There exists a tension between the creative and technical elements of a well-built website. While you always strive to create a beautiful website pleasing to…

Read More

Making the Most Out of Your Website’s About Page

While every website we build at GreenMellen is custom, there are a handful of pages that should be on all websites. This list includes a…

Read More
people sitting around a table with their computers