beyond white: embracing the ios design aesthetic

62
Beyond White: Embracing the iOS Design Aesthetic Janie Clayton

Upload: janie-clayton

Post on 28-Jan-2018

1.124 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Beyond White: Embracing the iOS Design Aesthetic

Beyond White:Embracing the iOSDesign Aesthetic

Janie Clayton

Page 2: Beyond White: Embracing the iOS Design Aesthetic

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

Page 3: Beyond White: Embracing the iOS Design Aesthetic
Page 4: Beyond White: Embracing the iOS Design Aesthetic
Page 5: Beyond White: Embracing the iOS Design Aesthetic
Page 6: Beyond White: Embracing the iOS Design Aesthetic
Page 7: Beyond White: Embracing the iOS Design Aesthetic

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

Page 8: Beyond White: Embracing the iOS Design Aesthetic
Page 9: Beyond White: Embracing the iOS Design Aesthetic

Da fuck??

Page 10: Beyond White: Embracing the iOS Design Aesthetic
Page 11: Beyond White: Embracing the iOS Design Aesthetic

My First App

Page 12: Beyond White: Embracing the iOS Design Aesthetic

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

Page 13: Beyond White: Embracing the iOS Design Aesthetic
Page 14: Beyond White: Embracing the iOS Design Aesthetic

Jesus, this is boring!!

Page 15: Beyond White: Embracing the iOS Design Aesthetic

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

Page 16: Beyond White: Embracing the iOS Design Aesthetic

DesignFrameworks

are HARD!!!!!!!!!

Page 17: Beyond White: Embracing the iOS Design Aesthetic

Auto LayoutCore

Graphics

UIKit

Core Animation

OpenGL ESMetal

Scene Kit

Gesture Recognition

Sprite Kit

Page 18: Beyond White: Embracing the iOS Design Aesthetic

Now Updated for Panther!

Page 19: Beyond White: Embracing the iOS Design Aesthetic

3D User Interfaces

Page 20: Beyond White: Embracing the iOS Design Aesthetic

The Misnomer of the “Flat” User Interface

Page 21: Beyond White: Embracing the iOS Design Aesthetic
Page 22: Beyond White: Embracing the iOS Design Aesthetic
Page 23: Beyond White: Embracing the iOS Design Aesthetic
Page 24: Beyond White: Embracing the iOS Design Aesthetic

Setting Up Your Design Space

Page 25: Beyond White: Embracing the iOS Design Aesthetic
Page 26: Beyond White: Embracing the iOS Design Aesthetic
Page 27: Beyond White: Embracing the iOS Design Aesthetic
Page 28: Beyond White: Embracing the iOS Design Aesthetic
Page 29: Beyond White: Embracing the iOS Design Aesthetic
Page 30: Beyond White: Embracing the iOS Design Aesthetic
Page 31: Beyond White: Embracing the iOS Design Aesthetic
Page 32: Beyond White: Embracing the iOS Design Aesthetic
Page 33: Beyond White: Embracing the iOS Design Aesthetic
Page 34: Beyond White: Embracing the iOS Design Aesthetic
Page 35: Beyond White: Embracing the iOS Design Aesthetic
Page 36: Beyond White: Embracing the iOS Design Aesthetic
Page 37: Beyond White: Embracing the iOS Design Aesthetic
Page 38: Beyond White: Embracing the iOS Design Aesthetic

Good Designvs

Bad Design!!!

Page 39: Beyond White: Embracing the iOS Design Aesthetic

More than One Kind of Bad Design

• Boring

• Obfuscates information

• Not intuitive

• Ugly

• Busy/Noisy

Page 40: Beyond White: Embracing the iOS Design Aesthetic

http://theoatmeal.com/comics/design_hell

Page 41: Beyond White: Embracing the iOS Design Aesthetic
Page 42: Beyond White: Embracing the iOS Design Aesthetic

What Company was this Ad for?

Page 43: Beyond White: Embracing the iOS Design Aesthetic

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

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

Page 44: Beyond White: Embracing the iOS Design Aesthetic

Working WithDesigners

Page 45: Beyond White: Embracing the iOS Design Aesthetic

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”

Page 46: Beyond White: Embracing the iOS Design Aesthetic
Page 47: Beyond White: Embracing the iOS Design Aesthetic

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

Page 48: Beyond White: Embracing the iOS Design Aesthetic

Mary Cagel@CubeWatermelon

Page 49: Beyond White: Embracing the iOS Design Aesthetic
Page 50: Beyond White: Embracing the iOS Design Aesthetic
Page 51: Beyond White: Embracing the iOS Design Aesthetic

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

Page 52: Beyond White: Embracing the iOS Design Aesthetic

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

Page 53: Beyond White: Embracing the iOS Design Aesthetic

A True CautionaryTale

Page 54: Beyond White: Embracing the iOS Design Aesthetic

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

Page 55: Beyond White: Embracing the iOS Design Aesthetic

The Color

Page 56: Beyond White: Embracing the iOS Design Aesthetic

20 minutes

Page 57: Beyond White: Embracing the iOS Design Aesthetic

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

Page 58: Beyond White: Embracing the iOS Design Aesthetic

Call to Action

Page 59: Beyond White: Embracing the iOS Design Aesthetic

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

Page 60: Beyond White: Embracing the iOS Design Aesthetic

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

Page 61: Beyond White: Embracing the iOS Design Aesthetic

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

Page 62: Beyond White: Embracing the iOS Design Aesthetic

Go Forth and Make Awesome Shit.