Part 3: Advanced Tips & Tricks

Wireframing Guide

Wireframing best-practices

Regardless of the the type of wireframe you’re designing or product you’re creating, there are a few guiding principles that apply to all wireframes.

Start broad

If you get caught up in the details of individual parts of your creation before you’ve outlined your basic structure, you’ll end up with some really nice details and a poorly functioning product.

Your wireframe elements should start out as mostly boxes and text. Make sure you’re thinking about things like navigation, information hierarchy, and storytelling before you even start thinking about interactivity or visual treatments.

Optimize navigation

If there was a primary goal of wireframing it would be defining your navigation. Guiding your user from point A to point B to anywhere else you want them to go, with minimal effort, is the backbone of a successful product.

The more your user has to think about where to go, the more likely they are to fall off the path you’ve tried to build for them.

Consider your user’s journey through each page and the product as a whole, asking yourself when and where they might need or expect certain information to be available.

Minimize or exclude colors

The point of a wireframe is to look at structure. Colors distract your audience and will only encourage unnecessary feedback and questions from your team or client.

At least for your first iteration, avoid color.

Use real copy

Boxes are fine for visual placeholders, but you should use real copy (and avoid lorem ipsum) when possible.

Visuals are easy to set rough dimensions for, but text is a little different. If you create a design around lorem ipsum, chances are your final copy won’t conform to your design. Consequently, you’ll have to waste time drastically changing your layout to accommodate all the information you end up needing to display.

Your copy can still be a rough draft, but you should have some idea of the nature and amount of text you’re going to be working with.

Real copy also makes user testing far more useful.

Be consistent

Just because your wireframes might look simple, doesn’t mean they have to look sloppy.

Use consistent typography, spacing, line widths, buttons, etc., so as not to distract from the structure and functionality you’re trying to convey.

Experiment

When it comes to experimenting, wireframes are the design phase with the least risk. Now is your chance to try out wildly different navigation options, layouts, and text without huge repercussions to the rest of the project.

Try out new ideas or iterate on old ones you’ve found success with in the past. Don’t get attached to any one idea before letting your creativity fully explore all potentials.

Consider the code cost

After you’ve let your creativity run wild, you’ll need to revisit the world of practicality. The reality is every element of your wireframe will eventually need to be coded.

Ask yourself: Is your design feasible given your time and budget constraints?

You will likely have to pair down some of your design to fit the parameters of your project.

Don’t get attached

User testing is an integral part of the wireframing process, and it will result in swift design changes.

Again, this is a reason not to get too detail oriented too quickly because you could end up wasting a lot of time on elements that immediately get scrapped.

Your goal is to create a “minimum viable design” to test with users. The details come later.

Give your designs context

Because wireframes are so visually simplistic, presenting them can sometimes be underwhelming to your audience. Remember that the importance of your work isn’t how it looks but the story it tells and how effectively it tells it.

When presenting to stakeholders, make sure you explain your design decisions, narrate the experience it creates for the user, and show your work. Keep your early sketches, user flow notes, and other experiments, so you have evidence of all the work that went into each design decision.

Before you start designing

There are many things to consider before you start the design process to ensure your wireframes suit the needs of your business or client.

Talk to stakeholders

No matter what you’re creating, understanding the requirements of your design is imperative to success. No one will care how awesome your creation is if it doesn’t fulfill the needs and goals of the stakeholders.

Hold a formal meeting with all stakeholders to pin down the goal of the project and any expectations they have about functionality, what they want the user to do, specific features, etc.

The more you understand their terms for success, the better your resulting project will be.

Some other things you may want to discuss with stakeholders include:

  • Device support (desktop, mobile, tablet, etc.)
  • Operating system support (Android, iOS, Windows, etc.)
  • Features by device (are feature consistent across devices or do they get paired down?)
  • Design scaling (fixed, fluid, adaptive, or responsive)
  • Any important elements that need to be on a page (login areas, search boxes, logos, payment boxes, etc)

Remember: responsive and adaptive layouts need multiple sets of screens. Let your project managers know it will require extra time depending on how many sets you need to create.

Get team consensus

Once you understand the requirements of the stakeholders, you’ll want to consult your team of developers and visual designers about how to approach the project.

Some things you may want to discuss with your team include:
Default screen size (what devices are you designing for, and what screen sizes are your users actually using?)
Breaking points (at what size or orientation does your design or feature set change?)

Getting consensus from your team early on will prevent disagreement later when it’s time for them to get to work.

Get frequent feedback

Don’t be afraid of feedback. The more feedback you can get from your team along the way, the better your designs will be by the time they’re ready for stakeholders to review and for users to try.

Not only will your team’s feedback help you spot things you may have missed, but they will challenge you to articulate your design decisions. You’ll become a better UX Designer because you’ll understand more people’s perspectives and have sound evidence for why you’re creating the way you are.

The most important thing to remember about feedback is that it’s never personal. Every piece of feedback should be welcome, whether you decide to use it to adapt your designs or not. Learning to hear feedback and use it in a positive way is an important skill in any creative field.

One way to encourage more regular feedback is by using an online tool that lets you share your work with others and allows for commenting and editing from your team. Also, tracking revisions along the way will help you show your work when it comes time to present.

Choosing your wireframing tools

While many designers start with a few sketches to get the creative juices flowing, people eventually end up in some kind of app or software, or multiple kinds.

Choosing which wireframing tool is right for you depends on how you like to work, what your design process is, and what kind of wireframes you need to produce.

Here are some things to consider when choosing a tool:

What are its sharing capabilities?

If you want others to view, comment on, or even edit your designs, you need to see what options your tool provides for sharing.

If you can only share diagrams with others who have the program installed on their computer, this can be quite limiting. If it’s a cloud-based tool, check to see if others will need a login to see your work.

When it comes to exporting, what are your format options? What about embedding your wireframes directly onto a webpage?

Each tool has its benefits and drawbacks. If sharing is a priority for you, figure out who you can share diagrams with,who can comment on them, and who can edit them.

Does it allow for collaboration?
Some programs require you to export your files to your teammate in order to collaborate. This makes keeping track of versions difficult, and it can slow down the design process when you’re waiting on someone to finish a particular area of work.

Meanwhile, other programs offer simultaneous editing, where you can work together with people, in real time on the same diagram.

If you’re working alone, maybe collaboration isn’t an important feature for you. But if your team needs to regularly access and edit files together, this can be a crucial time saver.

What platform is it available on?
Again, if you’re working with a team across multiple computers or devices, you’ll likely want a cloud-based product that allows easy access to your whole team no matter where they are.

If you’re working alone, a downloaded program might be fine. Just don’t get caught without your computer if you need to make some last minute updates.

Do you need offline access?

Web-based products may not be the best choice for people who often find themselves working out of range of a working internet connection.

Nowadays, with public Wi-Fi connections and hot spots becoming more widely available, this is less of an issue than it was in the past, but some still find this a hindrance under certain circumstances.

What kind of pre-made templates are available? Can you create your own?

Creating wireframes entirely from scratch isn’t necessary. You probably have a few favorite templates that you like to start with and shapes you know you’ll want to use.

Check out what kind of templates each tool has to offer, including designs for web, mobile, tablet, or any other other format you’ll be working in regularly.

Moreover, see if it’s possible to create or upload your own templates and shapes. Customizing your library of available templates will speed up your workflow, especially when you’re designing a large number of wireframes for a big project.

Why choose Cacoo for wireframing

You need the right tool at the right time to make great designs. That’s why it’s important to consider how wireframing tools fulfill your specific needs, rather than just reviewing an exhaustive list of features.

Cacoo is simple to use, easy to learn, and accessible from anywhere with an internet connection. Cloud-based diagramming allows you and your team to collaborate on designs in real-time, and share your diagrams with important stakeholders without them needing to download any programs or even sign up for an account.

You can create diagrams in minutes; not just wireframes, but flowcharts, sitemaps, network diagrams, mind maps, and more.

Cacoo can help organize your entire project. With our Business plan, you can save diagrams into individual projects, share diagrams automatically with groups, and get feedback in comments right in the app.

You’ll also get:

  • Advanced exporting options (PNG, PDF, PPT, PostScript, or SVG)
  • Revision history (see what changes were made and when)
  • In-app chat (and commenting)
  • Easy sharing (no downloading needed)
  • Diagram embedding (embed diagrams into any webpage)
  • Team management (invite people to your Organization, create groups, and assign roles)
  • Advanced security (manage access to diagrams, so you know exactly who’s seeing it)

Try it out for yourself with our free 14-day trial. You can create diagrams, invite your team, and see if Cacoo is the right tool for you. No credit card required. No risk involved.

We also offer a Plus plan for those who don’t need our more advanced collaboration features, but are still interested in the joining the 2,500,000 users who depend on Cacoo for their diagramming needs.

Additional Cacoo Resources:

Ready to start wireframing?

Get Started