UI/UX Design Tools: The Sketch App from a Beginner’s Perspective
My first experience and first project using Sketch including some tips and advice for other beginners.
Prior to completing the project associated with this article and where I am at now, I had never really built any mockups for websites before, prototyped, or even known about the different software available for UI/UX design and prototyping. So when I say I was a beginner, I really was a beginner. A noob. Now I went through some trouble first trying to learn Sketch and I know others will to. That’s why I am writing this article. I want to try and help other beginners out there who might be diving into Sketch for the first time by providing you with a few tips.
What is Sketch?
First, what is Sketch and what is it used for? Basically Sketch is a vector graphics editing software that is only available for Mac (sorry Windows users). While you can create a multitude of things, it’s primarily used for User Interface/User Experience Design for mobile apps and websites. You are able to download a free trial but once that trial is up, you have to buy a personal license or team subscription in order to keep using it.
Another thing to mention is that the tips and info I provide in this article are fairly brief just to help get you started. If you want go more in depth, you should definitely check out Sketch’s Documentation — “This documentation is your Sketch reference manual. No matter how experienced you are or what you want to achieve, it should cover everything you need to know — from navigating the interface, to making the most of different features.”
Also, the version of Sketch I am using at the time of me writing this article is 70.3 on the Catalina macOS. Be wary as things may look a little different depending on the version and OS you are using.
Tips
Get Familiar with the Interface
My first tip is to familiarize yourself with the Interface. Like with any new software you’ve never used, finding things is going to be difficult. Hopefully this helps ease that pain a little bit.
- The Canvas: The canvas is your big work space where you create all of your designs. This is where you also add your artboards which I will get into later.
- The Toolbar: The toolbar is where you can find some of the tools and actions that you use most often. For example — inserting shapes, moving items forward and backwards in layers, grouping and ungrouping, etc. It starts out with some defaults but you can easily customize it by right clicking the toolbar and then choosing “Customize Toolbar”
3. The Layer List: In the Layer List you can see all the pages in your document as well as the artboards and the layers in those artboards. You can even search for specific layers that you have named.
4. The Inspector: Here you’ll find settings/options for items, objects, tools, or features you’ve selected or are using — i.e. fonts and font size, color fill, borders, stroke size, shadows, etc.
Artboards
For UI/UX design, artboards are going to be one of the main features of Sketch that you will be using. Artboards are fixed frames on the Canvas that you design and create your work in. There are various devices and screen sizes you can select from. To create an artboard simply click Insert > Artboard from the toolbar or menu bar. You can also use the keyboard shortcut “a” to bring up the artboards. You can also create your own custom sizes of artboards if you’d like.
Grid/Layout
Another important feature for any designer working on a website is the grid/layout. To turn the Layout on, click on an artboard, go to the top right of the Toolbar and click the dropdown box. Then click “Show Layout”. You can also use the keyboard shortcut “control, L”. Your layout will now appear on the artboard you selected. To edit the Grid/Layout just simply “Layout Settings” in the dropdown.
Text Styles
Another useful feature and one that can help speed up your workflow is Text Styles. With text styles you can create and store certain styles for different types of text to reuse across your document. For example you can create different styles for different headers and separate ones for body text. To create a text style, first select a text layer that you’ve added some styles to. Then under appearance click “+ Create”. It will have you name that text style and there you go. You now have a text style. Also, say later on you decide you want that H1 to be a different size or have a different weight. Simply change the style and then click the refresh “Update” button and it will update that text style across your entire project. Pretty handy.
With one click you can style that new text layer you just created without having to go through each setting individually in the Inspector every time.
Color Variables
Color Variables are very similar to text styles but instead you’re just creating colors that are consistently being used across your project instead of text. To create a color variable, click on “Create Color Variable” in the color picker. After that it will have you name that color variable. I recommend naming it something helpful like “Primary (Insert Color)”, “Border Color” or something along those lines. Like text styles, when you make a change to a color variable, that change is synchronized across all the items in your document that use that color variable.
Keyboard Shortcuts
Once you’ve kind of gotten the hang of things I strongly recommend learning the keyboard shortcuts. These will speed up your workflow tremendously and help you out in the long run. Some are pretty self explanatory and similar to other design software you may have used, but here is the link just anyway: Keyboard Shortcuts.
I hope some of these tips and information help you in some way while exploring all there is to know about Sketch.
Alzheimer’s Association Redesign
For my first project using Sketch, we were asked to choose a non-profit website to redesign for desktop, tablet, and mobile. I chose the Alzheimer’s Association because of family reasons to keep it short. Now I don’t believe the site looked bad by any means, it was just kind of hard to navigate. It took lots of clicks to get to certain places so my main goal was to simplify the site and make it easier to find the important stuff.
Wireframes
Mood Board
Type Guide
Color Guide
Identity
High-Fidelity Surface Comps
Mobile Prototype
This wasn’t anything super fancy, crazy, or ground breaking design wise but again it was my first time ever doing something like this and my first time ever using Sketch. I’m pretty proud of the way it turned out and I hope you can say the same thing when you complete your first project using Sketch.
Conner Chappell is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Web & App Development. The following article relates to the Non-Profit Website Redesign Project in the DGM-1230 course and is representative of the skills learned.
