Hello and welcome to a short mini-series on wireframing and design in Adobe Illustrator.
Illustrator can be a bit of an unconventional choice when it comes to web and app design, but my aim in this series is to explore the different reasons why it’s a great tool for delivering and rapidly revising everything from wireframes to full, hi-res comps.
There are tons of wireframing and design apps out there, and they all have benefits and drawbacks. It’s worth your time to explore the many options available online — ultimately, whatever is fastest and most comfortable for you and still gets the job done will be the winner. For me, that’s Illustrator — Illustrator makes it very easy to create and modify complex geometry, text, and color styles with great speed and precision – and because I do a large amount of my design work in Illustrator as well, the whole wireframing process leads very smoothly into the design phase.
This series will explore the various different workflow tips I’ve accumulated that will hopefully help you utilize Illustrator to its full potential when working on apps, websites, and more. In this post, we’ll go through Nudging and Direct Selection Tool.
Related: 10 Principles of Good Wasteland Design
Precise, Direct Movement
Let’s talk boxes. You’ll be making lots of these and spending a great deal of time moving them around and resizing them. If you’ve used Illustrator before you’re probably aware that you can nudge shapes around with the arrow keys. And, if you hold shift, you’ll move ten times the distance with each press of an arrow key.
Nudging in Illustrator is incredibly useful when you need to move elements around very precisely. Especially once we’re out of wireframing mode and we’re doing our real design work — Illustrator’s “Pixel Preview” mode is fairly finicky and moving elements with your mouse will frequently knock objects off the pixel grid. But it can be tedious to hold down those arrow keys for long periods of time, waiting for your objects to finally arrive at their destination. Luckily, there are a couple of ways to speed this up.
If you know exactly how far you want something to move – say, 1000px to the right – just hit “v” to get your Selection Tool ready and then hit enter. The Move dialog box will appear and you can type in whatever values you want and just hit enter again to move your selected object.
If you prefer to keep nudging things around – it’s super easy to change the nudge distance, too. Simply hit cmd+k to open your Preferences menu and you’ll notice that your keyboard increment is already highlighted. Just enter a number value, hit enter, and you’re ready to move.
Pretty soon you’ll have the muscle memory mastered – cmd+k, type a number, hit enter – and moving things quickly precisely in illustrator gets much easier.
Related: How to Build an App Like Romans Built a City: Part 1 and Part 2
Embracing the Direct Selection Tool and Object Selection by Path Only
One of the nicest things about Illustrator is how intuitive groups are. Build a user icon, hit cmd+g group the shapes together. Group that with a headline and copy. Group that with a background layer and you’ve got a card. Group those cards together, and so on, and so on. For these examples, we’ll use Google’s excellent Material Design Sticker Sheet.
The problem with this nesting doll-style group structure is that it can be tedious to dig back into your groups when you need to make edits. The most straightforward way is to double-click forever until you finally get back to your desired object, but that’s a chore.
When you’re building complex documents, you will inevitably need to access some objects that are buried deep inside some nested groups. Maybe they’re behind an object with transparency, or maybe you need to only select certain parts of a complex shape. Enter the Direct Selection Tool.
If you’ve used Illustrator before you’re probably familiar with the Direct Selection Tool (A). This tool is incredibly useful for bypassing group information and letting you directly edit an object, but it has a few drawbacks — if you’re selecting multiple items it’s still a pain to manually select all of them, and you could accidentally select only a piece of a shape instead of the entire shape. Plus, if you’re selecting objects on a background layer, you may pick up the background as well!
There’s a way around this problem, and it is the holy grail of selection in Illustrator: “Object Selection by Path Only.” I am not exaggerating — this one checkbox in your preferences pane has the potential to dramatically speed up your Illustrator workflow. Hit Cmd+K to view your preferences panel and go to the third tab from the top – “Selection and Anchor Display”. Make sure the checkbox for “Object Selection by Path Only” is checked and hit enter to confirm and leave the panel.
Enabling Object Selection by Path Only allows you to ignore any geometry surrounding your objects when making a selection – meaning you can drag to your heart’s content, confident you will only select the objects you mean to. It’s similar to working in outline mode (cmd+y), but you still have full-color picture of your document and you won’t have to worry about selecting anything hidden behind your objects that outline mode would make visible.
It’s a lot faster. And it works even if you have transparent layers on top of what you’re trying to select.
But the real benefit of using this tool is in boosting your speed – and if you have to open your preferences and fiddle with your mouse every time you switch this on and off, you’re not saving much time at all. Unfortunately, there’s no keyboard shortcut for this feature – and you can’t assign one in your Keyboard Shortcuts panel either! (Edit > Keyboard Shortcuts or Cmd+Shift+Alt+K)
But there is still a way to make this work. Because you _can_ set a shortcut for the Selection and Anchor Display tab of your preferences pane. I went ahead and bound it to cmd+, to keep it close to cmd+k, though you can set it to whatever you find convenient.
We’re making the closest thing possible to a keyboard shortcut for “Object Selection by Path Only”. Now you only need to hit cmd+, hit tab, hit space, and hit enter. And you’re done.
It sounds complex, but just like changing your nudge increments, it’ll come easily after you do it a few times.
If you’ve ever worked with complex documents – lots of layers, many nested groups or objects stacked on top of one another – this should save you a lot of time!
Learning Adobe Illustrator for the first time is a little like being dumped in a foreign city with no idea how to speak the language and no clue how to find anything. It’s up to you to gradually figure out what you’re doing and get comfortable – and even then, you’ll still be stumbling into brand new neighborhoods years later.
Hopefully, today’s two tips will help you navigate and edit your Illustrator documents faster and more precisely than ever, so you can build and revise complicated wires and documents with ease. If you have any other favorite tips or hacks, feel free to post in the comments!
