Wireframes are visual representations of the structure, layout, and functionality of a website, application, or other digital product.

You typically create them during the early stages of the design process, and they provide a simplified and focused view of the user interface and user experience.

You can create a wireframe using a variety of tools, including paper and pencil, whiteboards, or specialized digital software. They usually consist of basic shapes, lines, and text, and aim to communicate the hierarchy of information, the placement of interactive elements, and the flow of user interactions.

Wireframes serve as a blueprint for the design process. They allow designers and stakeholders to quickly iterate and refine ideas before investing time and resources into creating a fully functional prototype or final product. They are an essential tool for creating effective and user-friendly digital experiences.

Why is Wireframing Important?

Wireframing is an important process in web and app design because it helps designers to plan and communicate the layout and functionality of a website or application before it is built. Here are some reasons why wireframing is important:

1. Wireframing helps stake holders visualize the structure of the design: Wireframing allows designers to create a visual representation of the website or application's structure. This includes the layout of pages, navigation, and the placement of various elements.
2. It helps designers focus on functionality: With wireframing, designers can focus on the functionality of the website or application without getting distracted by colors, typography, and other design elements.
3. It saves time and money: Wireframing can save time and money in the long run by identifying potential problems and making necessary changes early on in the design process, rather than during the development phase.
4. It's an easy way to gather feedback: Wireframes are a great way to gather feedback from stakeholders and users, as they provide a clear and simple representation of the design without distracting visual elements.
5. Plan for responsive design: Wireframing is essential when designing for different screen sizes and devices. It allows designers to plan for responsive design and ensure that the website or application works well on all devices.

Types of Wireframes

Everyone has a specific way of doing wireframes. Some designers go from paper sketches to high fidelity wireframes or from low-fidelity wireframes to high-fidelity wireframes.

It all depends on the particular project the designer is working on, what they intend to achieve, and the timeframe they have.

Paper Sketches

I begin my wireframing process by doing paper sketches first, because it allows me put out my ideas really fast without having to bother about neatness and quality. It also saves time when designing – you just think of quick solutions and put them on paper.

Some Techniques for Paper Sketching

• Crazy Eights

In the design world, "Crazy Eights" is a quick sketching exercise that helps designers to quickly generate a variety of design ideas and explore different solutions to a problem, in a short amount of time.

Here's how to do Crazy Eights in design:

1. Start with a blank sheet of paper and fold it in half, then in half again, and one more time so that you end up with 8 rectangles on the page.
2. Set a timer for 8 minutes.
3. Within the first rectangle, sketch out an idea for the design problem you're working on. It doesn't need to be perfect, just get the basic idea down on paper.
4. When the timer goes off, move on to the next rectangle and sketch a new idea. Keep going until you've filled all 8 rectangles.
5. Once you've completed all 8 sketches, take a few minutes to review your ideas and identify the strongest ones.
6. Use the strongest ideas as a starting point for your design, and continue refining and iterating until you have a final product.

You'll see an example of this in a bit when I walk you through my wireframing process.

• 20 Second Sketches

Set a timer for 20 seconds and sketch a simple object or scene. Repeat this exercise multiple times, trying to capture as much detail as possible in each sketch.

• Collaborative Sketching

Pair up with another person and take turns adding to a sketch. Each person has a set amount of time to add their own unique element to the drawing. This exercise encourages collaboration and improvisation.

Low-Fidelity Wireframing

Low-fidelity wireframing is a technique of creating a rough visual representation of a design using simple shapes, lines, and text. Low-fidelity wireframes are the most basic of wireframes. This type of wireframing is typically done with pen and paper, or with a digital tool that allows for quick, low-detail sketches.

Mostly, they focus on the core content and structure of the interface, and are simple and straightforward. Low-fidelity wireframes are a useful tool for designers to quickly explore and iterate on different layout and content options, without getting bogged down in details that can distract from the overall design direction.

Advantages of Low Fidelity Wireframing

• Speed: Low-fidelity wireframes can be created quickly and easily, allowing designers to explore multiple ideas in a short amount of time.
• Flexibility: Low-fidelity wireframes are easy to modify and change as the design evolves, allowing designers to iterate quickly.
• Focus: By focusing on the structure and layout of a design, low-fidelity wireframing helps designers avoid getting distracted by details that may not be relevant.
• Collaboration: Low-fidelity wireframes can be easily shared and discussed with other team members, allowing for greater collaboration and feedback.

Disadvantages of Low Fidelity Wireframing

• Lack of Detail: Low-fidelity wireframes may not provide enough detail to fully convey the intended design, which can lead to misunderstandings and miscommunications.
• Limited Interactivity: Low-fidelity wireframes are static and do not allow for interaction, which can make it difficult to test usability and user flow.
• Limited Realism: Unlike high fidelity wireframes, low-fidelity wireframes may not accurately represent the final product, which can make it difficult to communicate the design to stakeholders who may not be familiar with wireframes.

Why You Might Want to Use Low-Fidelity Wireframes

• For early-stage conceptualization: Low-fidelity wireframes are great for early-stage conceptualization. Because they allow you to quickly iterate and experiment with different layout options without getting caught up in the visual details, low-fidelity wireframes are extremely useful during the initial stages of your design.
• For Time and Resource Efficiency: In situations where time is of great essence, low-fidelity wireframes helps to make changes more rapidly, saving time when needed. Also, it requires fewer resources, which is ideal for situations where resources are scarce.
• For User Testing and Feedback: Low-fidelity wireframes provide a clear representation of the overall structure of your design, allowing for easier feedback from stakeholders and team members. Low-fidelity wireframes are also important during user testing sessions, as it helps you collect valuable insights on the fundamental structure and functionality of a design, before investing significant effort in visual design.

Mid-Fidelity Wireframing

Mid-fidelity wireframing refers to wireframes that are created with a moderate level of detail and design elements. These wireframes typically focus on the overall structure of a product and may include basic typography and design elements.

Advantages of Mid-Fidelity Wireframing

• Efficient Design Process: Mid-fidelity wireframing can be completed quickly and efficiently, allowing designers to iterate and test their designs faster.
• Cost-effective: Mid-fidelity wireframes are less expensive to create than high fidelity wireframes, making them a more cost-effective option for design projects.
• Usability Testing: Mid-fidelity wireframes can be used for usability testing, providing insights into user behaviour and interaction with the product.
• Flexibility: Definitely one of the most importnat advantages of mid-fidelity wireframes. Mid-fidelity wireframes are less detailed than high fidelity wireframes, making it easier to make changes and pivot design direction during the design process.

Disadvantages of Mid-Fidelity Wireframing

• Less Realistic: Mid-fidelity wireframes may not accurately represent the design's final look, which can impact stakeholder and client expectations.
• Limited Visual Details: Mid-fidelity wireframes do not provide as much detail as high fidelity wireframes, making it difficult to communicate the final design vision to stakeholders.
• User Experience Limitations: Because mid-fidelity designs do not have enough visual details to test the user experience effectively, leading to potential usability issues.

You'll see an example of this below when we walk through my process.

Why You Might Want to Use Mid-Fidelity Wireframes

• For Refining Structure and Content: When you need to refine the structure, content and layout of your design, mid-fidelity wireframes are beneficial. They allow you add more detail to your wireframes while being relatively quick to create and modify.
• Information Architecture: Mid-fidelity wireframes provide a clearer structure and visual representation of the design, showing off the userflow better than low-fidelity wireframes.
• Stakeholder Presentation and Approvals: Mid-fidelity wireframes are more polished and appealing than low-fidelity wireframes. This makes them a more effective tool when presenting design ideas to stakeholders and clients.
• Design Consistency: By adding more visual details to the wireframes, a consisent design language can be established across multiple screens or pages.

High-Fidelity Wireframing

High fidelity wireframing refers to the creation of detailed, visually-rich wireframes that closely resemble the final product or website.

These wireframes are often created using tools like Adobe XD or Figma and include elements like typography, color schemes, and detailed user interface elements.

Advantages of High-Fidelity Wireframing

Some advantages of high-fidelity wireframes include:

• Detailed Representation: High fidelity wireframes provide a more detailed representation of the final product, making it easier to communicate the design vision to stakeholders.
• Efficient Testing: High fidelity wireframes can be used for testing purposes, helping designers identify any usability issues before the development phase begins.
• Better Visuals and User Experience: High fidelity wireframes are aesthetically pleasing and provide a more realistic view of the final product which helps users visualize the design better. It gives the users better understanding of how to interact with the product.

Disadvantages of High-Fidelity Wireframing

• Time-consuming: High fidelity wireframes take longer to create than low-fidelity wireframes. It can be challenging to complete high fidelity wireframes withing tight project timelines.
• Cost: High fidelity wireframes can be expensive to create, as it requires a significant amount of skill and effort from the design team.
• Limited Flexibility: High fidelity wireframes are not as flexible as low-fidelity or mid-fidelity wireframes. They are detailed and specific, which makes it challenging to change the design direction once they are completed.

You'll see an example of this in a moment during my process walkthrough.

Why You Might Want to Use High-Fidelity Wireframes

• Hand-off to Development: High-fidelity wireframes provide accurate visuals, detailed specifications, and design assets that facilitate the handoff process to developers.
• High Visual Realism: High-fidelity wireframes closely resemble the final visual design and provides a realistic representation of the user interface, to potential users and stakeholders.
• User Experience Validation: High-fidelity wireframes allow you to test and validate the user experience more accurately. With realistic visuals, you can simulate user interactions, flows and transitions, enabling users to provide meaningful feedback and uncover potential usability issues before development.
• Design Consistency: By including more visual elements than the mid-fidelity wireframes, high-fidelity wireframes helps establish a consistent visual hierarchy and design language that can be carried over to the final product.
• Style Guide Creation: High-fidelity wireframes play a crucial role in developing a style guide for your design. They establish the visuals and design assets that will be used till the launch of the product.

My Wireframing Process

I worked on a mobile app to help pregnant mothers through their pregnancy journey. I started with paper sketches, moved on to mid fidelity wireframes, and then did my high fidelity wireframes.

Step 1 – Paper Sketches

For my paper sketches, I used the Crazy Eights(8s) method, which is a very quick way to put out ideas and inspirations.

Basically, I took out my drawing book, drew 8 identical phone frames and sketched out how I wanted my design to look using a pen. The sketches were more elaborate than usual, because I wanted to move straight to doing mid-fidelity wireframes.

Crazy Eights sketches

Step 2 – Moving to Mid Fidelity Wireframes

Next up, I opened a new Figma file on my laptop and transferred my sketches on paper to phone mockups on Figma.

First, I chose the frame I wanted to use for the designs – Iphone 13 pro.

Choose the phone you want to use

Then I used my sketches as a guide. It was mostly replicating what I already had on paper, digitally.

Next I used rectangles to denote images, and lorem ipsum (dummy text) for parts of the design which needed long texts.

Adding rectangles and dummy text

Prior to this, I had created a style guide. So I just got the icons from the style guide.

My Mid-fidelity Wireframes

Step 3 – Creating High Fidelity Wireframes

This was the last phase of my wireframing. Here, I added colours, images, and real text to my designs.

1. I started by adding colours to the mid-fidelity screens.
2. I also wrote out real text for the screens, making sure the copy matched the branding and purpose of the app.
3. Lastly, I added illustrations and images where needed, helping users relate to the design.

Example of high fidelity wireframing

In high-fidelity wireframing, once the overall structure is in place, you can start adding more details and refining the design. This includes adding visual elements such as images, icons, and typography, as well as defining interactions and transitions.

Share the high-fidelity wireframe with stakeholders, users, or other team members, and gather feedback. Use this feedback to refine the design and make any necessary changes.

Once the wireframe has been approved and refined, finalize it by adding annotations, notes, and any other necessary documentation. The wireframe should be detailed enough to provide a clear understanding of the design to developers, but not so detailed that it hinders the design process.

Completed High Fidelity Wireframes

Note that you can use any type of wireframe you would like to, depending on the specific project you're working on, the stage of the project and your objectives. You should also consider the complexity of the design, the available time and resources, and the needs of the stakeholders and users when determining the appropriate fidelity level for your wireframes.

Conclusion

Wireframing is an essential step in the design process that helps ensure a successful outcome. It enables designers to visualize the layout and functionality of a platform before investing significant time and resources into coding and development.

Incorporating wireframing into your design process can lead to more efficient, effective, and user-friendly designs.

When we design our websites, we progress from wireframing to prototyping to – finally – a full design.

I wanted to explore and expand on what Prototyping actually means by taking you through the full process.

Note that I created another course that covers the first step of designing a website: building a wireframe. You can read about wireframing and watch my 30 minute video course here.

In this tutorial, we'll cover:

1. What an Early Prototype is
2. Creating a Structure: Frame, Rows, Columns
3. Adding Content: Header, Slider, About
4. Designing Sections
5. Conclusion: What we've learned from the prototyping process

What is an Early Prototype?

A prototype is normally the secondary iteration of a design, as it is built on top of a wireframe.

A wireframe usually involves a simple drawn sketch via paper, pen, or online tool. Next we build the prototype, which is our more refined mockup for the website or app.

Let's take a look at the early wireframe we built in the previous article:

The wireframe we created in my previous wireframing course.

It has a number of pages, sections, and areas where text and images will be added later.

The goal, then, in the Prototype is to build this visually, but without adding color or images.

In this example, I will be using Figma to do the Prototype. You can view the whole Figma protype here.

How to Create a Website Prototype Structure: Frame, Rows, Columns

When we created the wireframe, we considered the grids – but they were hand drawn.

When doing an early prototype, we have to define them properly so that the whole design follows the grid structure.

In this example, I will be using a 12-column design with a regular width of 1140px, which is traditionally used and seen in Bootstrap designs. This gives us a 15-30px margin between grid units.

This will be useful later when we collapse the columns to rows for mobile responsiveness.

You can create your own grid structure in Figma. But be aware that you (or someone else) will later need to actually code these designs.

Whenever you're designing something, be sure to take the developer into consideration.

How to Add Content to a Website Prototype: Header, Slider, Sections

Unlike the Wireframe, we are no longer representing text with lines, and headers with blocks. Instead we need to fill out content for a mockup.

This doesn't mean adding colors or images. But it does mean we have to show real text.

At this stage, it's a great idea to make sure that the header and sections are shown with the actual content they will be intended to hold. This will allow better selection for colors and images in later stages of the design.

In this part of the example, I built out the slider with hero text, and a description underneath. There are a few things to look out for at this phase of the prototype process:

• Font sizing and positioning
• Content location and spacing
• Margins and padding between sections and content

How to Design Sections of the Website Prototype

For prototyping and the final mockup, it's important to start layering your groups and sections. Sections can include things like the header, the "about us" section, and the sponsors section.

You can create groups in your UI tool (Figma does this with Ctrl+G). Label your sections and set them with different background colors. This will make it easy to identify them, and will allow you to easily move them about.

Too many times I've been asked to move certain parts of a website up and down the grouping. By grouping all your components into sections, you will make it much easier on yourself during the prototype phase of the design work.

Conclusion: What We Have Learned from the Prototyping Process

As we build out the rest of the design, it's important to ensure that this early prototype does not become a full mockup for a website design.

It's easy to get carried away. But the goal of doing a prototype after a wireframe is to ensure that we can continue to plan the website's development.

It's much easier to identify problems and issues in the early planning stages and update them before diving into creating the full design. Such prototyping may only take you a few hours, but it can save days worth of effort later in the process.

Once you've prototyped multiple pages, you can move on to the full mockup design phase. This will involve figuring out color theory, typography, and images that work accordingly. We will take a look at this in the next article in this series next month.

Bonus: Adding an Interactive Prototype Run

We only created a single page for this example. This said, prototyping also allows you to create an emulated example of the site operating.

This emulation is very useful for conducting demos, testing how clients respond to seeing a real world example of an early mock-up, and revising how all of your links flow.

I hope you enjoyed this article. If you don't know who I am, I'm Adrian from Australia. ? I have a tiny channel on Twitter & YouTube, so if you want to know more about me or enjoy my content, check me out sometime ?

• Youtube: https://youtube.com/adriantwarog
• Twitter: https://twitter.com/adrian_twarog

A good wireframe can give you the vision for the entire layout and functionality of your website. It can also serve as the first stage of a design.

Wireframes give you an idea of the overall structure pages will take, and how navigation will flow.

If you are considering building a website, you can do a wireframe quickly and easily. You don't even have to be a graphic designer to do so.

To get started, all you need is a pencil and some paper. (Or if you want to get fancy, an iPad and iPencil like I use in my video tutorial above.)

We are going to create a wireframe and show how it allows for a quick, iterative design process. This will create a living piece of documentation that you can use for yourself and for a client. And you can use this to reason through your planning – all before you invest any time in actually coding it.

Here are some steps we'll cover in this article (and in the accompanying video tutorial):

1. Sitemap planning
2. Creating a homepage wireframe
3. Using markup in wireframes
4. Wireframe components (header, menu, footer)
5. Wireframing your Features Page and Contact Page
6. Mobile Responsive Wireframes

Sketching out a sitemap

Step #1: Sitemap Planning

Getting started with wireframing begins with a good sitemap. Before you create a page wireframe, a sitemap will give you some structure. This way, you'll understand which pages you're going to build, and how they will all connect to one another.

Most small sites may not need a sitemap. They usually just have either a single landing page, or a few common pages like Features, About, and Contact Us.

This said, as soon as your website or application becomes larger and more complex, you'll want a sitemap.

Sitemaps provide you with a brief overview of where items exist and how they interconnect.

In our example, we will create a simple sitemap which will contain just the Home Page, Features Page, and Contact Us page.

You don't have to spend too much time on this. Just add a few boxes to show each page, lines underneath to show sub-pages, and that's it.

Creating a homepage wireframe

Step #2: Creating Homepage Wireframe

We are going to create our first wireframe page. If you haven't wireframed before, the process is quite simple. Each aspect of a website is represented with a shape or simple graphic, such as:

• boxes with diagonal lines through them to represent images
• horizontal lines to represent paragraphs of text
• and a circle with an L in it to represent your logo.

For the homepage, we'll build out a slider image, menu, and logo. We'll also give it a few labels to show what each item is.

This is also useful to organize each section into rectangles that we can later copy-paste onto other pages (especially for the header and footer).

Creating a wireframe for the body of our home page

Let's also create another section for an introduction to the company (About Us) and a sponsor section (with logos and images of our sponsors).

As we progress through the design, we can also implement other items into the homepage, like call-to-action buttons in areas that would be appropriate.

We finalize the design with a Footer section where we add common elements such as a Contact Form, Contact Info, and reuse the Logo once more.

Creating additional page elements in our wireframe

Step #3: Using Markup in Wireframes

The wireframe is often viewed not just by designers, but by developers, clients, and management. So it's useful to add some markup to each part of the content. This can help guide people viewing your wireframe for the first time. I usually do this at the end of completing a page.

In our example, let's markup the homepage and label each part of the content with red text.

Aspects you want to markup include items such as sections, titles, contact forms, and what images might be.

Note that Markup doesn't have to literally explain what the content will eventually be – just what it represents. So instead of putting in the actual "Example of intro title", you can label the title as "Intro Title."

How to Markup a wireframe

Step #4: Add Other Wireframe Components like Header, Menu, and Footer

Now that we have already created a header and footer, we can reuse them for additional pages. If you're working digitally, you can copy-paste headers, footers, and other recurring elements into new page wireframes. (And if you are just using paper and pen, you can always use a razor and a photocopier to achieve the same effect.)

This allows your wireframe design to remain consistent. Tools like Figma will allow you to create asset components which you can also copy-paste throughout your design. You can even configure them to dynamically update other parts of your wireframe when you change your root component.

In our example, we are going to reuse components to build a features page. By creating our first features section component, we can then copy and paste it below several times to build out our entire features page in just a few minutes.

Adding wireframe components and reusing them on different pages

Step #5: Features Page and Contact Page

It gets easier and easier to building out additional pages once you get started with wireframing and build out some components. With the features page finished, we can create a Contact Us page. All we really have to do is add a few common elements, such as a Google Map, Contact Us form, and some basic contact details like a phone number and email address.

In this example, I have small logos for a phone and email, and large blocks to represent where they will be located on the page.

The contact form will be located below (without a box outline), as well as a Google map on the right hand side.

Wireframing the Contact Us Page

Step #6: Make a Mobile Responsive Wireframe

No good wireframe can exist these days without a mobile version. This is because much of the web today is viewed on mobile devices.

It's good to know how a design might collapse down to smaller viewports. If you are have more time on your hands, you can also build out a tablet version of the responsive wireframe as well.

In our example, we build out the home page design wireframe section-by-section. Most of the rows and columns are collapsed. And since we're on a mobile viewport, many of the images, texts and blocks reduce in size.

Because of this, it's possible for some of the sections to still have the same amount of height as their respective desktop versions. On the other hand, some sections with lots of images (like the sponsors section) might end up having much more scroll height.

Due to this, I often also add additional markup to show which desktop version sections correspond to which responsive equivalents for the mobile version.

The final wireframe with several pages designed, the sitemap, and markup

Conclusion

Wireframing is a quick way to get a better idea of your website or application visually. I recommend you try it for your next project to help you plan how it might function and look.

Wireframing is the ideal approach for this, since it takes so much less time than having a designer do a full-blown User Interface prototype.

As a developer, I've built wireframes for my websites for years. I almost never develop a website without sketching out at least some of my ideas of how it will look visually.

Happy wireframing.

I hope you enjoyed this article. If you don't know who I am, I'm Adrian from Australia ? I have a tiny channel on Twitter & YouTube, so if you want to know more about me or enjoy my content, check me out sometime ?

• Youtube: https://youtube.com/adriantwarog
• Twitter: https://twitter.com/adrian_twarog

In my 10+ years as a UX designer, one of the most frequent questions I’m asked about wireframes is how much visual detail to put into them.

There’s an attractive elegance to a simple black and white sketch, but it can sometimes lead to gaps in the shared understanding of what the final product will really look like.

Wireframes shine during the early phases of product development when ideation and rapid iteration are most valued. But what makes them ideal for this phase also hinders them in the next phase, when pixel precision and visual details are called upon for implementation.

As a result, many people (I’ve been guilty of this) try to incorporate fine-grained and aesthetic details into their wireframes by tuning fonts, adding colors, and using other visual effects.

This can often lead to confusion when these proto-high-fidelity wireframes are used as implementation specifications and sent “over the wall” to the development team. Most wireframing tools are not optimized for creating artifacts that look and feel like a finished product. Yet creating polished renditions of every screen or a high-fidelity prototype is time consuming and may not translate well to the final product anyway.

But, is there another way?

There sure is! A way where you can keep your wireframes low fidelity, yet achieve that powerful shared understanding of the implemented look and feel.

Design Systems to the Rescue

An alternative to pushing wireframes beyond their limits is to keep them low fidelity and let another tool do the work of specifying the look and feel.

In this article, I’ll explain why, for web applications and sites at least, an excellent tool for this job is a design system.

Before diving in, let’s define what a design system is.

Like their precursor, style guides, design systems define the application’s look and feel. They go one step further though, in that they often define behavior as well and are backed by working code.

Large companies have been using design systems for a long time. Until recently, they were too labor intensive for smaller companies, as they often required dedicated designers and developers working outside of the primary product teams.

Here is an example, from the IBM Carbon Design System, showing appearance and code for buttons.

_[Carbon Design System](https://www.carbondesignsystem.com" rel="noopener" target="blank" title=") buttons

The design system landscape changed after the Bootstrap framework was released in 2011. It is a free starter kit for web development that provides compliant, robust HTML templates and generally good-looking CSS styles that can be customized to your brand.

It comes with its own grid and typography definitions as well as styles for buttons, forms, and more. In short, it takes a lot of the hard work out of starting a web project and making sure that it works across browsers.

Bootstrap and other frameworks like it have been used as a foundation for design systems for smaller companies that don’t have the resources to build their own.

As you can see below, Bootstrap is very similar to corporate design systems like the one shown above.

_[Bootstrap](http://getbootstrap.com" rel="noopener" target="blank" title=") buttons

Design Systems + Wireframes in Practice

The main advantage of pairing a design system with a wireframing tool is that it can free you from worrying about look, feel, and behavior when wireframing. Yet, they provide pixel-perfect renditions of the final product components.

When you already know what a button (or tab, menu, etc.) is going to look like and what its state transitions will be when you click it, then you don’t have to style it in your wireframe. Black and white and Balsamiq Sans is just fine.

Having a design system to refer to can allow you to jump straight from wireframes to code without leaving the final vision undefined.

Here’s how you can pair them together. You’ll find that they get along quite well together!

If you already have a design system, great. If not, you can start with a customized download of Bootstrap or Foundation. The next step is to create a mapping between it and the controls in your wireframing tool.

A mapping basically means developing a shared agreement of “this means that”. You can do this by creating a document showing these mappings or by just having a meeting with the design and development teams around a screen to work it out.

Here’s an example of how you might map some Balsamiq controls to Bootstrap components (you could also start with the Bootstrap Wireframes To Go library).

Simple mapping of wireframe controls to coded UI controls

Note: It’s ok to use some color, but it should only be used as much as necessary to indicate states and selections, for example.

Having this kind of mapping means that developers no longer have to wonder whether the colors in the wireframe are supposed to be used in their code. They can just translate in their head that a blue button in the wireframe actually means a green button in the UI (if that’s the color you use), and that breadcrumbs separated by the &gt; character should actually be separated by the / character in the app, for example.

You can also extend your design system by creating your own Balsamiq controls as Symbols to map to other components in your library, like this:

Balsamiq symbols mapped to design system components

This mapping can evolve and grow over time as needs and design language change in your organization.

Here’s a simple example showing what a completed wireframe could look like when built in conjunction with a design system.

Note: Blue in the wireframe doesn’t have to mean blue in the finished product.

Created in Balsamiq

Created with code

Wireframe to working code with no additional design artifacts in between!

Having a design system also means that you’re reusing the same code across all parts of your application so that different developers produce the same UI which leads to better standards and consistency. And if the design system gets updated, the wireframes don’t have to change.

Finally, designers can rely more on the stock controls inside the tool rather than spending hours trying to replicate the look on their own, so both the design and development cycles are shortened.

Summary

Nothing works for everyone, of course. This approach isn’t guaranteed to work for all projects or organizations. For example, it is better suited to in-house teams.

Clients outside your organization are more likely to want to see a high-fidelity mockup. Also, most of the starter design systems are for web-based products. Desktop and mobile application design system templates and examples are less common.

Lastly, and perhaps most importantly, you should have good communication between design and development teams for this approach to work.

Much of the shared understanding of the connection between wireframes and design systems is created by having a conversation about it. Announcing it over email or simply posting it on your intranet alone probably won’t work. Waterfall and distant remote teams trying this might not fare as well.

That said, it does offer lots of advantages for many teams, such as:

• Saves time when wireframing
• No mismatch between wireframe and reality
• Good for Lean/Agile methodologies where deliverables don’t need to be so formal
• Good for small teams and startups without many resources (especially when using frameworks)
• Different skillsets can be applied to different design areas (e.g., visual designers and developers for the design system, interaction designers or PMs for the wireframes)
• Design processes (wireframes vs. design system creation) can be done independently, resulting in fewer bottlenecks
• More UI consistency across the product

More Design System Resources

• Design Systems Gallery
• “Designing Design Systems”
• “Getting Started with Pattern Libraries”
• Introduction to Atomic Design
• Pattern Lab Design System Tool
• Website Style Guide Resources