Website design in Sketch.app. Part 2.1: bringing beauty

  • Tutorial
The first part is about prototypes.

intro-img-2

I have a very long description of the process, so we won’t limit ourselves to two parts.
So, we continue with our headphones. First, let's figure out how to make a grid in Sketch ...


Modular grid


You can configure the grid from two places. Display - from the program settings:

grid options

Dimensions and number of columns / cells - from the menu on the toolbar:

grid menu

Let's take 12 columns with a column width of 60px and a distance of 30px between the columns. We will make the main text 16pks in size, which means the baseline is 24pks (one and a half interval). But we will make horizontal guides half as small (12pcs) - it’s more convenient for me.

column parameters

menu


We will leave the main font for now by default - let Helvetika. For headings, take PT Serif. We align the menu and write the name of our store. Well, let “Headphones” be. To align the layers, go to the upper right corner:

alignment

In the menu, align the extreme right and left links on the grid. And for even distribution of points between them there is a command Arrange-> Distribute Objects-> Horizontally.

alignment

The menu turned out to be too wide (the distance between the items is greater than from the menu to the search), so I slightly moved the right link and aligned everything again:
before

menu to

after

menu after

, we make the Search field 24px high and "pressed" into the substrate.

height search

(We paint in light gray and add two inner shadows. In Sketch, you can add as many shadows inside and outside as you can for strokes or fills.)

search style

Cursive Helvetica doesn’t look particularly beautiful, change it to PT Sans, for example.
until

search to

after

search after

Save the style for the future - we still have fields in the filter.

style panel closed

style panel open

style bar added

The text style in the menu is also saved. It is not necessary to write your name: parameters are written under the style, therefore everything is well understood.

text style

text style new

Then we select the remaining menu items and attach a style to each.

slides


Free images can be found on Flickr. To do this, in the “advanced search” select the option “licensed with Creative Commons.”

flickr search

I had to scroll for a long time, but still I found a more or less suitable photo.
Select the stub rectangle, then import the image on top (always on top). We select a stub with a photo and press the magic button “create a mask”.

create mask button

Now you need to deal with the text on the slides. Let's just make it white.

white text slides

It looks good, but there is a problem: if there is a bright photo on the slide, the text will again be unreadable. Therefore, we return the text to black and make a white backing, for sure. And at the same time, let's replace BLOKK with PT Sans. And along the way, do not forget about the grid.

black text on the backing

Indentation of 20 pixels from the edge of the substrate is somehow a bit too much, we will do it by 15. Attention: at the top and bottom we consider the indentation from the height of the lowercase letters (x-height), and we do not take into account the extension elements. This is so that the line of text is balanced in the center of the background.

15pcs indentation

Sketch has a good distance meter, but it doesn’t work well with text objects - the text always has an internal padding. (To quickly resize objects, use Cmd + → / Cmd + ← (width) or Cmd + ↓ / Cmd + ↑. If you hold Shift in parallel, the size will increase by 10px.)

indentation

Now we do the same with the slide description and price tag

description and price with backing

If you are not comfortable every time in a few clicks to wade through the groups to select the desired layer, hold down Cmd and click on the object right away. The second option is to select “click through”.

“Click through”

Draw leaflets. Let's make it a little easier than on the prototype. Leave only the arrows, but make them large enough so that you don’t have to aim. First, draw the oblique lines, then make them a rounded stroke. Next we group and call "<>", for example.

leaflets

Dots are just as easy. Selected fill with color, the rest leave only a stroke.

points

Let's maximize the height of the slides so that they look more effective.

high slide

That's all for now. In the next chapter we will deal with the content part.

Original three weeks ago

Also popular now: