How to use Sketch for wireframing a website
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 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 details 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).
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:
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:
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:
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.