Design - Resources - Usability - UX Design

Tools for Creating Mockups, Sitemaps and Wireframes

Before you start thinking about the design of a website, the first step is to think about your content and how it should be organized. I could do a whole other blog post on how to organize content on a website, but in this post I will discuss some of the tools to help you think through the early stages of a website.

Let’s assume that you have your content strategy in place and you are proceeding with sketching up your site. I personally find this is my favorite part of working on a site! This initial phase will impact your design and final product so pay attention!

Before we get further into the article, let’s review some important terminology all web designers should know.


Information Architecture – the Information Architecture Institute defines (IA) as “The structural design of shared information environments and The art and science of organizing and labeling web sites, intranets, online communities and software to support usability and findability.” So basically, IA pertains to the way the content on your website is layed out.

For starting out on the IA of a site you can use good old pencil and paper or even Excel. Here’s an Excel example:

Excel Sitemap

Sample sitemap in Excel

Sitemaps – a sitemap is a map of the information architecture of your site.


Creating a sitemap in Slickplan, the different colors indicate different levels of navigation

Wireframes – a wireframe is essentially a visual layout or sketch of the information architecture of your site, including design elements (for example, search bar, buttons, menu)


Sample wireframe/mockup from the Moqups website

Prototypes – a prototype is similar to a wireframe, as it is the first draft/model of something, but it generally has more to do with larger systems and machines. The prototype then becomes the basis from which other programs/systems are developed. It can also encompass hardware and software.

iphone - prototype

Early iPhone prototypes

Some designers prefer to use Illustrator and Photoshop to create a nice sitemap and wireframe to share it with clients.  If you have great photoshop skills and find that this gets the job done for you quickly and efficiently then great!

But if you’re looking for a simpler interface and something different to work with, check out the options below. Most of these tools are not free, but they’re the best in the industry. There are many free alternatives out there if you’re on a budget.


For creating sitemaps/information architecture:
slickplan – slickplan helps you create color coded sitemaps and flowcharts (as seen in photo above).

Glify – Glify is for creating flowcharts, Org charts, diagrams,. You can use it for wireframing, but I found it’s not as user friendly as other tools.

For creating mockups, wireframes and prototypes:

Moqups - Moqups is very user-friendly. It’s simple and may not have as many bells and whistles as more powerful tools, like Axure, but it is fun to work with.

Balsamiq – Balsamiq is very intuitive and similar to Moqups, but with more options and features. It’s great for starting on the first draft of a website.

Axure – Axure is a powerful wireframing tool, in fact it’s so powerful it may not be for everyone. You can create an interactive HTML website without coding. I found that there’s a bit of a learning curve for this tool and it’s not as intuitive as some of the simpler ones (Balsamiq and Moqups, for example).

OmniGraffle – A powerful tool to sketch graphic documents and user interfaces.

Tools based on Bootstrap, such as Keynotopia, Jetstrap and LayoutIt.

What are some of the benefits of using these tools?

  • They confirm to the client that you’re on the right track and will deliver a product that is in line with their expectations and business goals.
  • You get honest, on-the-spot feedback (hopefully!) without investing too much time into development and design.
  • You get approval from the client for the structure of the site so you can start coding. Design elements are easier to change than programming, so narrow down the “skeleton” of your site.

No matter what software/tool you use to get your sitemap and wireframe completed, remember that taking this initial step is important in delivering the best website that is in line with your client’s expectations. Even if you’re on a budget, and use pencil and paper don’t skip the wireframing process, as this step helps you get a clear picture of the end result.

About the author

Patricia is the Founder of Upwards Content, a fledgling content creation/management business. If you like my articles, follow me on Twitter!

Share this post

1 Comment

  1. Another great tool is Lucidchart’s wireframe design tool. You can check it out at

Leave a Comment

Subscribe To Our Newsletter