SketchUp is a premier 3D design software that truly makes 3D modeling for everyone, with a simple to learn yet robust toolset that empowers you to create whatever you can imagine. BJ Kramer, owner of Two Sketch, has been designing and building homes in Houston and the surrounding areas since 1969 after earning a Bachelor of Architecture Degree from the University of Houston.He is a member of the Texas Institute of Building Design, the American Institute of Building Design, National Council on Building Design Certification, and a Fellow in the A.I.B.D. Jan 22, 2018 Anima Animations Editor (was Timeline) is a tool for animation design, right inside Sketch. On this post we’ll explore the key components of Anima animation editor. Selecting a Group or an. Nov 22, 2016 Design Thinking: Types of Sketches & Drawings. Matthew Weprin - UX@SAP. Nov 22, 2016 3 min read. For a User Experience Designer, one of the most important skills aside from listening, is ones’ ability to sketch. The ability to articulate a design concept quickly relies on a designers ability to quickly bring it to life.
If you’re a UI designer, and you still haven’t hopped aboard the Sketch express, you are truly missing out on an app that has taken the design world by storm in the past few years, and deservedly so.
Read on, to find out why it has become my app of choice, improving my skills as a designer in the process, and why you should really look at implementing Sketch into your UI design arsenal.
Photoshop – The elephant, erm, dinosaur in the room
Hands up. Who’s still using Photoshop for UI design? Fireworks? Illustrator perhaps? The guy in the corner who said “MacPaint”, very amusing, but not in this dojo I’m afraid.
I’m going on a hunch here, and saying that Photoshop had the most hands raised? Of course it did. Adobe’s flagship product has dominated the industry for a considerable amount of time. And as most of us know, it wasn’t originally built for designing user interfaces, but solely for one reason (there’s a clue, I think somewhere in the product name).
But, over time, it became the ‘go to‘ tool for designing interfaces for websites, and applications. My hand used to be raised, like yours, as a devoted user of Photoshop for over ten years, designing for more web projects than I care to count.
But the abundance of interface clutter, with menus, panels, and countless extraneous options, became an unwanted distraction, when all you want to do is just design, for the web. And so it came to pass, I needed to look for something more relevant to the digital designer of today, and the folks over at Bohemian Coding kindly stepped up to the mark with Sketch.
Can’t touch this! It’s Sketch app time!
Now I first played around with Sketch, which was up to version 2 at the time, back in November 2013. And as much as it was great to see a new kid on the block, ready to take on the behemoth that is Adobe, it was still a product lacking in many areas, and due a visit from pest control, with the amount of bugs present.
Then, Sketch 3 came around, and this changed everything, for the better.
Simplicity. That is probably the one word that I feel, best describes Sketch. It strips back the aforementioned interface clutter of those applications that I mentioned before. It’s role is specific, and concentrated, and it gets you back into designer ‘Zen’ mode, which is more than welcome on a daily basis.
In the past, working in Photoshop, on a large scale web project would mean countless large files for the various screens you were designing for. Weighing in at 100’s of MB for each of those files, and jumping between separate files on the many revisions a project may take, was a truly time-consuming task, and hard-drive busting dilemma.
But with Sketch, and it’s truly awesome ‘infinite canvas’, you can quite happily have all your various screen designs, or Artboards, as they’re labelled in Sketch, all in one single file.
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.
Clean Interface
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.
Smart Guides
Sketch Designer
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. 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.
Styled Text
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.
Exporting Assets
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.
Summary
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?
With over 1,500 configurable symbols, SF Symbols is designed to integrate seamlessly with San Francisco, the system font for Apple platforms. SF Symbols comes in a wide range of weights and scales, perfectly aligns to text labels, and supports Dynamic Type and the Bold Text accessibility feature. You can also design custom symbols with the same design characteristics and accessibility features.
Download SF SymbolsOctober 29, 2019
macOS 10.14.4 or later (55.4 MB)
macOS 10.14.4 or later (55.4 MB)
Apple UI Design Resources for iOS include Sketch, Photoshop, and Adobe XD templates, along with comprehensive UI resources that depict the full range of controls, views, and glyphs available to developers using the iOS SDK. These resources help you design apps that match the iOS design language. Icon and glyph production files are preconfigured to automate asset production using Sketch slices or Adobe Generator for Photoshop CC. Color swatches, dynamic type tables, and fonts are also included.
Add iOS Sketch LibraryFebruary 14, 2020 (v33)
iOS 13 (Requires Sketch 58 or greater)
Download for SketchiOS 13 (Requires Sketch 58 or greater)
February 14, 2020
iOS 13 (58.6 MB)
Download for PhotoshopiOS 13 (58.6 MB)
February 14, 2020
iOS 13 (505.8 MB)
Download for Adobe XDiOS 13 (505.8 MB)
February 14, 2020
iOS 13 (81.5 MB)
iOS 13 (81.5 MB)
To download iOS device frames for use when marketing your app, see App Store Marketing Guidelines.
Apple UI Design Resources for macOS include Sketch and Photoshop templates for Touch Bar glyphs.
Add macOS Sketch LibraryJune 3, 2019
macOS 10.15 (Requires Sketch 51 or greater)
Download for SketchmacOS 10.15 (Requires Sketch 51 or greater)
June 3, 2019
macOS 10.15 (2.3 MB)
Download for PhotoshopmacOS 10.15 (2.3 MB)
June 3, 2019
macOS 10.15 (3.9 MB)
Download for Adobe XDmacOS 10.15 (3.9 MB)
June 3, 2019
macOS 10.15 (3.2 MB)
macOS 10.15 (3.2 MB)
Apple UI Design Resources for watchOS include Sketch and Photoshop dynamic type guides, layout specifications, app templates, Apple Watch bezels, and other UI materials. An installer for SF Compact, the system typeface for watchOS, is also included.
Add watchOS Sketch LibraryFebruary 19, 2019
watchOS 5 10.14 (Requires Sketch 51 or greater)
Download for SketchwatchOS 5 10.14 (Requires Sketch 51 or greater)
February 19, 2019
watchOS 5 (3.9 MB)
Download for PhotoshopwatchOS 5 (3.9 MB)
February 19, 2019
watchOS 5 (39.7 MB)
watchOS 5 (39.7 MB)
Sketch Design System
Download for Adobe XDMay 9, 2019
watchOS 5 (3.4 MB)
watchOS 5 (3.4 MB)
To download watchOS device frames for use when marketing your app, see App Store Marketing Guidelines.
Sketch Design Studio
Apple UI Design Resources for tvOS include icon and image templates, as well as tools for previewing layered image files and the parallax effect.
Download for PhotoshopOctober 25, 2018 (310 KB)
To download tvOS product imagery for use when marketing your app, see App Store Marketing Guidelines.
Use Parallax Previewer to preview layered Photoshop files, assemble individual image layers from PNG files and preview the parallax effect, or preview layered images exported by the Parallax Exporter plug-in.
Download for macOSParallax Previewer requires macOS 10.10.5 or later.
Use the Parallax Exporter plug-in to preview a layered image while working in Adobe Photoshop.
Download for macOSRequires Adobe Photoshop CC 2015.5 or later and macOS 10.9.0 or later.
Download for WindowsRequires Adobe Photoshop CC 2015.5 or later and Microsoft Windows 7 with Service Pack 1 or later.
Use the AirPlay glyph when referring to AirPlay in setup or instructional text within your app.
Use the AR glyph and AR badges to indicate and launch AR experiences in your app’s UI.
The Apple UI Design Resources for CareKit apps include Photoshop and Sketch templates for designing Care icon glyphs.
Download for PhotoshopOctober 25, 2018 (1.0 MB)
The Apple UI Design Resources for CarPlay apps include Sketch and Photoshop type tables, as well as fonts.
Download for PhotoshopDecember 21, 2017 (216 KB)
Use the HomeKit glyph when referring to HomeKit in setup or instructional text within your app.
Use the provided Apple logos to design Sign in with Apple buttons that use left-aligned logos or that display a logo only.
Marketing Imagery
A variety of imagery is available for use when marketing your app. Follow all usage guidelines.
iOS, macOS, tvOS, watchOS
Apple Product ImagesIncludes device frames.
Apple News
Apple Pay
Music, iTunes, and Podcasts
Wallet
Other
Licensing and Trademark ImageryIncludes device and technology icons.