Test your design (!) Use Skala preview http://bjango.com/mac/ skalapreview/ by Bjango to view your design while making it. This should give you a better sense of what you’re doing than the huge retina PSD you are working in.
I would like to give
some context to this presentation. Theseslides are from a 30 minute presentation called iOS design: acase study.
If I make presentations, some
slides only contain afew words or images so the slides won’t distractfrom what is being said. This “web” version containssticky notes (like this one) that summarize what Italked about when displaying the slide during theoriginal talk.
iOS Design: a case study
is about how we built ConcertWall. Kristof, developer Johan, interface designer @ahigherugliness @wolfr_
So this is my company’s
website, ( http://wolfslittlestore.be/ ). Notice how the graphics on thehomepage are @2x retina :)Under work you can see what I do: interface design,web design, branding and identity, HTML & CSS,photography and design for mobile devices.Companies evolve and this is actually a little bitoutdated - I speciﬁcally want to focus more on theinterface design part. The next website will reﬂect this!
First iPhone owned: iPhone 3GNumber
of iPhones owned so far: 3Favorite application: Tweetie (original)Most used application: ReederNumber of apps currently on iPhone: 104Number of iPhone apps designed: 4Number of iPad apps designed: 2
First iPhone owned: iPhone 3GNumber
of iPhones owned so far: 3Favorite application: Tweetie (original)Most used application: ReederNumber of apps currently on iPhone: 104Number of iPhone apps designed: 4Number of iPad apps designed: 2 I’ve always used an iPhone as my primary phone since it came out, now on my third one. Out of all platforms it’s my favorite one to design for.
To kick off the project
we sat down with a giantsheet of paper. I bought a big roll of paper in thepaper shop. Drawing together is one of the bestways to get to deﬁne what is going to be built.
Not going to bore you
too much with this part,but of course before designing or wireframinganything you need to know: * Why are we building this, for who…? * What are the goals of people using the app?
On the train home I
thought a bit about themarketing... the initial app name idea was“Gigﬁnd” (rejected later). We kept the posteridea.
The next process was putting
everything Ilearned in the wireframes. This is my style ofwireframing where I put everything in a giantdocument. This one was made in OmniGrafﬂebut recently I switched over to Illustrator formaking these.
This is a detailed view
of part of the wireframe.Notice the notes that outline my thoughtssurrounding the screens I’m designing.
I generally use this template
called TouchGesture reference guide to show if there is anyspeciﬁc movement required on a screen. [http://www.lukew.com/ff/entry.asp?1071]
This is another template (by
Teehan+Lax). I don’tuse it personally but I included it here show thedifference between the interaction design andvisual design. A “sketch” style is used here toshow that this part of the design is NOT aboutthe visual. [http://www.teehanlax.com/blog/ipad-sketch-elements-ai/]
Another technique that helps to
make the distinction is to make your UI elements gray and unappealing just to make sure you concentrate on the interaction design ﬁrst.interaction design visual design
Sometimes it might make more
sense towireframe with a good kit of default UI and builda working app ﬁrst, based on the default UIpatterns. This is especially true when you aredeveloping an app for Android, iPhone and WP7at the same time.If you are doing client work, this will meaneducating your clients, and possibly your bosstoo. The default UI can be implemented relativelyfast and is 100% tested. Going custom is hard.
I often hit this iceberg
when I stray from nativecontrols. For example, Ajax interactions require morepolish than basic web pages. Custom mobile menusrequire more polish than the built-in version. If theteam doesn’t have the time to polish custom UI, it’soften better to stick to the boring native controls thatwork.Braden Kowitz, Designer at Google
Even famous apps like Instapaper
don’timplement a version that is 100% “right”.There is no default list view for dark interfaces inthe iOS SDK, so a lot of iOS dev time is probablyspent reinventing the wheel (i.e. coloring anexisting UI element)The lines between items have too much contrast,the font for table views is supposed to be bold,and the frame of the table view should have morecontrast.Kudos to Marco for implementing a dark tableview when in Dark mode, which is a detail manyapps would forget. I am using Instapaper as anexample now but trust me, there are a apps outthere that are a LOT worse. I <3 Instapaper andby many accounts it’s a leading example.
How to make a grouped
table view thats ﬁts rightin? Start by looking at the one that Apple made.The key to a great iOS design is knowing theplatform. Look carefully at how the default appsare built.
Work those details (not like
this app). Non retina graphicInconsistent languageNon retina graphic Highlight text should be whiteNon retina graphic
In the end, if you
want a custom design that isgreat, you’re going to need to implement yourown version of certain UI parts using customassets.
List item 1List item 2List
item 3 Here’s my version the grouped table view... you could say: not much difference? I say - ﬁts right into iOS! [Download PSD: http://dribbble.com/ shots/233036-iPhone-list-PSD ]
List item 1List item 2List
item 3 This “dark UI” design works on any background - even disco style backgrounds (using PNG transparency to achieve this).
If what you are building
can’t be built with thedefault UI elements take a close look at what theleaders in a particular ﬁeld are doing e.g.FourSquare recently decided to switch over toMapBox for their maps. [http://mapbox.com/]
But if nobody took any
UI risk there would not be anyinnovation out there, so it depends on what you’redoing. This screenshot is from Al Gore’s Our Choice, inmy opinion the best e-book there is on iPad,interaction design-wise that is (then Apple took theseideas and made iBooks author... that’s life!) [ http://www.youtube.com/watch?v=U-edAGLokak ]This was done by Mike Matas, Bret Victor and theirteam. Two names you should deﬁnitely remember ifyou’re into interface design. [http://www.mikematas.com/] [http://worrydream.com/]
The Tapbots guys are famous
for their custominterfaces. Their business is practically based on thefact that their apps are 100% custom. I love how theythink of power users. [http://tapbots.com/] [http://tapbots.com/software/tweetbot/ipad/]
It took me a while
to learn how to handle forms on iOS. Take a close look at Calendar (add new event), Contacts (edit/add contacts) and Settings to get a good grasp on what to do.Web style form iOS style form (better!)
Test your design (!) Use
Skala preview http://bjango.com/mac/ skalapreview/ by Bjango to view your design while making it. This should give you a better sense of what you’re doing than the huge retina PSD you are working in.
For the Illustrator guys like
me check out theiPhone Vector UI elements template http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements
The Teehan+Lax PSD template is
your best friendwhen designing for iOS. It’s an almost perfectrepresentation of Apple’s UI elements in the formof a PSD. [ http://www.teehanlax.com/blog/iphone-4-gui-psd-retina-display/ ]
• Custom vs. native is
a tough balance - stick to the standards where possible• “Coloring” UIKit makes more sense than re-inventing the wheel• Don’t think you can do better than Apple (unless you can invest the same time)
In the end we ran
with this icon, showing 2posters, a Woodstock reference, bold colors & areference to music through the notes & guitar.
Michael Flarup’s template is the
best templateout there for designing your app icon. Recently anew version came out “supporting” the newiPad. [ http://appicontemplate.com/ ]
Keep in mind that this
is the size most people aregoing to see your icon at, I can only advise touse a simple glyph/form instead of a superdetailed representation. Perhaps this design isstill too detailed.
I write a spec for
the developer in which I explainwhich images to use where, which fonts to usewhere etc. You can’t possibly describe the wholedesign but basic stuff like which asset belongswhere is very helpful for a developer.
## Lists: thumbnailsUse glow.png for
the glow on last.fm images.* The thumbnails are 54x55 pixels* Use a black 54x55 thumbnail if no image can be found/images are stillloading* When an image gets loaded, slight fade in animation would be nice This is an example of a “speciﬁcation” for thumbnails in lists in the Concertwall app.
The app I use to
make these is called Mou(http://mouapp.com/), on the left side you writein Markdown, on the right side you immediatelysee your output. This way you can easilyreference asset images directly in the spec. Theapp allows you to export to HTML and PDF, sowhen you deliver the spec to the developer he/she can open it up in a separate window (e.g. ona second screen) and have it handy at all times.
This shows some of the
steps involved increating this design: photography, logo and iconcreation forego the design process. You can’tmake anything cool without materials.
Thank you!Follow me: @wolfr_ on
TwitterE-mail me: firstname.lastname@example.orgRead the blog: wolfslittlestore.be/journalSubscribe to the blog: http://feeds.feedburner.com/Wolfslittlestore
ResourcesWeb content mentioned in this
talkLastConcerts http://www.lastconcerts.com/Touch gesture reference guide: http://www.lukew.com/ff/entry.asp?1071The making of Spice Invaders http://on-5.com/2012/01/the-making-of-spice-invaders/Repeat timer pro case study http://www.repeattimerapp.com/how/App icon template pixel resort http://appicontemplate.com/Teehan + Lax iPhone 4 GUI PSD http://www.teehanlax.com/blog/iphone-4-gui-psd-retina-display/Teehan + Lax iPad sketch elements http://www.teehanlax.com/blog/ipad-sketch-elements-ai/Teehan + Lax iPhone sketch elements http://www.teehanlax.com/blog/iphone-sketch-elements-ai/iPhone UI Vector Elements http://www.mercuryintermedia.com/blog/index.php/2009/03/iphone-ui-vector-elements/Skala preview http://bjango.com/mac/skalapreview/Prepo app http://itunes.apple.com/us/app/prepo/id476533227?mt=12Automator (continued) http://wolfslittlestore.be/2012/03/07/automator-continued/Designing for iOS http://wolfslittlestore.be/2012/02/29/designing-for-ios-continued/Mou app http://mouapp.com/List view PSD on Dribbble http://dribbble.com/shots/233036-iPhone-list-PSDMapbox http://mapbox.com/Other essential web content around the subjectApple iOS HIG http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/Intro/Intro.htmlDesign then Code http://designthencode.com/Almost everything on the Bjango blog: http://bjango.com/articles/
If you liked this presentationCheck
out my previous presentations:Designing better user interfaceshttp://www.slideshare.net/Wolfr/designing-better-user-interfacesDesign for Developers.http://www.slideshare.net/Wolfr/design-for-developersonlineversionlong
Hire me.If you like what
you’re seeing, I can apply my knowledge to yourapplication too. Get in touch: email@example.com