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
Mar 16, 2020 • 4 minute read
Technical Co-pilot
Cover photo for How to use Sketch for wireframing a website

Mantente actualizado

Suscríbete a nuestro boletín de noticias para mantenerte al día en los temas que importan.
¡Gracias por suscribirte! Revisa tu bandeja de entrada para nuestra próxima actualización.

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).

  • 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:

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.

 

Mantente actualizado

Suscríbete a nuestro boletín de noticias para mantenerte al día en los temas que importan.
¡Gracias por suscribirte! Revisa tu bandeja de entrada para nuestra próxima actualización.

Talk to one of our Technical Co-Pilots to help with your project

Get Help Now
Artículos recomendados solo para ti
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
A million dollar business idea is useless if it remains written on a napkin. Learn the best ways of securing funding in 2020 to build your dream.
26 MIN READ
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
If your creativity needs a jump start follow Dr Christyl Johnson's tips to get back on track fast
4 MIN READ