Sketch.app website design (Mac OS). Part 1: Plugins and Prototype
I am glad that more and more designers are looking away from Adobe in search of tools that are more comfortable, easier, simpler and cheaper. And there is something to choose. Today I will talk about my process of creating a site design in Sketch.app. I hope you will borrow some thoughts from me, you will never do something the same way, but you will come to your own way before something. Stay with us.
Now I am working on beta 2.4. If you have an older version, then it will also work - the differences are not very radical.
The current Sketch supports jstalk extensions. There is a small instruction on this topic. Stuck is very useful because it eliminates unnecessary mouse movements. Some of the plugins I actively use in the process, so that along the way I will talk about them too.
Enable extensions support from settings:
')
Next we go to Gitkhab to bomberstudios , read the descriptions of the plug-ins and download what we like. The files are then thrown into the folder and called somehow-for-yourself-understandable. Be sure to copy the "library" - without it, some scripts do not work.
In the names, I add characters to the beginning - then in the Sketch menu the plugins are beautifully sorted:
Now I’m busy looking for inexpensive headphones for home recording, so we’ll be doing a web shop on a painful topic. More precisely, only the start page - for example, I think that's enough. The article is more on technique than on theory-as-do-well, but perhaps a few times I can still be smart.
Usually it all starts with a pencil sketch. I make such a prototype for myself in order to decide what, where, how, why, and fix ideas. I still 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’s where it’s painted.
This is a sketch of the main parts of the page.
1. From above we do a logo, the menu and search.
2. Then slides with products, name, a small description and price.
3. Below are the categories of headphones by type (large pictures) and by manufacturers (small).
4. Next will be a small text to help the buyer decide what options he might fit. You can still make a small filter.
5. And at the very bottom 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 cases, if very necessary, it is better to ask already in the process of placing an order.
For prototypes I still have the same Sketch, for interactivity and comments - Invizhn .
Suppose we need only the "desktop" version of the site. Then the layout can be done somewhere 1200 pixels in width.
We make a canvas with a size of 1200 by 3000 (so that it certainly has enough height):
Canvas can be saved as a template for the future. Name it, for example, “1200x3000” and add it to the panel with already embedded size templates:
Next you need to make a stub (“placeholder”, yes) for the picture. We have a shop, so there will be a lot of photos.
Everything is, in general, quite simple: we draw a square, on top of it two lines at an angle of 45 and group them.
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 object style, simply skip over in your own way, add shadows / strokes and select Edit-> Set Style as Default from the menu. I usually leave the "default": gray fill without stroke.
At the prototype stage, I usually do not include the grid at all. With the grid, there is a temptation to start aligning everything in columns and rulers, and this is not important now neither for me nor for the customer.
So, go in order. Name the stub layers "img". To rename a layer there is a built-in combination Cmd + R. If you need to name several at once, you can use it ...
Script number 1 : asks the name of the layer, and then sets it to all selected at the moment. It works by a shortcut key (mine is Ctrl + N). You can set a shortcut in two ways. Standard in OS X via settings:
Or in the plugin code itself:
And immediately the script number 2 : all the same, but the sequence number is added to the name starting with "1". Those. you select 5 objects, press Ctrl + Shift + N (well, for example), enter the name “img” in the window, and the script names the objects “img 1”, “img 2”, etc. The thing is when you need to organize some set of thumbnails.
Script in work:
Copy «img» and stretch to the approximate size of future slides.
Next menu. So far, just a long die. Over it we put our first "img" - this is, like, a logo. It is better to write the menu immediately the same as it will be on the working site.
Next on 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, a brief description of it, and maybe the price: it is more convenient for me personally when I immediately see how much. It is better to make slides for slides not with small dots that you get into the hell on the touchpad, but with normal large buttons. The 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 cap for paragraphs - the usual lorem ipsum, but with the BLOKK font.
In order not to make such a text every time, you can assemble a small application in Avtomator that will copy a paragraph to the clipboard.
In the first block, insert a paragraph with a lorem-ipsum, and then through the font panel, select the size (I have 16) and the BLOKK Neue font. The headset has no Cyrillic variation.
And then in the process, you can simply type “lorem ipsum” (the name of our mini-app) and Enter into a spotlet. Then Cmd + V on the layout.
We show three types of headphones, and just below the manufacturers, which we can buy.
Then we will make a couple of paragraphs about what kind of headphones are there, what is the difference between them and how to choose them at all.
And the filter. Let's take the parameters from Yandex.Market - for us, for example, but they will not be offended.
I usually make an underline manually: I draw text color lines with about 50% transparency. It turns out fine and beautiful. The standard underscore is very coarse. In small sizes everything is fine, but the larger the size, the thicker the line, and this does not suit us. But in the prototypes you can not bother.
Well, and remained footer.
That's it, the prototype is ready. File for those who want to dig deeper. In the next part there will be details about working with fonts, colors, styles, grid, layers, a little more about plugins and, in fact, the final layout of the site.
I am waiting for questions and objections in the comments, I will try not to leave anyone without attention.
Now I am working on beta 2.4. If you have an older version, then it will also work - the differences are not very radical.
Plugins
The current Sketch supports jstalk extensions. There is a small instruction on this topic. Stuck is very useful because it eliminates unnecessary mouse movements. Some of the plugins I actively use in the process, so that along the way I will talk about them too.
Enable extensions support from settings:
')
Next we go to Gitkhab to bomberstudios , read the descriptions of the plug-ins and download what we like. The files are then thrown into the folder and called somehow-for-yourself-understandable. Be sure to copy the "library" - without it, some scripts do not work.
In the names, I add characters to the beginning - then in the Sketch menu the plugins are beautifully sorted:
What are we drawing?
Now I’m busy looking for inexpensive headphones for home recording, so we’ll be doing a web shop on a painful topic. More precisely, only the start page - for example, I think that's enough. The article is more on technique than on theory-as-do-well, but perhaps a few times I can still be smart.
Prototype on a piece of paper
Usually it all starts with a pencil sketch. I make such a prototype for myself in order to decide what, where, how, why, and fix ideas. I still 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’s where it’s painted.
This is a sketch of the main parts of the page.
1. From above we do a logo, the menu and search.
2. Then slides with products, name, a small description and price.
3. Below are the categories of headphones by type (large pictures) and by manufacturers (small).
4. Next will be a small text to help the buyer decide what options he might fit. You can still make a small filter.
5. And at the very bottom 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 cases, if very necessary, 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 need only the "desktop" version of the site. Then the layout can be done somewhere 1200 pixels in width.
We make a canvas with a size of 1200 by 3000 (so that it certainly has enough height):
Canvas can be saved as a template for the future. Name it, for example, “1200x3000” and add it to the panel with already embedded size templates:
Next you need to make a stub (“placeholder”, yes) for the picture. We have a shop, so there will be a lot of photos.
Everything is, in general, quite simple: we draw a square, on top of it two lines at an angle of 45 and group them.
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 object style, simply skip over in your own way, add shadows / strokes and select Edit-> Set Style as Default from the menu. I usually leave the "default": gray fill without stroke.
At the prototype stage, I usually do not include the grid at all. With the grid, there is a temptation to start aligning everything in columns and rulers, and this is not important now neither for me nor for the customer.
So, go in order. Name the stub layers "img". To rename a layer there is a built-in combination Cmd + R. If you need to name several at once, you can use it ...
Script number 1 : asks the name of the layer, and then sets it to all selected at the moment. It works by a shortcut key (mine is Ctrl + N). You can set a shortcut in two ways. Standard in OS X via settings:
Or in the plugin code itself:
And immediately the script number 2 : all the same, but the sequence number is added to the name starting with "1". Those. you select 5 objects, press Ctrl + Shift + N (well, for example), enter the name “img” in the window, and the script names the objects “img 1”, “img 2”, etc. The thing is when you need to organize some set of thumbnails.
Script in work:
Copy «img» and stretch to the approximate size of future slides.
Next menu. So far, just a long die. Over it we put our first "img" - this is, like, a logo. It is better to write the menu immediately the same as it will be on the working site.
Next on 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, a brief description of it, and maybe the price: it is more convenient for me personally when I immediately see how much. It is better to make slides for slides not with small dots that you get into the hell on the touchpad, but with normal large buttons. The 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 cap for paragraphs - the usual lorem ipsum, but with the BLOKK font.
In order not to make such a text every time, you can assemble a small application in Avtomator that will copy a paragraph to the clipboard.
In the first block, insert a paragraph with a lorem-ipsum, and then through the font panel, select the size (I have 16) and the BLOKK Neue font. The headset has no Cyrillic variation.
And then in the process, you can simply type “lorem ipsum” (the name of our mini-app) and Enter into a spotlet. Then Cmd + V on the layout.
Categories.
We show three types of headphones, and just below the manufacturers, which we can buy.
Then we will make a couple of paragraphs about what kind of headphones are there, what is the difference between them and how to choose them at all.
And the filter. Let's take the parameters from Yandex.Market - for us, for example, but they will not be offended.
I usually make an underline manually: I draw text color lines with about 50% transparency. It turns out fine and beautiful. The standard underscore is very coarse. In small sizes everything is fine, but the larger the size, the thicker the line, and this does not suit us. But in the prototypes you can not bother.
Well, and remained footer.
That's it, the prototype is ready. File for those who want to dig deeper. In the next part there will be details about working with fonts, colors, styles, grid, layers, a little more about plugins and, in fact, the final layout of the site.
I am waiting for questions and objections in the comments, I will try not to leave anyone without attention.
Source: https://habr.com/ru/post/195282/
All Articles