# data[].attributes.headline
Group #1 - Why Create Sitemaps and Wireframes Before Visual Design?

# data[].attributes.subject
Group #1 - Why Create Sitemaps and Wireframes Before Visual Design?

# data[].attributes.body
Save time and money -- if you fail to plan, you plan to fail. Don't build your house without a blueprint

Get better SEO and customer experiences

Planning helps to design user flow -- avoid wasting time designing something pretty that doesn't work

Avoiding duplication in site maps

Wireframes can help identify if you're missing something

Organized content is easier to navigate -- don't need a flea market experience here -- let people find things easier so they don't give up on you and go to some other website

# data[].attributes.body
Prioritize Content: What are the most important elements based on your research?

Begin: Sketch out a rough copy. it does not have to be perfect, it can be corrected and filled with the right information later.

Filler text: Try to avoid using dummy text instead of actual info if possible. If unavoidable, at least include an introduction before the dummy text to explain what the section will be.

Annotations: Make adjustments, notes, and overall go through your wireframe to make sure you're happy with it.

Share, Test, and Improve: Get feedback from others including coworkers and clients. Make adjustments based on that feedback. Rinse and repeat!

# data[].attributes.attachment_caption
Why Create Sitemaps and Wireframes Before the Visual Design? - Windmill Strategy

# data[].attributes.headline
Group #1 - Why Create Sitemaps and Wireframes Before Visual Design?

# data[].attributes.subject
Group #1 - Why Create Sitemaps and Wireframes Before Visual Design?

# data[].attributes.attachment_link.readable_text
Many marketing departments or web design companies jump into the visual design before planning out how the site will actually work. They rush to create a layout before considering how target users will interact with it. This is unwise. Designing an effective B2B website is a significant investment. Having to make changes after the fact can be more costly than doing some due diligence up front.

A well-designed website is a combination of what your best customers are looking for and the information they need to become leads. Part of the planning includes designing a relevant user flow and conversion for visitors in different stages of the buying cycle. With B2B buying cycles involving multiple decision-makers and spanning several months or more, it's critically important that each person on the buying committee easily finds the information they seek from your website experience, and that they come away with a positive impression of your company.

Without proper planning, you'll lack a well-thought-out plan for how visitors will use your site, what information they'll need, and your strategy for converting them into leads.

You Wouldn't Build a House Without a Blueprint

"Every minute you spend in planning saves 10 minutes in execution; this gives you a 1,000 percent return on energy!"
- Brian Tracy

Not having a plan for your b2b website before getting into the design is like not having a blueprint when building a house. Not only will it be a lot more work, but you'll also end up with a final product that's completely different from what you imagined.

By planning ahead for your website design, with the guidance of a website design company, your team will have the opportunity to think more deeply about the overall goals of the website, and gain consensus from your team of stakeholders before getting excited about visuals. Critically, planning ahead allows you to align the structure more closely with your digital marketing strategy. For example, it enables you to create a content strategy and navigational structure based that's informed by SEO and user needs, thoughtful CTA placement, and make other important decisions that will ultimately increase your ROI.

Many tools and resources are useful for planning your website design. We'll explain how to use two: the sitemap and the wireframe.

A Sitemap Is the Foundation of Your Website

A sitemap is a list of all the pages that will be on a site. Most sitemaps are arranged as a flowchart. Like laying a foundation for a house, a sitemap gives your team a base to build on. It lets the team decide how best to organize the sections and individual pages of the website. Without a sitemap, your site will be unorganized. It may also lack essential elements that would make it more useful to your customers.

Creating a sitemap before the design starts has several benefits.

1. A sitemap allows your team to prioritize what content and pages are most important. By visually presenting all of your site content to the team, it's easier to talk about how user flow matches with website goals. Take this opportunity to eliminate any clutter that might confuse or distract your customers. Clearly identifying your website's purpose will lead to a more effective site.

2. You avoid creating duplicate content. Duplicate content is a waste of time and resources, and a detractor for search engine optimization. Updating content located in multiple places across your site is a chore. Simplifying the site structure lightens the load for your entire team.

3. Carefully organized content makes your site more user-friendly. The most important element to consider when designing your site is the user. If your site isn't user-friendly, visitors won't stick around to fill out your contact form or make a purchase.

4. It makes your site more SEO friendly. While planning sitemaps aren't touted as an SEO tool, they do inform the eventual structure of the sitemap that Google will read from your website, and a cleaner structure can make it easier for Google to search and index your website. This helps web pages rank faster and can give you an SEO boost.

5. Planning all of the pages in the site as well as their structure, along with what layout or functionality elements they'll utilize, helps to keep a project on budget, by facilitating discussions and prioritization as needed.

If you're planning the design or redesign of your website with or without a professional web design company, you may be curious about what a sitemap looks like. Below is an example sitemap to get you started.

Wireframes show the construction of individual key pages

Wireframes are a way to visualize individual website pages at the structural level. They could be compared to framing a house since they help form your website. Wireframes give your team a preview of the content blocks, features, and functionality of each page. They start to hint at overall page layout but don't include design elements. This tool lets your team provide input and stay focused on structural elements before getting caught up in the excitement of the visual design phase.

Like sitemaps, creating wireframes has many benefits.

1. It predicts usability issues. Without getting caught up in color, style, or other design elements, your team can objectively evaluate each item on the page. For example, is the naming scheme logical? Is the layout intuitive? Does the position of different on-page elements make sense?

2. You save time and money. When you create a wireframe, you get valuable feedback before making a significant investment. This eliminates having to make last minute changes that could go over budget. Wireframes can also be made clickable to conduct easy user-tests.

3. Important features are easy to identify. Wireframes give you the chance to identify which pages are missing or have unnecessary features. This results in a clean and focused end product.

4. Content and form grow together harmoniously. Wireframes give you the ability to adjust your design to the content instead of trying to fit content in a premade design. This ensures that the content of every page is coherent and has a natural flow throughout the entire site. Wireframes are also a useful guide to content generation, if you're writing your own content.

It's easy to see that wireframes aren't just nice to have but they benefit your digital strategy in significant ways. Wireframes keep your strategy lean and focused, enable more collaboration between essential team members, and help you identify gaps and clutter early on.

Below is an example homepage wireframe. It shows you where content will reside on the page.

Turning Site Architecture and Planning Into Visual Design

At Windmill Strategy, we always start web design projects with a thorough site architecture and planning process. We don't begin visual design work until the sitemap and wireframes have been reviewed, discussed, modified, and approved by all parties. Our clients like the transparency and precision this provides throughout the project. Most importantly, they appreciate the clarity these steps bring to their digital strategy.

Don't start construction on your most important marketing investment without a plan from an experienced web design company. Sitemaps, wireframes, and other related planning strategies and tools are critical to ensuring that your site helps you reach your business goals.

# data[].attributes.attachment_link.title
Why Create Sitemaps and Wireframes Before the Visual Design? - Windmill Strategy

# data[].attributes.attachment_link.description
Many marketing departments or web design companies jump into the visual design before planning out how the site will actually work. They rush to create a layout before considering how target users will interact with it. This is unwise. Designing an effective B2B website is a significant investment.

# data[].attributes.headline
Group #3 - Using Sketching to Generate and Communicate Ideas

# data[].attributes.subject
Group #3 - Using Sketching to Generate and Communicate Ideas

# data[].attributes.body
Sketching allows design testing without commiting time to graphic design and detail.

-Sketching is fast. You dont need to be good at art for it

-Use a thick pen and lots of paper. Such as a fine sharpie for bigger sketches and a ball point pen for smaller

-Great for generating ideas quickly, gain feedback and visually test

-Communicate these ideas within a team

-Work on implications of design choices through user journey. Identify key descisons within of how to find something

-Sketching to generate wireframes. This article suggests doing a wireframe sketch on a whiteboard to erase mistakes easier

-Sketching can help with budget issues.

- Sketching can be done by more than one person, allowing individuals to compare and contrast, potentially building upon each others work or even resulting in a brand new sketch. The same idea can be applied by using external sketches (sketches done by other organizations) to inspire and help direct your own design and sketches.

# data[].attributes.headline
Group #2 - The Modern Web Design Process: Creating Sitemaps and Wireframes

# data[].attributes.subject
Group #2 - The Modern Web Design Process: Creating Sitemaps and Wireframes

# data[].attributes.body
A sitemap is a diagram of your sites hierarchy.

Two things must be considered:

1. The ability to capture needed information.

2. Ability to convey necessary information.

These two things will allow your audience to clearly understand the information presented to them.

Sitemap styles:

Lists: Decide what information is most to least prominent. This would be an inventory and overview of your hierarchy, but would not display navigation.

Horizontal diagrams: This is a Birds Eye view of your sites connections, but is limited in details about individual pages.

Vertical diagrams: This is better designed for user flow, as you would read it left to right, but is simply a horizontal diagram flipped to its side. It is very singular in information.

Wireframes: this is the bones of your webpage, but not the website as a whole.

It focuses on the relation of content within a page, and space dedicated to each required item.

It is subject to many changes throughout its process, as you may find some content is restricted by size and available space, which would reduce its functionality.

Testing fitting pre-prepared content into the wireframe may highlight areas for change, before launching the complete page.

Notes: search engines optimization should be prepared prior to setting out a wireframe, as you will need to prioritize keywords that a user would be looking for within the page structure.

# data[].attributes.attachment_link.readable_text
Setting out on a project with only a vague idea of its organization will only complicate the process. Once you know the goals and scope of a project, it's time to create a sitemap and a wireframe. These will give you a guide to your website's organization and a targeted outline for creating content.

Start with a sitemap

Hillary Pitts' web design sitemap example breaks down an ecommerce site into its most basic building blocks.

Have you ever looked out of an airplane window and seen the outline of a brand-new subdivision taking shape below? It's kind of like a sitemap: a footprint signaling where structures need to be built, as seen from 30,000 feet.

A sitemap provides a diagram of the site's hierarchy and shows where each page fits into this hierarchy.

(Note: in this post, we're discussing the sitemap as a website planning and communication tool, not the literal XML sitemap you'll create to aid search engine spiders in crawling your site - though the planning tool should essentially define what that XML sitemap will contain.)

As you're building out your hierarchy, it's vital that you continually reference your project's goals. That's because the site's hierarchy needs to reflect and contribute to the fulfillment of that goal.

For example, if you're building an ecommerce site, one of your goals will undoubtedly be to sell products. Thus, your sitemap should place product indices and pages at or near the top of the hierarchy, so visitors can immediately see where they need to go to fulfill your goal and theirs: buying stuff.

Creating your sitemap

You can approach the design of your sitemap in several different ways. You'll want to choose your method based on two qualities:

1. Ability to capture the information you need to capture

2. Ability to convey the information you need to convey

In other words, it needs to be capable of conveying the info you want to convey in a manner that's clear to your audience.

For example, here are 3 common ways of creating a sitemap, along with the information each is best at conveying:

1. The list

The list format is a simple ordered or unordered list that uses nesting to convey hierarchy. Here's an example based on part of the core Webflow site:

Index

- Designer

- CMS

- Editor

- Hosting

This is great for communicating page topics and relative hierarchy. You can immediately see that the pages for the Designer, CMS, Editor, Hosting, and Customers all receive the same level of prominence, with specific customer stories coming in one level lower.

What it's not so good at communicating is user paths between those pages. There's no indication, for instance, that Designer, CMS, Editor, and Hosting all appear under a dropdown labeled Features in the site's main navigation. Or that each of those pages are linked to from the site's homepage.

That makes a list format handy for, say, a page inventory, but you wouldn't want to hand it to a client and say, "This is how people will navigate around the site."

2. Horizontal diagram

Hillary Pitts' sitemap (at the top of this section) is a horizontal diagram, probably the most familiar form of sitemap out there.

Like the list, it captures a high-level view of the site. Unlike the list format, it more clearly indicates paths between pages/experiences, as you can see in the checkout flow that runs across the center of the map.

That makes it a far better tool for communicating the hierarchy and how people will navigate the site to clients and other non-technical folks. Though it works beautifully for the technically inclined too!

It's worth noting that, as Pitts' site is an ecommerce store, it doesn't provide a comprehensive inventory of site pages. There could be one or one thousand different product pages - it doesn't matter for this map, as product pages will almost certainly be handled via dynamic templates, and the flow from product index to product detail is unlikely to vary from product to product. However, if there are product types that require distinct content models, you'd want to note those.

3. Vertical diagram

The vertical diagram is basically just a horizontal diagram tipped over on its side. Because the left-to-right flow connotes progress (in cultures where reading flows left to right), vertical diagrams are most useful for mapping a more contained experience, such as a specific user flow, or the structure of a more specific area of the site.

The purchase flow section of Pitts' horizontal diagram would be a good candidate for a vertical diagram (and in fact, kind of is a vertical diagram, embedded in the horizontal one).

Running into trouble with your sitemap? Try a card sort!

If you and your client have clearly defined your project's goals, there's a good chance that building your sitemap will come pretty naturally. But on larger projects, and those with detailed content, you might need to break out a tried and true tool: the card sort.

To run a card sort, just gather yourself, your client, and any other stakeholders together (in person or digitally). Then write down all your page names on index cards and collaboratively sort them into categories that make sense for you all. Once that's done, create a sitemap based on the sorted cards and (ideally) run it by a few members of your target audience to make sure it makes sense to them too.

Once you've nailed down the sitemap, you can dig into your wireframes, where this outline becomes far more specific and detailed.

Sitemap tools

Any design tool that boasts boxes, arrows, and text editing capabilities can help you get the job done when mindmapping. But it helps (a lot) to use a tool that has those boxes and arrows as pre-existing elements (often called stencils).

Here's a few tools that come with sitemap elements preloaded:

Why you need to wireframe

If a sitemap provides the blueprint for your whole website, a wireframe represents the blueprint for a single page (or group of pages). It's what you'd see if you could take your sitemap, then zoom in on and enhance a single page in that high-level map.

Like the sitemap, a wireframe captures hierarchy. But this time, that hierarchy is limited to a single page, and thus defines the relative importance of content as it flows down the page.

Similar to prototypes, wireframes can come in a variety of levels of fidelity. Some wireframes basically are the final design, complete with the final fonts and sizing, sample photos, and even production-ready copy. Others are much more schematic, sticking with a collection of monochrome boxes and blobs where content will one day appear.

Because of that wide range of fidelities, it's important to clearly explain to your stakeholders just how final-final your wireframe is.

‍Derek Clark created this wireframe, which shows only the basic elements of a page layout, but still communicates so much of how the final design will look and function.

Take a moment to review this wireframe from a content perspective. It actually has a lot of implications that will either need to be turned into content standards, or revised with content standards in mind!

For example:

The large headline type means articles won't be able to have more than 6 or 7 words

Article teasers can be comparatively long, which could help mitigate the above limit

Every article will need to highlight an image

Slider headlines will need to be extremely short due to the type size

There's a "country switcher" in the top right, which could imply a need for translating site content. That can have significant design impact, as a 6 or 7 word title in German is likely to be much longer than one written in English.

And that's just for starters.
Related reads: 10 best wireframe tools for designers

‍Virgil Pana's simple hand-drawn wireframes capture the essence of the final design.

Give stakeholders just enough to get the right idea

Don't mistake a wireframe for a prototype. Wireframes provide a schematic representation, with graphics and content (usually) stripped away, showing the basic structure. Prototypes, on the other hand, should present a working version of the final site (although level of fidelity can, again, range widely).

Wireframes allow stakeholders to see how individual pages within a website will flow and function. And since nothing in a wireframe has been set down in code, stakeholders have the freedom to request drastic changes before you even start designing.

Wireframes communicate the structure of a website in a visual way that everyone can understand. Something like a state change can be complex to describe to someone unfamiliar with design, but a wireframe can clarify that with a simple visual or two.

One thing that needs to be made clear before you show anyone your wireframes is what exactly the represent.

It should be obvious to any viewer that these wireframes don't represent how the end product is going to look and function. Keep things simple and clear so that everyone can visualize what the project is going to entail. Simple grayscale shapes should do the trick.

If in doubt, annotate

Because your wireframe is a schematic of a web page, you'll probably want to include any extra notes/annotations that can bring clarity to the experience.

‍An animated GIF compiling a few wireframes created by Chris Bannister.

Look at the wireframes below. As a designer, you no doubt immediately recognized the grey circle and four dashes as a logo and navigation links. But most clients wouldn't know what they're looking at without the "Navigation" callout!

Personally, I like to label wireframe sections in the wireframe, as long as I can come up with a clear, simple name. I've just seen too many stakeholders misunderstand a section's purpose, and have that misunderstanding skew their feedback, to skimp on this simple addition.

Sitemaps and wireframes help you get a head start on content

What came first: the chicken or the egg? Who cares - what matters is the yolk. A design is like the shell that holds the content together.

No matter how great a design looks, it won't make up for the fact that its contents may be rotten.

How do wireframes help? By showing us what content we need, and roughly how much space to devote to each section. Wireframes should thus flow directly from your site's content strategy, showing the hierarchy of content on each page and how each page fits into the overall strategy. When writers are working from such a map, reaching their goals becomes that much easier.

That's not to say that you need to start with the homepage. In fact, many believe that your homepage should be the last thing you create.

So where else do you start? With the content that matters most - i.e., that which contributes most to your project's core goals.

Does this website hope to boost online sales? Then you'll need to make sure each product gets a well-written, on-brand description, plus all the specs a potential buyer would want to know. Which goes a long way toward structuring the CMS fields you'll need for your products Collection!

Is your site part of a bigger rebranding? Make sure you know how your project fits into the rebranding, and that you have all the assets you need to communicate this new company identity.

You don't have to do all of the writing at once. Instead, focus on making sure your UI is understandable at a glance, if only in terms of what will go there.

For example, you can just have a few headlines to orient people to page content, then fill out the rest with placeholder fonts like BLOKK or the Flow typeface. Make sure that each section is labelled to show where content will go so that a client doesn't get distracted by the filler content.

‍The raw materials of content affect how a page will look and be navigated. Image by Flickr user PerzonSEO.

Content shapes design

Content encompasses everything of substance on a website. Whether it's a video explaining a product, animations showing how an app works, or the about page for a nonprofit, each element is there to communicate a message or tell a story. You don't need to have all of this content on hand before you make your design, but it certainly does help.

We've already discussed how a wireframe can shape content. But this can also work in the other direction. Once again, you don't have to have all of this content completed. But if you have an outline of everything you want to include, you can create a sitemap and wireframe based on that outline.

Even knowing the types of content the website will require will help you come up with a sitemap and wireframe. This content does not to be fleshed out, but knowing that there needs to be a blog, a contact page for customers seeking quotes, and a page about the company's history will help you figure out how everything needs to be structured. A sitemap breaks a website down to its most basic components and a wireframe gives more detail of what each page will contain.

But if you do have fleshed-out content ready, bring that content into your wireframes to see how it fits. If the content on hand exceeds the dedicated space, you may need to further divide it. You can then add this additional page to the wireframe and tweak the content organization. This is way easier on a designer than doing it after the fact.

Know your SEO

Search engine optimization shouldn't be an afterthought. So before you sit down to start sitemapping and wireframing, arm yourself with a list of the keywords a client wants to target, and shape the structure and organization of the website and its content accordingly.

The wireframing stage can be a great place to start your SEO work because you can do it without all the distractions that come from fully developed content. Without all those words on the page, you can focus on key SEO elements like headlines, meta tags, and navigational elements. These SEO-ified wireframes can then serve as a great outline for the creators of the final content.

When you put in the work beforehand, the process gets easier

A sitemap and wireframes lay the foundation to build a website on. When you've prepared and put thought into the site goals, architecture, and UX it makes for a purpose-driven process. When the path to success has been cleared of obstructions, it makes for a quicker journey.

# data[].attributes.attachment_link.title
The modern web design process: creating sitemaps and wireframes | Webflow Blog

# data[].attributes.attachment_link.description
Setting out on a project with only a vague idea of its organization will only complicate the process. Once you know the goals and scope of a project, it's time to create a sitemap and a wireframe. These will give you a guide to your website's organization and a targeted outline for creating content.

# data[].attributes.attachment_link.description
Having trouble? Sign in with username@saskpolytech.ca, review our password guidelines, reset your password or submit a ticket to Tech Services.

# data[].attributes.body
Wireframes are a Diagram that represent the framework of a website/app.

A Wireframe will not cover every single screen, especially for digital products, but will showcase key templates.

Wireframes can vary depending on use, but they still help allow testing on design ideas by laying out the frames. They usually only help with structure of the website/app though and possible design aspects.

Can be described as prototypes.