Big Nerd Ranch Design

Now that you’ve finished designing an amazing UI, how do you make sure it is implemented correctly? Handing your design over to development without documentation leaves a lot of details up to interpretation. Spec’ing your document will help eliminate that guesswork.

The Specifics

Properly spec’ing your document eliminates misunderstandings and communication errors with developers. However, spec’ing is incredibly time consuming, and measurements are subject to errors. Now there are tools that will help you provide accurate details to pass along to your developer in a shorter amount of time.

There are quite a few options out there for adding these details to your design work, and there are new options being added everyday. Each app or plugin has some pros and cons. The choice will most likely depend on the software you use to create UI designs. At Big Nerd Ranch, the design team uses a variety of apps to help in documenting their designs. Below are a few that we use in our design workflow.

Specctr

If you use one of the Adobe products like Photoshop or Illustrator as your UI design tool, Specctr is probably the best choice. It was one of the very first plugin tools available for marking up a design. You can easily spec your file with a few clicks. It’s a plugin that exists within your application. By clicking on an object, you can add a dimension, size, or placement reference on top of your design. The plugin creates a separate layer that can be hidden or removed if needed. And now that retina-sized images are the norm, the scale feature gives you control over measurements. Our developers prefer to have measurements at 1x since Interface Builder in Xcode is set up for it.

You can buy a plugin for a specific app for $49, or you can get the bundle for all of the Adobe apps for $99. Also, you can get the Lite version for free that gives you some features with some limited preferences.

Sketch Measure

Sketch Measure is a free plugin for Sketch that allows you to add notes, measurements, and object properties within the canvas of your design. This plugin is especially useful if you are preparing a file for someone, or when you’re working with other people. With this plugin, you can document sizes, margin or padding, distances, properties, and coordinates. To use, select any element, then go to Sketch Measure in your Plugins menu. Choose which item you want to document, and where you want that information place in relation to the object. You can also define what properties you want to show for a particular layer.

With Sketch Measure, you can also convert px to dp, which is perfect when you’re handing over specs to Android developers.

Zeplin

Although still in beta, Zeplin is a powerful standalone app. Instead of it working within your favorite design application like Specctr or Sketch Measure, you import artboards from Sketch into it. From there, you can quickly turn your designs into specs and guidelines for developers. The biggest shortcoming is that you can’t export assets from the app. You still have to do that within Sketch. The big advantage of this type of system is that you can invite others to your project. A developer could easily join the project and use the app to see guidelines as they roll around and click on the artboard. You can also issue alerts and messages to those on the project if something changes.

Markly

Markly is the newest app taking up the cause of design documentation. Currently it works with Photoshop and Sketch. Much like Zeplin, you choose an artboard in Sketch, and import it into a project in Markly via an icon in your main menu bar. From there you can click on a layer or item in your artboard, and see it’s details live in the right panel. You can create a physical documentation by using one of the tools in the Markly toolbar. You can also add distance specification marks by simple clicking and dragging between objects.

There are some features that set it apart from the others in this list. One is that specs are updated when your design is modified. This is a tremendous time saver especially on a rapidly evolving project. Also, Markly can automatically convert the measurements based on different screen densities. A very useful feature if you are working on an Android app.

Currently the app costs $39.99, but you can try it out for free for 15 days. If you’re a power Sketch user, I highly suggest giving it a test run.

Future Speculation

Everyday, new tools and plugins are being developed and delivered that help make designers’ lives easier. I am excited to see how these types of plugins and apps evolve in the future.

I recently had the opportunity to give the Apple Watch a test run at the Big Nerd Ranch office. While researching its functions and interface guidelines for a work project, I decided to see how it performs doing my favorite activity — running.

I’ve become set in my running ways after many years. I have a favorite shoe brand, prefer a certain meal the night before a big race, and use my Garmin Watch to record my activity. I’ve been using a Garmin watch with a heart rate monitor for almost 5 years. I approached the Apple Watch with a lot of hope and doubt.

Off to the Races

I decided to hit the ground running with the native Workout App. The interface is beautiful and easy to read and has a ton of options. However, its functionality is a little lacking. When running in a city that features many encounters with traffic, I frequently have to stop and restart my watch at crosswalks. With my Garmin, it is as easy as pushing a physical button on the side of the watch. I don’t have to take my eyes off my surroundings. I can simply do it by feel. With the Apple Watch, I have to force touch on the screen, then choose between ending the run or pausing. That’s too many steps, and too much looking at the screen.

The component missing from the Watch that I truly need as a runner is GPS. When I go out for a run, especially a long one, I try to minimize the items that I take with me. I usually bring my key, water bottle, and my watch. With the Apple Watch, if I want to track where I run, I have to bring my iPhone. I haven’t carried any kind of music player or phone on a run in over 4 years. This sudden change in running habit didn’t sit well with me.

It is possible to use the Workout App on the Apple Watch without your phone. However, the results are wildly inconsistent. During my first test run, it was myself, the Watch, and a water bottle. I ran to a mile marker on the Atlanata Beltline that I have completed many times in the past. After completing the 1.5 miles, I looked at the watch to find it .4 miles off the expected distance. On the way back home, it was .35 miles off.

The following day, I ran the same route without my iPhone and water bottle. The results were definitely better. The distance was only .04 miles off. Without an iPhone, it appears that the Watch measures distance using arm locomotion. Carrying a water bottle definitely seems throw off that measurement and movement. Based on those test runs with the native app, my Garmin was still the best bet.

Third Party Apps

There are several running apps available for the iPhone that currently have Watch apps. I took a couple of them out for some short mileage to see how they compare to the native Apple Workout app.

Not every running app has a watch app. And the apps that have Watch apps don’t always have a Glance. Those apps that make their way to the Watch need the iPhone to work (until WatchOS2 hits).

Strava In the past, I have used the Strava iOS app and website for tracking my runs and bike rides. I could either use their app directly, or I could have my Garmin sync the data to the Strava site. I was happy to see that they had extended their app to the Watch. The biggest drawback is that I had to carry my phone with me for the app to work.

Switching back and forth between running and biking requires a force touch much like the native Workout app. The response time for this interaction to begin is a bit sluggish. Hopefully this will change in newer versions. Starting a run is a simple touch of the screen. So simple that I accidentally started a run before I was ready to go. The layout of the information was very similar to the simple LCD screen I am accustomed to on my Garmin. Pausing the run requires a Force Touch, similar to the Workout app. However, in Strava, it doesn’t have an extra screen that requires me to tap to pause.

Runkeeper As with Strava, the Runkeeper app requires the iPhone for the Watch app to function. The UI is very simple, and I found it an easy experience to use. It’s UI for the actual running was the simplest of the apps I tried. It was also the closest to the visual and functional layout of my Garmin Watch. Unlike the Force Touch method used by other apps, a user could simply tap pause on the screen to stop the app. When you want to restart your run, you simply tap the screen again to resume.

Nike+ Running The Nike+ Running app feels and looks like a blend of the native Workout app and the Strava app. It was the most feature rich app that I tested. It brings a lot of the functionality from the existing iPhone app to the Watch. Running, Leader Boards, Social Activity, and more can be found here. Apple suggests that activity on the watch should only take seconds to browse. On the watch, the main focus should be on the activity of running, while leaving the other features to be viewed on the phone.

Unlike the other apps, the Nike+ Running app has a paginated menu in the app allows me to start run, view leaderboard, or check out my previous activities. Starting a run is a very simple tap of the run button. The interface is big and bold, and easy to see even on the 39mm version. For the moment, the Force Touch is the only way to pause or end a run, just like the Native app. This is certainly not the best user experience while running. I am hoping more apps go the way of Runkeeper or Strava to pause a run.

Staying on Course I ran into a couple issues while using the third party apps. When running with the Workout App, the app view would stay persistent throughout the entire run. However, when using a third party app, after a few minutes, the screen returns to the clock face instead of the app you were using. It was very cumbersome to get back to your app. First, you had to touch the digital crown, then try to find the tiny icon of the app you wanted. All of this while running at the same time.

Walk, Don’t Run

I think there is a lot of promise with the Apple Watch. Hopefully, the next generation Watch will include some of the missing components to make it a fully stacked running necessity. Recently at WWDC 15, Apple previewed WatchOS 2, a new SDK that will allow apps to actually run on the watch. This should make response times faster, and increase functionality within the app.

Strava is already planning to use the heart rate sensor to gather and display data during workouts. I can see other apps taking advantage of the Taptic Engine to create custom alerts for users. Also, developers will have access to the Digital Crown. Using this input method, a user might be able to choose from a set of workout types, or set time limits. I wonder if I will be able to pause a workout or run using the Digital Crown. And hopefully, gaining access to the accelerometer will increase accuracy for those choosing to run without their phone.

Fumbling with a bunch of credit cards and a wallet is a hassle. Who wouldn't prefer to just use their phone or smart watch for transactions? But are we giving up security in the name of convenience?

I don’t think so. Not only is Apple Pay convenient and easy to use, you will not find a more secure form of credit card payment today—period.

There are four basic things to understand about Apple Pay’s security:

What happens when you add a credit card to Passbook?

What is the secure element?

What happens when you make a purchase?

Is any of your financial data stored in the cloud?

Linking Your Credit Card to Passbook

The foundation of Apple's security is the secure element in the phone and the way credit cards are authenticated when they are added to Passbook. More on the secure element later, but here are the steps that occur when adding your credit card to Passbook:

When you scan or manually enter your credit card into Passbook, Apple sends an encrypted message to the credit card networks (Visa, Mastercard or American Express), who in turn pass it on to the credit card issuer.

In this message is a request for a token and a cryptogram, which makes the iPhone the token requester (this is important).

The credit card issuer sends back a token and cryptogram, making the issuer the token provider (this is also important). Therefore, the issuers are responsible for the security of the token and cryptogram.

The secure element on the iPhone is the only thing that stores the token and cryptogram. These items are not stored on Apple's servers. The secure element is the only thing that contains this data. And because it is not actually the credit card number, if you lose your phone, you don't have to cancel your credit card. You simply disable your phone.

The last four digits of your credit card is the only thing in Passbook that resembles your credit card. This is to help distinguish the credit cards in Passbook; if you're like me and have two cards from the same bank, you need to see the last four digits.

The fact that the credit card issuers are the token provider is important because at no time does Apple create, contain or store the token. The onus and liability is completely on the credit card issuer.

Additionally, the token and the cryptogram are not just encrypted versions of the credit card number. They are actually completely separate data. Therefore, the token and cryptogram cannot be decrypted to reveal your actual credit card number.

The Secure Element (and Tokens)

So, how secure is the secure element, really? The secure element is a chip inside the iPhone 6 and 6 Plus where the token and cryptogram are stored. The software accesses this hardware only when you link a credit card to Passbook or a transaction is being made. The data on the chip is never passed to the software for use within the operating system, which is where breaches normally occur. If someone were to hack your operating system, there would be no way to extract the financial information.

The token stored on the secure element is unique to your device, not just a replacement of your credit card number. Tokens are meaningless mathematical strings, which cannot be decrypted back to an account number. Additionally, they are useless on their own. They require both the device and the cryptogram to work. Only the token provider can map the token back to the account. Apple cannot do this. The token is not stored in Apple's servers anywhere—it is stored only on the secure element.

Making a Purchase with Apple Pay

When you make a purchase with Apple Pay, Touch ID is required as part of the authentication process. The biometrics of touch ID are not completely 100% secure, as

we’ve seen in the past few months

. However, it is still leaps and bounds ahead of any signature or PIN-based user authentication. I would rely upon my fingerprint over a PIN any day.

When you make a purchase:

The NFC reader recognizes the NFC chip in your iPhone 6 or 6 Plus. The secure element then sends the token and cryptogram to the retailer.

The cryptogram is sent to the credit card network, which determines whether it is authentic. If so, it then sends the token to the authorizing bank (the credit card issuers), which decrypts the token.

The bank recognizes the token it established when you linked your credit card to Passbook. It authorizes the transaction and sends back the authorization to the retailer.

The cryptogram is a layer of security in which part of it is dynamically created per transaction; it links the token to the device and that particular transaction. Tokens can never be used without an accompanying cryptogram and the cryptogram ensures that the token can only be used from the device in which it was originally linked.

The important fact here is that the retailer never has possession of your actual credit card number in any part of the transaction. That is a distinct difference from the credit card magnetic swipe we have today, where the exact credit card number is unmasked and sent directly to the retailer's point-of-sale system. This is the weak point where hackers have intercepted credit card numbers at Target, Home Depot and others.

The Cloud

Apple does not store your credit card number in the cloud during any part of linking your credit card or making a transaction. The only thing stored is the token and that is stored in the secure element. This is a distinct difference between Apple Pay and Google Wallet. Google actually stores your credit card number

 in order to facilitate the transaction. The authorization of the transaction first hits their servers, is decrypted, and then goes to the bank that issues the credit card. Google also requests and stores your Social Security Number when setting up Google Wallet.

With Apple Pay, the only party to actually store the credit card number and associated token is the credit card issuer themselves.

From an email by Aaron Hilligass:

At Tuesday's Fireside, Bill Phillips asked "If an employee is involved only with app dev services, why should they care about training? And, part two, if an employee is involved only with training, why should they care about app dev services?" I gave a not-particularly-stellar answer, but I asked Bill to think about it and write me two paragraphs of what he thought. I am going to have the result tattooed on my torso:   One of the needs that we now uniquely satisfy with our teaching is a spirit we bring to it: the concepts we work to address may live in the clouds, but our feet are firmly planted on the ground. Our students have real problems, and our understanding is aimed at providing useful and real solutions to those problems. So while it is natural that teaching is our instructors' highest priority, app dev is nevertheless integral to doing their jobs well. It connects them with reality.

  Something similar then applies to our app dev work. Our app dev folks make our clients' problems our own, much like any other app dev consultancy. Unlike other consultancies, however, our efforts serve an interest beyond that of any one client: BNR's need to explore and understand the problems faced by the industry as a whole. This means that our app devs have a unique responsibility: to seek out and solve problems that are not merely profitable, but are also important to all developers.

Using Pixate to prototype scrolling behavior as seen in the new Google Design Guidelines.

How to deal with a client that won’t take your recommendation.

1. Always make sure client knows you have their best interest in mind

What’s important to them? Is it their customer? Is it the boss that’s breathing down their neck?

They may not be confident enough or have permission to change direction

2. Reiterate your expertise in a reassuring way

Don’t boast or push

Clients came to us for our expertise, they just sometimes forget that (see #1)

Use your past experiences as a discussion point for change: “In my experience, customers respond more positively to…”

3. Always provide the client with what they asked for

Let them know you were listening. A client that doesn’t feel listened to will not trust you

Follow their instruction to a T

4. Put in the extra work (if you can) to show them an alternative: your recommendation

Present this after you present what they asked for

Outline why you feel this may be a better solution

Remember they may be emotionally attached to their recommendation, so be careful not to insult their decision.

5. The client may not choose your recommendation, and that’s ok.

This is not your app

We are providing a service to the best of our ability

It’s their money

Showing them you accept their judgement on some things will reinforce their trust in your opinion, opening up more dialogue on future design decisions.

6. The client will (almost) always pick the design you don’t like

It’s like a 6th sense they have

If they didn’t ask for it, and you don’t like it, don’t show it

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.

Getting There

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:

[email protected] at 25 x 24

[email protected] at 50 x 48

[email protected] 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.

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. 

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.

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.

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.

Use Your Words!  Another clip from a series of Big Nerd Ranch propaganda posters.

You are the Leader A clip from a series of Big Nerd Ranch propaganda posters. Remember to be a leader on your project.

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