Now to give you a quick insight on how this can reduce file sizes, my most recent Sketch project, with over 60 Artboards, weighs in at just a few 100MB (with some large, uncompressed photos, laying claim to a large chunk of that). Reproduce that in Photoshop, and you’re on the lookout for some external storage.
Ok. So let me share some more information on how I used Sketch on my latest project, and some of the truly great features this application brings to the party.
If you’re new to Sketch, you might like to take a look at this Tuts+ tutorial, it will have you up and running in no time. And here are some top tips to speed up your Sketch workflow.
When you open up Sketch for the first time, you are presented with a pleasantly clean, uncluttered interface. You are not daunted by an array of unnecessary options, and tools. Sketch cuts out all the fluff, and lets you focus purely on design, without any distractions.
Code Friendly Designs
Everything that you create in Sketch can be easily reproduced with CSS. That includes, borders, shadows, gradients (all their CSS properties ready to roll at the click of ‘Copy CSS Attributes‘). Bevel & Emboss, and it’s ilk, have promptly been shown the door. The use of CSS logic throughout the app is truly refreshing.
If you are working alongside a developer, it’s great to know you are both on the same page, and there are no hidden surprises for them, once they begin to code up your designs.
There a few companion applications for Sketch that I have come across in recent months that can aid even further when going from design to code.
The first one is Avocode, which states that it is ‘The bridge between designers & developers’, and the other is the Zeplin ‘Collaboration app for UI designers & frontend developers.’
I’ve had a short play with both apps, and they’ve suitably impressed on many fronts. Both are fully supportive of Sketch, and seem to offer some great features when taking your completed designs to the build stage.
Designer & Developer in sweet harmony can only be a good thing right?
Vector all the way
With Sketch, it’s vector all day, every day. Each, and every element you produce inside of Sketch is a vector, which for a UI designer is a given.
With a varying amount of screen sizes to design for, and swift changes that need to be made in the design process, having each element resizable, without loss of quality, is an absolute must.
And remember, if you’re working on either icon, or illustration design you can easily switch from vector to pixel view to refine if needed.
Show me the Artboards
I recently worked on a 60+ Artboard project, with many design variants for each page that would be used in the coded site. Using Sketch, I was able to, quite easily jump between the various artboards, and pages in my design, all from the one file, in one window.
Absolutely no need to open up multiple design files while working on the project. This enabled me, at all times, to have a top-down perspective on my whole project, and move much more swiftly through it because of that.
Grids and Layout
Now I’m a stickler for a good grid system, both in the design, and development of my projects. And have used the fantastic, and lightweight Gridiculo.us in the past when coding my design up.
With Sketch, I can open up ‘Layout Settings’, quickly enter the number of columns (it’s 12 in Gridiculous’ case) I’m using for that specific design, pop in my gutter, and column widths, and I’m on point with my grid, from design all the way through to build. A quick Ctrl-L to bring up your Grid guides when needed. Simple.
I’m a numbers guy too. I don’t like to look at a design, and go “yeah the space between element X and Y looks good enough”. In the design process, I like to know that this H1 is specifically x amount of px away from H2. With Sketch, and the use of Smart Guides, this is super simple.
Click on my first element, hold down the Option key, and I can see a numbered guide showing me exactly what the measurement is between the two elements. It’s shades of obsessiveness in my work admittedly, but it allows me a much tighter rein on my final design. See past the drag, drop, and hope for the best, attitude. You’ll be a much better designer for it.
Symbols. Symbols simply rock.
They allow you to group a number of elements together, which you can then easily reuse throughout your whole project. Make a change on one of them and this will be instantly replicated to all of the other copies of that symbol.
I use this a lot for repeatable elements such as, Buttons, Navigation, Headers, Footers and such. A great timesaver all day, every day.
Round to the nearest pixel edge
No more dirty, half pixels. No more blurred shapes. With Sketch you can easily align a shape, or layer, pixel perfect to your grid. It’s these kind of small, but useful additions that will improve your designs greatly.
Setting up a keyboard shortcut for this option comes in extremely handy too.
Like Symbols, the Styled Text option is a fantastic timesaver on a project. I like to set up my most used text styles (H1, H2, H3, H4, Paragraph, Blockquote etc…) in one artboard for reference. Then I can go ahead and use those elements throughout my project.
Handy when the client comes back to you and says “Drop the Proxima Nova, we want Open Sans all the way, and ramp up the font size while you’re at it”.
Change the font style in one place, and like symbols, it is reflected in all other instances within your design.
If you’re a Photoshop user, then you’ll understand how painful a process, slicing, and exporting your design assets can be. I’ve been there, I hear you.
With Sketch, your export woes are now a mere memory. Choose an element on your artboard, click to Export, from there you can then easily choose to export as an SVG or PNG (amongst others).
Saving to PNG format, will also offer you upto @2x for those pretty Retina devices. You’re more than covered for displaying your assets on various devices.
Bring on the Sketch Plugins
Hopefully you’ve come to realise through reading this article that Sketch is a pretty awesome application, out of the box. But where would we be without an equally awesome community of folks producing plugins for Sketch to extend it’s capabilities some more?
Let me give you a short rundown of some of my favourite ‘just can’t live without ’em’ Sketch plugins…
Before you go searching for Sketch plugins (of which there are many) I highly recommend grabbing a copy of – Sketch Toolbox.
This great, little Mac app lets you browse the most popular plugins available for Sketch. From there you can easily download and install your chosen plugins with a single click. A highly recommended tool!
Here are a few of my favorites:
- Content Generator
The Content Generator plugin is an absolute must, and favoured by many Sketch users, and it’s easy to understand why. A true timesaver for when you quickly need to insert sample data into your design, such as, avatars, names, filler text etc…
It really does save you the time of having to copy & paste text in, grab images from someplace, create quirky names. Those time-consuming tasks have been retired.
- Dynamic Buttons
This plugin, as the title suggests, dynamically changes your buttons padding relative to the text you input into it. No need, to fiddle around changing the width, or height manually if you need to change the text along the way.
It’s something I would like to see as standard in a future Sketch update, but for now this plugin does a great job.
- Day Player
Odd title, but a very handy plugin to have. Not too dissimilar to Content Generator mentioned above. But this plugin focuses primarily on placeholder images. You can easily pull in images from placehold.it, unsplash, and more.
Hey, you can even pull in placeholder images from fillmurray.com. In my book there’s always room for Bill Murray placeholder images, “Back off man, I’m a scientist.”
There’s also this awesome roundup right here on Market Blog, covering 50 Free Plugins for Sketch.
Ok, I may have knocked Photoshop a bit throughout this article. It did, and still does serve a skewed purpose for many designing for the web. But it’s now long in the tooth for the modern UI designer, and really not fit for purpose anymore in my opinion. Sketch is.
Sketch still has a way to go. There is room for improvement in various aspects, not unlike any fledging product to the market. But the great team at Bohemian Coding, seem to react to bugs, issues, and new features on a regular basis, with updates coming thick and fast. They’re a small, but resourceful team, who have produced a killer product.
Sketch has got my vote. It’s improved my workflow considerably, and given me some of my ‘design mojo’ back in the process.
Have you tried Sketch yet?
The post An Introduction to Using Sketch for UI Design appeared first on Blog.
Read more here:: An Introduction to Using Sketch for UI Design