Define: Sketches, Sitemaps, Style Tiles, Wireframes, and Mockups

A rundown of common creative processes.

If you are ever involved in a creative project, you may have heard the terms “Sketches,” “Sitemap,” “Style Tile,” “Wireframes” and “Mockups.” But what do these mean and how are they different? In this blog we’ll go over the role of each and what you can expect to receive from your designer.

---

Whether you’re involved in a branding project, a website redesign, or an app and software development project, there is a lot that goes on behind the scenes—even for the creative side. The final outcome of your project happens only after the initial discovery, research and planning, ideation and development, and final refinements have been completed. But how did we get there?

Just because much of the creative process happens inside the mind of a creative professional doesn’t mean we don’t have visual pieces to reference. We have sketches, wireframes, style tiles, and mockups to chronicle each step in the creative evolution. Let’s take a look.

What is a Sitemap?

You may have heard the term “Sitemap” used to describe a simple listing out of all pages of a website. While this is essentially what a sitemap is, we take it a step further and use Xmind’s “Mind-Mapping” software to visually map out all pages, content, and global elements of a website or application. We can look at high-level navigation only, or drill down all the way into small blocks of content on each page.

THE BENEFIT OF USING SITEMAPS

Sometimes it’s hard to wrap your head around the entirety of a website or application’s content, especially if it is on a large scale. By mapping the sections out, we can be sure to account for all necessary pieces of information. Once we’ve got everything down, it is easy to review the structure and categorization of the content and make changes accordingly. This ensures that each section’s content is relevant and fits in with the rest of the content in that section. Sometimes we break larger sections down or combine smaller sections together. The idea is that we have balanced, relevant sections that are easy for a user to understand and navigate to. Having all pages of a website or application laid out visually in a sitemap is the easiest way to organize the content.

What are Sketches?

This one is pretty straightforward. In those first brainstorms inside the creative’s mind, sketching is a way to quickly get these ideas on paper. Sketches can happen anywhere—a traditional sketchbook, a napkin, a scrap of paper on a desk…anywhere! The goal is to get as many ideas out as possible. The more sketching happens, the more ideas present themselves. One sketch inspires another. It is truly a creative practice.

THE BENEFIT OF SKETCHING

The great part for creatives is that sketches are purposefully rough. Nothing is off limits and nothing is polished. This gives us the freedom to explore, be messy, have far-fetched ideas, and see where we land—without the expectation that these ideas are in any way refined.

Because of their sketchy state, sketches are almost never shown to the client. They serve as a visual cue to the designer who holds the vision of their final form in her or his mind. No one else truly understands what the rough scribbles will become. They are primarily there to serve as a starting point for the next step in the creative process.

What is a Style Tile?

While sketching has been practiced for as long as art and design have themselves, Style Tiles are a relatively recent practice for designers. Similar to a mood board, Style Tiles are a collection of visual elements to inform the direction of the design. While mood boards are typically used in branding projects to show a range of visual styles in a collage format, Style Tiles are specifically used for user interface design on websites, apps, or software.

What’s great about them is that instead of random pieces of visual information jumbled together to create a “mood,” Style Tiles are more concrete and direct. In a Style Tile, we typically pull together a color palette, typographic styles for headings and body text, button styles with various states, photo treatments, and other visual elements that will likely be included in the design. While together these elements don’t create an actual web or app design, they give enough visual information for a client to understand what the final look and feel will be.

THE BENEFIT OF PROVIDING STYLE TILES

Style Tiles are where most of the design direction takes place. In terms of efficiency, it is much faster to design a collection of elements that work well together and reflect the client’s brand than to create a full design comp. For this reason, we ask our clients for revisions and approval on the Style Tile before moving to a full design comp (a mockup of what the final design will look like). Once approved, the Stile Tile serves as a launchpad for the designer into the full design phase.

What is a Wireframe?

Usually occurring simultaneously with the Style Tile are Wireframes. Where Style Tiles focus purely on aesthetics, Wireframes are all about structure and workflow of the design. They are purposefully not meant to be pretty—they’re usually boxes, lines, and text blocks on a page—so that you focus on the layout alone.

THE BENEFIT OF WIREFRAMING

Wireframes are to user interfaces as sketches are to logo designs, only the client gets to review them. They are a quick glance at the overall layout of the page and give you a sense of hierarchy, spacing, and where the content will go. Wireframes are a way to make sure we account for all images, headlines, text areas, and calls to action in the design. It also gives us an idea of how a user will navigate the website or application, and how they will move from page to page. Because they can be made quickly, it is easier for our clients to request changes in this state than in a fully designed comp.

---

Wrapping Up

All of these steps in our design process are to help you, our client, be well-informed and involved every step of the way as we take your idea from conception to consumption. We hope this post helps you know what to expect on your next project with us. Like what you’ve seen? Contact us to get started on your new project.