Freelancer标志如何运作 浏览工作 登录 注册 发布项目
Find Jobs
Hire Freelancers
Get Ideas
About
Resources
Why hiring a graphic designer is vital for your business in 2020 The graphic designer's essential toolkit

How to use Sketch for wireframing a website

Wireframing your website is the first step in the design process. In this post we teach you how to wireframe your website using the software Sketch
2020年8月4日 • 阅读需4分钟
封面照片

Sketch is a great tool for bringing your website ideas to life

Sketch is one of the top vector Graphics designers among designers. Sketch is the most cost effective and functionally rich tool on the market.
In this post we will teach you how to wireframe your website with Sketch.

What is wireframing?

A wireframe is the blueprint of your website. It consists of a very basic representation of all of the elements on each page of a website. The purpose of a wireframe is to help designers finalize the structure of a website (size of elements and their positions etc) before moving onto more detailed designed work. 
A wireframing project has two primary objectives:
Represent all of the data that will be shown on the page.
Provide a diagrammatic illustration of the user interface (UI) structure of each web page. 

How to start wireframing your website

Before you begin your wireframe design you must do a thorough competitor research to discover what your most successful competitors are doing. Take a look at their website and take note of their website structure. 
Your competitors may have likely discovered the most effective UI design based on historical visitor data, so it's well worth using their basic structure as a reference for your wireframe design, just make sure you modify it to be unique and don't plagiarize.
Collate all of your research data in a spreadsheet so that you can easily share your findings with other designers you may be working with. 
Once your research is complete, you should sketch a basic wireframe design for your website by hand on paper. It's best to do it by hand to begin with to prevent your creative flow from being impeded by any technological obstacles.
This simplistic wireframe sketch is known as a 'low fidelity wireframe' because it is the most basic representation of your website structure.
Watch this video to learn how to create a freehand wireframe drawing:
Once your hand sketch is complete, you can then move onto transferring into a digital version using the Sketch software.

Wireframing in Sketch

In the Sketch software you should create multiple pages to represent each page of your website. You should also create pages dedicated to all of the assets you will be using as well as a creative workspace to brainstorm ideas.
Here is a list of the types of pages that should be created in Sketch for a typical ecommerce website:
Creative Workspace: For creative brainstorming
Text Styles: For whatever text style you wish to use. Text should be of such a style that will be easily read by users.
Assets: For all logos, photos, informative videos about your website and all other items that are going to be used in your project. These will be used for your high fidelity wireframe design (a more detailed representation of your website structure).
Home page
Product page
Order and purchase Page: It will help customers to make their order and pay by using any one of the available methods.
Cart Page: It will show all the orders which are still in their way to reach their customers.
Confirmation Page: It will assure your order payment.
Watch this video to learn how to create pages in Sketch
You should create multiple variants in different artboards for each wireframe design to broaden your options and also accommodate for all user journey scenarios.
Here are some variant examples:
Invalid address or payment information screen
Missing information screen
Form submission screen
Watch this video to learn how to create artboards and insert elements with Sketch:

Naming your artboards efficiently

To avoid confusion and help your team members to track the progress of your wireframing project, you should follow a particular naming convention:
name-number-modifier-size.jpg. 
For example:
purchase-01-default-small.jpg 
and 
purchase-02-invalid address-small.jpg 

Creating text styles

You should create a text styling artboard to represent the style of text you will be using on your website. As you evolve your wireframe design into a higher fidelity version, you can start implementing these text designs.
Watch this video to learn how to create a text styling artboard in Sketch:

Creating symbols

Your entire wireframing design will consist of different symbols, but when working with such a large symbol list, it's very easy to get confused and lose track of your progress. 
To avoid such headaches, you should follow symbol creation best practices. The video below will introduce you to the most efficient method of creating and organizing symbols in Sketch.

Creating a high fidelity wireframe in Sketch 

After your low fidelity wireframe design is approved you can move onto cultivating its detail into a high fidelity design. This is an opportunity for you to insert your different text styles to see how they look alongside more detailed design elements.
The videos below demonstrate the process of creating a low fidelity wireframing and then upgrading it into a high fidelity design.
Sharing your wireframes with others
Once your wireframe designs are complete, you may want to share it with other team members.
The videos below outlines the processes of sharing your wireframe projects:

Hire a freelancer to wireframe your site in Sketch

Sketch is a great tool for wireframing, but it still has a steep learning curve if you've never used it before. A freelance web designer can help you wireframe your website quickly, efficiently and at a low cost.
One of the most important reasons to use a freelancer to wireframe your site is making sure the user interface (UI) and user experience (UX) are excellent. UI and UX decrease the friction that people feel when using your site. Good UI/UX makes your site intuitive to use. But implementing good UI/UX takes skill. You'll save time and money in the long run by hiring an expert.

Final thoughts 

Creating a wireframe for your website design will save you both time and money. Design modifications are much quicker to implement in the Sketch software than when the website is fully coded.
Follow the tips in this post to effectively create a wireframe for your new website.
 

相关故事

The graphic designer's essential toolkit
阅读需9分钟
Why hiring a graphic designer is vital for your business in 2020
阅读需9分钟
The 8 best alternatives to Photoshop
阅读需4分钟
The 8 best alternatives to Adobe Illustrator
阅读需4分钟
The 6 best alternatives to Adobe After Effects
阅读需4分钟

获得最新信息

订阅我们的新闻时讯,及时获取重要信息。
感谢订阅!请留意收件箱关注我们的下次更新。
该电子邮箱已被注册。
糟糕!出现了错误,请重新尝试。 如果问题仍然存在,请联系客服,并附上下面的错误信息:错误代码:

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

立即获得帮助

专为您推荐的文章

文章缩略图 11 inventive ways to make $1000+ [starting this weekend]
Making money online is now easier than ever if you use the right strategies. We break down 11 different ways you can make $1000+ online effectively.
15 min read
文章缩略图 Funding your startup
A million dollar business idea is useless if it remains written on a napkin. Learn the best ways of securing funding to build your dream.
26 min read
文章缩略图 Why your business needs data science
Whether you know it or not, your business collects a lot of data. Data science helps you use that data as a powerful tool to improve your business.
5 min read
文章缩略图 Dr Christyl Johnson: 3 Ways to Jumpstart Your Creativity
If your creativity needs a jump start follow Dr Christyl Johnson's tips to get back on track fast
4 min read
已注册用户 发布工作总数
Freelancer ® is a registered Trademark of Freelancer Technology Pty Limited (ACN 142 189 759)
Copyright © 2022 Freelancer Technology Pty Limited (ACN 142 189 759)
加载预览
授予地理位置权限。
您的登录会话已过期而且您已经登出,请再次登录。