Flight 209, you’re clear for takeoff. Roger. Huh? That’s a sequence from a scene in one of my favorite movies, Airplane. Are we cleared for takeoff to use vector assets in our iOS projects?
iOS8 and Xcode 6 have brought about the ability to use vector assets to your applications. Vector assets are resolution independent. Using them in interfaces is the way forward, and can save you time in the long run. Even better, this is a way to prepare your apps for future iOS devices.
Most people think of vectors as images that can scale up and down limitlessly, and still look good. Unfortunately, Xcode 6 doesn’t fully support vector assets in iOS yet. Instead, Xcode generates raster images that are based on the @1x PDF image instead of scaling a vector at runtime. However, you can still create and use vector graphics that are non-destructive and editable in the future. Let’s look at how it can be done.
The best way to create vector assets is with an application like Adobe Illustrator, Sketch, or Inkscape. A lot of designers already have Illustrator as part of their toolset as part of the Adobe Creative Cloud. Sketch is a powerful, inexpensive entry point to create vector assets. You can also use Inkscape, a free and open tool.
In Illustrator, it’s simple to export vector assets from your design files:
Create a new document in RGB with the size of the @1x asset you’ll be exporting.
Place your path in the new document, just as you would normally.
Save as PDF.
Using a Vector Asset
Save your image as a .pdf file at the proper @1x size
Drag and drop your pdf file into Images.xcassets
In the Attributes Inspector, set the Type to Vectors.
Pull your image into your file just like you would any other image.
For example, a tab bar button named ‘Maps’ is sized at 25 x 24 in your interface. You simply use your vector asset saved at 25 x 24 in your storyboard. At runtime, Xcode will create 3 images:
firstname.lastname@example.org at 25 x 24
email@example.com at 50 x 48
firstname.lastname@example.org at 75 x 72
A Round Trip Ticket?
While iOS 8 doesn’t include full vector support, OS X does. In OS X, you can scale your image in code or using AutoLayout without any distortion. With some experimenting, I’ve been able to size vector assets while targeting size classes in Xcode without distortion. When you target a compact or regular size class in your Universal Storyboard, you will have to set a height and width constraint on the vector asset to change its size.
Our Final Destination
The ability to use vector assets opens up some questions when designing UI elements. When we work with png files, we usually design at @2x resolution. Developers build in interface builder at @1x. It would seem logical for us to create our interfaces at @1x. This would make specifying quicker for designers, and is easier for developers to dissect.
Do we have clearance Clarence? Hopefully we get the roger, Roger from developers soon.
Ignoring UX in your app dev process is like purchasing a beautiful sink, installing pipes, and then leaving the sink on the bathroom floor.
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 are essential for designing interfaces in Illustrator. If you’re not using them, you should.
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.
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.
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.
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.
Then, in your General Settings, make sure your grid and keyboard increments line up to individual pixels
I have a gridline every 64 or 8 depending on the project. But make sure that subdivision divides into individual pixels.
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).
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.
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.
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.