Find Jobs
Hire Freelancers
与 Ava 聊天 - 您的人工智能业务顾问
用户头像
大家好,我是 Ava,您的 AI 指南,可帮助您增强业务!
无论您已经在经营一家企业还是梦想创办一家企业,我们都会用AI赋能威客帮助您将愿景变为现实。分享您的业务目标,我们将共同创建一个项目,供我们才华横溢的威客竞标。让我们让您的愿景成为现实!
我已经有一份事业
我要创业
将对话发送到您的电子邮件时出现问题。请稍后再试。
您每小时只能保存一次对话。请稍后再试。
你们的谈话太短了。继续与 Ava 聊天以启用保存功能。

Website design: Dummies guide to wireframing a website

Wireframe creation is critical to website design, but it doesn't need to be complicated. We will teach the stress-free process.
2019年11月21日 • 阅读需5分钟
由Closed User于2020年6月10日进行更新
封面照片

Every successful website starts with a wireframe

This is part 2 of our ultimate guide to building a website series. To navigate to any of the other chapters refer to the table of contents below:
A website project is a lot like a construction project. You need to start with the blueprints before you start building.
The blueprint of a website is the wireframe. The wireframe shows the architectural structure of a website, the number of pages and how all the elements will be arranged on each individual page.
There are two different types of wireframes: low-fidelity and high-fidelity.
Low-fidelity wireframes provide a rough illustration of what a website will look like. The features on each page are represented by blocks and other symbols rather than fine details. A low-fidelity wireframe is a good option if you're on a tight schedule, or you're in a cafe doodling ideas on a napkin.
High-fidelity wireframes are much more detailed. They incorporate real video and images into each of the webpages to provide a realistic representation of the finished website. 
You don't necessarily need to progress from a low-fidelity wireframe to a high-fidelity one. If your web developer and designer have a firm understanding of all the requirements based on a low-fidelity wireframe, that should be enough.
One of the major benefits of wireframing is that it allows you to visualize the navigational flow of your visitors to create the best possible user experience.
When creating your wireframe, you should always start with a low-fidelity design so you can focus on perfecting the navigation first without being distracted by the finer design details.

Sitemap creation 

Before you create your wireframe, you should create a sitemap. A sitemap illustrates how all your website pages relate to one another. This will also help you create your wireflow (more on that shortly).
Here's an example of a sitemap:
website sitemap design
Source: quicksprout.com
Notice how the sitemap displays all the pages in hierarchical order. Starting from the top, the first 2–3 layers provide the greatest informational value to the overall website, and each subsequent layer offers less important information.
When creating your sitemap, include all of your main website pages in the top level navigation layer, the zero layer will be the home page. 
To guide your sitemap creation, think about what information your visitors would want to learn more about and branch down accordingly. For example, if you were a visitor reading a page comparing different service packages, wouldn't you want to read about each individual package in more detail? So, it makes sense to branch down to each individual service package.
In the example above, the blog pages are included in the top level. This will help your overall website to rank on Google as each of your blogs start individually ranking in Google search results
It's good SEO practice to start thinking about the strategic framework of your website content as early as possible. We'll discuss SEO in more detail in a later chapter.
With your sitemap created, let's start creating your wireframe.

How to create a website wireframe

The first thing you'll need to do is decide how many pages your website will have. A typical website is comprised of the pages listed below. 
To inspire your creativity, we've included links to design examples of each page. Just focus on the layout of each example and not the design details.
Homepage
About Page
Services / products page
FAQ's
Testimonials / Reviews
Contact Page
Blog
Press releases
Privacy Policy
Terms and Conditions 
"404 page not found" page
When crafting your wireframe, focus on one page at a time. Let's use the home page as an example.
Since this will be a low-fidelity wireframe, we'll be using symbols to represent the different elements on the page as simply as possible.
It's best to use standard wireframing symbols so that your developers can easily understand it.
The video below outlines some of the popular wireframing symbols you're likely to use.
Sketch your initial wireframing concepts on paper first. It gives you more freedom to come up with different ideas quickly.
Let's say you wanted to create a wireframe for your home page consisting of the following features:
Explainer video
Banner image
Top 2 customer testimonials
Call to action button
Your homepage wireframe might look something like this:
website wireframe design
You should create 8 different wireframe design variations for each page of your website so that you can explore as many different options as possible (your first design is unlikely to be the best).
You'll be amazed at how many design variations you can come up with when you force yourself to be creative.
Take a sheet of paper and fold it into 8 different sections (fold it 3x), or use a single sheet for each individual design. Once you've finished all of the design options, place a star next to your favorite ones for each webpage.
Now you're ready to recreate your winning designs with software.
There are many programs you can use to do this. The 3 most popular options are:

Sketch (macOS)

Here's a tutorial on how to use Sketch:

Balsamiq (web, macOS & Windows)

Here's a tutorial on how to use Balsamiq:

Invision Freehand (web)

Here's a tutorial on how to use Invision Freehand
If you're not familiar with how to use these tools, think about hiring a freelance graphic designer to help you. Ideally, you should look for a designer who's experienced with UI/UX (user interface and user experience). They can help advise you on the best way for users to navigate through your site, and the best placement for all the different elements.
Now that you have your site wireframed, the next step is to create a wireflow (don't worry this step is super easy).
A wireflow is simply a series of arrows that identify the pages each link click will lead to, so all you're really doing is adding some arrows to your wireframe.
Here's an example of a wireflow:
website wireflow design
Source: justuxdesign.com
With your website wireframe now complete, you can start designing your website in more detail.
In part 3 of our guide, we'll walk you through the process of designing a winning brand identity which will serves as the foundation of your entire website design.
Do you need a wireframe designed for your website? Click here to get started today!.
 
告诉我们你需要做什么
输入您的项目名称
开始项目
相关故事

与我们的Technical Co-Pilots进行沟通来获得项目帮助

立即获得帮助

专为您推荐的文章

文章缩略图 Top 10 trends in web development
Your website only has 10 seconds to engage a visitor and get them to stay. These web development trends will help you leave a lasting impression.
6 min read
文章缩略图 The 10 best tools for web development
Cultivate your skills as a web developer with these 10 tools. They'll streamline your workflow and help you complete projects quickly and efficiently.
9 min read
文章缩略图 Why hiring a graphic designer is vital for your business in 2023
Great graphic design will solidify your brand identity and drive revenue. Find out how to hire a great designer and what you should expect to pay.
9 min read
文章缩略图 How to make a great logo in 2020
Not every graphic designer can pull off a great logo design. Follow these 6 tips to ensure your logo sparkles and clients keeps coming back for more.
6 min read
谢谢!我们已通过电子邮件向您发送了索取免费积分的链接。
发送电子邮件时出现问题。请再试一次。
已注册用户 发布工作总数
Freelancer ® is a registered Trademark of Freelancer Technology Pty Limited (ACN 142 189 759)
Copyright © 2024 Freelancer Technology Pty Limited (ACN 142 189 759)
加载预览
授予地理位置权限。
您的登录会话已过期而且您已经登出,请再次登录。