Today I finally got to get started with the Sketch app, which is a design and layout tool and can can be used to design everything from logos and brand identity, to mobile application interfaces, to full fledged responsive website design. Understandably, this has become popular in the design community.
Now, Lesson 1 is long, so I have separated this into three parts so my blogs aren’t just as wordy.
After getting all the exercise files downloaded and ready to use, I started with the first video to open up the Sketch app to begin designing web interfaces.
Before jumping right into designing a website, I briefly went through some features of the application. Since I’ve mainly worked with Adobe software in my previous blogs, I’ve gone through setting up custom tool bars, and Sketch does the same by right-clicking along the top toolbar and choosing “Customize Toolbar.” You, of course, can add or remove tools and customize this experience.
On the left side of the application you see where the pages are located and currently there is only one showing.
If I click on the icon to the right, it opens up all of the individual pages. Clicking on the plus sign will add more than one page. So now we have page one and page two, and I can click between the two of these. The section below the pages shows the dartboards and layers associated to the selected page.
So I went back to Page one, and the first thing I’m going to do is create a series of artboards. I clicked on the “Insert” menu that is right above the page sidebar and choose “Artboard.” With Artboard selected, I moved the cursor into the canvas area here and click and drag to create an artboard.
On the right-hand side is our Inspector panel. If the inspector panel isn’t visible, this can be turned on under the “View” menu. Go down here and check or uncheck the “Show Inspector.”
We see that this artboard in the image above is associated with page 1. If I click on page 2 there’s no artboard showing. To add an artboard to page 2, I did the same steps I did for page 1 with one exception. after choosing Artboard under the Insert menu, I went to the Inspector panel which shows a whole series of pre-determined artboards.
I can open Responsive Design, for example, and see bunch of different sizes. Here, I’m going to click on “iOS Icons” and choose “120 – iPhone.”
These are some very brief review of the features offered in Sketch, but now I’m going to move on with the exercise to show how this application works as a design tool.
Now for this particular project, I’m going to use a single page and four different artboards. I first created four different sizes of a web layout to mock up what the responsive design stage should look like when our front-end developer codes the page.
To get started, I’m first going to delete Page 2 that I’ve created by right-clicking and choosing “Delete Page” then selecting Page 1. For the artboard already created on the page, I’m going to the Properties panel and chasing the width to 1200 pixels and click tab to change the height to 1350 pixels then click Return.
After zooming out so I can see the entire artboard, I’m going to change the name of the artboard to “1200” under Page 1. So, now I’ve created an artboard for a large screen, I’m going to create three additional sizes. One with the width of 768, another with the width of 600, and a final small size of 320 pixels.
To make this fast and efficient, I option-clicked on the “1200” artobard and drag about 80 pixels to the right of the first artboard. In the properties panel I fixed the width to 768 pixels with a height of 1200. I then did the same with my other two artboards and filling out the respective widths and heights.
Before I move on to the design portion, I’m going to save this document by clicking on “File” menu then choosing “Save.” I saved this to the Desktop and name the document “myWebDesign” with the file extension “.sketch” before clicking “Save.”
I started working on the large screen. The first thing I want to do is to bring the featured background graphic from the exercise files. To start this I have to draw a rectangle so I can clip the shape into the size that I want the heading area to be. To do this, I first need to go to the “Insert” menu and and scroll to “Shape” then choose “Rectangle.”
I clicked and drag from the top left corner then drag to the right, making the rectangle 430 pixels tall. Once it is in place, I should see them showing in the layers panel now.
Now to bring in the graphic. I went back to Insert, and choose image. I chose the photo from the exercise files and choose “featured.jpg” then click Open. When I bring an image in, the image is going to take up all of the available space if it’s large enough to encompass the entire artboard. Because the image is so large, I zoomed out then make sure the size is locked so that when I drag the corners the image will scale proportional. With this image I dragged the corners till the image is about 1800 pixels on the width.
Zooming back in, I’m to created a mask out of rectangle layer. I first selected rectangle layer I created earlier, then right-click and choose “Mask.” Now if I come up here and select the image, click and drag it around, it will not conform to the shape of that rectangle.
Then I went to the layers panel, select both the rectangle and featured image by shift-clicking. I right-clicked and choose “Group Selection to group these two layers together and name the group “featured_image.”
With the background graphic in place, next I worked on the navigation bar. To start, I added a semi-transparent black bar by clicking on Insert, scrolling down to Shape, and selecting Rectangle. Again, I clicked and dragged from the upper-left hand corner to the right, making the rectangle 110 pixels tall.
With that in place, I went the Inspector panel and first unchecked the borders. I then went to the Fill property and clicked on the color swatch and dragged the cursor all the way down and left for black. I then changed the Opacity to 65%.
Next I added some text for the navigation by first going to the Insert panel and choosing Text. I drew a text field in the white space. I typed in About Us, (and since there is no tab rule in Sketch, I’ll have to add six spaces with the space bar) Design Corner, Products and Contact Us.
In the Inspector panel, I was able to change the typeface. To stick with the video, I went to Google Fonts to download the typeset they used called Open Sans. After changing the typeface to that, I changed the size to 16 pixels and the line spacing to 20 (which in CSS would be line height). To contrast with the semi-transparent rectangle I created earlier for the navigation bar, I also changed the color of the font to white.
After finishing with those touches to the text, I dragged the text field up to the navigation board in the heading.
Before moving on from the navigation bar, I wanted to indicate which one of these items would have a menu item. To do that, I added a small triangle starting with the Insert menu, scrolled to Shape, and chose Triangle.
By shift-clicking and dragging I drew out the Triangle until it is 28 x 28 pixels. Before changing the width and height, I’m going to unlock the proportion lock and change the width to 13 pixels and the height to 7 pixels. I then dragged the triangle into place before setting the rotation to 180 degrees. I unchecked the Border property and change the Fill to 100% white.
With that triangle underneath the “Design Corner,” I held down shift and option key then clicked and dragged until the copied triangle was underneath the “P” in Products.
Once I finished with that, I went over to the layers panel to do some reorganizing. I renamed the Rectangle I created over the graphic image to “nav box.” I then selected the “About Us” and the triangles so that I could use this same layout for these items, the text and the triangles, for the “768” sized artboard.
In order to reuse this content, I used the “Create Symbol” located in the tool bar. After clicking on this, the selected is now grouped into a purple group as opposed to blue. I renamed that to “nav.”
Finally, for this part, I added a textbook and a button to the hero area over top of the background graphic. I chose the Text in the Insert menu, again, and dragged a text block in the negative space of the red.
Once that was in place, I typed in “Add interest with natural textures.” I used the Open Sans typeface in bold before setting the text size to 48, and line spacing to 44.
After I was finished placing that text block, I created another one for the button this time with the text reading “Get advice from designers.” I change the weight of the Open Sans to Regular and the size back down to 20 with the line spacing to 27. After, I positioned the text underneath the previous text block and then set the alignment to centered.
I then wanted to create a border around my last text, so I went to the Insert panel to choose Rectangle tool and clicked and dragged over the text making it 38 pixels tall. In the Fill property, I unchecked the box before making changes to the Borders property. I clicked the Color Swatch to make it white. I then clicked and dragged the border to fit around the text before dragging both to the position I wanted.
So now, with the button late and button border set up, I saved these as Styles, so I would be able to reuse them later.
Clicking on “Get advice from designers”, in the Properties panel, where it says “No Text Style,” I clicked on that. Choosing “Create New Text Style,” I gave it the name “button – label.”. I then sleeted the border and and did the same steps this time naming it “button – border.”
Sketch does not have the ability to create local overrides or use character styles. So the only time I want to actually create Text Styles or Object Styles is when I’m going to be using those particular settings for artwork that will be shared across layouts.
Before I finish with this, I went to the Layers panel, selected the rectangle, button label and the headline to group them together under the name of “hero.”