SlideShare una empresa de Scribd logo
1 de 110
Descargar para leer sin conexión
iOS design: a case study
   CocoaHeads, Antwerp, March 26th 2012
I would like to give some context to this presentation. These
slides are from a 30 minute presentation called iOS design: a
case study.
iOS design: a case study
If I make presentations, some slides only contain a
few words or images so the slides won’t distract
from what is being said. This “web” version contains
sticky notes (like this one) that summarize what I
talked about when displaying the slide during the
original talk.
iOS Design: a case study is about how we built ConcertWall.




      Kristof, developer      Johan, interface designer
      @ahigherugliness        @wolfr_
Let’s go through the process of designing ConcertWall,
from initial brief to final result.
Introduction
My name is Johan
Wolf or @wolfr_ on the internet
I read all day
I like to play video games
I love to write
I have an interest in photography
iOS design: a case study
So this is my company’s website, ( http://
wolfslittlestore.be/ ). Notice how the graphics on the
homepage 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 bit
outdated - I specifically want to focus more on the
interface design part. The next website will reflect this!
Design for mobile
Design for mobile




                    These days I design a lot of interfaces for mobile:
                    iPhone, iPad, Android, Windows Phone 7 or for custom
                    hardware.
First iPhone owned:                         iPhone 3G
Number of iPhones owned so far:                       3
Favorite application:                 Tweetie (original)
Most used application:                          Reeder
Number of apps currently on iPhone:                 104
Number of iPhone apps designed:                       4
Number of iPad apps designed:                         2
First iPhone owned:                                                     iPhone 3G
Number of iPhones owned so far:                                                            3
Favorite application:                                        Tweetie (original)
Most used application:                                                        Reeder
Number of apps currently on iPhone:                                                 104
Number of iPhone apps designed:                                                            4
Number 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.
Case study
Initial brief
• Redesign of existing Last Concerts iPhone app
• Design of extra functionality to be added
• Website: add polish
Proposal
• Complete redesign and rebranding of Last Concerts
  iPhone app
• New marketing strategy: new website & app icon
• Further ideas: great iTunes copy, offline ads (in concert
  halls)
This is the old Last Concerts website. [http://
www.lastconcerts.com/]
This is the old app design. Notice
how it doesn’t look too bad (albeit
a bit standard) because the
defaults Apple provided are
excellent.
Wireframing &
interaction design
To kick off the project we sat down with a giant
sheet of paper. I bought a big roll of paper in the
paper shop. Drawing together is one of the best
ways to get to define what is going to be built.
Not going to bore you too much with this part,
but of course before designing or wireframing
anything 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 the
marketing... the initial app name idea was
“Gigfind” (rejected later). We kept the poster
idea.
The next process was putting everything I
learned in the wireframes. This is my style of
wireframing where I put everything in a giant
document. This one was made in OmniGraffle
but recently I switched over to Illustrator for
making these.
This is a detailed view of part of the wireframe.
Notice the notes that outline my thoughts
surrounding the screens I’m designing.
I generally use this template called Touch
Gesture reference guide to show if there is any
specific movement required on a screen. [http://
www.lukew.com/ff/entry.asp?1071]
This is another template (by Teehan+Lax). I don’t
use it personally but I included it here show the
difference between the interaction design and
visual design. A “sketch” style is used here to
show that this part of the design is NOT about
the visual. [http://www.teehanlax.com/blog/ipad-
sketch-elements-ai/]
interaction design   visual design
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 first.




interaction design   visual design
iOS design: a case study
Sometimes it might make more sense to
wireframe with a good kit of default UI and build
a working app first, based on the default UI
patterns. This is especially true when you are
developing an app for Android, iPhone and WP7
at the same time.
If you are doing client work, this will mean
educating your clients, and possibly your boss
too. The default UI can be implemented relatively
fast and is 100% tested. Going custom is hard.
Visual design & user interface
        customization
Custom is hard.
  People always forget things.
I often hit this iceberg when I stray from native
controls. For example, Ajax interactions require more
polish than basic web pages. Custom mobile menus
require more polish than the built-in version. If the
team doesn’t have the time to polish custom UI, it’s
often better to stick to the boring native controls that
work.
Braden Kowitz, Designer at Google
Very simple example:
  a dark interface
Let’s say you were to make a “dark” iOS
interface. Maybe a developer would start with a
simple grouped table view in Xcode.
You could set a new background color, but now
your other UI elements don’t match the
background.
You can now go look for ways to customize the
other UI elements. In OS5 some interface
elements can be given a “tint” color.
There are tutorials out there that show you how
to change the default UI completely. The end
result of most of these tutorials is mediocre at
best.
Even famous apps like Instapaper don’t
implement a version that is 100% “right”.
There is no default list view for dark interfaces in
the iOS SDK, so a lot of iOS dev time is probably
spent reinventing the wheel (i.e. coloring an
existing 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 more
contrast.
Kudos to Marco for implementing a dark table
view when in Dark mode, which is a detail many
apps would forget. I am using Instapaper as an
example now but trust me, there are a apps out
there that are a LOT worse. I <3 Instapaper and
by many accounts it’s a leading example.
How to make a grouped table view thats fits right
in? Start by looking at the one that Apple made.
The key to a great iOS design is knowing the
platform. Look carefully at how the default apps
are built.
Work those details (not like this app).




                                                                    Non retina graphic
Inconsistent language




Non retina graphic


                                                                  Highlight text should
                                                                  be white




Non retina graphic
In the end, if you want a custom design that is
great, you’re going to need to implement your
own version of certain UI parts using custom
assets.
List item 1

List item 2

List item 3




              Here’s my version the grouped table view... you
              could say: not much difference? I say - fits right
              into iOS! [Download PSD: http://dribbble.com/
              shots/233036-iPhone-list-PSD ]
list_view_top@2x.png




 list_view_middle@2x.png




list_view_bottom@2x.png
List item 1

List item 2

List 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 the
default UI elements take a close look at what the
leaders in a particular field are doing e.g.
FourSquare recently decided to switch over to
MapBox for their maps. [http://mapbox.com/]
True business cost of customization: both UI
elements took at least several hours & iterations
to get right
iOS design: a case study
But if nobody took any UI risk there would not be any
innovation out there, so it depends on what you’re
doing. This screenshot is from Al Gore’s Our Choice, in
my opinion the best e-book there is on iPad,
interaction design-wise that is (then Apple took these
ideas and made iBooks author... that’s life!) [ http://
www.youtube.com/watch?v=U-edAGLokak ]




This was done by Mike Matas, Bret Victor and their
team. Two names you should definitely remember if
you’re into interface design. [http://
www.mikematas.com/] [http://worrydream.com/]
iOS design: a case study
The Tapbots guys are famous for their custom
interfaces. Their business is practically based on the
fact that their apps are 100% custom. I love how they
think of power users. [http://tapbots.com/] [http://
tapbots.com/software/tweetbot/ipad/]
A common interaction
   design mistake
Web style form   iOS style form (better!)
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.
Design resources
iOS design: a case study
For the Illustrator guys like me check out the
iPhone Vector UI elements template http://
www.mercuryintermedia.com/blog/index.php/
2009/03/iphone-ui-vector-elements
iOS design: a case study
The Teehan+Lax PSD template is your best friend
when designing for iOS. It’s an almost perfect
representation of Apple’s UI elements in the form
of a PSD. [ http://www.teehanlax.com/blog/
iphone-4-gui-psd-retina-display/ ]
Design: lessons learned
• 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)
• Give your app personality through:
 • Splash screen
 • App icon
 • App content
• Don't try to give your app personality through:
 • Custom interaction design
 • Ignoring standards and good defaults (e.g. standard sizes of
   elements, 44px “touch” area)
Final designs
iOS design: a case study
iOS design: a case study
iOS design: a case study
iOS design: a case study
App icon
Iterations
Iterations



       Since illustration is not my forte we hired an
       illustrator, Mattias Lundin from Sweden: http://
       dribbble.com/inkgraphix
It’s easy to go overboard with app icon designs.
The guys from Spice Invaders made 50 variants...
a bit too much.
You should read their “making of” blog post on
http://on-5.com/2012/01/the-making-of-spice-
invaders/
Speaking of “behind the scenes”, here’s another
cool one: http://www.repeattimerapp.com/how/
In the end we ran with this icon, showing 2
posters, a Woodstock reference, bold colors & a
reference to music through the notes & guitar.
iOS design: a case study
Michael Flarup’s template is the best template
out there for designing your app icon. Recently a
new version came out “supporting” the new
iPad. [ http://appicontemplate.com/ ]
Keep in mind that this is the size most people are
going to see your icon at, I can only advise to
use a simple glyph/form instead of a super
detailed representation. Perhaps this design is
still too detailed.
These icons are super clear and to me still look
attractive:
Assets & specification
You can’t just deliver a PSD to a developer,
there’s no way that’s going to work. This part of
the presentation is about preparing assets and
the way I try to communicate the design.
Some tools to work faster when making assets:
Prepo is a Mac app to easily convert @2x images
to regular sized images (“@1x”). [Prepo: http://
wearemothership.com/work/prepo/]
Here’s the assets for ConcertWall. Takes some
work to export them all, especially crisp assets in
both retina and non-retina versions.
I use some automator actions to make my life
easier e.g. this does about the same thing as the
Prepo app (convert @2x to @1x)
This action just adds text to multiple files, if you
forget to add @2x to the names (like I always
do :))
I write a spec for the developer in which I explain
which images to use where, which fonts to use
where etc. You can’t possibly describe the whole
design but basic stuff like which asset belongs
where is very helpful for a developer.
## Lists: thumbnails

Use 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 still
loading
* When an image gets loaded, slight fade in animation would be nice




                                     This is an example of a “specification” for
                                     thumbnails in lists in the Concertwall app.
A design has to be
  communicated
Merely sending the mockups is not enough.
The app I use to make these is called Mou
(http://mouapp.com/), on the left side you write
in Markdown, on the right side you immediately
see your output. This way you can easily
reference asset images directly in the spec. The
app allows you to export to HTML and PDF, so
when you deliver the spec to the developer he/
she can open it up in a separate window (e.g. on
a second screen) and have it handy at all times.
Marketing: website
Here’s a simple way to make a good looking
iPhone asset for your marketing website:
Download Mikael Eidenberg’s iPhone template,
open it in Photoshop, and edit the smart object
inside of it (http://www.mikaeleidenberg.se/page/
free-iphone-template)
This is what it should look like.
Now put your own design in there...
Bam! A nice graphic for the website.
Here’s an early version of the website design. I
got tired of the “feature list” type design talking
about how great the app is.
The new approach is simpler: since the app is
free anyway we want to lead people to download
right away. Why not let the app speak for itself?
iOS design: a case study
This is the current version which we are still
looking to improve, we would like a “happy”
version with a festival background.
This shows some of the steps involved in
creating this design: photography, logo and icon
creation forego the design process. You can’t
make anything cool without materials.
Thank you!

Follow me: @wolfr_ on Twitter
E-mail me: mail@wolfslittlestore.be
Read the blog: wolfslittlestore.be/journal
Subscribe to the blog: http://feeds.feedburner.com/Wolfslittlestore
Resources
Web content mentioned in this talk
LastConcerts http://www.lastconcerts.com/
Touch gesture reference guide: http://www.lukew.com/ff/entry.asp?1071
The 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=12
Automator (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-PSD
Mapbox http://mapbox.com/


Other essential web content around the subject
Apple iOS HIG http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/Intro/Intro.html
Design then Code http://designthencode.com/
Almost everything on the Bjango blog: http://bjango.com/articles/
If you liked this presentation
Check out my previous presentations:

Designing better user interfaces
http://www.slideshare.net/Wolfr/designing-better-user-
interfaces

Design 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 your
application too. Get in touch: mail@wolfslittlestore.be

Más contenido relacionado

La actualidad más candente

Human-Centered Design Methods & Tools
Human-Centered Design Methods & ToolsHuman-Centered Design Methods & Tools
Human-Centered Design Methods & ToolsJake Truemper
 
Introduction to Mobile Application Development
Introduction to Mobile Application DevelopmentIntroduction to Mobile Application Development
Introduction to Mobile Application Developmentshikishiji
 
i Operating system
i Operating systemi Operating system
i Operating systemAkhil Kumar
 
Introduction To Mobile Application Development
Introduction To Mobile Application DevelopmentIntroduction To Mobile Application Development
Introduction To Mobile Application DevelopmentSyed Absar
 
Mobile Application Development
Mobile Application DevelopmentMobile Application Development
Mobile Application Developmentjini james
 
Android vs. IOS: Comparing features & functions
Android vs. IOS: Comparing features & functionsAndroid vs. IOS: Comparing features & functions
Android vs. IOS: Comparing features & functionsDipesh Bhatiya
 
ppt on android vs iOS
ppt on android vs iOSppt on android vs iOS
ppt on android vs iOSShivam Gupta
 
UX Lesson 2: User Research
UX Lesson 2: User ResearchUX Lesson 2: User Research
UX Lesson 2: User ResearchJoan Lumanauw
 
Android vs ios presentation detailed slides
Android vs ios presentation detailed slidesAndroid vs ios presentation detailed slides
Android vs ios presentation detailed slidesMuhammad Arslan Khan
 
Introduction to android
Introduction to androidIntroduction to android
Introduction to androidzeelpatel0504
 
IBM Design Thinking - Hen shkedi
IBM Design Thinking - Hen shkediIBM Design Thinking - Hen shkedi
IBM Design Thinking - Hen shkediHen Shkedi
 
Strategic Management: Apple
Strategic Management: AppleStrategic Management: Apple
Strategic Management: AppleMehmet Hasani
 
Android Development with Kotlin, Part 1 - Introduction
Android Development with Kotlin, Part 1 - IntroductionAndroid Development with Kotlin, Part 1 - Introduction
Android Development with Kotlin, Part 1 - IntroductionAndreas Jakl
 
Android PPT Presentation 2018
Android PPT Presentation 2018Android PPT Presentation 2018
Android PPT Presentation 2018Rao Purna
 
Mobile Operating System
Mobile Operating SystemMobile Operating System
Mobile Operating SystemSonal Poddar
 

La actualidad más candente (20)

Human-Centered Design Methods & Tools
Human-Centered Design Methods & ToolsHuman-Centered Design Methods & Tools
Human-Centered Design Methods & Tools
 
Android vs iOS
Android vs iOSAndroid vs iOS
Android vs iOS
 
Introduction to Mobile Application Development
Introduction to Mobile Application DevelopmentIntroduction to Mobile Application Development
Introduction to Mobile Application Development
 
i Operating system
i Operating systemi Operating system
i Operating system
 
Introduction To Mobile Application Development
Introduction To Mobile Application DevelopmentIntroduction To Mobile Application Development
Introduction To Mobile Application Development
 
ios vs android.ppt
ios vs android.pptios vs android.ppt
ios vs android.ppt
 
Mobile Application Development
Mobile Application DevelopmentMobile Application Development
Mobile Application Development
 
Apple's ios
Apple's iosApple's ios
Apple's ios
 
Android vs. IOS: Comparing features & functions
Android vs. IOS: Comparing features & functionsAndroid vs. IOS: Comparing features & functions
Android vs. IOS: Comparing features & functions
 
ppt on android vs iOS
ppt on android vs iOSppt on android vs iOS
ppt on android vs iOS
 
UX Lesson 2: User Research
UX Lesson 2: User ResearchUX Lesson 2: User Research
UX Lesson 2: User Research
 
Android vs ios presentation detailed slides
Android vs ios presentation detailed slidesAndroid vs ios presentation detailed slides
Android vs ios presentation detailed slides
 
Introduction to android
Introduction to androidIntroduction to android
Introduction to android
 
IBM Design Thinking - Hen shkedi
IBM Design Thinking - Hen shkediIBM Design Thinking - Hen shkedi
IBM Design Thinking - Hen shkedi
 
Strategic Management: Apple
Strategic Management: AppleStrategic Management: Apple
Strategic Management: Apple
 
Android Vs iOS
Android Vs iOSAndroid Vs iOS
Android Vs iOS
 
PPT on iOS
PPT on iOS PPT on iOS
PPT on iOS
 
Android Development with Kotlin, Part 1 - Introduction
Android Development with Kotlin, Part 1 - IntroductionAndroid Development with Kotlin, Part 1 - Introduction
Android Development with Kotlin, Part 1 - Introduction
 
Android PPT Presentation 2018
Android PPT Presentation 2018Android PPT Presentation 2018
Android PPT Presentation 2018
 
Mobile Operating System
Mobile Operating SystemMobile Operating System
Mobile Operating System
 

Destacado

Destacado (7)

Presentation on iOS
Presentation on iOSPresentation on iOS
Presentation on iOS
 
Solaris Operating System
Solaris Operating SystemSolaris Operating System
Solaris Operating System
 
Srinumanne ios operating system ppt
Srinumanne ios operating system pptSrinumanne ios operating system ppt
Srinumanne ios operating system ppt
 
Ios operating system
Ios operating systemIos operating system
Ios operating system
 
Mobile operating system
Mobile operating systemMobile operating system
Mobile operating system
 
Ios vs android
Ios vs androidIos vs android
Ios vs android
 
Operating Systems
Operating SystemsOperating Systems
Operating Systems
 

Similar a iOS design: a case study

10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App DevelopersJigyasa Makkar
 
Jan Kroon's talk @mdevcon 2012
Jan Kroon's talk @mdevcon 2012Jan Kroon's talk @mdevcon 2012
Jan Kroon's talk @mdevcon 2012Jan Kroon
 
Designing iOS apps that rock!
Designing iOS apps that rock!Designing iOS apps that rock!
Designing iOS apps that rock!Joey Rigor
 
Life Cycle of an iPhone App
Life Cycle of an iPhone AppLife Cycle of an iPhone App
Life Cycle of an iPhone AppJohn McKerrell
 
Life cycle of iPhone application
Life cycle of iPhone applicationLife cycle of iPhone application
Life cycle of iPhone applicationSiva Prasad K V
 
Define & design apps for success en
Define & design apps for success enDefine & design apps for success en
Define & design apps for success enAcrmnet s.r.l.
 
Ubercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't workUbercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't workSamuel Bednar
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />tutorialsruby
 
wexarts.org iPhone Project: Developer Documentation
wexarts.org iPhone Project: Developer Documentationwexarts.org iPhone Project: Developer Documentation
wexarts.org iPhone Project: Developer Documentationtutorialsruby
 
A Multiplatform, Multi-Tenant Challenge - Droidcon Lisbon 2023
A Multiplatform, Multi-Tenant Challenge - Droidcon Lisbon 2023A Multiplatform, Multi-Tenant Challenge - Droidcon Lisbon 2023
A Multiplatform, Multi-Tenant Challenge - Droidcon Lisbon 2023Pedro Vicente
 
Wrangling Apps in the Smartphone Wild West
Wrangling Apps in the Smartphone Wild WestWrangling Apps in the Smartphone Wild West
Wrangling Apps in the Smartphone Wild WestGinsburg Design
 
Shortcut in learning iOS
Shortcut in learning iOSShortcut in learning iOS
Shortcut in learning iOSJoey Rigor
 
Stanfy Publications: Mobile Applications UI/UX Prototyping Process
Stanfy Publications: Mobile Applications UI/UX Prototyping ProcessStanfy Publications: Mobile Applications UI/UX Prototyping Process
Stanfy Publications: Mobile Applications UI/UX Prototyping ProcessStanfy
 
Android Design Guidelines 1.1
Android Design Guidelines 1.1Android Design Guidelines 1.1
Android Design Guidelines 1.1Mutual Mobile
 
What I Learned about Mobile UX... The Hard Way
What I Learned about Mobile UX... The Hard WayWhat I Learned about Mobile UX... The Hard Way
What I Learned about Mobile UX... The Hard WayJosh Jeffryes
 

Similar a iOS design: a case study (20)

Casestudy
CasestudyCasestudy
Casestudy
 
10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers10 Design Commandments for Mobile App Developers
10 Design Commandments for Mobile App Developers
 
Jan Kroon's talk @mdevcon 2012
Jan Kroon's talk @mdevcon 2012Jan Kroon's talk @mdevcon 2012
Jan Kroon's talk @mdevcon 2012
 
Designing iOS apps that rock!
Designing iOS apps that rock!Designing iOS apps that rock!
Designing iOS apps that rock!
 
Life Cycle of an iPhone App
Life Cycle of an iPhone AppLife Cycle of an iPhone App
Life Cycle of an iPhone App
 
Life cycle of iPhone application
Life cycle of iPhone applicationLife cycle of iPhone application
Life cycle of iPhone application
 
Define & design apps for success en
Define & design apps for success enDefine & design apps for success en
Define & design apps for success en
 
Ubercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't workUbercool, pixel perfct & slick design… that just doesn't work
Ubercool, pixel perfct & slick design… that just doesn't work
 
&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />&lt;img src="../i/r_14.png" />
&lt;img src="../i/r_14.png" />
 
wexarts.org iPhone Project: Developer Documentation
wexarts.org iPhone Project: Developer Documentationwexarts.org iPhone Project: Developer Documentation
wexarts.org iPhone Project: Developer Documentation
 
A Multiplatform, Multi-Tenant Challenge - Droidcon Lisbon 2023
A Multiplatform, Multi-Tenant Challenge - Droidcon Lisbon 2023A Multiplatform, Multi-Tenant Challenge - Droidcon Lisbon 2023
A Multiplatform, Multi-Tenant Challenge - Droidcon Lisbon 2023
 
Wrangling Apps in the Smartphone Wild West
Wrangling Apps in the Smartphone Wild WestWrangling Apps in the Smartphone Wild West
Wrangling Apps in the Smartphone Wild West
 
MSR iOS Tranining
MSR iOS TraniningMSR iOS Tranining
MSR iOS Tranining
 
Smart phones
Smart phonesSmart phones
Smart phones
 
Shortcut in learning iOS
Shortcut in learning iOSShortcut in learning iOS
Shortcut in learning iOS
 
Doran-C4L2010
Doran-C4L2010Doran-C4L2010
Doran-C4L2010
 
Stanfy Publications: Mobile Applications UI/UX Prototyping Process
Stanfy Publications: Mobile Applications UI/UX Prototyping ProcessStanfy Publications: Mobile Applications UI/UX Prototyping Process
Stanfy Publications: Mobile Applications UI/UX Prototyping Process
 
Head first android_development
Head first android_developmentHead first android_development
Head first android_development
 
Android Design Guidelines 1.1
Android Design Guidelines 1.1Android Design Guidelines 1.1
Android Design Guidelines 1.1
 
What I Learned about Mobile UX... The Hard Way
What I Learned about Mobile UX... The Hard WayWhat I Learned about Mobile UX... The Hard Way
What I Learned about Mobile UX... The Hard Way
 

Más de Johan Ronsse

Designing better user interfaces
Designing better user interfacesDesigning better user interfaces
Designing better user interfacesJohan Ronsse
 
Design for developers
Design for developersDesign for developers
Design for developersJohan Ronsse
 
The jump to freelance
The jump to freelanceThe jump to freelance
The jump to freelanceJohan Ronsse
 
Wolf fronteers 2010
Wolf fronteers 2010Wolf fronteers 2010
Wolf fronteers 2010Johan Ronsse
 
Better CSS with Compass/Sass
Better CSS with Compass/SassBetter CSS with Compass/Sass
Better CSS with Compass/SassJohan Ronsse
 
jQuery for designers
jQuery for designersjQuery for designers
jQuery for designersJohan Ronsse
 
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”Johan Ronsse
 
Webdesign De Middelmaat Overstijgen
Webdesign De Middelmaat OverstijgenWebdesign De Middelmaat Overstijgen
Webdesign De Middelmaat OverstijgenJohan Ronsse
 

Más de Johan Ronsse (11)

What is Bedrock?
What is Bedrock?What is Bedrock?
What is Bedrock?
 
Designing better user interfaces
Designing better user interfacesDesigning better user interfaces
Designing better user interfaces
 
Design for developers
Design for developersDesign for developers
Design for developers
 
The jump to freelance
The jump to freelanceThe jump to freelance
The jump to freelance
 
Wolf fronteers 2010
Wolf fronteers 2010Wolf fronteers 2010
Wolf fronteers 2010
 
CSS3 now
CSS3 nowCSS3 now
CSS3 now
 
Better CSS with Compass/Sass
Better CSS with Compass/SassBetter CSS with Compass/Sass
Better CSS with Compass/Sass
 
jQuery for designers
jQuery for designersjQuery for designers
jQuery for designers
 
Workflow
WorkflowWorkflow
Workflow
 
Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”Meester van het CSS universum worden + Opvolging “Craftsmanship”
Meester van het CSS universum worden + Opvolging “Craftsmanship”
 
Webdesign De Middelmaat Overstijgen
Webdesign De Middelmaat OverstijgenWebdesign De Middelmaat Overstijgen
Webdesign De Middelmaat Overstijgen
 

Último

Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...ssuseraaa1581
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportstudiotelon
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxRufusGleave
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.JoshHolmes21
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfaimonayesha7
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.Vaishnavi R
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?krc0yvm5
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|CaydenIngman
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedoujfedou2105
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtTeeFusion
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote ShirtTeeFusion
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfaimonayesha7
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy ShirtTeeFusion
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareResDraft
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيمOmarSelim27
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnjohannesrothkegel
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAButariworks
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfaimonayesha7
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...Peter139483
 

Último (20)

Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
Integrating Artificial Intelligence (AI) with User Experience(UX)/User Interf...
 
DesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course reportDesignKit IDEO Human-Centered Design course report
DesignKit IDEO Human-Centered Design course report
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Digi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptxDigi Pack for the impulse band coursework.pptx
Digi Pack for the impulse band coursework.pptx
 
Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.Unit 12 - Level Design and how it affects the player.
Unit 12 - Level Design and how it affects the player.
 
MIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdfMIRAE (Branding & Identity) Explained.pdf
MIRAE (Branding & Identity) Explained.pdf
 
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
FARMER'S HOUSING PORTFOLIO. DESIGN PTOBLEM OF 7TH SEM. ARCHITECTURE DESIGN.
 
如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?如何办理西英格兰大学毕业证书学位证书成绩单?
如何办理西英格兰大学毕业证书学位证书成绩单?
 
Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|Cayden Ingman's apparel design portfolio | Oregon State University|
Cayden Ingman's apparel design portfolio | Oregon State University|
 
DSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien FedouDSGN 253 Design Portfolio Project - Julien Fedou
DSGN 253 Design Portfolio Project - Julien Fedou
 
Strawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't ShirtStrawberry Jams But My Glock Don't Shirt
Strawberry Jams But My Glock Don't Shirt
 
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote ShirtJackson Henry 24 Flock The Vote Shirt  Jackson Henry 24 Flock The Vote Shirt
Jackson Henry 24 Flock The Vote Shirt Jackson Henry 24 Flock The Vote Shirt
 
Complete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdfComplete Coffee table book on Jiapur.pdf
Complete Coffee table book on Jiapur.pdf
 
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt  Sign The Contract Big Boy ShirtSign The Contract Big Boy Shirt  Sign The Contract Big Boy Shirt
Sign The Contract Big Boy Shirt Sign The Contract Big Boy Shirt
 
Revit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and SoftwareRevit Drafting – Drafting Tools and Software
Revit Drafting – Drafting Tools and Software
 
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
ورشة الطريق إلى البيم   ورشة الطريق إلى البيمورشة الطريق إلى البيم   ورشة الطريق إلى البيم
ورشة الطريق إلى البيم ورشة الطريق إلى البيم
 
second stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnnsecond stories test a method kit for co creationnnnnnn
second stories test a method kit for co creationnnnnnn
 
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LABF.LAB Credential ©2024 : Looking The World of Experience by F.LAB
F.LAB Credential ©2024 : Looking The World of Experience by F.LAB
 
SHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdfSHADES Explained (Branding & Packaging) .pdf
SHADES Explained (Branding & Packaging) .pdf
 
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
ALISIA: HOW MIGHT WE ACHIEVE HIGH ENVIRONMENTAL PERFORMANCE WHILE MAINTAINING...
 

iOS design: a case study

  • 1. iOS design: a case study CocoaHeads, Antwerp, March 26th 2012
  • 2. I would like to give some context to this presentation. These slides are from a 30 minute presentation called iOS design: a case study.
  • 4. If I make presentations, some slides only contain a few words or images so the slides won’t distract from what is being said. This “web” version contains sticky notes (like this one) that summarize what I talked about when displaying the slide during the original talk.
  • 5. iOS Design: a case study is about how we built ConcertWall. Kristof, developer Johan, interface designer @ahigherugliness @wolfr_
  • 6. Let’s go through the process of designing ConcertWall, from initial brief to final result.
  • 8. My name is Johan Wolf or @wolfr_ on the internet
  • 10. I like to play video games
  • 11. I love to write
  • 12. I have an interest in photography
  • 14. So this is my company’s website, ( http:// wolfslittlestore.be/ ). Notice how the graphics on the homepage 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 bit outdated - I specifically want to focus more on the interface design part. The next website will reflect this!
  • 16. Design for mobile These days I design a lot of interfaces for mobile: iPhone, iPad, Android, Windows Phone 7 or for custom hardware.
  • 17. First iPhone owned: iPhone 3G Number of iPhones owned so far: 3 Favorite application: Tweetie (original) Most used application: Reeder Number of apps currently on iPhone: 104 Number of iPhone apps designed: 4 Number of iPad apps designed: 2
  • 18. First iPhone owned: iPhone 3G Number of iPhones owned so far: 3 Favorite application: Tweetie (original) Most used application: Reeder Number of apps currently on iPhone: 104 Number of iPhone apps designed: 4 Number 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.
  • 20. Initial brief • Redesign of existing Last Concerts iPhone app • Design of extra functionality to be added • Website: add polish
  • 21. Proposal • Complete redesign and rebranding of Last Concerts iPhone app • New marketing strategy: new website & app icon • Further ideas: great iTunes copy, offline ads (in concert halls)
  • 22. This is the old Last Concerts website. [http:// www.lastconcerts.com/]
  • 23. This is the old app design. Notice how it doesn’t look too bad (albeit a bit standard) because the defaults Apple provided are excellent.
  • 25. To kick off the project we sat down with a giant sheet of paper. I bought a big roll of paper in the paper shop. Drawing together is one of the best ways to get to define what is going to be built.
  • 26. Not going to bore you too much with this part, but of course before designing or wireframing anything you need to know: * Why are we building this, for who…? * What are the goals of people using the app?
  • 27. On the train home I thought a bit about the marketing... the initial app name idea was “Gigfind” (rejected later). We kept the poster idea.
  • 28. The next process was putting everything I learned in the wireframes. This is my style of wireframing where I put everything in a giant document. This one was made in OmniGraffle but recently I switched over to Illustrator for making these.
  • 29. This is a detailed view of part of the wireframe. Notice the notes that outline my thoughts surrounding the screens I’m designing.
  • 30. I generally use this template called Touch Gesture reference guide to show if there is any specific movement required on a screen. [http:// www.lukew.com/ff/entry.asp?1071]
  • 31. This is another template (by Teehan+Lax). I don’t use it personally but I included it here show the difference between the interaction design and visual design. A “sketch” style is used here to show that this part of the design is NOT about the visual. [http://www.teehanlax.com/blog/ipad- sketch-elements-ai/]
  • 32. interaction design visual design
  • 33. 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 first. interaction design visual design
  • 35. Sometimes it might make more sense to wireframe with a good kit of default UI and build a working app first, based on the default UI patterns. This is especially true when you are developing an app for Android, iPhone and WP7 at the same time. If you are doing client work, this will mean educating your clients, and possibly your boss too. The default UI can be implemented relatively fast and is 100% tested. Going custom is hard.
  • 36. Visual design & user interface customization
  • 37. Custom is hard. People always forget things.
  • 38. I often hit this iceberg when I stray from native controls. For example, Ajax interactions require more polish than basic web pages. Custom mobile menus require more polish than the built-in version. If the team doesn’t have the time to polish custom UI, it’s often better to stick to the boring native controls that work. Braden Kowitz, Designer at Google
  • 39. Very simple example: a dark interface
  • 40. Let’s say you were to make a “dark” iOS interface. Maybe a developer would start with a simple grouped table view in Xcode.
  • 41. You could set a new background color, but now your other UI elements don’t match the background.
  • 42. You can now go look for ways to customize the other UI elements. In OS5 some interface elements can be given a “tint” color.
  • 43. There are tutorials out there that show you how to change the default UI completely. The end result of most of these tutorials is mediocre at best.
  • 44. Even famous apps like Instapaper don’t implement a version that is 100% “right”. There is no default list view for dark interfaces in the iOS SDK, so a lot of iOS dev time is probably spent reinventing the wheel (i.e. coloring an existing 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 more contrast. Kudos to Marco for implementing a dark table view when in Dark mode, which is a detail many apps would forget. I am using Instapaper as an example now but trust me, there are a apps out there that are a LOT worse. I <3 Instapaper and by many accounts it’s a leading example.
  • 45. How to make a grouped table view thats fits right in? Start by looking at the one that Apple made. The key to a great iOS design is knowing the platform. Look carefully at how the default apps are built.
  • 46. Work those details (not like this app). Non retina graphic Inconsistent language Non retina graphic Highlight text should be white Non retina graphic
  • 47. In the end, if you want a custom design that is great, you’re going to need to implement your own version of certain UI parts using custom assets.
  • 48. List item 1 List item 2 List item 3 Here’s my version the grouped table view... you could say: not much difference? I say - fits right into iOS! [Download PSD: http://dribbble.com/ shots/233036-iPhone-list-PSD ]
  • 50. List item 1 List item 2 List item 3 This “dark UI” design works on any background - even disco style backgrounds (using PNG transparency to achieve this).
  • 51. If what you are building can’t be built with the default UI elements take a close look at what the leaders in a particular field are doing e.g. FourSquare recently decided to switch over to MapBox for their maps. [http://mapbox.com/]
  • 52. True business cost of customization: both UI elements took at least several hours & iterations to get right
  • 54. But if nobody took any UI risk there would not be any innovation out there, so it depends on what you’re doing. This screenshot is from Al Gore’s Our Choice, in my opinion the best e-book there is on iPad, interaction design-wise that is (then Apple took these ideas and made iBooks author... that’s life!) [ http:// www.youtube.com/watch?v=U-edAGLokak ] This was done by Mike Matas, Bret Victor and their team. Two names you should definitely remember if you’re into interface design. [http:// www.mikematas.com/] [http://worrydream.com/]
  • 56. The Tapbots guys are famous for their custom interfaces. Their business is practically based on the fact that their apps are 100% custom. I love how they think of power users. [http://tapbots.com/] [http:// tapbots.com/software/tweetbot/ipad/]
  • 57. A common interaction design mistake
  • 58. Web style form iOS style form (better!)
  • 59. 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!)
  • 60. 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.
  • 63. For the Illustrator guys like me check out the iPhone Vector UI elements template http:// www.mercuryintermedia.com/blog/index.php/ 2009/03/iphone-ui-vector-elements
  • 65. The Teehan+Lax PSD template is your best friend when designing for iOS. It’s an almost perfect representation of Apple’s UI elements in the form of a PSD. [ http://www.teehanlax.com/blog/ iphone-4-gui-psd-retina-display/ ]
  • 67. • 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)
  • 68. • Give your app personality through: • Splash screen • App icon • App content
  • 69. • Don't try to give your app personality through: • Custom interaction design • Ignoring standards and good defaults (e.g. standard sizes of elements, 44px “touch” area)
  • 77. Iterations Since illustration is not my forte we hired an illustrator, Mattias Lundin from Sweden: http:// dribbble.com/inkgraphix
  • 78. It’s easy to go overboard with app icon designs. The guys from Spice Invaders made 50 variants... a bit too much.
  • 79. You should read their “making of” blog post on http://on-5.com/2012/01/the-making-of-spice- invaders/
  • 80. Speaking of “behind the scenes”, here’s another cool one: http://www.repeattimerapp.com/how/
  • 81. In the end we ran with this icon, showing 2 posters, a Woodstock reference, bold colors & a reference to music through the notes & guitar.
  • 83. Michael Flarup’s template is the best template out there for designing your app icon. Recently a new version came out “supporting” the new iPad. [ http://appicontemplate.com/ ]
  • 84. Keep in mind that this is the size most people are going to see your icon at, I can only advise to use a simple glyph/form instead of a super detailed representation. Perhaps this design is still too detailed.
  • 85. These icons are super clear and to me still look attractive:
  • 87. You can’t just deliver a PSD to a developer, there’s no way that’s going to work. This part of the presentation is about preparing assets and the way I try to communicate the design.
  • 88. Some tools to work faster when making assets: Prepo is a Mac app to easily convert @2x images to regular sized images (“@1x”). [Prepo: http:// wearemothership.com/work/prepo/]
  • 89. Here’s the assets for ConcertWall. Takes some work to export them all, especially crisp assets in both retina and non-retina versions.
  • 90. I use some automator actions to make my life easier e.g. this does about the same thing as the Prepo app (convert @2x to @1x)
  • 91. This action just adds text to multiple files, if you forget to add @2x to the names (like I always do :))
  • 92. I write a spec for the developer in which I explain which images to use where, which fonts to use where etc. You can’t possibly describe the whole design but basic stuff like which asset belongs where is very helpful for a developer.
  • 93. ## Lists: thumbnails Use 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 still loading * When an image gets loaded, slight fade in animation would be nice This is an example of a “specification” for thumbnails in lists in the Concertwall app.
  • 94. A design has to be communicated Merely sending the mockups is not enough.
  • 95. The app I use to make these is called Mou (http://mouapp.com/), on the left side you write in Markdown, on the right side you immediately see your output. This way you can easily reference asset images directly in the spec. The app allows you to export to HTML and PDF, so when you deliver the spec to the developer he/ she can open it up in a separate window (e.g. on a second screen) and have it handy at all times.
  • 97. Here’s a simple way to make a good looking iPhone asset for your marketing website:
  • 98. Download Mikael Eidenberg’s iPhone template, open it in Photoshop, and edit the smart object inside of it (http://www.mikaeleidenberg.se/page/ free-iphone-template)
  • 99. This is what it should look like.
  • 100. Now put your own design in there...
  • 101. Bam! A nice graphic for the website.
  • 102. Here’s an early version of the website design. I got tired of the “feature list” type design talking about how great the app is.
  • 103. The new approach is simpler: since the app is free anyway we want to lead people to download right away. Why not let the app speak for itself?
  • 105. This is the current version which we are still looking to improve, we would like a “happy” version with a festival background.
  • 106. This shows some of the steps involved in creating this design: photography, logo and icon creation forego the design process. You can’t make anything cool without materials.
  • 107. Thank you! Follow me: @wolfr_ on Twitter E-mail me: mail@wolfslittlestore.be Read the blog: wolfslittlestore.be/journal Subscribe to the blog: http://feeds.feedburner.com/Wolfslittlestore
  • 108. Resources Web content mentioned in this talk LastConcerts http://www.lastconcerts.com/ Touch gesture reference guide: http://www.lukew.com/ff/entry.asp?1071 The 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=12 Automator (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-PSD Mapbox http://mapbox.com/ Other essential web content around the subject Apple iOS HIG http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AppleHIGuidelines/Intro/Intro.html Design then Code http://designthencode.com/ Almost everything on the Bjango blog: http://bjango.com/articles/
  • 109. If you liked this presentation Check out my previous presentations: Designing better user interfaces http://www.slideshare.net/Wolfr/designing-better-user- interfaces Design for Developers. http://www.slideshare.net/Wolfr/design-for- developersonlineversionlong
  • 110. Hire me. If you like what you’re seeing, I can apply my knowledge to your application too. Get in touch: mail@wolfslittlestore.be