In this 3rd part, we will explain you how to best start your project on Sketch which seems to us to be the best tool at the moment.

Sketch is easy to use and allows you to create the whole concept, even if most users only use it 50%. We will therefore introduce you to Sketch’s advanced principles, such as the use of symbols, basic components, icons or even text styles to simplify and optimize the work, throughout your project.

These tools will allow you to connect all your elements which will form the whole project. This way, you will be able to make very targeted changes in your design with automatic and globalized iterations.

Visu 1

Use of symbols

When creating your application, an architecture will first be built during the wireframing phase. This will then form the structure of your application which will be composed of several boxes each with its own identity. In the example presented, we will use symbols that will form “input box”,”product box”,”CTA” (call to action),”details box” and other “box” according to your structure.

Visu 2

To avoid creating identical boxes for the whole application, it is important to associate each box with its own symbol. So you are going to create a basic component that will form part of your architecture and keep the same information given on each box used. In our example, we have therefore created product boxes with visuals and informative texts according to our design.

 

Visu 3

 

When using a similar boxing box, you must use the same symbol to modify the visual or text without impacting the placement.

 

Visu 4

 

If you later decide to delete one of your texts, you just have to modify the symbol of the box in question, so the change will be effective on all boxes of your application. This method saves time and ensures consistency within your project.

Your work will therefore consist of a set of symbols linked to a master symbol that defines the display rules. It is important to note that it is imperative to clearly name each symbol to allow the software to properly organize and classify your work plan. In our example, our boxes are in the category “box” more precisely “because” in the name of “cover” or “classic” or “little” which differentiates them.

 

The use of basic symbols

Before you even start working on your symbols, it is important to create a “graphic chart” composed of the basics of your application. You will find colors or even icons in the form of a symbol that will allow you to realize all your boxes.

 

Visu 5

 

Take for example our tab-bar which is a symbol composed of other basic symbols. To make it, we therefore used to start with a white, rectangular, non-radius base component that will form the back of the tab-bar. Afterwards, we added our icons (base symbol previously created) directly on our symbol in the process of creation. So we created a symbol with a composition of other symbols.

 

Visu 6

 

By using this technique of symbols included in other symbols, it is therefore very easy for us to change the background at any time, just like the icons simply when setting up our pages. We have, in a way, connected all of our elements.

 

Visu 7

The use of text style

Just like the symbols, it is possible to connect all your texts by creating a basic style that you can reuse. Once the text style is created, like the Big Title in our example, you can modify it and change all the texts that have the same text style. It is therefore advisable to create several text styles to use in your application.

 

To conclude

It is important to organize your workspace as well as possible before you even start your project in order to gain efficiency and speed. It is one of the best ways to manage your time and simplify your work so that you can get the most out of your work. By using this symbol or text style system, it is very simple to make changes on the whole application using only symbols.

 

Visu 8

Our next chapter will look at the classic Prototype: Invision & Principle.