A wireframe is a basic outline of a digital experience, like an app or a website. It looks like they were created with wires. They're mostly lines and shapes with some text.
- Establish the basic structure of a page. Before any visual considerations, like colour or images, are added.
- Serve as an outline to get the team on the same page early in the project. How do I organize information on the page in a way that makes sense for users?
- Highlight the intended function of the product. How the elements serve the overall functionality.
- Help designers save time and resources. Allow the team to quickly try out different design options. They also serve as a guide for everyone involved in the project, which saves time later.
A good wireframe is all about organizing and communicating information clearly to your colleagues who will implement your design.
Basics of drawing wireframes
Elements are building blocks for creating a design. like Lines, shapes like squares and circles, and text.
First, create the frame for the phone. This can be a simple rectangle. Make sure it's large enough to draw inside of. Next, We'll add a bar at the top. This bar is where we display information and actions relating to the current screen. This rectangular bar spans almost the entire width of the app at the top. Below the top bar are three dividers. Dividers are thin lines that group content in lists and layouts.
- Draw a navigation menu icon. That's the icon on the top left with three horizontal lines. The navigation menu icon should be inside the top bar.
- The avatar, which is a big circle with an icon of a person's head and stick-figure body.
2. Draw horizontal lines to indicate text. The line should only be in the middle of the rectangle, not drawn from end to end.
Industry standards are common ways to indicate page elements. Industry standards help you make sure your wireframes are simple and understandable, especially for any collaborators.
- Text, which should be represented by horizontal lines
- Images, photos, illustrations, and icons, which are represented by a circle and an X overlapping each circle.
- calls to action like “submit” or “compose” buttons—are represented by rectangles or circles, whichever fits the basic shape the element has on the screen.
Benefits to creating wireframes?
- Inform the elements to include in your design. Seeing the elements laid out on a page will help everyone decide if the right elements are included.
- Help you catch problems early. Allow you to map out how all the elements will look on each page and how users will navigate from page to page. This lets you check if elements are missing, out of order, or disorganized.
- Get stakeholders to focus on structure instead of the details like colour and text.
- Allow you to save time and effort. The wireframe serves as a guide for everyone involved in the project.
- Allow you to iterate quickly. Let us explore a greater number of design ideas and make it easy to create new designs faster.
The magic of a wireframe is its simplicity. A wireframe is a basic outline made up of lines and simple shapes.
Wireframes can help designers identify any missing or disorganized elements before creating the final design. It can also help stakeholders focus on the design's structure so they can make decisions early on.
Since wireframes are made up of simple lines and shapes, stakeholders won’t get stuck on the details. They can then make decisions on the structure quickly, and help designers catch problems early on.
Wireframes reduce the app down to its basic structure to highlight each element’s intended function.
Draw a wireframe
- Write a list of key home screen info: write a shortlist of the key information that is on the app’s home screen. Your list might include a navigation menu, a search bar, images, text, and other elements that are important to use the app. This will help you plan which elements need to be drawn in your paper wireframe and how they should be drawn.
- Draw the home screen’s frame: Using a piece of paper and a pen or pencil, draw a rectangle to represent the frame of the app’s home screen. The dimensions don’t need to be exact. It’s only important that the home screen’s key elements can fit in the rectangle and be placed similar to how they appear on the screen.
- Draw the screen’s key elements: Draw the key elements of the app’s home screen like lines and simple shapes—like circles, squares, and rectangles—within the frame. Follow the industry standards for representing certain elements.
Information architecture, or IA, organizes content to help users understand where they are in a product and where the information they want is.
- Knowing the users, their goals, and their behaviours is key to effective IA.
Importance of Information architecture
- Organizes and defines the overall structure for the app or the site.
- Provides a high-level view of a product. As a UX designer, you need to understand how the elements of a product fit together and relate to each other in order to create the design of that product.
- Helps stakeholders review your designs. Stakeholders can evaluate whether the content in this site or app is the correct type of content and if it's placed in the appropriate places to help achieve business or product goals.
- Helps engineers understand how to organize the data, so the eventual development of the product matches the visual designs you've created.
- Allows your ideas to grow and iterate with the design. The ability to adapt your approach at different stages of a project is one of a UX designer's most necessary skills. For example, you should group your information architecture in a way that allows you to add additional categories in the future.
Strong information architecture establishes clearer wireframes leading to a well-thought-out product, which can help engineers better understand how to organize the data during development. It also helps stakeholders to review designs and evaluate content type and placement.
If you create a clear information architecture for your app, you'll have a better understanding of how the different screens in the app will fit together and how the user will move or navigate between those screens.
Information architecture provides clearer direction and understanding when designers begin the wireframe creation process. Stronger information architecture typically results in a better thought-out product, and it helps designers to visualize how each screen will be navigated by users.
Benefits of paper wireframes
- Fastest way to get your idea out
- Is inexpensive
- Because creating papers wireframes is fast and inexpensive, you can explore lots of ideas
- They narrow your focus
Since pen and paper are the only necessary tools to create paper wireframes, they allow for low-cost, rapid iteration. Designers can create multiple wireframes in less time. They are also considered low commitment because they only require a pen and paper.
Storyboards and user flow: They broadly outline the main task or flow that a user will need to follow when using your product.
The goal of creating wireframes is to establish the basic structure of a page and to highlight the intended function of each element.
To help you explore lots of ideas, you will need to create multiple wireframes for the same screen of your app. For example, you may come up with a lot of ideas for the structure of the homepage and the intended function of each element on the homepage. So, you will draw wireframes for each of the ways that one screen (the homepage) could work.
Creating paper wireframes
- A piece of plain paper
- A writing utensil
2. Write a list of the elements you need to include in your wireframe
- To put this list together, think back to the research you’ve done and the artefacts/deliverables you’ve built. In particular, the Crazy Eights ideation exercise and the storyboards you developed should help you prioritize features and elements that your potential user will find helpful. Think about the elements and features that a user will want to see and need to use every time they open your app
3. Create five different versions of how to structure information on the page.
- Try not to spend too much time on these drawings. Set a timer for two minutes for each version of the five variants
4. Choose which elements to refine. Review the versions of the wireframe you came up with, and add a star next to the pieces you think are most effective.
- Think about the potential user of your product and what they’ll need to do in your product. How can you solve your problem statement most effectively?
5. Combine elements into a refined wireframe.
- Placing your focus on the best of your ideas, you can narrow down the parts of your wireframe that you want to explore further in a digital wireframe.
- These refined wireframes should build toward a user flow.
A good series of wireframes will meet these criteria:
- Clearly defines the elements intended for the page
- Includes multiple versions that arrange elements in different ways
- Provides you with distinct examples you can compare and test
Create wireframe
- Each of the wireframes clearly shows the basic structure of the page, including elements like navigation, buttons, images, and text.
- At least five different versions of how to structure information on the page were created following industry standards. Doing this gives designers the opportunity to explore lots of ideas.
- Stars were placed next to the elements of the design that would most effectively solve the problem.
- Starred elements were combined into a single refined wireframe.
Moving from paper to digital wireframes
- Is my paper wireframe complete? means you have an idea of the structure that you want to use in your wireframe.
- Have I received feedback on my paper wireframe?
- Am I ready to consider basic visual cues?
Transitioning to digital wireframes
- Use actual content for important pieces of text, instead of all placeholder text. But for large chunks of body copy, use a placeholder text like Lorem ipsum.
- Hold back on adding expressive content, like colour or images, into your wireframe for now. Your wireframe should still focus on functionality. Wait until you start working on prototypes before adding expressive visual details.
Lorem ipsum is a meaningless placeholder text written in Latin that you can use to show where content will go, and how a page will be laid out.
- Using Lorem ipsum allows designers to present the structure of the wireframe without the distraction of actual words.
Benefits of digital wireframes
- Allow you to pay more attention to the details. It's important to get the structure right. And that means making your design cleaner.
- Easier to share and allow you to collaborate.
Working together on a cloud-based app speeds up the process, making it ideal for collaboration and time management.
Wide lines typically indicate text in wireframes. Narrower lines are meant to show divisions.
You will need to start defining the hierarchy of information on your pages and elements. Decide how you are going to use elements like text size, text weight, and location to assign appropriate values as you are building. What is most important to the user? That should be intuitively discoverable in your design. In other words, users should be able to find the most important elements of the app without thinking too much about how to navigate.
For this level of fidelity, remember that your priority is usability; you should not include colours, font styling, or images at this point. Focus on structure.
There is no magic number of screens to create; a good best practice is to think about the key screens someone needs to use your product.
Be sure to address the following questions in your completed deliverable:
- Are your digital wireframes based on your previous paper screens?
- Did you add more detail and think about the hierarchy of information on each?
- Did you build out key screens of your product?
- Do your wireframes let the user know what they can do on a screen?
Create digital wireframe
- To begin the process of creating digital wireframes, I pulled out my original paper wireframes and my research. I studied these materials to remind myself where I had decided to place my elements, and why.
- Next, I opened Figma and started a new project file. Then, I uploaded pictures of the paper wireframes into Figma to use them as a reference.
- Once the paper wireframes were uploaded, I created frames for the device we were designing for. Once I had the correct number of frames for my design, I added a layout grid to keep everything lined up accurately.
- Then, it was time to design. I began to create each of the elements in my paper wireframes. I started with buttons and icons. I pulled basic icons from free asset libraries, and used shapes, lines, and fills to create the remaining elements. Once those were finished, I created content sections and text placeholders. Note that I hadn't placed any of the elements onto my screens yet.
- After all of my elements were created, I began to place them into the design. I followed my paper wireframes as a model to make sure that I were aligning my digital wireframe with my previous design iterations and the insights I uncovered in my research. I repeated this process for each screen in my design until I had a full set of wireframes that were based on my paper wireframes.
- Notice that my example wireframe is easy to understand and conveys what is meant to happen on each screen to the user. It uses a hierarchy of information, bringing the most important information to the forefront. The importance of the information was based on the research I had completed earlier in the design cycle.
- Your digital wireframes should:
- Include built-out key screens of your product
- Be based on your paper wireframes
- Include more detail than the paper wireframes
- Consider the hierarchy of information on each screen
- Let the user know what they can do on any given screen
