Free architect

Wireland is a Sketch wireframe kit which helps you to create website prototypes quickly and efficiently. You can get over 200 templates which have been divided into 19 popular sections. Method Wireframe Kit 2.1 Use this UI wireframe design tool to create prototypes quickly and efficiently. A wireframe sketch is the initial hand-drawn design process, using paper and pen/pencil, of what a website design will look like. And to help you get inspiration as well as effective reference points, this article features 20 impressive web and mobile wireframe sketches. But first, you might be wondering why the heck you should create a wireframe sketch of your web design. Wireframe sketches are the initial drawing of a particular site, using pen and papers. Developing a site for computers and mobiles, wire frame sketches assist to include informative points and frame a design easily for final approach. Mobile wireframe sketches and web wireframe sketches helps to concentrate on the creative part of the site.

1. Sketch Wireframes Mobile
2. Website Wireframe Sketch
3. Wireframes Sketch Plugin
4. Mobile Wireframe Examples

If you’re already versed in the vocabulary of UX design, you’ll have a rough idea of what a wireframe is and the purpose it serves. The next question is how you go about creating one.

Watch the video below to see how experienced UX designer and Head of Design Jeff Humble approaches wireframe creation for sites, products and apps—or scroll on down to read all about it.

I’ve split this article into three sections. First of all, there’s a general introduction to wireframes and the tools used to create them, then there’s a step-by-step guide to creating them, and finally a few key principles to keep in mind when wireframing. If you’re short on time, simply select the section that interests you most in the menu below.

An introduction to wireframing

How to make your wireframe in six steps

How to make your wireframe good: Three key principles

An introduction to wireframing

1. What is a wireframe, and why do UX designers use them?

Wireframing is a practice used by UX designers which allows them to define and plan the information hierarchy of their design for a website, app, or product. This process focuses on how the designer or client wants the user to process information on a site, based on the user research already performed by the UX design team.

When designing for the screen you need to know where all the information is going to go in plain black and white diagrams before building anything with code. Wireframing is also a great way of getting to know how a user interacts with your interface, through the positioning of buttons and menus on the diagrams.

Without the distractions of colors, typeface choices or text, wireframing lets you plan the layout and interaction of your interface. A commonly-used argument for wireframing is that if a user doesn’t know where to go on a plain hand-drawn diagram of your site page, then it is irrelevant what colors or fancy text eventually get used. A button or call to action needs to be clear to the user even it’s not brightly colored and flashing.

2. Examples of wireframes

Before you start designing the wireframes of your own app or product, take a look at some examples of wireframes. This will give you some inspiration for your own wireframes, as well as giving you an idea of the variety of ways of creating them. Some people like to draw their wireframes by hand, others feel more comfortable using software like Invision, or Balsamiq to create theirs. We’ll go through some of the tools you can use to create wireframes shortly, but it’s important to emphasize that how you make yours is up to you: some people feel more creative when sat at their computer, while others prefer to have a pen and paper in hand.

That said, for complete beginners, bear in mind the following when deciding on your wireframe creation process:

• Wireframes drawn with paper and a pencil, or at a whiteboard, have the advantage of looking and being very easy to change, which can help tremendously in early conversations about your website or product.
• With the help of paper-prototypes, you can test with end users at every stage of ideation and design. Changes at these stages are much easier—and therefore cheaper—than changes deemed necessary after coding is under way.
• Switching later to software (after initially hand-drawing your wireframe) allows you to keep track of more detailed decisions.

It’s likely to be to your advantage to start off hand-drawing your wireframes before executing more detailed versions using an online app or software. The following wireframes should give you a good idea of how information can be organized on the screen.

Wireframes from CareerFoundry student Samuel Adaramola:

For more inspiration, check out our list of nine excellent website and app wireframe examples.

3. What to consider when deciding on your wireframing process

As we mentioned above, different UX designers approach the task of wireframing in different ways. Some like to draw by hand, while others like to use apps or tools found online. But more often than not, the decision to use online tools or to wireframe by hand, and the process used to get to from wireframe to code, is less related to the individual preference of the UX Designer, and much more related to what approach the particular situation requires. It depends largely on how much emphasis there is on visual design in a project, and how much uncertainty there is with respect to what is being designed.

In the bullet points below are a number of ways different designers can structure the process from design to implementation:

• Wireframe > Interactive Prototype > Visual > Design
• Sketch > Code
• Sketch > Wireframe > Hi-Def Wireframe > Visual > Code
• Sketch > Wireframe > Visual > Code

If the task is very narrow and the visual design is either set or considered unimportant (such as with many backend administrative interfaces), then sketch > code makes sense, whereas if the time and resources and the business value are all high, then spending the time to make a high-definition wireframe and going through a cycle of testing with a fully realized interactive prototype makes better sense.

4. The best tools for wireframing

There are heaps of free tools out there for creating wireframes and prototypes, so you should experiment with as many as you can to find the ones that suit you the best. Don’t forget that you can also just use pen and paper! Below we’ve listed three online tools we find particularly good. The examples below all have free trials, so check them out!

UXPin: UXPin has a wide range of functionalities, but one of the best ones is how it facilitates building responsive clickable prototypes directly in your browser.

InVision: InVision allows you to get feedback straight from your team and users through clickable mock-ups of your site design. It’s completely free too!

Wireframe.cc: Wireframe.cc provides you with the technology to create wireframes really quickly within your browser, the online version of pen and paper.

How to make your wireframe in six steps

1. Do your research

Remember: UX design is a process, and wireframing isn’t the first step in this process. Before you even think about picking up a pen and paper, you need to have covered the first two steps; namely understanding who your audience is by way of user research, detailing requirements, creating user personas and defining use cases, and complementing this with further competitor and industry research. What does that mean? That means carrying out analysis of similar product lines to your own, digging into prevailing UX trends and best practises, and, of course, reviewing your own internal design guidelines.

And if you’re designing a new feature, don’t be afraid to research outside of your domain. Introducing tracking and data visualization as part of your logistics company’s service? Perhaps it’s worth checking out some fitness or nutrition apps on Dribbble or Behance for some ideas. Creativity is often set loose at point where fields of expertise intersect, after all.

2. Prepare your research for quick reference

You can imagine how much quantitative and qualitative data those various phases will produce. Well, that’s what you need to keep in mind while drawing out your wireframes. If you’re a mere mortal, you might struggle to both retain and recall all of that, so I recommend scribbling a cheatsheet with your business and user goals (your requirements), your personas, use cases, and perhaps some reminders of the coolest features you stumbled across in your competitor research. A few choice quotes from your audience might also help focus your attention on the user’s experience, which is—never forget—what you’re designing!

3. Make sure you have your user flow mapped out

Your wireframing is going to get very messy very quickly if you don’t have an idea of how many screens you’ll need to produce and the flow you expect the user to follow. It’s important to have a watertight concept of where your users will be coming from (which marketing channel, for example, and off the back of what messaging), and where you need them to end up. If you’re already well-acquainted with UX vocabulary, your internal voice will be alternately screaming “user flows” and “information architecture”.

Good information architecture will ensure that your users are self-sufficient (fewer messages to your customer service asking how to do something painfully simple), lower levels of user frustration (and ultimately more satisfaction and trust), and therefore lower drop-off or drop-out rates. Which probably means more revenue, and probably means happy managers—and a job well done.

4. Draft, don’t draw. Sketch, don’t illustrate

Ok, now we’re on step four and you can finally start putting pen to paper. Sorry it’s taken this long, but the previous steps were critical: The old adage that you should look before you leap is 100% relevant to UX.

Anyway, let’s get some wires on your frame. Remember: you’re outlining and representing features and formats, not illustrating in mighty fine detail. There’s nothing worse than a blank piece of paper, so you need to start getting your ideas down pronto—that’s the imperative for step three. Don’t think about aesthetics, don’t think about colors—the UI designer can deal with that. And if you’re the only designer at your fledgling startup… well, just do it later.

A good, thick marker pen (a Sharpie, as our friends in the US call them) is a handy tool for this stage of wireframing. Why? Because it prevents you from drowning yourself in detail. You’ll focus on delineating the functional blocks that form the skeleton of your design. As Jeff suggests in the video above, pose yourself the following three questions while you’re sketching:

• How can you organise the content to support your users’ goals?
• Which information should be most prominent? Where should your main message go? What should the user see first when arriving at the page?
• What will the user expect to see on certain areas of the page?
• Which buttons or touch points does the user need to complete the desired actions?

Once you have a few variations of your first screens, you might want to do a bit of collaborative wireframing with a fellow designer or product manager. What’s that mean? Simple. Lift your wireframes off the paper and onto a whiteboard, and play around with them. Ask yourself and one another; “Are we creating something usable that meets our audience’s needs?”

5. Add some detail and get testing

So you have a flow and you have your screens, and you’ve corroborated your ideas with some clued-up colleagues. The next step is to add some informational details to prepare your wireframe for its upgrade, Megatron-style, to prototype-mode.

Add detail in the way you would naturally process a screen, or the page of a book: from top-to-bottom and left-to-right. Remember: Your wireframe is the skeleton of your site. You’re not adding the muscle just yet—the content and the copy. To extend the metaphor somewhat uncomfortably, these elements are the ligaments and tendons that will connect form and functionality. Think about the following:

• Usability conventions, such as putting the navigation at the top next to your logo, having a search box on the top right, and so on
• Simple, instructional wording for i.e. calls-to-action
• Trust-building elements: What do you need to build trust in your customers and where would be the best place to put these elements?
• Tooltips to indicate any functionality that could be included in a prototype transition

Once you’ve done all that, you’re ready for your first user tests. At this stage, your users may well be your colleagues. Indeed, one of the joys of the humble wireframe is that it serves as a common language between designers, stakeholders and web and app developers. You can use tools like UsabilityHub to preference test screens and collect qualitative feedback, and Prott to test and check understanding of the basic user flow. With this tool, you can simply photograph and upload your hand-sketched wireframes, and then connect them to user button overlays. Clever stuff!

6. Start turning your wireframes into prototypes

Once you’ve documented and acted upon the feedback from your first prototype, you can start developing your high-fidelity prototypes. There are lots of slick tools out there for this, from Proto.io to Adobe XD and Framer, but the most well-known are Sketch and the browser-based, new(ish) kid-on-the-block, Figma. Once you’ve developed your wireframes in Sketch, you can import them into the industry-leading prototyping tool InVision (which, incidentally, we built a course in conjunction with) and interlink your screens for a second round of high-fidelity user testing. It’s at this point that we’ve most certainly crossed from wireframing to prototyping. To find out more about that, you’ll have to read another article.

Let’s summarize by reviewing three key principles to keep in mind when you’re producing your wireframe.

How to make your Wireframe Good: 3 Key Principles

The following points should be at the forefront of your mind when building your wireframe:

1. Clarity

Your wireframe needs to answer the questions of what that site page is, what the user can do there, and if it satisfies their needs. Your wireframe is an aid for you to visualize the layout of your site page and ensure that the user’s most important questions are answered and goals are achievable without being distracted by more aesthetic considerations.

2. Confidence

Ease of navigation through your site and clear calls-to-action increase user confidence in your brand. If your site page is unpredictable, or has buttons or boxes in unexpected places user confidence diminishes. A lot of this information can already be organized at the wireframing stage. Using familiar navigational processes and placing buttons in commonly-used and intuitive positions, user confidence will soar–and that’s before you’ve even gotten around to thinking about colors and styles.

3. Simplicity is key

Too much information, copy, or links, can be distracting to the user and will have a detrimental affect on your users’ ability to achieve their goals. You want your users to be able to find their way through your site with as little extra ‘fluff’ as possible, to the elements that map to their most significant goals in a given context.

Your wireframe should be a visual guide to the framework of your site and how it will be navigated. Attractiveness at this stage is not a consideration. Once you’ve decided who your product or service is for, you can begin laying out the information they are looking for in an intuitive and natural way that is not only familiar to them as users of this kind of service, but that also guides them towards the conversion point or otherwise helps them to achieve their goals in the interaction. By presenting your information in this way, you are aligning both the business goals of your site with the needs of the customer.

Further Reading

If you’re just starting out in the world of wireframes and UX design, I highly recommend taking a look at the following articles.

Whether you are a novice or an amateur, these six easy-to-follow steps for designing wireframes will come in handy!

If you’ve been in the user experience (UX) design profession for even a little while, you’ve probably heard of wireframing at some point. In an ideal web designing scenario, wireframing would be the first step you take to visually depict what a webpage may eventually look like.

However, if you’re not well versed in designing wireframes or if this is your first time designing one, you may struggle with a few things. You may wonder how wireframing fits into the larger design process, what are the steps involved in creating a wireframe, and whether you should create a wireframe using pen or paper or would you need a specialized tool for it.

While you can create a wireframe with pen and paper as well as a wireframe tool (as per your needs and convenience), answers to the other questions are a bit more tricky. The good news is that we will answer these, and other questions you may have, in this article as we talk about how to create wireframes.

But before we dive in, what exactly is a wireframe?

What is a wireframe?

A wireframe is a mockup or a representation of the broad structure or layout of a web or app page. It shows how various components, such as sections, tabs, products, information, and call-to-actions, will be positioned and how the space will be utilized. Since the wireframe represents the initial layout of a webpage, colors, multimedia content, fonts, and other stylistic elements are typically kept minimal.

With that covered, let’s look at the steps involved in creating a wireframe.

Conduct research to get clarity and direction

It may be tempting to start pouring out your wireframe ideas immediately, but before you do that, think of the larger goal: designing a compelling user interface (UI). And to do that, you will need to gauge the requirements of your design project and the expectations of your stakeholders and end users.

Your design should not only help the business deliver its message or products to customers but more importantly make it easy for customers to navigate the page and find what they need without much hard work.

Here is how you can ace this step:

• Check in with stakeholders to understand key project needs. Getting this clarity is foundational to the wireframe design.
• Research about the end users, their preferences, and buying behaviors so that you can address their needs with the wireframe.
• Based on your end user research, define common use cases to better understand the scenarios you are designing for.
• Conduct market research and competitor analysis to identify design trends and best practices.

Make it easy to refer back to the research data

You are going to collect a lot of data, including use cases, buyer profiles, market research data, and project requirements, during your research. At various points in your wireframing process, you will need to keep coming back to this research.

Therefore, before you dive in, make sure to document and organize all your research information in a way that you don’t waste too much time and effort accessing them. This will ensure the hard work you put into your research reflects in your wireframe and doesn’t go to waste.

Here are some quick ways to do this:

• Be sure to document all the key pieces of information you come across.
• Arrange the research based on macro and micro categories, using folders and subfolders.
• Create cheat sheets to capture key concepts such as buyer use cases, buying behaviors, or any intriguing user feedback you may have come across in your research.

Map user flows to address user needs

User flow refers to the path or journey of a user during a website or app session. This journey includes the point where they entered your website/app, all the points where they interacted with the website/app (like the pages they visited and the buttons they clicked on till their final transaction), and where they exited the website/app.

One simple example of a user flow could be: a user enters your eCommerce website after clicking on an ad about, say, grey derby shoes. After landing on your website, the person may want to filter the shoes by price, size, brand, etc; he/she may want to zoom in on one or more of the shoes, check their specifications, add one of the items to the cart, and eventually, make the payment and complete the transaction.

These are the sorts of interactions within your website/app that put together make up the user flow.

Sample user flow for an eCommerce website visitor (Source)

This journey needs to be mapped in a user flow so that you don’t miss out on crucial design elements such as the shopping cart, price filter, or specifications checklist. Lacking such elements could confuse website/app visitors, requiring them to contact customer support to seek help with even the basic navigation.

The immediate impact in such a case would be dissatisfied or frustrated customers, which would also mean reduced conversions and increased abandonments.

User flows are the foundation of your wireframe, so be sure to cut out some time for this. Here is how you can do this right:

• Map user needs by asking yourself: What goal are the website/app visitors trying to achieve? What features are they looking for? What initial questions could they have? What information might they need to navigate smoothly?
• Create a flow outline that includes a user’s entry point into the website/app and all the steps they may take until the final transaction.
• Make sure to keep the user flow logical and to include all possible needs of a user while navigating.

Create a minimalistic layout for the wireframe

It is now that you need to put pen to paper and start pouring your layout ideas. At this stage, you will need to create a basic structure that highlights what elements will be on the page, which UI element will go where, what tabs will be included, where the text boxes will go, and where the multimedia elements will be placed.

The idea is to create a basic skeletal structure of the webpage in a way that addresses all the user and business needs.

Also, as you design the structure, resist the temptation to add too many details—less is more at this stage. Forget the fonts and the colors, just focus on creating an indicative design, not the final thing.

Here are some questions you can answer to get this step right:

• How can I best organize the UI components to support a visitor’s end goal?
• What should the user see as soon as he/she arrives on the page?
• Where should I place the main message of the page?
• Which information should be most prominently displayed?
• Which buttons will the user need to navigate through the website or app design?

Once the basic structure is ready, show it to your colleagues or your manager and get some initial feedback on it. Tweak the layout accordingly, if required, to increase usability.

Decide the fidelity level and fill in the details

Now that you have sufficient clarity on the direction of the project, the user flow, the basic wireframe layout (also called mockup), and any required improvements, you can go ahead and start filling in some details.

At this point, you will need to decide the fidelity level of your wireframe, in other words, the amount of detail present in your wireframe. Here is a quick snapshot of the key differences between the three commonly used levels.

Once you have decided on the fidelity level, here is how you can fill in the details in the wireframe:

• Add details progressively from top to bottom and left to right.
• Add the basic usability details such as the navigation bar and the search bar on the top right or left.
• Throw in elements that you think will make it convenient for customers to use the page, and see where you can best place them.

Get testing!

With the details filled in, your wireframe is ready to prove its mettle. You will need to test the wireframe to see how usable it is, that is, if all the design elements a user might need are present.

Testing will also help identify any essential elements that may be missing or any additional requirements that need to be addressed. For example, instead of two fields on the Login page (one for username and the other for password), your wireframe has only one. Or maybe there is no navigation bar on the home page when logically, there should be one. Such misses need to be fixed before the wireframe goes further into the design process.

You can take the help of your colleagues in this or get actual users to test the final product. If you need a more in-depth analysis of the wireframe, you can also consider involving subject matter experts.

Defining the criteria for a new test in UserTesting (Source)

Sketch Wireframes Mobile

Here is how you can test your wireframe:

• Print your wireframes on paper or create digital wireframes and present them to reviewers.
• Ask reviewers a series of questions to gauge their experience and record feedback. Some wireframe testing tools may allow for more interactive wireframe testing and capture feedback automatically.
• Try user testing—a service that allows you to post a link of the wireframe that users can test. Once tested, they may share a video of their screen while testing and audio or written feedback.

Once you are done with the testing and have collected the feedback, make improvements as you deem necessary.

Website Wireframe Sketch

Ready for a wireframing blitzkrieg? Not so soon!

Before you launch into action, there is something you need to consider. Wireframing with pen and paper is great since you don’t need to make any software installations, pay for any tool, power up a computer, or it doesn’t matter if you are connected to the internet. But using a wireframing tool has some undeniable perks over sketching.

Wireframes Sketch Plugin

A wireframing tool can help you drastically reduce the time it takes to design a wireframe. You can simply use drag-and-drop placeholder elements and ready-to-use wireframe templates. A tool also makes it easy to collaborate with team members or clients and receive feedback in real time. Moreover, you can integrate with apps such as Adobe Creative Cloud or Jira to create high-quality wireframes.

If you are wireframing on a budget, you can check out this list of free and open source wireframing tools.

Mobile Wireframe Examples

Looking for IT Management software? Check out Capterra's list of the best IT Management software solutions.