What is the User Experience Design Spotlight?
This is the beginning of a blog series on the different user experience design tools we use at CRi Solutions as part of our User Experience Design practice. We want to share with readers the tools we use, how we landed on them, and what we love the most about them.
Our full user experience design engagement would start with a user research and user feedback program. Once that is complete we move into designing the visual interface. That is where these first few tools I’m spotlighting are picked up and used to begin crafting our designs.
In the early years, the idea of “designing” a website before going into development is very different than what we go through today. With today’s increased awareness for user centered design and user experience, there’s too much at stake to just jump into development without fully fleshing out the layout, flow, style, and the various states a user might fall into.
Over the past two decades, a certain set of design programs have been considered the go to tools for designer, but recently we’ve been seeing a shift to new products that that are gaining traction and getting attention from the big players in the industry.
As web design evolved and as the first iPhone shifted the direction of mobile design in 2007, the demands of user interface design software began changing. As a result, responsive design, varying screen sizes and varying pixel densities needed addressing. The leading tools of the day began falling behind as they were raster based, not easily scalable and simply not cut out for the new challenges of today’s web and mobile designs. Enter Sketch in 2010. Sketch App by Bohemian Coding was built for UI designers.
Sketch is a vector design program, similar to Adobe Illustrator or Corel Draw. The benefit of Sketch over other tools (which were originally conceived to handle static print graphics) is that Sketch was born in the era of digital screen design. And that’s Sketch’s goal: To provide a premium design tool for UI designers. About 2 years ago we started considering Sketch, and about a year and a half ago we made the switch completely from Adobe Creative Cloud products to Sketch,. Today, we only use Photoshop and Illustrator for some old projects and other support type items. Since using Sketch, these have become some of my favorite features:
- Artboard presets for common screen sizes
- Asset generation presets for both iOS, Android and Web
- Resize to create auto-layout like alignment to support resizing artboards for responsive designs
- Symbols, symbol nesting and symbol overrides
- Built in native design libraries for iOS and Material Design
- Vast 3rd plugin support and community
Artboard presets make it very quick to get going without having to manually set up custom artboard sizes. While a lot of tools provide these presets nowadays, they don’t all stay as up-to-date with new device sizes as Sketch does. As you can see below, Sketch has presets for the latest iPhones, Watch sizes, and even MacBookPro’s touch Bar.
Select a symbol or any object, click “Make Exportable” select preset. Boom, it will spit out the different sizes you need for the different pixel densities supported by the platform you’re designing for. Select multiple presets if you’re using the same assets across multiple platforms. Get clever with naming your assets and have them export into a folder structure of your choice. For example, want all your dark theme assets to export into a different folder than your light theme assets? Name one object “dark/ic_menu” and the other “light/ic_menu”. Now watch how Sketch will not just export the assets where you tell it to, but will first create a “dark” and “light” folder then place your “ic_menu” asset into it.
I find the resize feature most useful with symbols. For example, when designing 4 responsive sizes that all use the same navigation menu, just use one symbol and resize it. Create the symbol and make sure you use the built-in layout features to lock objects in alignment with where you want. This way you can resize the symbol and it won’t just stretch and squeeze everything, it will actually keep things aligned with the margins you set… within reason of course. This way you can now use one symbol resized across all your responsive sizes. Need to update the color of your navigation bar or add another button? Update the one symbol and see how it still lays out right across all your sizes.
Symbols, symbols within symbols and symbols overrides
As I mentioned with auto-layout, the use of symbols is very powerful. I described how you can use them and resize them for different responsive sizes. You can also have a symbol within a symbol, and assign symbol overrides. Here’s an example. Let’s say you have a list that functions as navigation, but depending on the screen the contents of that list might change. You can create a symbol with placeholder text, then select the instance of your symbol and override the text with whatever you want. Don’t want to allow overrides? “Lock” that layer on the symbol and it will be removed from the overrides list.
Now let’s say your list items can have two different states, one when selected and one when not selected. Create a symbol for selected items, and create a symbol for unselected items, now put those without your main symbol. You’ll have a new symbol override that’s a drop-down menu of the two other symbols. So now your one symbol can be used with different content and different states. Need to make an update to the design of the main symbol or state symbols? You can, and it will propagate across all instances while preserving your overrides. Nice!
Here’s a secret… Try symbol overrides with the Material Icons font… Create an icon by using the Material Icons font characters. Now turn it into a symbol. Then just type into the override box what you want to change the symbol to. Need a plus sign? Type “plus” into the override. Need a check box? Try typing “check_box”. You can find all the icon names and the Material Icons font by visiting the Material Icons website.
Native components libraries
This one is simple but makes for quick work. Select “New From Template” and select iOS or Material design. Need a native iOS Nav bar? Grab it from template’s symbols. Need a Material Floating Action Button? Just choose it from the symbols and you’re rockin’ and rollin’. With these components also comes text styles and design styles that have the native sizes, tracking, alignment and colors you need. Just be careful if you start modifying them. If you’re not good at keeping this tidy they can get messy. Especially if using other tools, like exporting designs into Zeplin or InVision Inspect.
Vast 3rd party plugins and community
Is Sketch not quite doing what you want? There’s probably a plug in for you. In a later blog, I’ll be talking about Craft by InVision, Zeplin and Abstract. These all have plugins with Sketch. They’re awesome for rapid prototyping and sharing design specs with developers and customers. They can also help with version control and managing multiple designers making various changes to a single Sketch file at the same time.
We officially made the switch to Sketch just last year after years of using industry leading tools that just weren’t keeping up with the demands set by today’s UI design. I can’t believe we waited so long to switch. The tool is aimed at UI design and it’s licensing model is fairly affordable and flexible. As user experience designers, we need to listen to users and respond quickly, and Sketch is doing that for us by constantly and quickly making their software better based on our feedback. Other design tools we’ve used have been full of features we don’t need and have been slow to evolve with the design demands. Like Goldilocks trying out porridge, we think Sketch App is just right for UI designers. Not too bloated with features we don’t need, but powerful in just the right ways. Check back again later to learn more about the other tools and plugins we use to create the best experiences possible.