UX Movement » Wireframes http://uxmovement.com User Experience Movement Sun, 14 Jan 2018 02:59:05 +0000 en-US hourly 1 http://wordpress.org/?v=4.2.18 How to Communicate Visual Hierarchy on Wireframeshttp://uxmovement.com/wireframes/how-to-communicate-visual-hierarchy-on-wireframes/ http://uxmovement.com/wireframes/how-to-communicate-visual-hierarchy-on-wireframes/#comments Tue, 15 Mar 2016 14:44:45 +0000 http://uxmovement.com/?p=9163

The use of color is one of the best ways to communicate visual hierarchy on a design. But on a wireframe, it’s one of the worst. Many designers think they need to use color on a wireframe to communicate hierarchy. If you’re using color to display visual weight, your final design could lose its clarity.

Color Obscures Hierarchical Clarity

It’s easy to see the weight of a colored element on a wireframe because everything else is black and white. But there’s no way to know if that element will have the same clarity when you translate that wireframe to a mockup.

This is because a mockup will have many other colors that compete with it. Any colored element on your wireframe will no longer appear as clear. The visual weight you gave it lessens when other page elements also have color.


Another danger of using color is that many designers end up relying on it as the primary way to show visual hierarchy. It’s easy to make elements stand out with color on a wireframe. But how clear is your visual hierarchy without it?

Color becomes a crutch for clarity when designers neglect other hierarchical attributes. Don’t use color to compensate for a lack of design. Your design should have a clear hierarchy without it.

Using color isn’t always effective because many sites have color blind users. Your design needs to include other attributes to make the weight of elements clear to all users.

Other Attributes of Visual Hierarchy

Adding color to your wireframe makes it hard to gauge how strong your visual hierarchy is. This is because color overshadows other hierarchical attributes. When you avoid color, you allow those attributes to stand out. The visual weight of color gets lost on a mockup, but these attributes stay intact.


Not every element should have the same size. The bigger an element is the more attention it’ll draw. For size to work, an element needs to look bigger relative to the other elements around it.



You may have content on a page you want to highlight. You’re not limited to only color and size. You can also use shape. Placing a box around the content or sectioning it off with a line shows that area is important.



Users scan pages in a particular pattern. There are page areas that will get more attention than others. You can place important content in those high attention areas. Above the fold and along the top and left-hand sides are where the user’s eyes fixate on the most.


Inverse Coloring

Color obscures hierarchical clarity, but inverse coloring can add to it. Most wireframes use dark colors on a light background. This is because most sites often use a neutral background color.

But when you inverse the colors, you’re applying a light color on a dark background. This is an effective way to communicate color without suggesting a specific color.


Suggesting a specific color will make viewers wonder how that color will affect the rest of the design. That’s not what you want on a wireframe. You want them to focus on the structure and layout.

You should use inverse coloring on interface elements that need a strong color fill. Buttons, menus, and notifications often need this visual clarity because users interact with them. But don’t over do it. You’ll lose hierarchy if every element is light on dark.

Wireframing Toolkit

There are tools that can help you communicate visual hierarchy on your wireframes easier. This wireframing toolkit, Wireframe Patterns, is built for visual clarity. Each UI pattern is designed with proper visual weight without using color.

A Visual Hierarchy Without Color

If your visual hierarchy isn’t clear without color, your design doesn’t use enough attributes. It’s not only possible to communicate visual hierarchy without color, it’s necessary.

Doing so allows you to gauge the clarity of your structure and layout. A wireframe that isn’t clear without color is a wireframe that lacks a strong hierarchy. Adding color won’t fix it, a better design will.

http://uxmovement.com/wireframes/how-to-communicate-visual-hierarchy-on-wireframes/feed/ 1
Site Flows vs. User Flows: When to Use Whichhttp://uxmovement.com/wireframes/site-flows-vs-user-flows-when-to-use-which/ http://uxmovement.com/wireframes/site-flows-vs-user-flows-when-to-use-which/#comments Wed, 29 Jul 2015 16:28:29 +0000 http://uxmovement.com/?p=8376

Designing the user experience of a website involves more than figuring out what goes on each page. It’s also about figuring out how those pages flow together. If you don’t plan your page flow, you could run into problems when you start to design.

You could:

  • Forget to design certain pages of a site process
  • Forget to design call-to-actions that link certain pages together
  • Not know where certain pages belong in the site hierarchy
  • Not know which pages should link to each other
  • Not know which pages users should navigate to complete a task

If you’ve ever experienced any of these problems, you should have made a site or user flow. Doing so can help you tackle and avoid these problems down the line. But to use them, you first have to understand how they’re different.

A Site Flow and User Flow are Not the Same

Many designers confuse a site flow with a user flow and vice versa. Both illustrate page flow, but at different levels and for different purposes.

A site flow is like looking at a map of the territory. The map shows you a bird’s eye-view of everything, and gives you a general direction of where you can go. This high level view allows you to feel the size and complexity of a site.


A user flow is like looking at directions from point A to point B. You can see which routes to take, where to turn and the miles it takes to get there. These specifics help you get to your destination with efficiency. This low level view allows you to feel how much time and effort it takes to complete a task.


When to Use a Site Flow

Before you start wireframing, it’s important to know what pages will go on the site. After that, you need to know which pages should link to each other. This allows you to design call-to-actions that lead users through the right page flow.


Site flows also give you a clear picture of the navigational hierarchy. You get a glimpse of the breadth and depth of navigation. If a navigational path gets too deep, you can streamline it. If the navigation gets too broad, you can merge relevant pages. All this helps you design a simpler navigation experience.


Other members of your team can also benefit from site flows. Developers often need to know which pages link to each other when they add code. Having a site flow to guide them prevents wrong or missing links.

It’s also an effective way to let developers know what microinteractions go on a page. Microinteractions often involve heavier coding and functionality. This allows them to plan ahead and find ways to meet those needs.


When to Use a User Flow

Not every task is a straightforward path. Some will have twists and turns. These type of page flows are more complex and need hashing out. User flows are perfect for analyzing the efficiency of these tasks.

For example, resetting a forgotten password involves more than clicking through pages. Users have to acknowledge feedback, type in a form field and check their email. A user flow allows you to examine every aspect of the task, so that you can make it quicker and easier.


User flows also help developers understand how the system interacts with user behavior. The system needs to respond to the user when they make errors and do actions. Developers can view all the details and specifics of an interaction on a user flow.

A Toolkit for Faster Flow Creation

You shouldn’t spend a bulk of your time creating flows. They’re supposed to help you get started with design, not keep you from starting.

That’s why you need a toolkit like Flow Patterns. It has a variety of pre-designed flow pages for you to arrange and customize. It comes with microinteractions, markers and callouts to help you create flows faster.

Flows Are for Everyone

Flows aren’t just for designers to look at. They’re a way to share the site vision with everyone on your team. When everyone has a map, they’ll feel more comfortable about where they’re going.

Users will benefit from flows as well. They’ll get a better navigation and page flow experience because you took the time to plan it out.

A site and user flow can influence the user experience at an architectural level. When you make them a necessary part of your design process, everyone benefits.

http://uxmovement.com/wireframes/site-flows-vs-user-flows-when-to-use-which/feed/ 5
Why the Best Wireframe Style Is No Stylehttp://uxmovement.com/wireframes/why-the-best-wireframe-style-is-no-style/ http://uxmovement.com/wireframes/why-the-best-wireframe-style-is-no-style/#comments Tue, 21 Apr 2015 13:40:11 +0000 http://uxmovement.com/?p=7900

What tool would you use to hit a nail in? Only a hammer comes to mind. This is because a hammer’s form meets that specific function. It’s form matching function gives it its utility and value.


A wireframe is only useful and valuable if its form matches its function as well. But many wireframes today don’t follow this principle. As a result, they can end up hurting how others view the future direction of the design. No designer wants to harm their team or project. But if your wireframes don’t have the right form, you could.

The Wireframe’s Function

In order for your wireframe to have the right form, you have to understand its function. The wireframe is a document that’s completed before graphics and coding ever occur. But they can’t occur until you define and arrange the elements for each page.


A wireframe’s function is to display necessary page elements in an orderly arrangement. The UX designer defines this arrangement through user research, best practices and stakeholder goals. It’s then vetted through stakeholders to gain consensus before moving to graphics and coding.

Why Visual Clarity Is Important

Since you have to share your wireframes to gain consensus, visual clarity is of utmost importance. Stakeholders need to be able to see the structure and strategy for the website without getting distracted by how each element will look in the final design. A wireframe should allow them to examine:

  • what elements should be on the page
  • why they should be there
  • where you should place them
  • how they should function

When you put different shades and colors on your wireframes, viewers get hung up about how each element will look. Even if you tell them the style isn’t permanent, they still can’t avoid it because it’s a natural reaction to what they see. You want them to think about style in the graphics stage, not wireframing.


Important questions about site structure and strategy need to get answered first. Wireframe styles make this harder to do. Colors, shapes, fonts and images cloud the vision you’re trying to communicate. This can lead to your team making wrong decisions that could have a lasting impact on the site.

Wireframe Styles That Reduce Visual Clarity

Dysfunctional wireframes exist when designers let their personal style get in the way. Sometimes they add style to sell their wireframes to stakeholders better. Other times it’s done out of vanity.

Whatever the reason, style over substance has no place in wireframes, when substance is what makes a wireframe. Here are some wireframe styles that reduce visual clarity to avoid.

Colored Wireframes

The big difference between a wireframe and a mockup is color. When you put color in your wireframes, you mix its function with that of a graphic mockup. The mockup’s function is to communicate branding and style, not the wireframe’s. Mixing the two reduces the wireframe’s visual clarity, making structure and strategy harder to define.


Grayscale Wireframes

Grayscale wireframes used to be the conventional style. But the various shades of gray distract from the wireframe’s function. This leaves viewers wondering why certain elements are lighter and darker gray than others. It draws too much focus on individual elements and not enough on how the user experience works as a whole.


When you’re using gray on gray, you have to use different shades to make elements more distinguishable. This gives you more work to do. If you’re spending time getting the shading right, you’re taking time away from developing the site’s structure.

Grayscale wireframes also make elements hard to see and read. This can cause confusion and eyestrain when viewing. You don’t want your team to experience this every time they view your wireframes after each iteration.

Block Wireframes

A structure is useless if it can’t fit the content. It’s important to know early if your content will fit within the structure you’re designing. Block wireframing makes this hard to see by replacing text with blocks.

Text length and height can affect the size of buttons, menus, headings, paragraphs and other fixed areas. Viewers can’t get an accurate picture of how users will read the site if they can’t see how the text fits in the UI. Nor can they get an accurate measurement of element or margin sizes.


Monochrome is as Clear as it Gets

The best wireframe style is no style. The result of no style is monochrome – one color against white. This is the clearest form of wireframing that matches its function.

When viewers look at a monochrome wireframe, all they see is structure. There aren’t any colors or shades on particular elements that fight for their attention. Instead, everything is equal weight so you can focus on the whole user experience. This forces viewers to debate the arrangement of elements, rather than how they will look.


Another benefit to monochrome is that you don’t have to worry about making shades of gray or color tones look good together. You’re only working with one color, so when you wireframe you’re concentrating on the structure, not how it looks. This keeps you focused, saves you time and helps you make iterations faster.


The monochrome color you use should have a high enough contrast against white that it’s easy on the eyes. Gray on white tends to make elements look faint and dull. Black on white tends to have a heavy contrast that can strain the eyes. The perfect balance for a clear and pleasing look is dark blue-gray on white. It’s not only easy on the eyes from afar, but also up close when examining detail.

Monochrome Wireframing Toolkit

Wireframing in no style isn’t easy if you haven’t done it before. Wireframe Patterns is a monochrome toolkit that will help you get started. You’ll find many desktop and mobile libraries each with an array of complete UI patterns.

view-toolkitFinal Thoughts

A dysfunctional wireframe can break a team apart if people can’t see eye-to-eye on a site’s vision. A functional wireframe can bring people together if everyone is clear on a common vision. You need visual clarity on your wireframes for this to happen.

Don’t allow your personal style, preference or vanity get in the way of a document that everyone shares. The goal of a wireframe is to get consensus on the user experience. Make it easier on yourself and your team by adopting a wireframe form that matches its function.

http://uxmovement.com/wireframes/why-the-best-wireframe-style-is-no-style/feed/ 18
3 Best Vector Wireframing Tools for Designershttp://uxmovement.com/wireframes/3-best-vector-wireframing-tools-for-designers/ http://uxmovement.com/wireframes/3-best-vector-wireframing-tools-for-designers/#comments Tue, 17 Jun 2014 14:56:58 +0000 http://uxmovement.com/?p=6903

What’s the best tool for wireframing? This is a common question among designers. It’s hard to answer because each designer has different needs. What makes it harder is that there are too many tools to choose from. Understanding your workflow is the first step in finding the best tool that works for you.

Vector is a Must Because Design is an Iterative Process

Design is an iterative process that needs constant tweaking and fine-tuning. Vector tools allow you to make changes to your design at a fast speed with minimal effort. Just by clicking on an element you can resize or restyle it. You can even make changes to more than one object at the same time.

Raster tools (e.g. Photoshop) don’t give you as much efficiency. Making changes to an object takes many clicks and you can only do it one-by-one. Revisions happen often in wireframing. That’s why it’s important to use a vector tool, so that you can revise your wireframes on the fly.

Vector is a Must for Pixel-Perfection

Vector tools allow you to scale and zoom in on your graphics without losing pixel quality. Doing this with a raster tool will give you pixelated bitmap images. The blurriness will make it hard to view your designs the way you intended.

Raster tools don’t allow you to export your graphics in vector format. This means they’ll only look crisp in certain resolutions. If you enlarge a bitmap image, it’ll look blurry because it doesn’t have enough pixels. But if you enlarge a vector image, it’ll stay crisp and clear at any resolution.

Top 3 Tools for Wireframe-Only Designers

Are you a wireframe-only designer, or do you also design visual mockups? If all you do is wireframe, you don’t need a tool that’s heavy in graphical editing. A basic web-based wireframing tool should suit your needs.

These tools won’t let you create stunning graphics, but they’re enough to make wireframes. What sets these tools apart are their smart guides, pattern libraries, grids and pages feature.

1. Moqups

2. GoMockingbird

3. Wireframe.cc

Top 3 Tools for the Complete Designer

A basic web-based wireframing tool isn’t enough for the complete designer. Complete designers who design both wireframes and visual mockups need a tool more advanced. These tools allow them to add dynamic color, typography, gradients and shadows to objects.

Not only that, but they offer more wireframing features that web-based tools don’t have. These include custom symbols, layer styles, export slices and precise pixel alignment. When it comes to creating wireframes and visual mockups, these tools are a cut above the rest.

1. Sketch

2. Omnigraffle

3. Illustrator

Final Thoughts

A tool can’t help you make better design decisions. The purpose of wireframing is to find the best order, structure and layout for your content. That comes from wireframing in an iterative process. Vector tools help you do that faster and easier. Designers may have different needs, but one thing they all need in a tool is for it to support their workflow. The best tool is the one that supports yours.

http://uxmovement.com/wireframes/3-best-vector-wireframing-tools-for-designers/feed/ 8
Why It’s Important to Sketch Before You Wireframehttp://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/ http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/#comments Mon, 27 Aug 2012 14:48:12 +0000 http://uxmovement.com/?p=5718

Have you ever had an idea for a website or application? It’s easy to come up with the idea, but the hard part is understanding how that idea will take shape in user interface form. This is where sketching is useful. Sketching happens in many professions that involve creativity and construction.

Even Leonardo Da Vinci had to sketch out his inventions before he started to build them. No matter how smart you are, It’s impossible to go from a simple idea in your head to immediately building it out without hashing out the details in between. Sketching out your idea before you build it is necessary for every designer to do.

Every Idea Needs User Interface Translation

Designing the user interface is a process. It all begins with an idea, but that idea needs user interface translation. It’s not enough to say, “I want an app that does X, Y and Z”. You need to know what the user will see on each screen of your app to do X, Y and Z.

Sketching takes your imaginative mind from the clouds to the user interface screen where you can start thinking about the user experience. You’ll be able to figure out how your app will work to get the desired result. Sketching allows you to visualize the screen-to-screen interaction so that your idea is something that’s visible and clear in user interface form.

A Sketch is Not a Wireframe

Many designers mistakenly think a sketch is a wireframe. They are similar but they are not the same thing. Both are useful for illustrating an interface concept, but a wireframe and a sketch are done in different mediums and produce different results.

When you sketch, you are trying to get a basic concept of how the app will work in user interface form. There are many ways you could craft an interface concept. But here you are trying to figure out what those ways are and which way works best. There is a lot of quick and dirty thinking that happens from pen to paper. The specifics of the user interface aren’t important here. What matters most is understanding what the user will see on each screen that will lead them to the desired result.

When you wireframe, you are trying to refine the concept of how the app will work using pixelated grayscale widgets. The medium you’re working in forces you to think in higher detail, where sizing, placement and order of elements are all figured out.

You’re also forced to think more thoroughly about all the elements on the page from top to bottom, not just the basics. When you work in pixels, you can get more precise about how the user interface will work. As you finish wireframing, the interface concept should look more clear and refined.

Sketching Always Comes Before Wireframing

Many designers have different processes for how they work. Some might skip sketching and jump straight to wireframes. Some might skip wireframing and jump straight to mockups. But when you skip one or the either, you lose a lot of conceptual detail and refinement. The interface suffers because it enters into a stage prematurely and isn’t thoroughly refined.

What happens is you either end up creating the basic concept of the interface during the wireframing stage, or you end up refining the concept during the mockup stage. This is counter-productive because sketching is where concepting is best done. Wireframing is where refining the concept is done. And mockups is where the visual graphics and content placement is done.

When you skip the sketching and wireframing stage, you end up thinking about too many things during a stage. This not only makes it hard on the designer, but it takes a lot away from the interface because the concept doesn’t get the full attention it needs to develop.

Sketching Helps You Brainstorm Ideas with Clients

One of the biggest advantages to sketching is that it allows you to express your ideas quickly and involve others in creating the user experience. Whether you’re sketching on a whiteboard or paper, it’s important that your clients and team members understand the basic concept of the user experience so that they can provide you with the necessary content.

It’s also important to include any feedback or ideas they have in your sketches so that they can see how it’ll look. You could even ask clients to sketch their ideas out. This puts everyone on the same page so that the team can move forward with togetherness and mutual understanding.

Sketching Makes You Think and Work Faster

Wireframing from scratch with no basic concept is hard because you can’t push pixels on software as fast as you can draw them on paper. When you’re concepting the interface, you’ll think about all the ways you can craft the user experience. There are a lot of ideas that could pop into your head that you won’t be able to illustrate on a pixel canvas as fast due to the lack of flexibility.

Sketching lets you explore different options quickly so that you can figure out the best design direction. Getting a basic concept of the user interface through sketching will make the wireframing process faster and easier.

Sketching Makes Your Wireframes More Detailed

Wireframing with a sketched out concept means you don’t have to figure out as much on your wireframes. When you’ve done the sketching already, you don’t have to brainstorm all the various design directions you could go.

This leads to a more detailed wireframe because you’re spending more time refining the sketched out concept you already have. The more detailed and refined your wireframes are, the easier it’ll be when you get to the visual mockups stage.

Sketches Can Look Bad and Still Work Wonderfully

You don’t need to have the skills of Leonardo Da Vinci to sketch. A sketch can look bad and still work wonderfully. What matters isn’t your artistic ability, but your ability to explain different interface concepts.

Sketches offer others a peek into your thinking. When you get new ideas, it’s easy to show them on your sketches. Unlike mockups, sketches don’t need to look pretty. You don’t need to have any technical design skill to do them. This makes collaborating with clients and team members a breeze.

A Tool for Better Sketching

Most designers sketch on a whiteboard or blank sheet of paper. But the problem with this is that there aren’t device imprints for them to sketch on. This leads designers to forget about certain device dimensions and limitations. Another problem with sketching on a blank canvas is that it’s hard to draw straight lines without a grid to guide you.

Wireframe Sheets are printable sketch sheets with device-sized imprints that solve these problems. They include imprints for iPhone, iPad, desktop browser and iOS icons.

The Power of Sketching

Sketching sets the tone for the rest of the design process. It’s key in crafting the user experience and communicating it to others. You may think you don’t need to sketch because you already know how you want the interface to look. But when you actually start sketching, you’ll realize that the path that you were so set on might not work the best. Sketching allows you to entertain all the possibilities of what your interface could become. Where you go from there is completely up to you.

http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/feed/ 23