How to Create Wireframes in 5 Steps with Uizard

How to Create Wireframes in 5 Steps with Uizard

You’ve been sketching ideas for an app or a website, but know you’ll need wireframes to share a more detailed version of the concept with your team and stakeholders. Unfortunately, with so many examples out there, there’s no clear consensus on how a wireframe should look. Wireframes can be low-fidelity, which is when they’re little more than grayscale boxes, or they can be high-fidelity versions that include polished design elements you expect to see in your final app.  

It’s more useful to think about what a wireframe does. A wireframe illustrates the hierarchy of all of the basic elements on a screen: text, imagery, navigation, and calls-to-action. Their job is to facilitate conversations and collaborations between product managers, designers, developers, and stakeholders, making sure everyone understands the idea the same way.

To a non-designer, it might feel like a massive leap in skill and know-how to get from whiteboard to wireframe. But with some common-sense strategy upfront and a tool engineered to support UX best practices, creating high-quality wireframes is accessible to anyone who has a great idea to share.

This quick guide will show you how to create wireframes using Uizard’s web app. In just five steps, learn how to design a blueprint for whatever you’re building, making it easy for you and your team to test ideas and make important decisions.

1. Define your goal, audience, and level of fidelity

Before you even open Uizard to start creating wireframes, you need to define your goal, audience, and level of fidelity so that your efforts are aligned with your objectives. By doing so, you’ll be able to decide how much time you should put into creating wireframes at this stage of your design process.

  • Goal: First, think about what you’re trying to achieve with your wireframes. Are they for testing out a new idea? For sharing suggested updates to an existing screen or flow? What’s the feedback you’ll need in order to move forward?
  • Audience: Since wireframes are a conversation tool, think about who you’ll be talking to. Be specific with what you’re asking from your audience, and tailor your approach to get the right input from the right people. A conversation with your dev team will likely generate different questions and insights than one with your user interface (UI) designer.
  • Level of fidelity: By level of fidelity, we mean determine how detailed your final wireframe should be. Think about where you want your audience to focus their feedback. Low-fidelity wireframes are best when your aim is gaining buy-in on the “big idea” or when you want to keep attention on a particular feature. Higher-fidelity wireframes will garner feedback on copywriting, look, and feel. Decide what’s essential to convey your goal at this point, and eliminate any distractions.

Odds are you’ve already been thinking about these things as you’ve been developing your idea. Answering these three questions shouldn’t take too long, but it will set you up for success as you iterate your way forward.

2. Create a new project and set up your workspace

The next step is to create a new project and set up your workspace in Uizard. Start by selecting one of Uizard’s web or mobile app project templates, which give you a jump-start with common layouts for e-commerce sites, professional landing pages, or travel apps, among others. (Note that some of these require a Pro subscription.) Or, boldly go your own way and start with a blank slate.

Project templates in Uizard
Project templates in Uizard

Then, to set up your workspace, you have a few options to choose from:

Upload your sketches
Upload your own sketches (i.e., from whiteboard photos from FigJam, Mural, or Miro, or even a sketching tool like InVision Freehand), and Uizard will “automagically” convert them into screens in your project. Check Uizard’s sketching guide to make sure your designs will render properly.

Use a Uizard template
Uizard’s site and app templates include several key screens comprising a basic user flow. You can add as many more screens as you need for your own project. Start editing and customizing right away.

Start from scratch
No need to fear the blank page. Uizard’s tool palette makes it easy to custom-build your own screens with common elements, like menus and icons, as well as component templates, like a “Subscribe” dialog box or a product thumbnail list with description text.

Uizard’s wireframe view is set to high-fidelity by default, but you can switch to a low-fidelity view in one click by selecting “wireframe mode.” This converts the polished design to a simple black-and-white hand-drawn sketch style. Of course, you can always switch back and forth between modes at any point in your design process.

Wireframe mode in Uizard
Wireframe mode in Uizard

Generally speaking, a wireframe’s level of design fidelity increases with iteration, starting from a sketch and layering on detail as you get more feedback and direction from your team and users. Uizard makes the move from wireframe to stylized mockup to clickable prototype seamless, so you don’t lose any momentum between iterations, making it an ideal tool for rapid prototyping workshops like design sprints.

3. Edit your screens

Now you’re ready to start building out your screens. If you’re starting from a Uizard template, you’ll see that all screen elements are editable and customizable. Keep what you want, get rid of anything you don’t, and add as many new sections and features as you need. Uizard’s tool palette and editing panel make it easy to add your own text, resize images and shapes, and insert new elements. Even if you’re starting from scratch, Uizard’s toolkit is stocked with preset elements that let you drag and drop icons, buttons, forms, and even whole features, like navigation bars and image galleries, all of which are also customizable.

Uizard’s templates come with default themes of color palettes and fonts. If you’d like to experiment with switching up the look and feel of your screens, you can change your project’s theme with Uizard’s preset packs. You can also customize colors and fonts to align with your brand or just because you want to. There are even a few options for creating your own theme from different inspiration references. Upload an image, a screenshot, or a moodboard or plug in a URL, and Uizard will extract the color and font styles into a custom palette.  More automagic!

Create a custom theme from an image, a URL, or a Sketch file with Uizard
Create a custom theme from an image, a URL, or a Sketch file (Full video here)

4. Create user flows

You might like to test a simple flow to see how a user might move through a particular process or sequence of actions. Wireframes can be a great tool for user testing,  when you’re getting insightful feedback as early in the design process as possible to shape further iterations.

Uizard makes it easy to add hotspots that create connections on and between screens, turning your wireframes into a clickable prototype. Add a hotspot to any element where you’d like a user to interact. So if your screen has a “Buy Now” button, you’d turn it into a hotspot that connected to where you’d want your user to land on-click, like a shopping cart screen. In addition, you can create links between whole pages or specific screen elements and preview your work to ensure things flow in the right direction before sharing with your team and users.

Add hotspots to create a simple clickable user flow
Add hotspots to create a simple clickable user flow

5. Share your work

Design is a fundamentally collaborative process, and design work is always better as a result of inviting multiple perspectives to the table. Invite your teammates to edit and comment directly in your Uizard project for real-time feedback, or export your files in multiple formats to share within and outside your organization.

Think about your next steps after wireframing

To keep moving forward, you need to make sure you’ve gotten whatever feedback you need from the right people. It’s useful to revisit and refresh your goals before every round of iteration. A design process built on cycles of testing and learning is what separates good from great user experiences, but is also what creates a support system that helps creators thrive at any level of skill and experience.