What is wireframe?

Wireframe (skeleton/wire structure) is a visual tool for Web design at the structural level. A wireframe is often used to lay out content and functionality on a page. Wireframes are also used in the process of establishing the basic structure of the website before the visual design. Of course, that process needs to be created, supplemented and perfected content.

Another way to describe it, it can be understood that Wireframes are black and white layouts outlined in specific sizes and positions corresponding to each page element, page feature, transition areas or each navigation for each page. your website. They are plain, without colors, font choices, logos or any other design elements. What the wireframe focuses on is the structure of the site.

Distinguishing factor and purpose of using Wireframe?

Wireframe has the ability to support and respond to problems that arise during the interface design process. A Wireframe is a layout of a web page that represents what interface elements will exist on the main pages. This is an important part of the interaction design process.

Wireframe is not sketches, drafts… And of course, drafts, drafts are not called Lo-fi Wireframe, it's just Sketch.

When looking at Sketch (left image), it is difficult for us to grasp the specific UX intent. On the contrary, it is also the doodles that seem difficult to imagine, but if you are a design scholar, you will know well about the functions, positions, and roles of components.

If merely discussing and drawing out the functions, it is just a Sketch, not a Wireframe. When implementing UX based on a collective decision, that consensus is initially called a Wireframe.

Advantages

Wireframe provides an overview as soon as possible, used to review negotiations with customers. Seen from a practical perspective, wireframes ensure the full content and functionality of the page on the basis of precise positioning based on the needs of users and businesses. This is also the biggest advantage that wireframe structure brings to users.

When developing a project, they have a practical role of supporting use among members of a team, helping them work to agree on the vision and scope of the project.

Defect

Since the wireframes do not include any design or technical requirements, it is not always easy for the client to grasp this concept/terminology. The web designer will also have to translate the wireframes into a design. In addition, there should be coordination between the designer and the copywriter when working with the appropriate website content.

Why should you use Wireframe?

Finally, optimize the process time: Wireframes ensure that the creative, branding multi-dimensional aspects of the website are combined in one step. This allows customers to provide feedback earlier in the process. What's more, Wireframe helps users do more calculations, making everything clear and specific.

Wireframe and related terms

Each term is born to describe a certain specialized scientific activity. When we put together a category, we will see the connection between it and related terms. All 3 terms Wireframe, Mockups and Prototype have different purposes and roles in the design process.

Wireframes are simple illustrations of the structure and components of a web page. Those are graphic elements such as lines, boxes with black and white colors, etc. Wireframe provides specific descriptions and instructions to help you shape correctly right from the start.

Mockups is the next level from Wireframe. It usually focuses on visual design elements. Mockups can use subtle graphic elements instead of unsightly tones. This has important implications for brand identity. Because it is a reinterpretation of brand visual languages.

Prototypes used before programming logic on a page. It takes the semi-functional website layout of a mockup with the aim of providing a better insight into the functionality of the website before it is built. Prototypes are usually created with HTML/CSS, even JavaScript, to show how the user interface should work.

Levels of fidelity

Authenticity is always what every creator wants to convey to viewers. Based on your initial determination, you should be able to make flexible changes to the wireframe's level of detail and goals.

Block diagrams

Block diagrams provide the most basic information of a Wireframe such as: layout, content types or basic functions that you want to show.

You can easily set up information hierarchy, typeface, add text, resize to emphasize content. Don't go into too much detail. Remember that it is better to promote generality without losing the overall layout of the Wireframe.

Gray boxes

Shades of gray are a good choice for you to highlight the composition, while minimizing color selection time. This makes it easy to check User Flows and organize content.

High-Fidelity Text

This way creates the most realism. When it doesn't go too deep into the graphic details. More specifically, fill in the actual text (not “lorem ipsum”), paragraph length, ideal font, etc.

High-Fidelity Color

Similarly, this is also how you can add color to the background, buttons, paragraphs to emphasize the desired action or User Flows. However, don't get lost and get distracted by the details. That will distract the viewer by too many colors and elements.

High-Fidelity Media

This way helps you to limit the graphic details. Meaning, you can insert images, videos or something like that. This also partly helps to emphasize the content, impacting the overall structure and hierarchy of information.

Steps to build an effective wireframe design

Wireframe design is a very important step in any interface design process.

It looks like an architectural blueprint; you need to present it in black and white diagram before building a complete structure. Similarly, for an interface design, you need to know the implementation steps, organize the layout, the content, etc.

Wireframe defines how the user interacts with the interface. For example, Wireframe contains many different states: button clicks or menu behaviors.

Wireframe design creates interaction with intuitive interface. The main feature is that it is not distracted by color elements, typography, etc. There are 9 steps that you need to keep in mind when setting up an effective Wireframe design.

Step 1: Tap into the inspirations

Finding good ideas is the first thing you have to take care of. A picture can draw thousands of different words. Follow up and try to capture Can you quickly get an overview and get a visual of how designers are operating the Wireframe design process?

You can also use this handy browser-based bookmarking software.

It is quite interesting that if you continuously observe what designers or websites are doing for their Wireframe, you will gradually get an idea of how Wireframe helps organize information for the interface.

Step 2: Design your process

Design is an organized process. You have to figure out the processes if you want to play to your strengths. Here are some diagrams showing some typical processes:

Based on personal experience, you should consider choosing any HTML/CSS Framework in your projects. Decide which process you feel is the best fit. Sometimes, experiment to see for yourself which process works best. You don't have to be too good at sketching. Simply try to consider the journey for yourself. That's the basis for you to develop your own preferred process.

Step 3: Be smart in choosing tools

TopDev suggests you some commonly used tools today in building Wireframe in UI UX.

First of all, there are 3 tools that designers love in wireframe design:

1. Omnigraffle

This is a favorite tool of Macbook users. Omnigraffle also has a library of contributions from real data from users. And is widely supported including reusable components.

Omnigraffle also has powerful features: auto-layout, custom object types, smart guide, etc. These features are also present in the Adobe CS suite. If you don't have a CS suite, Omnigraffle is a reasonable choice (around 100$) for creating detailed Wireframes.

2. Axure

Considered the "big brother", Axure is a good support tool for professional Wireframe design. But this tool just appeared on Windows operating system.

However, this tool has just appeared. However, the coverage because of smart features, especially Axure's Dark mode is undisputed.

3. Illustrator

If you are starting from a designer, you must be very familiar with Adobe Illustrator.

4. Indesign

Indesign attracts users due to special advantages. Like the creation of highly accurate and interactive prototypes.

There are strengths similar to Adobe Illustrator in terms of more powerful typographic control; Indesign has better typographic control. Also, has strong master page support and, more recently, the ability to create interactive prototypes.

5. Balsamiq

Balsamiq is highly regarded by designers and became popular when wireframes were created to resemble professional drafts. This tool is more prominent with a huge library of reusable components.

You can also use it on most of the different platforms: Mac, Windows and Linux. What's more, there's also a web version if you want to work in the cloud. Third-party apps like iMockups for iOS also support exporting to Balsamiq formats.

6. Flairbuilder

Flairbuilder is a newly invented tool that strongly supports interactions.

Not only that, it also has a huge component library, supporting master pages. And of course, you can easily export the prototype for viewing online.

Don't worry if desktop software is not the perfect choice. Try out the following useful online apps:

7. Keynote/Powerpoint

With outstanding features, Keynotopia Transform your favorite presentation app into the fastest prototyping tool. It is this that has helped create mobile, web and desktop app mockups. For non-mac users, Keynotopia also offers powerpoint templates.

Fireworks

Fireworks can work on the entire design process. From basic Wireframes to the full interface. Fireworks supports reused master pages (described as templates) on child pages. In addition, Fireworks allows you to create interactive prototypes.

Step 4: Set up a Grid

To put it simply, the Grid system is a structured way of organizing. It's not too complicated in the layout of the components.

For a specific example, you use Illustrator to do the setup. First, that's setting the document size. Let's say you choose a size of 1280 x 900. This allows scaling between mobile resolutions to a maximum of 1140 pixels.

Place the downloaded template from the CSS grid into your document

Step 5: Define layout with cells

Let's start by drawing cells on the Grid. Next, consider the order in which you want to present the information to your audience. A perfect sequence would start from top to bottom, then left to right. As the example below describes.

Depending on your goal and audience, you can get creative with composition. Still, keep the hierarchy of information in mind. Here is a real life example describing this problem.

Step 6: Define information hierarchy with Typography

Once you've arranged the cells properly, start adding some content to them. It will help you assess whether the information is well structured. The important principle lies in similarity. That is, the information you want to convey must be clear, even in a black and white wireframe.

One trick in this step is to use different font sizes. It's a great way to distinguish different levels of information.

Otherwise, you should fill in more details. You may find the original layout doesn't work well. That's the whole point of the Wireframe design process. As the example below describes.

Step 7: Refine with gray range

Take advantage of the grayscale to help you visually determine the intensity of the components.

Step 8: Wireframe has a high level of detail

This step enhances and optimizes the entire Wireframe organization process. It is not required to be done. However, to ensure the performance of the creative process, you can consider.

Creating a highly detailed Wireframe is also important. It means you need to add more details. Let's fill the Wireframe with actual copies and try to determine the ideal font size:

Or it could also be color related:

At the visual stage or write code, you want to get yourself out of sketch or test mode then the best way is to do iterative cycles (feedback <-> Wireframe design).

Besides, it's best to skip defining too many details. And straight into the design phase of interactive prototypes (that's 37signals). Simply put, details cannot be adequately conveyed on a flat image. So don't focus too much on it. If you work with a team of developers, ask them to evaluate Wireframes. This is an important basis you need to remember when working on visual interfaces.

Step 9: Convert Wireframe to Visual Interface

This is the last step before finalizing the visual interface. The ideal tool for this step is again Illustration. This tool can export it to a .psd file with most of the layers editable.

Here is an example of a Wireframe that has been converted to a visual interface. Wireframe's skeleton is pretty much intact, despite the visual tweaks that have been made.

Favorite Wireframe Creation Platforms

Let's take a look at some potential libraries with TopDev for the category of visual interface creation.

Wireframes To Go

There are a lot of community contributed designs. Here you can find countless UI Components or Wireframes for the entire website. Note, the designs on this page only support Balsamiq Mockups.

Sketch App Resources

Perhaps we are not too unfamiliar with Sketch, It is a popular design tool today and only runs on Mac OS. This creative website has many templates for Web, Mobile, Wearable and icon.

Figma Resources

Although considered a junior of Sketch, in terms of functionality, Figma has superior strengths. Typically, it supports multiple platforms such as Mac OS, Windows and Web. In addition to outstanding points, this website still ensures the same features as Sketch App Resources.

I Love Wireframes

Many designs are contributed by the community to a group on a common group on the same platform. Often the creative designs on this site are very special and diverse.

Wireframe Showcase

This page loads of complete Wireframes of a web page or a section within a web page. It includes Wireframe and final image after finishing.

Through a shared data source, you will realize a common pattern. From there, it is possible to break and create on the existing design platform.

Web Without Words

This is a pretty interesting site. Because its feature is to remove all images, text. At the same time, the web page effectively abstracts the elements with symbols used in Wireframe.

Summary of Wireframe

Wireframe has now become an indispensable companion for the creative industry. In addition, large companies and organizations also include Wireframe in developing their innovative products through projects. 

Although there are still many unfinished points, Wireframe still has certain advantages. The functions and sketch effects, black and white gray or blue, represent the interface at its best. Thanks to the powerful support from technology tools, Wireframe creates innovative and outstanding interface products.