Sketch UI/UX
By: Kai Tan
Tags: Sketch

Using sketch for a UI/UX designer

Responsive grid guides.

Responsive web design is a standard that heavily influences the way we design and build websites and web-based apps. It’s got built-in grid guidelines that calculate sizes for you so you can set custom grid sizes with having to do any of the maths yourself or manually drawing the guidelines. Sketch calls it Layout and can easily turn it on/off as needed for each art-board.

If you use the same Layout Settings settings often, you can set them as default so that every new art-board you create has those exact same settings.

You can also apply gird settings to multiple art-boards or all art-boards within a page all at once by selecting them before bringing up the Layout Settings menu.

There are Photoshop or Illustrator templates that you can download with guides already drawn, so why Sketch? Well, you may want tighter gutters or a wider row width. Often, the ones made on Photoshop and the link are made with just 1 screen size (desktop) and don’t include smaller versions for mobile or tablet. The other issue with this is, if you do want to calculate grid sizes for a custom grid or different screen widths, you will have to do the maths. (Have fun with that)

Layer and Text Styles.

Text Styles. Defined styles for headlines, body copy or paragraph text, things like that. Illustrator and InDesign has this, even word processors have this. It’s very important to use consistent typography in our designs to ensure readability and minimize production time. Sketch’s text style options allow you to do this by letting you build a style list for all of your variations. A basic list of styles may look something like this:

Navigation Link

H1

H2

H3

Body copy

Body copy link

Button text dark

Button text light

Sketch also styles the list using the selected font, colour, and size, showing you each context so you can select easily. This can be helpful if you have designed several screens with the navigation already in place when you realise the colour, size, font or line height isn’t right. You can change each and every single instance of text that uses that text style instantly. All you have to do is change one piece of text and they will all change to match.

It’s very easy to access, straight-forward, and even shows you visual previews in the styles list, making it a time-saver too.

Layer Styles. Similar to text styles, it’s a matter of setting fills, strokes, opacity, blending modes, shadows etc. Let’s say you have a few different button styles you want to use throughout your design. Creating them as layer styles will allow you to make sure any button, whether they are a part of a symbol or not, is always styled the same as others. This is useful in wire-framing if you decide you want to create new objects that share the same visual style as once you’ve used previously.

Export Assets

One great feature of Sketch is how simple and fast it is to export assets. Whether you need 1 icon or all of them exported, whether you want one version PNG and 3 versions SVG, it’s fast and easy. On any layer, click the “Export +” button and set your preferences for size and format. A shortcut, you can even drag and drop the thumbnail preview off the screen as a shortcut for saving an asset to your desktop.

Having support for exporting to multiple file formats (PNG, JPEG, TIFF, PDF, EPS and SVG) and sizes (1x, 2x, 3x, 0.5x, custom size and max height/width) or even all at the same time is pretty useful. You can also export a set of assets all at once and Sketch will remember what settings you chose for each and every one of them.

Context

Seeing your design in context instead of in your design tool gives you a whole new perspective. You start to notice things about your design that you didn’t notice before — it feels different.

Whether you are presenting to a client, your team or just want to see the design for yourself, you’ve got to have context if you want to see what your design will actually look like. (What it will feel like in the final form) The subtle difference in how you look will change what you actually see, allowing you to address details that you may have missed previously.

Adobe has you covered if you are trying to mirror your designs onto a mobile device, and Sketch can do that too, with their Mirror feature. There’s also a great plug in that comes in handy called Sketch Browser Preview. What this plug in does is it takes a snapshot of your current art-board and opens it into your web browser for an instant preview. This is great for presenting too, as you can throw all screens into the browser and toggle through each tab, screen by screen as you present. It’s the fastest and easiest way to present desktop designs in context.