Designing with Illustrator - Tips & Tricks Part I

image

Some of us at Big Nerd Ranch use Adobe Illustrator as our primary design tool. So we thought we would publish some favorite tricks that make the tool great for designing wireframes and visual designs.

Symbols

Symbols are essential for designing interfaces in Illustrator. If you’re not using them, you should. 

image

Symbols are perfect for anything that will be reused in your designs. And as we all know, when designing interfaces many elements should be reused. 

When you create an icon or button, just drag that object into the Symbols panel. It creates a Symbol. From that point on, drag the symbol onto your artboard. 

Why not just copy and paste? Well, when the client asks for a change later, you can change the symbol once and it will update everywhere in your Illustrator file, across all artboards.

Also, if you have created a set of symbols during the wireframe phase, then there’s a good chance that symbol will evolve into a visual element that will need to be part of the style guide for the final product. If it’s reusable, then a visual language can start from your symbols panel.

Appearance Panel

Speaking of panels, the appearance panel can be used in a very powerful way to create visual graphics that can also be reused.

This tutorial and others opened my eyes to the power of using multiple fills, strokes, & effects (and effects only on fills, strokes) within the appearance panel on a single object.

This is an example of just how complex the appearance panel can become on a single object.

image

Then, when you’re happy with the appearance, you can drag the object to the graphic styles panel and reuse that appearance on other objects. This technique can even be used on typography in really interesting and creative ways.

Pixel Perfect

If you want your designs to be tight and clean on device or on the web, then you’ll want to start your AI documents with these settings. 

When you create a new document make sure you are working in pixel units and have Align New Objects to Pixel Grid checked.

image

Then, in your General Settings, make sure your grid and keyboard increments line up to individual pixels

image

I have a gridline every 64 or 8 depending on the project. But make sure that subdivision divides into individual pixels.

image

Then if your keyboard increment is every 1px, you can be sure that you’re nudging on the pixel grid.

That’s not all. If you want things to be pixel perfect, you MUST make sure that Snap to Grid is checked. This is very important. If this isn’t checked, you may still get objects that sit on half a pixel (which will cause a fuzzy edge to be present).

image

From that point on use the Pixel Preview option in the same View menu to check your design and see how much anti-aliasing is being applied. It’s possible something is falling off of the pixel grid and could use a little tightening up.

That’s it for now. More to come in the future.

4s, 5s, 6, Nexus 5, 6 Plus, iPad Mini.* 

*iPhone6 and 6+ are only a model

"Port" is a Dirty Word

As a designer, the word “port” can be somewhat cringe worthy.  By definition, a port is an application adapted from one computing environment to another; however, this four-letter word almost implies a short, sweet re-skin for what is actually a challenging process involving design, development, and stakeholder communication.  In the case of some iOS-to-Android ports, a design using iOS interface elements can be put into production that doesn’t necessarily bode well with an Android user.  Instead of just “making it work on this thing”, a port needs it’s own process for it to truly resonate with the end user.  At Big Nerd Ranch, we use quality time, communication, and preparative thought to make sure that any “port” we make does away with a negative connotation and delivers a quality experience.

 

Prepare for Android

It should be understood that Android and iOS have a completely different mental model.  Navigation, transitions, animations, and design language all change dramatically between the two. In order for the user to fully understand the experience, it must mimic the OS precisely which requires the designer to have a full understanding of even the smallest, most “enchanting” details.  

 

The best way to prepare for an Android version of an app is to familiarize yourself with every part of the operating system (even if you already use it).  If you’re mostly an iOS user (like myself), go out and find a Jellybean, KitKat, or L device (if possible), and play with it.  Better yet, stick your SIM card in it and struggle bug your way through the user’s experience until it’s second nature.  Android users have a developed muscle memory for navigating apps which is imperative for a designer to understand.  For designers already using Android, pay attention to how you navigate your own device.  Record your experiences, both positive and negative for a number of applications, and refer to these when talking to a team member or stakeholder.  Nothing is better for understanding your users than being them!

 

In addition to this, brush up on the lingo and invite your developers to be a part of the conversation.  Android developers are some of the few people that know the operating system literally inside and out.  At Big Nerd Ranch, designers and developers work a stone’s throw away in order to ensure this type of communication happens constantly.  

 

Analyze the Existing Experience

When porting from iOS to Android, it’s important to begin separating the core experience from the existing iOS application.  Ask the question “what does the user need to accomplish with this product?” and map out the best way to do this without reference to any operating system.  If there are existing issues with the core experience, this would be the time to discuss that and find a solution.  Although the goal is to create the same experience, ported apps sometimes have the unique advantage of solving a problem that could exist in the original.  

 

Executing Design

Depending on the project, the user flow of an Android app can be vastly different its iOS counterpart due to the increased number of navigation options.  Make sure any new user flow first incorporates the stripped down core experience before adding Android specific navigation details.  A separate set of wireframes are also necessary to ensure that all elements are OS specific.  At this point, with any design, both a hawk’s eye perspective and a user’s perspective should be referenced to iron out any redundancies or experience problems.

 

Since this ported app is usually part of a larger product, it’s important to implement similar branding; however, that branding should be stripped of any relationship to iOS. Functional design elements (like navigational iconography) should keep with Android design guidelines to ensure that the user understands how to navigate.  By keeping this visual design “happy medium”, you’re ensuring visual communication of both functionality and the product’s brand.  

 

With time, consideration, and expertise, a ported application can be an amazing standalone experience for any user.  This being said, let’s eliminate frankenstein apps and make the term “port” mean a wonderful, cross-platform experience that everyone can enjoy!  To help us in that initiative, join us for our next iOS and Android Design Bootcamp.

Becoming a UX Designer

I have been asked several times for advice on entering the UX field, and thought I would post my most recent response to a woman moving from the fashion industry into wearables and health devices:

The app industry (even/especially wearables) is a UX designer’s dream. An app is nothing without conscious placement, animation, and movement decisions. It’s 90% content with a bit of gloss added at the end to make it look modern, but most of the “delight” users and clients refer to come from UX decisions.

First of all, I recommend checking out Meetup.com and finding groups near you like IXDA, AIGA, CHI, etc. They frequently have meet ups with free or inexpensive talks, panel discussions, workshops, and social gatherings. There may even be some specifically focused on wearables. We just hosted (here in Atlanta) a talk on Android wearables this past weekend. 
We have a week-long bootcamp on designing iOS and Android apps, so have done a lot of competitive research and have a robust list of schools and other training resources. Those might offer more or additional options for you (though this list is long!).
Another great resource for UX news is email newsletters from MailChimp UXSmashing MagazineMutual Mobile, and Mobiquity.

(I then went on to bombard her with UX schools and online learning resources). What advice would you share with someone new to the field?

When is a sprint not a sprint?

On your mark. Get set. Whoa!
The act of running and completing a marathon is no small feat. Neither is the process of designing an app. Both events require weeks of preparation and work. And sprints are only a small part of the story. 

image

Getting up to speed
I love running and design. I recently completed my 6th marathon in New Orleans, my 3rd since joining Big Nerd Ranch as a UX and UI Designer. I’m currently training for my first Half Ironman. Every Wednesday, a run group leaves from our Intergalactic Headquarters to flex their legs and lungs after a day of mind flexing. Seems like the right spot to merge my favorite things. So how does one cross the finish line in both activities? As crazy as it might sound, the process is very similar.
 
The Starting Line
If only we could lace up the shoes, and run without preparation. However, a lot of planning has to happen if you want the race to be a delightful experience. Where is the race? How many weeks away is it? Is it a hilly race? How many miles will you be running? Similar questions must be answered in the design process. Who is the user? What is the budget? When is the launch? Which devices will it be used on? If you don’t answer these questions in the beginning, your experience might not go well. The preparation and solutions for one design problem will not work for others. You have to plan for specific experiences. 
 
Building Your Base
Much like training, good design takes time. When training for a marathon, you don’t start with a 26.2 mile run. You have to build up your mileage over many weeks before making that final run. Each week is scheduled and has goals much like the iterative design process. Run iterations are based on your race goal and what type of race you are running. The design process works in in a similar way. With user experience design, you have to include continual feedback in the process. This is where sprinting comes into play. Test your design now instead of testing on race day. Did that form work? Was the user confused? Did it solve the client’s problem? You have to interpret what worked and see how to improve it. As a designer, you have to remain aware of the user throughout the process. With running, I usually test new shoes, clothes, and nutrition on my shorter runs. Did the shoes cause a blister? Did that gel make my stomach hurt? Waiting until launch day can lead to disaster. Training and design takes time. The biggest challenge is to not lose focus.

Race Day
It’s go time. Your planning and training has put you on the path to a good experience. You have all the right tools at your disposal. Now it’s time to trust the process and preparation. It’s your chance to test the experience. Once you cross that finish line, the “race” is not over. There may be a celebratory beer and a bunch of high fives. But there is also a self evaluation that must be completed. How did it feel? Would you do anything different? 

When and where do I sign up for the next one? 

Blurred Lines

The students in Big Nerd Ranch’s first week-long Mobile Design Bootcamp this month were from all walks of the industry. We had app, desktop, and web designers, Android and iOS developers, project managers, and college professors. The common trait they shared was that they were all seeking app design empowerment. 

They were interested in rapid prototyping, user testing, and visual design trends. They wanted to know the correct vocabulary to have a meaningful conversation with their app teams, and to make design decisions in line with the code they were writing.

There has been this line between software development and aesthetic design. A class system of “artistic people” and “non-artistic people” has kept programmers from pursuing more attractive interface design on their own. 

Ten years ago, one did not presume to cross that line, lest you be petted on the head and told to go back to what you’re good at. Recently that’s changed in a really big way. A bridge has grown between software and design, and both are not only given permission to cross the line, but encouraged to blur it.

The app market is the gateway drug for many developers to become interested in UX and UI design. The evidence connecting beautiful design, simplified user experiences, and user success to money spent is palpable. Developers can no longer ignore design. Consumers are privy.

That care for design and attention to the actual user adds an element of humanity to software development. It has all the feels now. The humans matter!

As designers at Big Nerd Ranch, it’s our job to make sure our developers come to each project with this understanding and appreciation firmly in place. In fact, most of our developers are eager to take our new Mobile Design Bootcamp to better understand design principles, usability, and platform best practices. They want to know how best to use these tools. Why are they there? What do they do? Why should they care? What does the user gain? I love these questions!

And designers can no longer ignore the numbers, brackets, and letters that make up the code of an app. Our design team is always learning bits of JS, Objective-C, or simply boning up on complex animation capabilities introduced with new SDK’s. They are curious about where the boundaries lie, how they can better converse with developers, or how they can push natural mental models. They aren’t necessarily learning how to program, they are learning what programmers do in order to be better app designers.

We want to encourage developers and designers to blur that line and step over it. To stop tossing designs over walls, and to stop automatically saying no. Start a dialogue. Make better apps.