What is Wireframe – Troubleinthepeace

Having had the opportunity to read the book “The Guide to Wireframeing”, I translated and added some places to have more references in Vietnamese. I will divide the book into parts for everyone to follow. There are some English words that I will leave as they are because the translation into Vietnamese is very “grapefruit”.

Part 1: A practical view of Wireframe


Wireframe is an important tool in the product design and development process. When creating a product, a wireframe is a blueprint that helps developers, product managers, and designers talk to each other. And every time there is a change in the interface, it is easy and fast for everyone to understand and implement. Wireframe can be done fast on paper or computer.


Who uses wireframes?

Anyone involved in product development can use wireframes, such as Business Analyst, Information architect, User Experience Designer, etc.

You are viewing: What is Wireframe?

The following sections will detail how each person on the team uses wireframes and wireframe design tools.

Why should anyone use wireframes?

Wireframe can be understood as a blueprint. This blueprint represents the basic information, the look and feel of a website or mobile application. Everyone involved in the development can comment and correct errors when talking about the details of each page.

Structure (Structure) – Header, sidebar, footer, statistics table, … are placed like?Content (Content) – What will this page show up?Informational hierarchy – Information organization and display?Function (Functionality) – How does the interface show functionality?Behavior (Behavior) – How the user interacts with the interface.

Wireframe does not include the presentation of interface details such as colors, image content, identification, etc.

Why should I use wireframes?

Whatever the purpose of using wireframe? Whether it is a sketch on paper, or some specialized tool, the image is a gray box or an image, etc., it also conveys information. Compared to other methods such as Mock Up, Visual Design, wireframe drawing is still the least time consuming choice to present information on the interface to others.

Interaction and UX Designer, Information Architect

UX Designer and Information Architect use wireframes to demonstrate how the user works between screens. Usually they will combine wireframe with Flow Chart, Storyboard.

See also: Download Animal Arena Game

As shown below, you will see the basic information, the functions available on the screen, how the user will interact, the information hierarchy. Then, the result will be passed to the Graphic Designer.


Graphic Designer

Graphic Designer will rely on wireframes to create mockups with detailed interfaces, prototypes showing how to interact to create the final design. This step will incorporate sketches, storyboards and wireframes.

When the wireframe is delivered to them, you will see the detailed content of the screen rendered from the results of the UX Designer and Information Architect.


The developer will look at the wireframe to see how much functionality needs to be implemented. Front-End Developer will look at the interface code like. Back-End Developer will know what functions are available to write the handler.

Business Analysts

Business Analysts use wireframes to ensure the right interface shows the right business, how to interact on the screen in an intuitive way.

Bussiness Department

This department refers to the Product Manager, Project Manager, etc., using wireframes to check that the customer’s requirements are met, the objects shown on the design to adjust the product’s strategy.

Related parties

This set includes client, partner, etc. They look at the wireframe to make sure the designer has done it right in the agreement.

See also: What is English Ordinal Number, Ordinal Number In English

Wireframe brought to these people must be clear and clean because they still have their work, so they need to review quickly to avoid wasting time.

End of part one

By the end of part 1, you will have an idea of ​​how people will use wireframes, and what are the benefits of it. I also share my problem related to wireframe.

Usually, most of the students have a habit of jumping straight into the interface code, no design. From time to time it becomes a habit, if you have the desire to do it startup then you’re going to run into the code as well. One fine day, you find it ugly and you want to fix it… it’s a horror movie. After that, learn from experience, draw details of the interface first with Adobe Illustrator, Adobe Photoshop, … it’s called mockup. It’s better, but it’s still troublesome. So let’s make it simple to wireframe. Tools, I will mention in another part. In general, I draw wireframes very quickly.. It takes about 10 minutes to have about a dozen versions of the interface. Then filter out to draw mockup. His life is a little more rosy.


Category: FAQ

About Troubleinthepeace

Troubleinthepeace specializing in synthesizing information about daily life activities

View all posts by Troubleinthepeace →

Trả lời

Email của bạn sẽ không được hiển thị công khai.