Website design in Sketch.app (Mac OS). Part 1: plugins and prototype

  • Tutorial
I am glad that more and more designers are looking away from Adobe in search of tools more comfortable, easier, simpler and cheaper. And there is something to choose. Today I will talk about my process of creating a website design in Sketch.app. I hope that you will borrow some thoughts from me, you will never do something the same way, but you will come to something in your own way. Stay with us.

Now I'm working on beta 2.4. If you have an older version, then it is also suitable - the differences are not very radical.

Plugins


The current Sketch supports extensions on jstalk. There is a small instruction on this topic. The thing is very useful, because it eliminates unnecessary muscle movements. I actively use some plugins in the process, so along the way I will talk about them too.

You need to enable extension support from the settings:


Next, go to Github to bomberstudios , read plugin descriptions and download what you like. We then drop the files into a folder and name it somehow-for-ourselves-clearly. Be sure to copy the “library” - some scripts do not work without it.





In the names I add characters to the beginning - then in the Sketch menu plugins are beautifully sorted:



What do we draw?


Now I am looking for inexpensive headphones for home audio, so we will do a web store on a sore subject. More precisely, only the start page - for example, I think that's enough. The article is more on technique than on how-to-do-ok theory, but maybe I’m smart a couple of times.

Prototype on a piece of paper


Usually it all starts with pencil sketches. I am making such a prototype for myself, in order to decide what, where, how, why, and fix ideas. All the same, I don’t show the paper to the client, so it’s not necessary to spend a lot of time on accuracy and beauty, the main thing is to make it clear what is drawn here.

This is a sketch of the main parts of the page.



1. From above we make a logo, menu and search.
2. Then slides with products, name, small description and price.
3. Below are the categories of headphones by type (large pictures) and by manufacturer (small).
4. Next will be a small text that helps the buyer decide which options may suit him. You can still make a small filter.
5. And at the very bottom of the footer with links to the main sections and search.
In short, nothing non-standard.

Yes, I almost forgot: no login / password / registration on the start page. Such matters, if you really need to, it is better to ask already in the process of placing an order.

Prototype


For prototypes, I still have the same Sketch, for interactivity and comments - Invizhn .
Suppose we only need a “desktop” version of the site. Then the layout can be done somewhere around 1200 pixels wide.
We make a canvas of size 1200 by 3000 (so that it is probably enough in height): The




canvas can be saved as a template for the future. Name it, for example, “1200x3000” and add it to the panel with already built-in size templates:



Next, you need to make a stub (“placeholder”, yes) for the picture. We have a store, so there will be a lot of photos.
Everything, in general, is very simple: we draw a square, on top of it are two lines at an angle of 45 and group.



At the same time, maintaining the proportions of the group is better to remove: we need to freely change the size of the stub.



If you are not satisfied with the default style of the object, just change it in your own way, add shadows / strokes and select Edit-> Set Style as Default from the menu. I usually leave default: a gray fill without a stroke.



At the prototype stage, I usually don’t turn on the grid at all. With the grid, it is tempting to start aligning everything in columns and rulers, and this is not important now either for me or for the customer.

So, let's go in order. Name the layers with the stub “img”. To rename a layer there is a built-in combination Cmd + R. If you need to name several at once, you can use ...
Script No. 1 : asks for the name of the layer, and then sets it to all currently selected. It works by keyboard shortcut (for me - Ctrl + N). There are two ways to define a keyboard shortcut. Standard in OS X through settings:


Or in the plugin code itself:


And immediately the script number 2 : everything is the same, but the serial number starting with "1" is added to the name. Those. you select 5 objects, press Ctrl + Shift + N (well, for example), enter the name “img” in the window, and the script calls the objects “img 1”, “img 2”, etc. The very thing is when you need to arrange a set of previews.
Script in work:



Copy “img” and stretch to approximate sizes of future slides.


Next menu. So far, just a long die. We’ll put our first “img” on top of it - it's, like, a logo. The menu is better to write immediately the same as it will be on the working site.


More about the slides.

Well, if they are not just beautiful pictures, but will also be useful to the buyer. For example, they will have an image of the product, its brief description and the price may: personally it is more convenient for me when I immediately see what how much. Leaflets for slides are best done not with small points, which you’ll get horseradish on the touchpad, but with normal large buttons. Points are more likely to fit as an indicator.

In places where it is not yet known what the text will be, you can use something like a blank for paragraphs - the usual lorem ipsum, but with the BLOKK font .


In order not to make such text anew each time, you can build a small application in the Automator that will copy the paragraph to the clipboard.


In the first block, insert the paragraph of the Lorem-ipsum, and then through the font panel select the size (I have 16) and the BLOKK Neue font. The headset does not have a Cyrillic option.



And then in the process you can simply type in the spotlore “lorem ipsum” (the name of our mini-application) and Enter. Then Cmd + V on the layout.



Categories.


We show three types of headphones, and just below the manufacturers that you can buy from us.


Then we will make a couple of paragraphs about which headphones are, what is the difference between them and how to choose them in general.


And a filter. Let's take the parameters from Yandex.Market - for us, for example, but they will not be offended.




I usually do underlining manually: I draw text color lines with a transparency of about 50%. It turns out subtly and beautifully. The standard underline is very crude. In small sizes, everything is fine, but the larger the size, the thicker the line, and this does not suit us. But in prototypes you can not bother.


Well, there was a footer.


Everything, the prototype is ready. Filefor those wishing to dig deeper. In the next part there will be details about working with fonts, colors, styles, grids, layers, a little more about plugins and, in fact, the final layout of the site.

I wait for questions and objections in the comments, I will try not to leave anyone without attention.

Also popular now: