Master responsive UX with Illustrator
Adobe Illustrator is as powerful as ever. Matt D. Smith shows you how to use the vector-crunching workhorse for wireframing
Think Adobe Illustrator is for print design and logos? Well, you’re right, but over the last decade the graphic designer in me has morphed into an intensely focused UX and UI designer. And guess what? Illustrator is still my main weapon of choice for wireframing. I use and love Sketch for detailed UI, but not for UX.
Illustrator is blazingly fast at rendering vectors. No software handles a massive amount of points, shapes, buttons, boxes, text fields, lines and so on, better than Illustrator. It’s a vector-editing beast and it includes some unique features that are great for quickly designing wireframes for responsive websites.
If you don’t know the software very well though, you can spend a full afternoon trying to do one small task. The learning curve with Illustrator can be steep, but not if you know the simple subset of tools to use, along with direct selection and layerless design techniques. Once the software becomes ingrained deep enough in your brain, your hands become autonomous, and you can start to focus fully on the core problems at hand.
I rely on my process with Illustrator so heavily that I have created an entire online video course dedicated to teaching these techniques. It’s called AIUX, and it’s a decade of my design experience, philosophy, and wireframe process all rolled into one.
UX is without a doubt a very broad subject, but for the purposes of this article I’m referring specifically to wireframe screen designs. All screens and components should be designed to inform the flow and functionality of an app or website, rather than being indicative of style, typography or art direction. Let’s dig into some of the tools and techniques behind the AIUX process.
Tools
There are hundreds of tools and tool options within Illustrator, but we can boil them down to nine essential ones. To get fast and furious, these are the tools you need to know:
- Selection ( V )
- Direct Selection ( A )
- Pen ( P )
- Type ( T )
- Eyedropper ( I )
- Rectangle ( M )
- Edit Artboards ( Shift+O )
- Stroke and Fill Focus & Swap ( X and shift+X )
- Group ( cmd+G ) and Ungroup ( cmd+shift+G )
Memorise these tools and their shortcuts as quickly as possible. Maybe 99 per cent of all UI elements will be created and manipulated using those tools. Once you have those down, you’ll have a great foundation to build from.
Global swatches
It’s important when you’re designing wireframes that you focus on clarity above all else. Always err on the side of being overly explicit with your UI, labelling your icons and making your calls to action (CTAs) incredibly clear.
One of the best ways to achieve clarity with your wireframes is with a simple colour palette that uses global colour swatches. The four main colours I use are dark grey, blue, light grey and white (see image overleaf for specific hex values). My preferred secondary colours are super-light grey, light grey, medium grey, red and green. These are used for items like buttons, icons, messages, image placeholders and so on.
You should set these colours as global colour swatches before you begin. This allows you to easily change all instances of any colour at once, even if
you have dozens of screens designed. This is similar to the way you would set up $color variables in Sass when coding the frontend.
Mobile-First
99 per cent of the time, I design mobile wireframes first. If you’ve never forced the mobile constraint from the very beginning of a project before, it can seem daunting. However this approach will make your life much easier in the long run.
Designing mobile-first forces you and your team to prioritise. Prioritise your content. Prioritise your CTAs. Prioritise your navigation. Prioritise the flow
of information. Prioritise your objectives. This one point alone will save you hours and hours of discussion and arguments about folds, columns, carousels, primary CTAs and more.
a fad — you need to master this technique
Tackling navigation
For context purposes, it helps to show a device frame around the design. I start with a small mobile body frame (a simple outline will do) with a screen size of 320x575 at 1x resolution. This is close to the smallest size you’ll need to design for, not including smartwatches.
You don’t have to start with a fullscreen design (e.g. the homepage) either. You may want to design a few components first, like the mobile navigation. By considering the navigation at the start, you can make an informed decision as to whether or not a hamburger menu is the best option — perhaps you can fit five menu items there instead. It’s a good idea to deal with these constraints up-front, which is what working mobile-first forces you to do.
Once you’ve designed your navigation and maybe the footer, you can flesh out one of your core screens as well, still using the mobile viewport as your constraint. Keep in mind we’re not worrying about typography choices, colour schemes, art direction, and so on. We’re intently focused on a clean and highly functional layout that serves both user needs and business objectives. Make it look nice, but substance trumps style at this point.
Multi-Device Design
It’s impossible to know exactly which breakpoints will be used in the code, but it’s pretty common to have at least three: small, medium and large. Alternatively mobile, tablet and desktop. It helps to think of these device sizes like keyframes in an animation. A basic animation consists of two keyframes for one object — the object animates across the screen by transitioning from the one keyframe to another. The easing and timing can be tweaked until the motion ‘feels’ right.
This is similar to responsive design breakpoints. We won’t know exactly what the media queries will be in the beginning, but we can use some defaults to get ideas for our layout. The actual breakpoints will
be tweaked in the code later.
Just like our mobile designs, it helps to put context around the larger sizes. For the medium and large sizes, I use simple device outlines for both a tablet view (768x1024) and a laptop view (1280–1366x800). These are starting points that will be tweaked later, rather than defining media queries. You can download all these device wireframes for free at learnaiux.com.
but it works great for designing responsive screens too
Direct selection
It’s when we’re ready to scale our designs up to the next device width that Illustrator really shines. The almighty direct selection tool ( A ) will become your new best friend. With it, you can draw a rectangle around the right side of virtually the entire layout and drag it over to the right. This will quickly scale your whole screen from the small 320px view to the medium 768px tablet view.
You’ll need to move around the interior layout a bit and adjust a few things, but the direct selection tool makes this a piece of cake. You can select multiple objects, text fields, and isolated anchor points of background vector shapes, all at the same time, and drag them to the device width of your choosing. With this approach you can quickly determine how many columns you might need, experiment with different widths, and so on.
Once you have your first component or core screen designed, you can rinse and repeat this process for the larger laptop views. Make adjustments as necessary to the column count, column width and UI orientation across all of the device views. Especially keep in mind the flow of HTML, from left to right and top to bottom.
Exporting documents
When showing all three devices for one screen, I like to keep them all on one artboard. The next set of devices is put on a second artboard. Continue as necessary. You can access the artboard controls by hitting the quick key shift+O.
It’s worth noting that it’s not necessary to create a mobile, tablet and desktop version for every single screen at the wireframe stage; only the core ones. Once we have three or four sections laid out in a responsive fashion, we can move on to mobile-only mode for the remainder of the screens. This ensures we’re not spending too much time trying to perfect every little detail of each responsive screen.
After we’ve got a few artboards for the core responsive screens, we can line up all the mobile views side by side, depending on what makes sense for each page. Keeping each artboard roughly the same width keeps things simple when reviewing.
Once the screens are ready to be exported for others to see, save a second copy of your AI file as a PDF. Make sure the ‘Use artboards’ option is checked on the Save dialog box. Each artboard you’ve got in your document will now be exported as a multi-page PDF that can be opened and reviewed by your team.
Matt is the owner and design director at Studio Mds, an independent studio in Athens, Georgia, doing work for clients all over the world. He created the Float Label Pattern for input fields, which is now a standard in Google’s Material Design guidelines
This article originally appeared in issue 278 of net magazine
