beyond white: embracing the ios design aesthetic

Beyond White:Embracing the iOSDesign Aesthetic

Janie Clayton

Janie Clayton• Software Engineer and

Robot Builder at SonoPlot• Coauthor of “iOS 8 SDK

Development” and “The Swift Apprentice”

• Team Lead for the Swift Tutorial Team at RayWenderlich.com

• Cohost of NSBrief

Issues with iOS 7 Design• “Flat” design, which makes buttons look like labels

• Stark and sterile

• Difficult to give apps “personality” due to minimalism

• Features like animations, depth, and blurs are difficult to use effectively or were missing altogether at launch

Da fuck??

My First App

Heart Rate App

• Works with the Apple Watch

• Displays live heart rate data using HealthKit

• Shows other derived data that is pulled and processed from HealthKit

Jesus, this is boring!!

I feel like I'm gonna break this damn thing.

DesignFrameworks

are HARD!!!!!!!!!

Auto LayoutCore

Graphics

UIKit

Core Animation

OpenGL ESMetal

Scene Kit

Gesture Recognition

Sprite Kit

Now Updated for Panther!

3D User Interfaces

The Misnomer of the “Flat” User Interface

Setting Up Your Design Space

Good Designvs

Bad Design!!!

More than One Kind of Bad Design

• Boring

• Obfuscates information

• Not intuitive

• Ugly

• Busy/Noisy

http://theoatmeal.com/comics/design_hell

What Company was this Ad for?

Nissanhttp://www.videomi.com/blog/archives/322

http://tier10lab.com/2012/11/29/throwback-thursday-nissan-1996-200-million-ad-campaign/

Working WithDesigners

My Old “Logo”

• Found on the Internet• Don’t own• Didn’t customize• Nice but doesn’t have

a visceral, immediate feel or reaction to it

• Just not “me”

What I Want

• PUG!

• Specifically based on images of Delia

• Red crown like on a chess piece

• Something I can print on stickers and make into a logo

Mary Cagel@CubeWatermelon

Tips• Try to have a good idea about what you want, don’t

just say “I want something cool.”

• Find someone who has an art style you like

• Try not to waste their time

• If you don’t like something about the work, send it back and try to be specific about what you don’t like

PAY YOUR DESIGNER!• Clears up any issues of ownership and legality

• Makes the designer more likely to get your project done

• Allows you to get exactly what you want

• You want people to pay you for work you do, why won’t you do the same for another craftsperson?

• Seriously, this shouldn’t be a question

A True CautionaryTale

Decision Costs

• Month I was working on a design that they didn’t like

• Week I was on payroll but not working

• Contacting a lawyer and associated legal fees

• Two weeks severance to avoid being sued

The Color

20 minutes

Take Aways• TALK TO YOUR DESIGNER!!

• Be clear about what you didn’t like

• Keep in mind that what they sent you might have been a mistake

• Give them a chance to fix it and make it right before you cut ties and go elsewhere

Call to Action

Homework• Go out and buy crayons and colored pencils and

note cards

• Set up a dedicated area for your stuff

• Embrace crappy design

• GET AWAY FROM YOUR COMPUTER!!

• Try to make a design without a table, collection, or stack view

How to Get Started• Find something you like and try to copy it

• Don’t feel like you have to come up with something new and original, try to learn the basics first

• Draw a lot

• Know you’re going to suck but be okay with it because…

• Know you’re going to get better

Resources

• iOS Animations by Tutorial by Marin Todorov

• Learning SceneKit by David Ronnqvist

• 3D User Interfaces: Theory and Practice

• Tutorials on RayWenderlich.com

• Learning Core Animation by Nick Lockwood

Go Forth and Make Awesome Shit.