Have you ever heard the word wireframe when trying to create a website? A wireframe is like a blueprint for creating a website. For projects where multiple people are involved in the production, it is effective to share images.
In this article, we will explain what wireframes are, when they are needed, and we will also explain how to create wireframes. We will also introduce recommended tools for creating wireframes, so please watch until the end.
What is a wireframe?
A wireframe
used during web production is a blueprint that simply sketches the basic layout and content arrangement of
a homepage
. It is created to summarize “where”, “what”, and “how” to place on a page, and to make it easier to confirm when building or renovating your company’s site, and to visualize the structure according to the client’s concept.
Wire means “cable” or “electric wire”, and frame means “frame” or “skeleton”. It’s called a frame.
Why you need wireframes
So why do we need wireframes?
The main reasons for creating wireframes are:
By creating a wireframe, you will be able to organize information about the website you are trying to create. Basic information about the site is visualized, such as what kind of layout to create and where to place the content.
We are also good at sharing information with those involved in projects, such as clients and web designers. Even if the person in charge changes or the contractor is replaced, the wireframe will allow you to visually understand the layout, making it easy to share the completed image.
The process of creating a wireframe
Now that we have introduced the meaning of wireframes and why they are necessary, we will now explain the process of actually creating wireframes using a company’s official website (corporate website) as an example.
Identifying necessary information
First, let’s identify the necessary information that you want to post on your website. At the beginning stage, you may not have a complete image yet, so try writing down all the content you want to include.
Examples of required information
After writing down the necessary information, start grouping similar information. The reason for grouping is that the basis of wireframes is to create similar information in a similar arrangement. For example, group things that can be grouped similarly, such as “phone number”, “address”, and “access” into the same group.
Finally, determine the importance of the information you have picked up. Decide on the importance according to the purpose and concept of your website. At that time, it is best to review all the written content and delete unnecessary information.
Creating a rough draft
Once we have identified the necessary information and grouped and selected information, we will create a rough draft of the wireframe. At this stage, try to create something really rough, like a sketch. If you create too many rough drafts, there is a risk that you will not be able to select an appropriate layout at the layout planning stage.
Let’s create a rough wireframe proposal, keeping in mind where and in what form the necessary information will be placed, and the flow path of people visiting the website.
Layout idea
After creating a rough draft, think about the layout. The layout planning stage is when you decide what kind of concept you will use to create your homepage. The layout of the site will change depending on the direction of the company, whether you want to create a friendly site or create a solid corporate image.
There are commonly used templates for layouts. These include 1-column layout, multi-column layout, and fixed sidebar layout. Choose the most appropriate layout depending on the amount and content of information and the direction of your company.
Actual production
Once the layout is complete, we move on to creating the actual wireframes.
A website page is made up of elements such as a “header” and “footer” at the top and bottom of the page, a “main visual” that is the first thing that appears to site visitors, and a “content area” that is the main part of the page’s content. It can be divided. There are important points to keep in mind for each element regarding how it should be shown to visitors, so consider these points and arrange the necessary content for each element.
Wireframes will be created for each representative page. Be sure to be aware of the leads to other pages and create a complete wireframe.
7 tools to conveniently create wireframes
Now that you know the flow of how to create a wireframe, let’s introduce seven tools that can be used to conveniently create wireframes.
Each site has its strengths. Be sure to choose a production tool that matches the concept of your homepage.
Adobe XD
Adobe XD is a web design tool for creating wireframes, animations, etc. Templates are provided for each device, and there are many useful functions such as prototype function, margin display, and repeat function.
The basic paid plan can be used for 1,298 yen (tax included) per month, but a starter kit that can be used for free is also available. If you are not into web design as a profession, this starter kit will be sufficient.
Cacoo
Cacoo is a visual collaboration tool that allows you to create presentation materials in addition to wireframes. Cacoo’s strength is that it has over 100 templates, but it also has a wealth of communication functions, including collaboration with external services such as Slack and a chat function.
The basic price for the Pro plan is reasonable at 660 yen per month. The team plan costs 660 yen per person per month and can be used for up to 200 users, so it can be used for relatively large projects.
There is also a free plan that can be used for free, although it is less functional, such as limiting the number of seats.
Sketch
Sketch is a Mac-specific wireframe tool developed by Bogemian Coding. It features intuitive operability and is an easy-to-use tool for those looking for a tool for Mac.
The basic price is $9 per month for the standard plan, and a business plan with even more features is available by contacting the operating company. There is also a
30-day free
trial period, so if you are interested, you can try it here.
Excel
Excel is a spreadsheet software that requires no explanation for those using computers. Excel is a popular software, so you can create wireframes using familiar operations.
However, when creating wireframes with complex structures and layouts, Excel is not sufficient, so it is better to use a dedicated design tool.
The basic fee is free if Microsoft Excel is installed. Nowadays, there is also a spreadsheet software provided by Google called Google Sheets that allows collaborative editing on the cloud. If you want to create wireframes for free, you can use Google Sheets.
Wireframe.cc
Wireframe.cc is an easy-to-use wireframe tool. It features a very simple interface and is recommended for those who want to create wireframes with the minimum necessary layout.
Pricing starts at $16 per person per month, and you can get a 7-day free trial by signing up.
Marvel
Marvel is a wireframe tool that allows you to create prototypes without using complex programming code.
It’s fast-acting, but also has hundreds of templates for every device, and you can create unlimited projects even with the free plan.
Justinmind Prototyper
Justinmind Prototyper is an all-in-one prototyping tool that allows you to create a variety of designs, from wireframes to advanced prototypes. The feature is that you can also set up web interactions that allow the screen to respond to user actions.
Plans include a standard plan for $9 per month, a professional plan for $19 per month, and a plan for businesses. A free version is also available, so if you’re interested, try it out.
Wireframe reference site
Visually viewing the actual wireframes produced will give good suggestions to those who are planning to create wireframes in the future.
Lastly, I will introduce some sites that can be helpful when creating wireframes.
Wireframe Showcase
Since this is an overseas site, it is written in English, but when you move your cursor over the homepage you want to see, a wireframe will be displayed overlapping it. It is very easy to understand and can be used as a reference when creating wireframes.
I ♥ wireframes
I ♥ wireframes is a site introducing wireframe examples posted by people who have actually created wireframes.
There are over 800 types of wireframes posted, and you can see wireframes for various devices such as PCs and smartphones. This is also an overseas site, so it is written in English, but it is good for visually understanding wireframes.
Summary: Be fully prepared with wireframes
A wireframe is a blueprint that simply sketches the basic layout and content arrangement of a website, and is created for the purpose of organizing information and sharing information with related parties. There are wireframing tools available for free or at affordable prices, so make sure to take advantage of them.
Creating a wireframe is essential in order to clarify the concept of your company’s homepage and unify the image of everyone involved. Don’t forget to create wireframes in order to avoid failures in web production.