You are on page 1of 116


Oesignyour own iPadapp

Plan, wireframe and design beautiful and functional apps'

The creative pro's guide

Inspiration Technique Great Design

Expert tutorials
Optimise your
website for iPad Create site and app mock-ups

in minutes

• Paint amazing digital

art in Brushes

• Schedule your creative

time using project management tools

• Design icons to use on

the App Store and iPad

EXCLUSIVE STUDIO PROFILE ustwO-.ln conversation with the world's coolest iPad app designers

BEHIND THE SCENES ACCESS Wired Reader_How the Wired team revolutionised digital magazines

NOT JUST A BIG IPHONE! Developer secrets-- The rules you hove to know to design great apps




80 days the iPad .sold three million unjts, For

and commercially why fertile


Doe the iPad really cut ita,a

creative tool?

creative des igners and d eve Iopers, fact, such a 5 th is send a cI sa r message: theiPad is a hugely important immediacy place for which to create content. Tie this to the success and of the App Store, and you can understand are clamouring designers and developers well-designed to produce intuitive,

and popular apps and games, and why clients are how to design for the iPad and the rules

willing to pay for their skill,. Yet understanding and conventions everything is key - this is where The Creorive Pro's Guide to iPad come, in. Within these pages you'll find that govern its content you need to know for creating iPad content, whether for paying clients or fer your own creative intentions.

As well as ,pelling out the rules of app design on page 16,

we deliver the 30 golden tips for creating killer content, beginning on page 30. We also profile the app creators making mega' bucks from their designs, and share their creative secrets. We go behind the scenes on some of the App Store's biggest-selling and techniques the following titles, and bring you a packed tutorial section where you can learn the tricks for creating iPad-ready apps in no time at all. pages will equip you with the skills to go ou t and onto the 3 million iPad users ready and challenged. aided or informed by your If anything, the features and tutorials you'll discover over start pushing your content waiting to be entertained, brilliant app idea,

96 Ilehi nd the

seen es of Atom lc Antelqpe', .A.lice in Wondedand



creattve pro's guide to iP~d



06 __ iPad al'P showcase
Come face to face with the creators of the very best iPad apps and discover the secrets of their app design success

16 _

The rules of iPad app design

Discover the tried and tested design conventions make a winning app design that


Profile: Brandwidth
We pay a visit to the visionary developers they balance creativity and ingenuity and find out how in their apps


30 ways to design better apps

Glean expert advice from the designers and developers topping the App Store downloads chart

36_ Profile: ustwo 68 Des'lgn

a website

fitf'" IPad

Meet the only app designers on the planet with a,life-sized plastic cow in their studio

44 _

The iPad as a creative tool

It's not just a consumption boost your creativity device. Learn how the iPad will

50 _

Top 20 creative apps

The very best apps for digital designers lookingl to gel creative on the iPad

58 _

Design an app for the iPad

Expert workflow tips Forwireframing an iPad app in 1'5 steps and designing


Create a scalable iPadicon

Learn how to plan, design and deploy your own app icon for use on the iPad and App Store

68__ _ Design a website fit for iPad

Learn the fundamental steps for producing beautifully designed and iPad-friendly websites


Learn to paint in iPad

Get to grip with Brushes, the closest thing to a digital colour palette available

58 Realise

your own IPad app Ih e "a"y way


How 10 plan a websl!e in IModrup.

76 _

Plan a website in iMockups

Use iPad to quickly mock up a site wireframe and logo design to show cI ie nts Use Things to get m.ore done Plan your time and complete Things to your advantage creative projects using


86 __ Behind the scenes: Wired's digital magazine

Creative director Scott Dadich explains just how the print magaz,ine took its contents to digital

92 _

Behind the scenes: HelvetiNote

How Todd Berger and the cypher13 team created a note-taking app aimed at designers brought Lewis Carroll's


Get painting

on iPad,hes

96_. _ Behind the scenes: Alice for iPad

Discover how Atomic Antelope children's novel to life on the iPad

100_ API' directory

A vast resource of every app that the discerning creative iPad designer should invest in ]]0_ Developers listing A who's who of the great and the good in the world of app

86 The


d j,odo, of

the W1red Rea d ... tal ks

design and development,

and the apps they've authored

WNW complltffiJU:;,cO


The creative pro's gUideto iPad---


• App Showcase

We go behind the scenes with the designers of some of the most beautiful and easy-to-use iPad apps. Take advice from the masters of iPad UI design

iPa owcase

It makes sense to write with your finger on iPad, and Penultimat.eis one of the best-designed apps for taking

freehand notes.
Figuring out how much of a physical metaphor was an interesting problem with a strong metaphor creating new metaphors - pages, notebooks, to use 01 in the design of this app ''We started paper, ink - which

resonates well with users. But devices like the iPad are capable of as well, which we're also exploring." says Ben Zotto, creator of the app. The quality of the digital ink was key to the apps success, "It's responsive, textured and feels good to create with~says Zorto "Getting this right was difficult, and Penultimate with anything like it. Users love it" the glass, As Zotto explains, 'ink' grips, is the only app

The biggest challenge, however, turned out to be letting users write with their wrists touching "A huge touch surface can have a hard time distinguishing

touches from the palm or stray knuckles. We put a lot of effort into our 'WriST Protection' mode, which works well for most writing especially if you're using w\I!IWcoroaOOx.cQOl

a stylus

with the



creattvero's guide to iPad p


The best-designediPad apps'

01--You can have rnu Itiple' notebooks in PenultimBle, all Bcce,<ible from this screen You jUst swipe left aoo right to switch between norebool<s. Each nOlel::ool< can use either graph, Itned or plain pope,

02--Aqui'ky, hand-drawn ;nt,e,active Wlorialleach~ you how to use Penultimate, actively encollragi ng you to Iry Ihingl aUL It'l the besl way 10 learn !"tow 10 use the app, aoo i> run at the same time!

03-- Sketching with your ~nger ca n feel we'rd at fim, but you loon gel used to iL A Wrist
Protection mode

prevents you accldemolly making marl<>when your palm heel ,OUme5 ,0 multi-touch screen

04--TheEa,'y Edition fmm Gl3"house has a fre'h new approa ch to read i ng RSSfeed, on your IPad. It presents your fe<>dl as a, dally news paper, comp leie witl1 P"9 es that (urn like those in A,pple\ IBooksapp




.... ,


The Early Edition

The Early Edition feeds and presents and text to maximum designer Computer is an innovative them iPad app that has a neat takes your news mixil1g images Clark, wasn't until I tested our first working reading format didn't build of'Ihe Early Edition that new twist on RSS readerfunctionality,lt like a newspaper" I knew for sure that it was a better experience than the usual RSS Suddenly, reading and scanning news headlines in a for me that lists effect. We asked Graham


like a chore, and the fact that it was composed

of the app for Glasshouse,

how he did it. for


newspaper format created an instant connection and tables have never provided. interface? CA: How do you think theiPad?

Arts: What"s it like desigl1ing


Graham Clark: Having already designed two applications for iPhone - Barista and Cellar - I was Familiar with the basic principles of designing Fora touch interface. Having said that. iPad is quite a dilfersnt device and, because of its scale, it lends itself more towards user interfaces that have a familiar and less 'utility' feel to them than iPhone,ln that sense, there was a tension between using the familiar !Phone SDK elements and the familiar elements of our real life metaphor, which is the newspaper. CA: What's your favourite a newspaper with thing about The .Early Edition? the aqe-old format of

news stories are best presented


GC: Inside The Early Edition of course! But seriously, finding the answer to this quesrton was what inspired the design of our app in the first place. People love the experience of reading a newspaper - the problem is that what they're reading is yesterday's news, And likewise, people love the 'instant updates available online - but the experience of reading news websites leaves a lot to be desired. iPad presents an incredible opportunity to bring these two seemingly opposing worlds together and create an experience that's actually better than the sum of its individual parts.

GC: I loved the whole concept of combining


digital delivery of the news, Though it



The creative pro's gUide to iPad ---07

• App Showcase

oS--lf,tudent lfi'e i, get~ing you down, let iStudiez Pro toke charge of you, srnedu 1,,-You11 neve miss a d"adlin~ thanks to consent reminders via push notifiUltjon, of upcoming assignmO'm due do res

06 --The Planner shows you, semesters and haliday~ You cen add another with the Plu, button or choose EdillO remove one. The b.lckground rticety resembles a tradttional school blackboard


07-Thelnstnrcter pop-over enable, you '0 keep tab, on you. leacher<,Yau "'ign them [0 subjects so you [on see "'"'0 ls taking the next lesson in your ,.:hedule. The,e~ also room for a photo of them, too'

08--Thecla" informa~OJ1Ul n sOOw del"il, including location. and IlOWoften class repeats,You ran elso a dd note, to e.1ch dess, which cen be ~'Y haiXo/ Iflhere ~ " kEY piece of inform"~011 to remember


\"dril' Kaelm/a, isl',r/,mlpro.C(}


,~)I" a.U1







iStudiez Pro
Keeping the life of a student. organised is no meen feat. and the aim of iStudie% Pro is to help (oUege-goers breeze through their coursework and exams.
While iStudiez Pro already existed in an iPhone format, the designers had to radically change things for the iPad app, "We completely remembers restructured the interface of the iPad version, making the app run native on iPad as it is native on iPhone andiPod Touch: Andriy Kachalo, pro lead architect on the protect, about iStudiez Pro is a universal app, running iPhone. ·Apple recommends guess we understand on both iPad and and we the design decisions he had to make. making an app cross-platform,

:1: I~'

....,,011 ..........

• Sponkhl


~ ...


t ...



why; says K,achalo, "First of all, it augments native on

the range of your users when you make an app running

all devices that a user might have. You might have an iPad, an Phone or an iPod Touch, or you might have all of them, and with every device it will be comfortable is rea Ily usefu I fOI ou I users" www.i.s1u!.leotprocom 08

for you to use iStudiez Pro, This

08 ---The

creative pro's guide to iPad

The best-designediPad apps'

09--The overview screen shows the Cummt phase of [i'Ie Moon, and ri~ng and "'tling limes IUrthe Sun and the planers Venu~ Mm_ Jupiter and Saturn, JLm OJ P [he arrows next to (he d~te (Q move fOlWard or bock ln lime

1 O--Hl're we 0"" looking al the star OOrlSlella(lonof uncI", "" you move your iPad around the ,ky, it updare, 10 show you li'leexact position of stall and (OrlStellaliool relative (0 where you're poiming


lIle locatio.n

bu nOn to see your currehC

1000tion on [he fanh and qet you r position, You can spin the globe with a swipe of you rfing..- to Ii nd [he I.ltitude and longitude of VO!IOU> ones across the globe

12-- Held every N"""",ber, Guinn' ess World Recoyd5 Day i, a ,pee;.,1 day VY'hen people around the globe "'" en couroged 10 try 10 breok records, In 2009, a ,tagqerlng 14 world records we!e smashed

Star Walk enables you to point your iPad at the sky and see what stars you're looking at in real-time. When Vito started developing and designing the app
(~rst ForiPhone and then for iPad) one of the main goals was to create an interface that would be as comprehensible the imitation computer as possible, "Visually, we wanted to reproduce 09

of the sel-f spaceship

Olga Shtub at started to copy


Vito, "Since our competitors

the interface we desiqned, we feel it's safe to say that our interface ts a success:' WNW virotecb oolog)l.!:Q[O
10 11

Gulnness World Records:

At Your Fingertips
From tha tallest boy in the world to the most pil!rced woman - it's all here in the Guinness World Rec.ords iPad app,
·We wanted' to show how a mobile platform of this size could successfully elevate digital publishing imagery the showcase it deserve,;,ays overniqht revolution, caflnibalisiflg 12 The creative pro's gUide to iPad ---09 app, see our interview and give rich and engaging Dean Johnson from the

agency behind the app, Brandwidth. "This wasn't about an more a taste of things to come to avoid with Brandwidth on page 22. prim sales: For more on The Gulnness World Records

• App Showcase

TabToolkit i, really players, but pia nlsts who can read music csn use jt "CIlIillly "",,11,and with a plop'" dock the iPad ma~ the
aimed ill guitar


perfecr mUllc stand

14--lfaGlpois requ ired, it will sppear on [he guilar ~etbo~rd"lne correct ImL The playba.<k option. enable you ro control the speed at wMich the app plays the tab

15--ln Portrait mod", !lie Pad makes the perfect music <ta nd The app looks so good that lt wa, a winner in Apple', 20 I 0 Design Awards

-- - -- -- - -I.!, "''''''''U9'''

.. .


. ~. .



---.'-.--~ r ~ .




g .:
. 1fT. ._rJ· ::"F'F.l b-•

, I: ' .





-.!--'--I .'




L_ I_

J • J ~

• I_





"1.1'>01 Tt"I'Kt1bfo:f






:f11 kJd' ~



TabToolkit brings musk notation toiPad, enabling you to download guitar tabs from the internet, then display them on your iPad's screen and play along to classic tracks. John Berry, Agile Partners' head of product development, was responsible for the,gn of project,
"It's a new medium, so there were few established bigger, Users design standards that we could draw from; explains Berry, "We knew it wasn't simply a matter of making everything more powerful expect more than that from an iPad app because the device is and larger: So, what was his favourite design feature? "We're really pleased with the Page Layout view, where use rs ca n see an entire page of m us iC noratlo n scroll s moothy across the screen, Being able to view an entire page of music not only makes it easier for musicians to read, but a full page of crisp, sharp notes on the high resolution dragging the music notation display is visually compelling_ or You can even jump to any pain t of a song by simply tapping on the screen!"






I . ..
1 ••jJ




11W U ~

. [' . , •


TabToolkit is a universal app - why not make a separate iPad version? "With the iPhone version having launched just last September, we didn't want to alienate our'early sdopter'custorners who had just purchased the app_" www.agjleparroerscom

10 ---The

creattve pro's guide to iPad




The best-designediPad apps'

TWiner profile

on a person's plctu '" to 5e<O aJllheir recent rweets H",e we'", !aking a closer look at what Twitter advocate Stephen Fry bas been, up to.


17--Want to take an even doser 'look <It >omebodyl No problem with Twitteliffic's intl'rface, provided their Twitter pmlile pic illMge Mough,




~S! I,t!
~~ ~~


·~~If'pllj.·'~r \









MedIa Guardian

Mod", Guardian



M,Pdla Gunrrflnn







Twitterrific for iPad

Twitterrific has quickly become the iPad Twitter client of inte.rface, which works or landscape mode. We asked Gedeon what he wanted to commcnlcate quite a while to come up with the proper layout, proportions of font sizes to avatars, colours, shading and links to getTwinerrific's trademark unified tirneline where we wanted it Too small and there was information overload, too large and it seemed like we were designing for senior citizens. There was a fine line there, burl think we were successful Computer Arts: What were your ambitions for this app? CA: Why no settings? GM: NO! having any settings was really a function of the 6O-day development cycle, but it proved to be the most freeing, of anything we had done design wise for the entire application, Version 2.0 ofTwitterrific for the iPhone has so many usercustornisable settings that it's easy 10 get confused. After a certain point, usersjust don't bother going into settings because they can't Gedeon Maheux.: With Twitterrific for iPad, we really wanted to get back to basics and give the user an experience that took into account the new UI conventions Forthe iPad platform. We also wanted to highDght elements that were distinctly Twltternfic, The use of colour·coding for tweets, Ollie our mascot and a friendly, easily approachable user experience were all carefully considered when we started development on the application. CA: What design feature of your app are you most pleased with? GM: Two things really: the overall look of the main timeline and the Factthat version 1,0 had no user settings at all.We laboured for choice, mainly because of its intuitIve well in either portrait Maheux, of Iconfactory

with the design of the app.

fi nd their way around Having no settings meant we had to make

deosions for users and 'guide' them towards certain default settings, This made for a cleaner, more elegant piece of software and one we're really very proud of. WNW IwitterriGccqro


The creative pro's gUide to iPad ---11

• App Showcase

18--The aw hasthe ab1liry10 zoom ;n 300 idenllIY any region, bone. bone pan of ligamem

19 -You GIn get different views of the human OOdy, ;n<;luding x-ray or ,kin vie"" and allaromi(al~

2.0-You canid<'lllify d'f(eren( pans by dlCldng on ,he f1a9~ Ea<:h label ls in English and in Latin, with additional Inrorma!ioo mad. availo ble by pressing the relevant loon


The Skeletal System Pro - iPad edition

This app a text book on. the human. skeletal system to

life in. beautiful 3~.

"We're extremely which we didn't compromise. proud of the quality of our graphics, Even when zoomed in, they don't thouqb. "A problem we had

lose quality; remarks John Moore, CEO of 304Medicalmm. AchievinQl this wasn't straiQlhtforward, was trying to make it really interactive. We fell that it was important that the user can see the front (anterior), sides (lateral. medial) and back (posterior) views. This would be simple if we had used a,3D model (OpenGl), but the quality of a real 3D model wasn't good enough - we needed to use our high quality graphics·

A more innovative solution was needed. "We decided on

a solution that tries to fool the eye, meaning that when the user drag,s his or her finger over the image, say from left to right, the image changes to a side (lateral) view, but asit does $0, an arrow simultaneously animates across the screen, giving the impression that the image is rotating seamlessly' www3d4medicaLCQCO


creattve pro's guide to iPad




The best-designediPad apps'

21--Thi<gorgeou~ ernma red. safe graph..: greets you every time you log imo 1P,a.sworci, giving you a l'eelir>gof security at all tim<',

22--With lP""word, you can store user nam<>< ~OOpassword, for all )KlUr fa\/Ourit!' "",boiites in one place - and you only need [0 remember Orle password \0 gel access

Want more apps1

Check out our App Directory on page 100



On the fa(e of It, 1Password is a pretty simple securely
stores your important security information and encrypted passwords, and enables you to log into websites with a <;ingle tap, This can be great for rnulpple browsing shopping purposes, such as online


or online banking, where a single click saves you having

it uses a nicely designed interface that does stylish, Chad Seldomridge loves his iPad "I think the industry in the

to re-enter secure data at each login page. And while it may seem very straightforward, 1Password developer a great Job of making the app easy to use while remaining iPad is a true qarne-chanqer,


I'm 30 years old andl used to regret

missing out on the amazing birth of the computer 1980s. I no longer feel that way" ~agiLew.ebsoJuti!m.mro

.y..rwyymmpl uerarrs m.u.k

The creative pro's guide to iP~d---13

• App Showcase

23--- Alo~gside The Eh,,,,ents' Stunnlr'lg imoge, are [appoble faCi columns, which bring up a plethora of infarmmion re!ated to mat element

24AnedllCational gem, The Eiernerll' O~5 with a perlndic table of rotating re pre,entation, of the elements. User, can tap on an elerneouo bring up a rolatoble.Ii.JII->ereen verson of that element

2.5------1..iser>can doublHap any of the highly de!ailed objects to e:<amine them at 1iJII"SCre!'nsize. If you hove a pair of) D glasses to hand, you can even view Ih .. im ".ges in 3 D




The Elements
Widely regarded of a textbook educational as one of the best digital. implementations to CA:Which design feature of The Elements are you most ever, The Elements (an introduction iPad apps.We talked interface pleased with? TG: Personally I' really like the way the objects all fall down into place on the second page, simultaneously demonstrating to the reader that they can rotate, thus encouraging touching them, and at the same time masking the fact that we Computer designing Theodore Arts: Were there any difficult for iPad? Gray; There were a hundred difficult decisions! Our CA: Do you think apps need to work harder when presenting scientific: info.rmation? TG: Presenting information in a clear and interesting way is always difficult whether it's explaining how quantum mechanics work to a graduate student or explaining how a. car works to a slx-yearold. There are plenty of children's books that do decisions when the Periodic Table of the Elements) raised the bar for design with its

creator, Theodore Gray.


load all of them

in interactive form instantly, so we need the fractlon-of-a-second transition movie to get them ready to be touched.

guide in all cases was two things: what would Harry Potter get in his version of this book, and what could we actually do in practicality on an actual iPad? Harry Potter would get objects that floated in space above the page; the closest we could come was

3D rotating objects that appear to be floating off the screen if you look at them with the right 3D glasses,The hardest part was rna inra ining th 0' ill u sian of pe rfeet Iy fl u id, lnsta nt intera ctivity, wh 0' n
in fact the machine is scrambling like mad in the background to keep everything looking simple,

a really bad job

explaining the basics of common objects, so it's not just complex sciefltilic ioforrnation where improvement is needed!
WJlJLW theodo

reg ray com


creative pro's gUideto iPad

WJNWcompl rrprarrsco I Ik

• !ndepth


The creative pro's guide to iPad 'M¥WcomplJIerarrs m uk

The rules of iPad app design

When Steve Jobs unveiled theiPad, it fell from above his head into a gap between a MacBook Pro laptop and an was more than showmanship and stagecraft; he was making a point.This platform might sit between the the iPhone and the MacBook Pro physically, but otherwise it throws previous design and usage guidelines out of the window. In order to make the most of its functionality, theiPad demands a new rule book - and it's you, the designers, who have the opportunityto write it


The creative pro's guide to iPad-11

• In depth

!l1_ The Pag'" app looks likean eleg~nt document-reading application ..

!l2---- ... until you irueraci with an object 10 d),play relevant editing UI

I", Theloofbl' YVhoo 1'lu open B docum ell! In land pcm"ll YiDW. tila 1<>015 you II 11" mo.t ....
Ille tootl!<lr III Ille top 01 the saeen

My QOcUmDflU
Horo's wl>uro youll Cl'OOIOrIO'"

®Q)mBni5 and open the ones you"" ... ,....:j P"EIUS uVI!II YCLll"work "'hllo )"'U WOl~, ~Urom.11IcaU1· Undo With a Ilop, 'f«l CIlI'I UfId~ anylh<!1Q \'OlIva da:Ii!. TOUCh and hold [0 rl!dCl.






1Mrra. ......



..... '........ p..I~c;:'I .... ..,..

~~l(II!IapPI.,..,,~p.... ~ P~ __ ¥ ..

vvY' ...

..... tI!lI

Toolb.r bulton,
Inro;>,OJnnga Object M tllXl preportl,,"

Vl-tlWo T~.iN'ldlliDldtel~

Toolf", ehaclc .peU.-.g, lind mora :Fyll SO;'·een,: VICW m ful sereen.


02 The iPad is not a laptop smartphone interaction touch-screen operating productivity

OI netbook, nOI is it a

pixels), 50 apps With demanding keyboards are supported),



will be

or PDA. It fills a new space, and with it comes a new designers. There are new conventions to apply when designing tablet devices in general. device running the iPhone and

at home. The virtual keyboard is almost full-size (and external so text entry is now much more feasible. only the iPad can Lastly, whilst the iPhone supports multi-touch, credibly claim to support two hands. These facts directly affect which interfaces will work on the iPad, and help define a set of design principles to follow. Look Like a viewer There is a big temptation to let the iPad's large screen go to our is: more to violate that heads. The primary warning about designing for thePad screen space doesn't mean more Ul.Irs tempting principle, and it's very important UI to cover the apps functionality

type of software, and unique challenges for user interface, web and considerations for this platform, and for

The iPad is a touch-screen

system (now known as iOS) but treating it as just a larger and entertainment platform in a way the iPhone

iPhone would certainly be unwise. The reality is that the iPad is a rightly never tried to be. It's a target for streamlined versions of apps which previously only existed on the desktop - not just a place to rework utilities and games from srnartphones, The bigg.e5t challenge for designers is learning how to bring, desktop-class applications to this type of device. We need to won't automatically work on a rethink our approach to user interface design, because what works on the desktop or on a smartphone large touch-screen. Fundamentally, the difFerences all come down

to resist.There should be enough (and no more), but a bigger

screen doesn't mean all the controls should all be visible at once. If there's one golden rule ofiPad interface design, it's look like a, viewer, behave like an editor: Hide configuration prime example. UI until it'5 needed, then dismiss it afterwards. Apple's own iWork apps are a

to input and output. The iPad's display is very large (1024x768


The creative pro's guide to iPad

'W'NYV com


rEeracrs m L J k

The rules of iPad app design


TIle Keynote directly on the be animated



app enables you to ed,[

ani millions object to

enables data e"uy

LlSlng a real-world Iilrm·filling imerface

Thuch Is emotionaUy bnportant to humans. It

conveys the identity and 'realness' of an object..

.Part 2: Working with Objects

n u,.

Thuch bypasses abstraction and creates a connection with the touched item, and this is particularly true when the object triggers mental associations. The physical size and weight of the iPad, coupled with it being a device to look at and read, immediately connotes real objects like paper note pads, file-folders, clipboards and books. There is something intrinsically 'right' about seeing the iPad as a technological successor to, or version of, these physical objects. We're immediately ready to accept one as a substitute for the other. It's important to capitalise on the emotional resonance the user feels with such a device.


G4!>lUf'I'D SI .. rlod



Edit in-place
On the desktop, we often have globally positioned these whenever indirection controls such as floating Inspector palettes, toolbars and menus. You should avoid possible on the iPad, because they introduce the user's action and the object being device, users want to interact directly. between

l1<.I> SA.n


affected, On a touch-screen
to the object

Enable the user to edit objects in-place, Attach editing UI itself; show, hide and move it as needed. A prominent in app on the iPad, In-place editing is a and is the wi th Fora device where you're interacting example is the interface for editing transitions and animations the Keynote presentation powerful most intuitive approach 'actual'objects principle to follow; it's direct and immediate, using your ~ngers.


** **

Remove features Feature-creep is the bane of software, Even expert users of may barely have scratched Microsoft Word or Adobe Photoshop

the surface of their functionality. Most software has features you'll never touch, and would never miss if they were removed. ,..


The creative pro's guide to iPad---19

• In depth

os..__ Safari: is a full-featured web brOW>er, bur its UI is simple, with only live bunons in its roclbar

()6___Keynole enables the user \0 match the size of one objea while ",sizing anether

P·art 1; Get to Know Keynote

~ "fL'>i!I~

.... ~iWIIIiiI~

1'-1IIII!in,... .........


.. ~

.mtI!U'I(Ij ...


06 ... Most users need only a small set of features, and Two-handed convenient input should be optional, and act as a shortcut or additional way to access functionality. multlple

softwa re is bette r wh en it's focused. A benefi cia I sid e -effect ofth is approach rs that the UI is easier to design and comprehend (because there's less of it, and it's more obvious why each element exists) The trick is to determine implement which features are important, and only those. When in doubt, leave it out. Similarly, try to avoid letting users customise or configure how a feature works; decide what will suit most people, and make the app work that way. You can always add features and options later after receivingl feedback, but you'll never recover tram a confusing first impression.

Keynote provides several examples, such as matching the size of one objeer while resizing another, and dragging slides into new positions in the presentation be other, more obvious ways to accomplish input is a power-user don't be afraid to support two. Touch and form The twin factors of touch sensitivity and form factor create a strong, immediate attachment to tablet devices. It's these factors, sector (the Nintendo combined with the software user experience, that give the iPad There should always tasks; two-handed

feature. Always be usable with one hand, but

Two hands
The iPad is large enough for two-handed can distinguish temptation add anything take advantage of the input-space input, and the hardware Users want to don't 11 discrete touches simultaneously.

mass-market appeal outside the technology Wii is in a similar posltion)

available. Re,ist (at all costs) the

The Notes app on the iPhone will forever be a simulation of a legal pad; the the user, the corresponding pad. It's an incredibly important distinction iPad app is a legal towards visual in terms of how it

to fill this space with controls. Equally importantly, requiring two hands; people will very often be with the other.

holding the iPad with one hand and interacting

influences the design process.There's a predilection


The creative pro's guide to iPad

'W'NYV com


rEeracrs m L J k

The rules of iPad app design

07__ The 800ks dPP show, rich wooden 'helv~ bathed in 5unligh~ to reinforce the !<IC1ility and implied ref;""mem of a library

and behavioural

realness on the iPad which overrides mere fashion of the attraction. iPad on this by using virtual materials.

Designing for the future

More than two million iPads were sold within the firs! 60 days of release, and everyone has an anecdote relative who desperately chord, to a degree few expected. There are unique challenges faCinQl designers on this new platform, and of course plenty of opportunities. applications emotional overwhelming, It's an incredibly exciting time to be a user interface and interaction beginning getting good luck. designer, and there has never been a greater demand graphic design. We're possibly seeing the of the next major stage of user experience, and you're for software-focused are feature-light connection and interacti.on-heavy; iPad they create an about a technophobic wants one, The product hag struck a

and aesthetics; it's a core component software can build diredly ring-binders

Your software's user has clipped card dividers into and has seen them become dog-eared. They know paper feels, and they've bent and reshaped how waxy laser-printer

paperclips. An interface which mimics those real objects reinforces the surprising sense of Familiarity of the hardware and enhances the user's cornforr. The principle can be taken Further, by simulating not only familiar objects but those which are aspirational and luxurious, or which reflect the user's desired lifestyle. Don't underestimate replicating the significance and value of analogue, real-world objects in software, People form

with the user, and they delight without

stro ng e motio na I co n n ection to ob wets, even if th sy can't articulate the fact. You can, and should, directly capitalise on these feelings and connotations manipulate application when designing software interfaces. Make your interface a real object (or a surface on which to real objects), and the user will engage with the immediately.

in on the ground Aom. Keep your focus on the user, and

The creative pro's guide to iPad--- 21


o iPad designer
Leftt<> right_ David Bird, senior projec! de>igner; Mil tt Woodoge,
seniOf, in terai::live


developer; AI~x lokh man programmer analyst Arldrew Edward~ senior de>igner, Dean Johnson, creative director; Ben

McGeachfe. lechnologis(

When asked to deliver the Guinness World Records app in time for the iPad launch, the Brandwidth team had to work in record time. Here we find out about their programme of iPad development
22Thecreative pros guide to iPad OLJEfraas m l J k

Brandwidth 0

When. Norris and Ross McWhirter were commissioned to compile a book of facts by an e.xecutive of Guinness Breweries back in 1951, they couldn't possibly have imagined where it might lead. The Gulnne5s Book of Records was first printed in 1954 and became one of the world's best-known publishing brands. a digital Today, what was The Gulnne55 Book of

done several projects with GWR. in the past, approached the company with the concept and was tasked with creating a'iite' version in time for the iPad's launch, Brandwidth 'is still busy working on a full version for release later thiS year. "As we've worked with GWR on projects ranging from website, to cinema advertising, the client is us used to giving us a project and allowing genuine creative freedom; says creative director Dean johnson. "This was very much the case with the app, We were given a list of all required content, from photos to video to illustrated facts. Our job was to decide which image would have the

greatest impact and how it would best At into our 3D environments" The project threw up many creative and design challenges. For a start, the team didn't have working hardware and had to use an ernoletor to test it on, They really wanted, to create the effect of a 3D environment distinction on the screen, and used a is that content parallax scrolling technique; an important ForBrandwidth appears'within'each page rather than'on'it


is on its way to becoming phenomenon


in the Form of the

Guinnes5 World Records iPad app. To create the app, Guinness World Records used the London-based agency Brandwidth. The agency, which has

The team aims to generate the sense that you can move around the environment and interact with it rather than passively looking at it ...



The creative pro's guide to iPad---


o iPad designer


01_\1\. on interface !hat uses P'lrolla< >CFoIlir>g10 create a 3D environment in which to e:;plarethe iFTl1lgery and ram, Ill1mciwldth wanled 10 achieve rea I lin gertip i ntera rtlon

... interacting

Then there's the matter of with the iPad itself. which can in

faced a (lme-versus-memory launch day loomed" The atmosphere before the iPad',launch. everything they wanted

issue as in Brandwidth's the

be twisted around to deliver the content both portrait and landscape aspects. Brandwidth

studio was electric as time ticked away Annoyingly, team's iPad simulator couldn't simulate to achieve so it and Johnson first version of GWR Ute was rejected on a

had to take a (all on how best

to Iay out scree ns for on e-u p portrait viewing, or the wider landscape doublepage-style option. "Landscape wins every time for th is pa r ti cui ar CO nten expanded bottom

t; says johnson.

technicality. They reworked


- along with client services director jim Carles, - fiew out to New York to present the app at Gulnness World Records· US offices on the Tuesday before launch On the Wednesday non-beta SDK. it was approved and then it had to be recompiled using a

included a portrait mode but kept the menu raised and the there spread to the top of the paqe.ldeally

"On Thursday we had the full green light and on Friday the app finally appeared on the App Store - just in time."

would have been a single full-size page visible, but this required the original assets to be artworked at double the size, and we

Dean Johnson


creattvero's guide to iPad p


Brandwidth 0

T allesl, fa'test or wa"9"st? The fun part for Bt "ndwid(h was dealing with GWR's extreme content for the GWR 'lite' app, Faste,! was most pertinent though, as lhey raced ill finish the app ln time for the iP"d's "'urICh 02-04 __

05....- To demonstrate it' Own p<owe,,, B"'"dwid ~11hal created an environment based on limes Square. Un" [0

information" bout Brandwid!h', own pmjeos appear via glowing neon light< in prime kxanons

C6 __ Pop-up book G U Inness Wood RKQrds, Ike;! "nd Inleractive ccmic pmjeru ca 11 all be

discovered in Brandwidth'. Own iPad.based trai.ler ofit<l'Klrk

"On Thursday we had the full green light and on Friday the app Anally appeared on the App Store; Johnson recalls, "just in time for us to queue overnight outside the 5th Avenue Apple Store, to be 6th and 7th to purchase an iPad and download our app" Brandwidth websites, experiential marketing opportunity experience also works on desiqn, branding,

and digital strategy, but Dean in digital publishing on the

Johnson and his team dearly sense a great iPad. As though in tribute to their queuing at the Apple Store on ,. Sth Avenue, they're developing a Brandwid th trailer for iPad which

WNW complJlffiJrt:;,co Ilk

The creative pro'sguide to iPad---


o iPad designer
07- 08....-- Brandwidth Apple-friendl.y offi(e, witi1 much of [h~ d"'ign and ""l!elopmem WOIk undenaken on Macs
ru C1I an


09 -1 ()__

Brandwid th',

office ""vi rorments

davelopers wol'kln 9 alongside design .. s, and even hanging bkydes

26--- The creative pro's goide to iPad


WIJVVY com OLJreraas m LJ k

Brandwidth 0

Brandwidth's GWR iPad taster features 11 spreads and content including text, videos and photography. The team endeavoured to make it as Interactive as possible, pulling the user into the content and allowing exploration. One of the key challenges is one that all iPad developers are facing as they develop the 'page' concept; Brandwidth decided that landscape is the best way to view its presentation of the content, so there is no distinction between the Single-page portrait and double-page landscape notions found In magazlnes_ Initially, you could rotate the lPad and look at the landscape presentation as a band across the portrait space, but in newer

versions of the application tbls function has been abolished. It's best viewed landscape, and Brandwidth has kept it that way. "The Gulnness World Records brand is a designer's dream client; says Dean Johnson. "Imagine a visual palette consisting of records that can be set in absolutely any category, each one taken to extremes. Where else would you get to work with deadly animals, Usain Bolt and the world's most tattooed man? Again, experience stands for a lot and we were able to include the editorial, marketing and sales teams in the development process, and will keep these stakeholders involved.'

II> recreates a realistie vi S ion ofT! m es

Square. In place of the actual neon advertising you see at Tlmes Square, the demo highlights Brandwidrh's own projects, illuminated and ready for the user to tap on to find out more about the individual project Perhaps because of his overall love of design, Dean johnson's thinking, is much more subtle than many in the digital realm when it comes to the paper-versuspixel debate. And this is coming to bear in a current Brandwidth project to develop a

series of pop-up books for the iPad."I'm not keen to empty our bookshelves in the same way thai CD racks are now gathering dust" he says,"A physical pop-up book is a great illustration of interactivity that has been accesslble and ente rtaining for years· For Brandwidth, .rs not a case of converting the format to something that will be less than the original book - nothing can actually pop out of the iPad screen, Instead, the challenge is to find ways of adding value to the content that ~he iPad can capitalise upon, To do so, Brandwidth ...



The creative pro's guide to iPad--


o iPad designer
11__ Imagine Ole lkea catel og ue withQut pa per, where you can lee the kitch"" you wane in the colour you wa nt It in, then ched< .""II"biUry, delive<y dates and price


12...-- The d.,,;gn and development learns <:reated apps In Phala.h ap before they were passed lhroogh a Java erwironm<-m and lh"" On thlO"9h the XcodelDE

13.-.-- An lnteraetlve dig ita I comic book is in. [he works, wh~e ,he reader~t chokes can determine how the ,Imy pa ns OUT

The iPad might be able to beat the >en,." ion, a chjld ""perienc€s with a jJ<lp-UP boo!:. bIJ t lt can provide gameplay withi .. the
1'10\ (juile


story thaI a book cant



• is working with Sta.te of Play, a Flashbased game5 developer.

"We'll be aiming to revolutionise the digital publishing market." Dean Johnson

"Imagine a cornbinatlon beautifully interaction educational

of the

concepts; offering the ability to browse a illustrated children's book and that now allows for within each spread beyond the gaming element, or an to bring the book to pop-up animation

simple pulling of tabs - we now include an enga.ging animation ,Ife:' says john son. i There are also some very interesting ideas being formulated in is customer publishing, and Brandwidth

working on some great concepts for an lkea iPad app. Once again, johnson's approach has been to imagine a number of possibilities and think how each can add value the iPad way Of course. i,t does away with the printed catalogue and all the waste printing and distribution entails. the customer can feel like they have a guide to thousands of products right in their pocket,


The creative pro's goide to iPad

WIJVVY com OLJEfraas

m_L J

Brandwidth 0

1 s..___ B"",dwidth·,

oiWs exude an arrof



calm~ativiry. echoec in ilS development pI()(I'SS


and the experience

can be personalised.

about their creative property

and choosing by

Johnson is excited about the possibilities of what it can offer to the consumer and the retailer: "We are looking options where the user is at configurator

things where a 'halo effect; as he descrlbes lr, can be created around the content using the technology. Going forwards, this emphasis on technology Brandwidth interactive is definitely part of the will become plan, "Multitouch method

able to see not only their Furniture choice, but also in the style and colour they want, on their terms. Why not add an element of fun to the whole process with a randornisinq Function when the retailer reality is is offers a vast range that may not otherwise have been viewed? Augmented recognised immediately another option whereby coded furniture in store and pricing is displayed, then ordered with a Of course, there's a scramble going on right now to bring content to the iPad. Some will feel compelled to create lite ral transl at ions of th ei r book and magazine pages, or websltes, directly to the iPad. Bu t for Joh nson, th eel everest publishers are taking a step back, thinking

even more widely accepted as the of choice;' predicts the Johnson. "First iPhone, then iPad, iMac to follow. We'll be aiming to revolutionise digital publishing marketing multi-platform development to another level and add portal apps to our plan, Moving on, gestural UI technology to market, take experiential

simple tap of the screen"

will be the new multi touch, but we've got to wait for the mass-market catch up first!"




The creative pro's guide to iPad---



Presenting an essential primer for the iPad designer, from the developers and designers making a difference on the App Store ...

The iPad experts

Our panel of pro app advisors

Campion Pr,innn uealive dire<;lor, ZJnio

Jen Gordon Art dilecwr, A CleverTwis(

Peter Budley Digi",1 publisher for I i'englJin TriN<'I'and , aUlr.or of The /b.Jgh Guide , loiheiPod

Roben Bad~r - Director, unit9

WlM/II' JOji9 rom

Florian Sch mitt ArtlsUc director, Hi-ReS! London.

Michael Hainey Deputy editor, GO USA M'oIW.gq_com

30--The creattve pro's guide to iPad


30 ways to design better apps

There is a temptation Remember technology

Technology must serve the product

with any new technology to go a bit crazy at hand,

Don't be all fingers and thumbs

device, It might sound obvious, but that

The iPad is a touch-screen

and make things Just because you have the technology should serve the product, not vice versa.

means you can't put things too dose together, and Visuals cannot be too small - Apple suggests 44x44px for the smallest interactive object. Sync images to your iPad to verify layouts,

Photos hop Iilters?This is not how it should be. The

ingredients, orientation

Reading content must be as clear and natural as print

Possibly the most important from point-and-click is to layer from the equation

new gesture possibilities

part of design for iPad is the move interaction and to direct interaction. The iPad removes one of human/computer will take some time to be fully

The iPad has evolved from a trio of different streams - phone, print and web. It may be that it produces a new stream from those but none should be degraded, least of all print.lfit be a successful content consumption as natu raI as read ing pri nt. device, the reading must feel

replaces it with'gestures'These explored - so explore them.


Think about how the user holds the device, both portrait and landscape

While exploring the applications familiarity work overnight

Be familiar
the gesture-interaction model is fun and eXCiting, Changing the way things of people. which currently work best give users enough of a is only going to appeal to a minority

Unlike most other digital deliveries, theiPad works perfectly in both landscape and portrait mode. Any layout will have a natural and it should be easy for the user to understand, but designers must cope with things not happening even turn this into an advantage as they desire, and

factor to be easily acceptable,

- designs need to be adaptive.

Note how the user is oriented


Appeal to the grazers

with the

It may look like one, but the iPad is not just a big iPhone (see our feature on page 16). Early studies suggest that interaction iPadis fundamentally below 30 seconds per case, users spend signi~cantly iPad, iPhone users snack, iPad users graze. different. Where iPhone usage is generally lonqer on an

The iPad can be used in a way which closely mimics traditional print. Digital magazines have always felt clunky on the web because it's not natural to lean forward and have a keyboard between you and your relaxing reading. When we lean back, we relax, so with the iPad the user is in a different mode too.

depth using images

is quite as regal as the image. The iPad in which to explore and enjoy or some combination thereof.

to the iPad,

Be prepared for shifts in technology


The door between Content is king. And nothing gives you a whole new playground animation, effects and interaction,

Apple and Adobe was recently described

being not just shut but bricked up Whatever the reasons for this it suggests that the easiest way to produce interactive currently has a target on its back. ... content that works everywhere experiences

images. Combine them, move them, add text, audio, video, Let images open up possibilities,

New ways are going to have to be found to move those

WNW Complllffilrr:;,cO Ilk

The creative pro's guide to iPad--



native technology.

Be aware of how technical shifts could change the look

of HTML5, but its using Apple·

New conventions wh'ich move through return to them.

!ake emerging standards mto account

Web designers will be aware of the importance visual signature caused by developing feeds through toan easily identiliable of this as it happens will be a strength.

are evolving for the iPad, and these need to be Apps

effects, and that of other new web standards, will reinforce the applications There will doubtless come a time when this

taken into account. A simple example is page turning: Apple's eReader turns left to right with a page-fiick or a double-click. pages top-to-bottom Feelwrong when you


and being aware

The production in common

Have access to a broad production base

studio at full pelt than a and make

Some clientsjuSl whether

clients carefully
want to be in every space available, regardless of and, if it doesn't, be prepared for it to

phase ofVNmag's inaugural iPad edition had more

it's relevant to their business, Design should look for the

with a game development

message to fit the medium look out of place.

regular editorial studio. There are so many more skills that can come into play that it pays to have good connections use of them to produce something new and interesting.

of a gold rush.

watch. O.l=!Ro.rtUnities for to partner With content providers


the 21 st century.

T. hink. abo.ut iPad's use outside the home

Though it might take a while before people are comfortable enough with their iPads that they feel confident in public, it will happen eventually hug.e explosion of location-aware taking them out When it does there will be a apps. Think travel guides for

The big content providers have been waiting for something

the iPad ever since the sad demise cf the CD-ROM Now that they have a new outlet for their beautiful content, they ale going to need talented designers to make the most of it, This could be a bit


still the way that users understand that a good idea alone is rarely which the you need something

the web ~ for now

to navigate, it is best for the time being. So, if it's best to stick to using by their

Ideas alone feel naked

Though Safari on the iPad feels like the old to be understood,

The iPad is such a nch environment

enough. Without content standing behind them, empty ideas feel all the more naked thanks to the level, of expectation iPad brings to the game. Don't be caught out.

the Safari defaults for now. Or at least keep them on hand as a fallback. Remember that nobody likes being outsmarted own device,

cI utter your U I.
32--The creattvepro's guide to iP~d

Make space for branding

to And space to add branding without butit has


Readthe manual
on what

On the iPhone it's difficult

For the time being there is one source of information is comprehenslve

getting in the way ofthe user experience. The iPad not only has enough space Forsome signifi.cant brand-building, functionality so you can ensure this does not

works and what does not work on the iPad - and that is Apple.The and deep, as Apple has had its hands on the iPad for a lot l.onger than anyone else. So, for now at least, it pays to trust Apple's judgement.


30 ways to design better apps

and trying to accomplish a much more interesting

It's about the user, not the designer

for the iPad promises great

There's no denying that working

challenges and great rewards, but don't get carried away. At the end of the day this is about the user sitting down with their device some task or just enjoy themselves. It's not about you, the designer.


Computer Arts: In terms of design, what did you want to bring to the iPad from the print edidon, and where did you see a space to evolve beyond It1 MiclurelHainey:The mission I set out was clear and tightly focussed: Technology will serve and must serve the magazine. Too many people let the tech drive the design and the result is they start doing things just because they can. Ibelieve you should only do things that have a reason behind them. Iwanted the reader to find the experience as clean, clear and logical as reading the print version. But then Iwanted the technology to be available to enhance the experience, not overwhelm it. It's a careful balance that requires vigilance throughout. I strongly believe that it's essential to give readers a strong reading experience. That's the mission. If you don't give them that, no amount of amazing gizmos can save you. C4:Wbat were the most challenging and rewarding aspects of designing for the lPad? MH:The most challenging aspect was designing in a vacuum. That is, not having the device to see how a reader would hold it and so on. The most rewarding was realising you are 'present at creation' for a new way of narrative storytelling. And then finally realising ideas I've long had about how to teU a story in print - there are now incredible new possibilities.

Don't forget EPUB

Pad works as an eReader and, as such, the EPUB open standard is an integral part of its architecture. Though still focussed on text-heavy uses, EPUB will evolve, and when it does it will become technology to work with for designers.

2 !) 2A

1 Let the user interact with ~thedeSign

Irs hard for designers to let go. After all, what's the point of if you let Joe Public change everything of changing once they get it. Text nows, their hands on it7 There has to be a way to design not just the original but also the user's experience images slide. You'll find a way.

Embrace the challenge of setting yourself apart

a die-cut cover,

C4: Did you handle the use of photography working with statlc print?


to when

What used to set a magazine or a piece of print apart was its daring use of the medium, such as foil block typography, expensive paper stock. The same will be true for theiPad There is a need for work which has the confidence and flair to reassure subscribers that they made a good decision.

MH: We loved the device because great photography is such a big part of GQ. Nothing has changed in how we commission work. Rather, we are able on the iPad to create deeper slide shows of the work.

C4: Does having a new set of Interactions design decisions1

effect your

MH: Absolutely, because now we can think about creating a layout that will be different from anything you can do with print.

a new interactive

effort with reward

image grid on Wednesday ...but you have to think Can you keep up that produaion

You could produce a video on Monday, animate on Tuesday, create about sustainability. schedule? ..

Do people want you

Early feedback suggest they do not want

endless bells and whistles, just bursts of them.

WNW complJIffilU:;,co


The creative pro's guide to iPad--



Think carefully about information


Think information design

design. On the web people are they want - that's why in a different manner.

very often surgical about the information experience then they consume information

they search for it. If iPad users are happy simply enjoying the It's pre senta tio n needs to reflect thi s,

The iPad'$ resources are



File size is the new page huge files, while others are content volume

size. Some users are happy to download

Computer Arts: Why is the iPad important to you at VJVmag'i Campion Prlmm:The thing I used to leave out of my definition of what a magazine is was that it's portable. In some ways, the ephemeral nature of a magazine is important The iPad has made the digital magazine portable. We no longer have to explain what a digital magazine is. The iPad has brought a Lotof enthusiasm to our type of content. CA: What were your ambitions for V1Vmagon the iPad! CP: We knew the iPad launch was monumental so we wanted to have something that would rise to the challenge. What we wanted to do was redefine the entire language by which the narrative of a magazine could be told. CA: You used video and anbnation to achieve thatY CP: A magazine normally has an opening spread which says 'Hello, here is our contenf.lfyou take that entire concept and add moving images, you have a very different proposition. So we liked the idea that we could lure someone in to the content by giving them this foundation. Sustainability of that is a hard one, though - the question becomes: For all the extra effort, are we getting the reader adoption? CA: What will make people pay for content on the iPad! CP:There used to be the 'republic of publishing', made up of all the big publishers, and the way they could distinguish themselves from everyone else was by having higher production values. Now, when we move onto the web, there's so much content created by anyone who wants to that the republic has to compete With the democracy. And the iPad is a great equaliser, Content that hasn't been honed by professionals stiIllooks pretty damn good. So we have to compete with that. What is the extra benefit of consuming a product made by professionals? We want to produce something so perfectly executed that you immediately understand it has been created with care. We may not have the exact answer yet but we will keep tryingto establish that extra value can only be had from something created by professionals. I think there's a lot of people out there wrestling with that same question.

more reluctant. You have to And a balance tha t works for your The same goes for the pay-off between and quality.


Think of advertisers as partners

Advertising is going to be important to iPad developers, but it needs to be done properly, just 'like the content itself. Flashing banner ads have always been an eyesore on the web; just porting that to the iPad certainly isn't going to work. You need to work with advert isln 9 partn e rs to en su re a sea mlessi nteg ratio n

The iPad is too new for there to be definitive


Fail better next time

rights and wrongs about failures.

relating to it, so don't cripple your work by worrying

Thy will happen. The trick is to learn from them and produce that either succeeds next time, or the time after.

Beware copyright issues

infringement. Using icons, thet belong to Apple will material.


Apple is very strict about copyright images or other design elements

get your app rejected from the App Store. The same worries are the last thing you need close to a deadline!

goes For music, moving image and other copyrighted Copyright

34--The creattve pro's guide to iPad



_ Expert design tutorials _ The best new artwork _ Top interviews and features _Inspirational behind-the-scenes access _Industry and business advice _ Subscribe now at:

,w.W_W.,C_Q_mputerarts,_cQ .•uk

,-. iPad designer profile


ustwo co-iouncer Sin"

lead developer Vidor and "'<:ond co-founder M~I,

Discover how the self styled 'studio of dreams' made a smooth transition from iPhone to iPad at the cutting edge of the perpetually cool-hunting app market
Down a ba.ckstreet in london's a~hingly cool locale of Shored itch lives an anomaly amongst
a,pp designers. developer Forget any ideas of stuffy types when it comes to us two. Man Miller - better known

Mills dubs this 'profreshlon' - a desirable fu sion of profess ianal isrn. fresh ness and passion. Started five years ago with two sta ff (M iIIsand co- fau nder Joh n Sinclair, AKA Sinx) and a £5000 loan, ustwo has grown into a thriving operation, offices in london with and Malmo and new ,-

outposts set for San Francisco and Tokyo. "To many on the outside, we're still a two-man band creating small but original. admits Mills. "In reality, we're a on high-profile digital concepts for some side of the applications;

50-strong studio working next-generation

of the biggest brands in the world." Irs this commercial business that generates the cash to conceive, develop and deliver the innovative synonymous apps that are faS! becoming with the ustwo brand, such as Granimator for iPad. wallpaper with leading Airside,

"We call ourselves the 'studio of dreams"

the recently launched

says co-founder

An immersive sound-based creator made in collaboration

as Mills_ Just take a look at and you can see why.



designers and illustrators including (UX) Granimator

Most user experience too senously'we

Pete Fowler, RexBox and James Joyce, takes the studio'S iPhone 'In the ultimate tap into the latest'gold bandwagon isn't offerings to the next level. industry, Mills suggests, trying too hard to rush'trend

studios, Mills argues, take themselves far create experiences that shrugs. "We're as phrases, we'd want ourselves;'he

much the users of our work as the creators," Adding to hi, folio of portmanteau


The creative pro's goide to iPad

ustwo --,

iPad designer profile

01- Early 'teratior»of the Gra~im;no' UI we", designed to t>;.", cool as possible; but the lea m toned it down when they rBlllsed \hilr !his risked alienating potential users

02-03--- Starting a, an abstract Flash e>cperimenl [n the stud iO, Granimator developed imo a fu Iiy-Aedged Pad "PP.lt5 minimal delign pur, all \he focus on the graphic esseis


l ". '.



02 the way to make a lasting mark. So how does ustwo go about getting strengths a trendsening app off the ground? "One of our is that we don't follow the 'normal' route to release: he explains. "We create what we want to produce, not what the world thinks it wants. More than likely it's what they don't want, but through are happy to buy anyway." Despite the recent spat between Apple and Adobe about the Flash (55 packager, Flash remains an integral part of the prototypinq established process, enabling designers for an was never to test ideas quickly - although codebase work in Objective-( impulse the studio's first iPad offering: "Having the extra screen-size did change things design wise; he reflects. "Concepts previously not possible on the iPhone can now be pursued, and Granimator example or that'The Inkstrumental, is a great first iPad app From the was a concept around the

creators of Phone hits MouthOFf and Granimator that had already been "bubbling studio" Forsome time. "It started a while ago as an abstract Flash experiment, where you could we knew draw shapes and so on" Laffe rs continues. "When the iPad was announced, therefore Granimator perfect one to go for." Starting out as a simple drawing. tool fo r users to (rea te a colo u rfu I background graphic for their iPad, the app we wanted to be there for the launch, and seemed like the

studio like ustwo the solid

going to change, and the studio boast, an equal mix of designers and developers. Lead designer Andy Lafferty (AKA Laffers) enjoyed, the challenge of tackling

"We create what we want to produce, not what the world thinks it wants. More than likely it's what they don't want, but through impulse are happy to buy anyway." Mills

38 --The

creattve pro's guide to iPad


A day in
ustwo co-founder

the life of Mills


really came alive when the idea of bespoke arnstpacks'was mooted. "We approached some designers and illustrators who we respect and love, and they all started saying yes;he reveals. "It snowballed development anticipated emulator designing experience, from there: Laffers admits the design and was a race against time tablet. ''We also only had an to work with, so we were in the dark, without an iPad to before the release date of Apple's much-

Big, bold, simple and intuitive are laffers' golden design rules when working in this space - but he admits that even his experienced design team got a little dazzled by iPad magic at first. "When we first did the interface design for Granimator we went for quite an aloof approach." he recalls. "It was as all about being as cool as possible, so you only truly understood it was about by playing and engaging it. After some user testing, we quickly realised that this alienated and confused a huge proportion of users - basically anyone who wasn't interested in interface design." With thousands of rival apps to catch the eye of the nckle cool-hunter, don't have long: to pique someones interest. "If people don't understand using your app, they'll probably what's going on within the first two minutes of never use you what with

test it on: he continues. "From previous this is always a big risk, and
k, soon as the iPad was released

usually ends in tears" in the US, ustwo had already submi tted the app. "We also got one shipped over to test Granimator on it,"grins laffers. 'Let's just of cloth say there was a little touching going on."

06.00_ Woken by my daughter Gracie. 06:30_ Check PositionApp to see how apps are charting worldwide. 06:35_ Go through emails on the Tube. 07:00_ Get to the studio: have a strong coffee (no milk). 07:10_ Meeting with Sinx to discuss the day ahead. 07:30_ Go through emails, tweet, and then tweet some more. 09:30_ iPhone developer meeting. 09:58_ Phone call from elient with an idea for an app, but no money. 18:37 Check app sales from previous day. _ Celebrate or cry. 10:45_ Make a Granimator composition, and upload it. TWeet. 18:50_ Look over user creations on 11:00_ Eat lunch at desk over email. 11:20_ Work with Steve on articles related toappPR. 12:30_ Meeting with client re: possible iPad project. 13:30_ Prepare for talk about app marketing. TWeet. 15:00_ Check concepts for new game ideas. 18:00_ Test our latest application for bugs. 18:30_ Contemplate the need for a drink from the beer fridge. 17:00_ Download some apps and games from iThnes. 17:15_ Play the games, and take notes. 18:00_ Come up with app ideas while drinking beer or bean cream. 19:30_ Discuss the state of our apps; get frustrated by inability to sell. 20:00_ Go home, reading emails on the way. 20.40_ Eat dinner with my wife Lisa, then try to relax.


The creative pro's guide to iPad-----


,-. iPad designer profile

04~_The ustwo team worked with Jon Burgennan to prod uce the hit Inkstrurnental app, The ill",lRIlOf al'" created a bespoke mural ror the uSEwo;tl.Jdiowall


As the nome

sugges15. stwo ~n u
will' just two fourl<ling member> - Mill, and 51"" - but has ,irlCe expa nded to co mpri5e 50 staff


40-- ~The creative pro's guide to iPad
WIJVVY com OLJreraas m LJ k

ustwo --,

What's Granimat.or about?

at a glance
Adding sound
wallpaper creator, In a fully across the Granimatm is wonderfully simple to use - you just select and drag different graphic elements around the srreen to

Granimator drag

is a sound-based

immersive touch and sound experience, users tap, pinch and

a range

of styles, shapes and backgrounds

create interesting
played by tapping

looking wallpapers.

Best of all, each

screen to create visual compositions key is never to let anyone "We aim to amaze.'

and souncscapes. "The u5,"declares Mills.

element also represents a different sound that can be the screen. Pinching can tweak the your masterpiece. sound's pitch to (literally) fine-tune


Bespoke artist packs

"Too many stud los release a continuous stream of similar looking work," argues Mills, "Our ho use styl e is for each pro j eel 'to be di fferent." Granirnator offers a selection of bespoke artist 'packs' that collect graphical elements from

Milking the social web, GranimaIOr has an extensive online presence at Grantrnatorcorn to encourage user uploecs, "Sharing is loving," adds Victor. "First and foremost we made it easy to create and interact, Then we made it easy for people to show off their creations while spreading the word of the app"


the likes of Airside and Pete Fowler, The app is free, but pac ks are sold th roug h in-app,

Simple, tactile interfac.e

The team is particularly multi-touch drawing proud of the pinch interaction and capability: "Both work really well with minimal,

th e assets on the scree n,"exp Iain s developer Victor Essn eft. "The interface is reasonably populated

so when

the menu is

with the collaborator's

assets, it really allows

them to stand out;' adds designer Laffers,

it,"advises Laffers, who warns that it's dangerous ground to assume complacently that your target audience will 'get'your app immediately, ''When designing understand user-testing Granimator I took it for granted that people would how things worked, simply process was a valuable because I did," he confesses - and the wake-up call "When we came back to the interface desrqn.tbe were instructions everything

development weeks apiece.

projects down into a series of


will also spend a fair amount independently. "Design might be

short stages - or 'sprints' - that last a few "Because a designer doesn't know all the technical restrictions of the platform, it allows them to experiment lead developerVictor with concepts and designs more freely; reasons Essnert, "But ideas are too crazy or can bring co n ste n tly 5 ha red and disc u ssed with the developers, so anything unfeaSible is caught early on:' Conversely, developers a better understanding capabilities of the technical

of time working

concepts and mood-boards developer

worked on by the designer while the works on technical prototypes and feasibility studies,"Victor continues "Of course, while implementing we often lind that we need to change and adapt the designs," "It's important fluid and adaptable to keep the design to deal with any issues platform as the iPad

first things we added

and text exp'laining what

that arise, which is often the case on such a new and fast-changing or iPhone - and it's essential for the designer to be a part of the implementation bedroom process too' hitting the big time, While there are stories of developers Mills believes that as the market begins to satu rate spec iaIised studi os will prove

was It was lucky that our UX Of course, the other critical

team was there to rein us in:' reIatton sh ipin th e app crea tion process is between the designers and the developers system called who actually make the thing tick, and ustwo uses a management Agile Serum, which breaks software

to the table. "We tend to know

more about the hidden features, and often come up with ideas for features based on thiS,"says Victor, "whkh device to its limits:' During the initial conceptualisation, the designer and helps to push the



The creative pro's guide to iPad------41

,-. iPad designer profile

08....--- The aW" dot (J, dotdot Wand dotdotdOl I_I were all·(o·noe.lved .• designedi an d developed' in 46 hour s, "They were an experiment in simple yet hig hly addictive accelerometerbased casual gaming: saY'

Mill~'1he names them,elvel W<'re utterly uniqLJe. and ,t.fbsequently impossible to find in the AppStore."

O!j__ Use" of the I nkstrume(l\al epo ran compile their own band of eight Jon ehera cters, each of which m1ikel;~ own uniquerour'lci

10-11 __ Creating what they wanl to create rather !h~n wh~t they [hink will necessarily sell ustwo uses enjoyment a. the litmus test for wh e ther an app sl;ould go intO production



"The true battle is to drive awareness. Our stories are the power behind our great releases." Mills


Thecreative pro's guide to iPad

WIJVVY com OLJreraas m L J k

ustwo --,

Ail'Side wwwairsidecouk _ Working across graphic design, illustration, motion and interactive, creative studio Airside proved well placed to contribute a selection of assets to the Granimator project.

Pete Fowler
WWW,monsIerisrn net _ Psychedelic creature creator Fowler bundled plenty of background elements with his characters, even offering to make all the accompanying monster sounds himself. M01IIngBrands wwwrnovingbrands,corn _ With outposts in London, Zurich, Tokyo and San Francisco, award-winning branding and graphic design studio Moving Brands also contributed a bundle of assets to the project.

Bilro Destruct
wwwburodestruct.oet _ Starting life as an initiative to promote young artists, Biiro Destruct has grown into a world-renowned studio that blurs the boundaries between art and graphic design.

their worth. Key investment

priorities for UX 11 "Saying that, there will always be space for quirky, fun and well-designed creations by bedroom Mills in conclusion. small applications developers" says "The key is to focus on to start With, to get

ustwo dearly include the dedicated creative team - evenly split between developers - but also marketing desiq n e rs, vis ua Ides i9 ners, ani rna tors and and PR talent. "One battle is to release an app, but the true battle is then to drive the awareness." Mills insists, "Our stories are the power behind our great releases." When you compare it with the overAowing iPhone app market, it's clear that the iPad app industry is very much still in its infancy: "It's an exciting time, with developers crowded moving to capitalise on the less marketplace;' Mills notes.The

James JoYce - London-based designer Joyce produces limited-edition prints of his work from his design studio One Fine Day. ReXBoX wwwrexbox[.ouk _ Little Big Planet creator Rex Crowle, AKARexBox, blended illustrations, photographic elements and patterns with his trademark characters for his colourful Granimator pack.

them out there, and let the public feed back Use each relea se a s a lea rn ing platform, Success will most probably not come to you right away, but you should be proud that your creation made it onto the App Store:

initial release phase saw games and novelty apps pushed to the top billing, but as the store progresses and more apps are released, the path to glory is getting to pursue." harder



The creative pro's guide to iPad-----43


The creative pro's guide to iPad

We investigate whether the iPad can really cut it as a truly professional creative tool, or whether it's better enjoyed as a consumer toy
Ever since the .iPad was announced, there has been much debate over its potential as a creative device. Some have
dismissed: the iPad as merely a tool for consumption multitude embraced sceptical about it but are still to be convinced; it wholeheartedly you be more creative and productive, show off work to potential digital portfolio. The iPad is hardly a desktop or laptop replacement it stands, and the real workhorse for wondering applications deployment, applications as aren't available for it. and, for a of reasons, a barrier to creativity; others have been less while some have to help The iPad has the potential

and' is also a great way to

clients in its capacity as a mobile

Add to the mix the lack of Flash support and you might be forgiven how on earth an iPad can fit into a creative already available that, if not quite ready For commercial do pain t in the right direction, In addition, it's not aspects of a and' accounting ... professional's work at all. There are, however, a number of

always about creative work - the more mundane project such as planning, resource management can all be done with the iPad,


The creative pro's gUideto jPad--



Antony Mayfield, Senior Vice President of Social Media at believes that the iPadis surprisingly

"The technology

gets out of the way with the iPad, which is what creative on the iPad might be a

iCrossing and author of Me and My Web Shadow: How to Manage

creative work often requires. You'd think that getting Single-digit bit tricky. The interface has been massively simplined and the interface makes it difficult to be accurate. However, do a quick search for 'palnt'or 'draw'in the App Store and you'll find a host of applications. There's no doubt that the apps are simple, but the minimalist approach is what makes them somewhat addictive, Adobe Ideas is as simple as they come, with a simple colour palette, opacity control and a Single brush. However, for sketching out simple ideas it is incredibly powerful. Another is Sketchbook Pro, which takes the customisation options even further. Steve Caplin, swears by it with

Your Personal Reputation Online,

adept as a content comfortable relationship relationship

creation device, ":1 very much a creative [001; [is

he says, "lrn surprised by how much that's the case. It is to use in settings where you might relax, and the with images and text is direct and more inti mate with the computer." The iPad certainly is a new kind of device, and it may well take some time to bed down what exactly it's perfect for, but initial sales would suggest that it's going to be here for a while. There are further benefits that the iPad has over a traditional compact laptop or netbook that, though minor, reaHy change the way you interact with your work. Firstly there's the battery liFeand design; you have a battery that will last over a working the day and, in most cases, you'll have less clutter to take with you when you're on the go. Second is the fact that you're holding screen in your hands, It's a subtle difference, get closer to your work and, when showing really can put it in their hands. "Many will find that its lightness, in every sense, makes for a good, portable toolkit that combines the freedom of paper with the benefits of working direct to digital: says Mayfield. but it enables you to stuff to clients, you

somehow, with the mouse and keyboard removed from the

digital artist and author of many books on Photoshop, vast range of custornisable the a rtwork irrevoca b Iy"

already: "SketchBook Pro is a superb painting application, means we can build up images in stages without


brushes and support for layers, which ever damaging apps

Of course, it's not just the pai!nting and drawing that's great even for complex work. It'; an eiqht-track with a host of instruments

that can be useful to creattves. iSequence is a music sequencer sequencer and effects, and Caplin is a reqular user, and

Why? "With a keyboard sporring nearly full-size keys, a step editor and a huge range of built-in voices, it's hugely entertaining surprisingly powerful: he admits. We're sold.


The creative pro's guide to iPad

It's not all about producing

content for people, however, and works

and the iPad makes an excellent mteracnve notebook, and musician, and has a few suggestions prominent in his kit. "I highly recommend PaperDesk, which provides 'notebooks'

well as a research or coding tool. Craig Granell is a designer, writer for tools that are that people download into which you can type, going. Web quickfire

sketch and record audio; advises Granell. "For catching up on reading, designers should get an lnstapaper workflow edits to website code" There are of course much less creativs tasks that the iPad can manage too ~ applications the workflow like Projector make it easy to plan of a project. No matter how complex your task, you what's happening through the designers should check out FTPOnTheGo for on-the-move

can use an app like Projector to keep track of what resources are being used where, and monitor napkin'ideas lifecycle of the project, The iPad comes in useful for those 'back of a too, enabling you to record your thoughts qu:ickly."1 find it best for


writing at speed, and also

for planning or working out ideas, using the excellent iThoughtsHD, Outliner and Omnigraffle apps" notes Antony Mayfield. Many of you will have to send PDF proofs to clients, and here too there's already an app that can help. iAnnotate comprehensive PDF commenting offers ... tools, enabling you to comment

and respond to clients no matter where you are. There are


The creative pro's gUide to iPad--


,.,. accounting

and invoicing applications

too, to help you keep available is quite large, on the go are

track of what you're owed as well as what you've spent The list of third-party although the built-in applications of note. While managing things you probably applications from Apple are definitely worthy

your email and browsing

take for granted, the Photos app can be used and irs ability to play for your work, In

to create a very impressive mobile portfolio, videos also makes it an excellent platform projector departure consuming immediate, for presentations,

addition, Keynote is available and can output the feed to a The iPad is still in its infancy, but already i,t has made a from the supposition information that it would be better suired to than creating it."1 didn't entirely get it at

first;' Craig Grannel admits. "The impact of the iPhone was and it banished other phones, music players and basic portable games systems, and soon became a kind of'hub'for

work activity. It took a week or so before the iPad had anywhere near the same effect. Now I'm using it regularly, though, and I think it's an essential device to have around," Increased use of the iPad in the real world will no doubt enable it to secure its position as a. powerful, and maybe even essential, creative tool.


creattve guide to iPad pro's


• In depth

ere a ves
The iPad isn't just a consumption device. It's a doing device too. Here are the top apps for designers looking to get creative
let's face lt, you'd have to have been ensconced in a decommissioned nuclear somewhere out on the Russian steppes for the UK launch of Apple's iPad to have passed you by. We may have had to wait a little longer than our American cousins for our chance tolay hands on Jony lve's newest design wonder, but it has only served to heighten anticipation. With this in mind, many of you will now be asking what the iPad can offer you. Not only is this the perfect way to justify bagging yourself an iPad, but it's probably you design and work. In the next few pages we're going to do our best to reveal exactly what the iPad can do for digital designers and artists; and, if you already own one, we'll: show you the apps you can't afford to pass also born out of a genuine interest in whether the iPad can have an impact on how


50-· --

The creative pro's gUide to iPad

WLNVY rom OLJEfraas m l J k

iPad apps for designers.

;: MI'I1tU.~_

shows up in Finder or My Computer. will automatically

Dropbox is a cross-platform app that enables you to back-up, sync and share files. Once you've installed Dropbox on your Mac or Pc. a new folder is created that Anything placed in that folder types at back-up to the cloud. The iPad app enables you and send links so you can share and colleagues.




to access these files, View many of them (see supported, documents Price: Free URL: www.dfoobox com with clients, collaborators

sketch out ideas. There's support for a 'Draw' and 'Photo' layer, so you can sketch over previous work and photos. If you're stuck for inspiration, there's even the option to generate a colour palette based on a photo or illustration, Ptice;Free URL: wwwadobe com

Adobe Ideas
As you may have guessed from the name, Adobe Ideas graphical work. This free isn't about creating high-end app from Adobe provides you with a canvas to quickly

graduate students Ankit Gupta and Akshay Kothari have redressed the balance, Pulse pulls feeds into a text/image navigated both vertically and horizontally. (and find), and it's our reader of choice! Price: £239 URL~ gird, which can be Feeds are a cinch to add


Keep,in9 up with the latest design news isn't easy, and, to .• date, apps that aggregate RSSnews feeds have had the

aesthetic appeal of a cow's arse. Thankfully, Stanford

Computer Arts lltle







iMockups has been created to enable the quick and easy of wlrefrarnes and layouts, especially for sites


and apps. Once you get around the (already grating) steel interface, there are bags of noteworthy including text areas, blocks means that, rather than iMockups could

features. The ability to drag and drop elements image holders and navigation helping: supplement your current workflow,

actually play an integral role in how you tackle new projects. Price: £5,99 URL:.I'.'I:ICL~ ...

The creative pro's guide to jPad--



spacinQl). Multi-touch painting

Brushes great app ifY.ou.want a p.ainting tOOl.for the iPad. There's a decent colour palette, and you can choose from

a selection of brushes (and adjust size, opacity and enables you to naviqate your canvas and

zoom in for detailed work. There's even the option to replay your and export it

as a QuickTime

movie. However, those

looking for more control may want to consider a stylus, such as the Pogo Touch at Cost: £2.99






PKiIIo.r. ..

_ ..
(there is also online compatibility and this app offers


Air Sharing HD
and the iPad, wi th

If you want to have the option of movinQl files back and

forth between your primary computer

the option to view, share and print, this could be for you with Dropbox, iDisk and issue on the iPad, You~1Ineed to be running OS X

WebDAV) The inability to print is a contentious

a workaround.

and have printer sharing enabled, though.

. - -- ..._~""-+ -0

Cost: £5.99 URL: wwwavatmo com/apQ5

.:.::::;-_ .....

_ ....

bash together website wireframes, diagrams, process charts or page layouts. Vou select a document context-sensitive wireframes joins between type, and OmoiGraffie makes in separate elements, automatically

OmniGraffie It"s effectively is one of those perennial Mac favourites that to the iPad . an ideas tool, that enables you to quickly makes a seamless and obvious transition

linking lines in diagrams and aligning shapes and elements or page layouts. Cost: £49.99 URL: wwwownigrolJPcom ·t.......

-~ ....



tasks, processes and resources involved. You can view via Gantt chart or resource, and there's upcoming support for dependency tasks together). linking (a way to link two or more codependent

Project manag.ement is not a sexy subject. It just isn't. re.motelY complex projects making sense ottbe various

However, .ifyou're overseeing

you'll need some wayof


Like we said, not sexy, but irs a cinch to use. Developer Cost: £8.99 URL: www.app4maccom

, .....(1


creattvepro's guide to iPad

iPad apps for desi.gners.

·~ .""



:""::~ ..... ~~

~~"'IIILU lt~""DIII:

~~""fl. u_-..ll_

.... ,_,""'_""

.~ ... · ... .I_~,

· --... .~
• .. ~I""'_'_'

:==-~::. .
1II_lIIiiIfrl_ 1II!_.I!IIi!'IIJ''' ll ___ "'O""


u __


~.IRIIWtl iI_[IIIIIIIIIII'" iIi"_IWlJ II. H.--:III!iIIIIll.f.t &.I ___ NII'IIIA'I

ti_ .... illl _li!"'Ionlllll_

1~~.aMI lto-lilillilll.illl

- :::

,_ -

-. ,,-


Air Display
Avatron Sofrware is in a unique position in this round-up, has not just one but two apps Featured as the company productivity, in our top 20. Uke Air Sharing, Air Display is all about and this app achieves this by transfonning follow

your iPad into a second, wireless display for your Mac. Install the app on your iPad, go to, the instructions and you're good to go. Developer URL:

Cost: £5.99

There's a free basic account (offering 40MB of uploads a month), but for 55-per·month, search optio n s, or $45 for the year. you get 500MB of tools and more powerful com uploads each month, collaboration


Eve.mote is a repository for all the little bits of disparate data you accrue from day to day, and as

such makes rt brilliantly easy to stay organised.

Developer URL: wwwevemote

Cost: Free/$5-per-month

• .. MindNode Cost: B.49

Mind-mapping may not be exciting, but it can be a that

handyernry point into a broader conundrum many developers and designers swear by. you're

makes the process brutally simple, whether

making a to-do list or complex order to your anarchic ideas.

business plan. JUSI dash out each

idea strand as a node, then push them around the canvas to bring' Developer URL: www

this, it's not an amazing accolade, as the competition Weighing app provides a new audience with the award-winning content found within the print publication. Developer URl:!ipad Cost: £2.99 per issue

Wired Reader
Developed using Adobe technology. the iPad app from Wired is one of the best examples of a digital rnaqazioe that we've seen thus far. Having said is pretty dire. design and

in at 500MB per issue (yes. you read that right) the Wired



The creative pro's gUide to iPad--- 53



........ -II!!.~


Phaidon Design Classics

iconic objects from the las! 200 years. You can or opt for a Coverflow browsing interface

Th.e edi.tors at design P.UbliShing house Pha.ido,n have collated images and description> of 1,000

search by description

that enables you to scroll quickly through items (and shave hours
from your project production came to be, it's all in this app Developer URL: time in the process). Whether you're interested in the origins of the Chopper or how the name Crayola

Cost: £J 1.99

technology: completely

Cool hunting
claims to be a 'daily curation

This app from the people behind covering the forefronts of design, culture and


I! essentially pulls the content found on the web into a design, whkh serves the content well. The apps free, and if you're looking for design inspiration and a

good example of how to repackage web content, it's definitely worth installing. Developer U RL: vVWW

C.ost: Free

interface enables you to schedule tasks, create projects and more, Things comes in three flavours (Mac. iPhone, iPad), each of which you have to pay for separately, Also, if you use it across multiple devices, there's no web-based syncing (only wi-Ii). Developer URL: www.culturedcode_com/things


People eitherlove the task management app

Things, or they think it's just another way to put off what you should be doing, The simple and intuitive

Cost: £, " .99

designers taking full advantage the iPad. and we fel,! that justified

Marvel Comics

You might be thinking What the heck does this of writing, this is one of the best examples of of the new possibilities offered by inclusion. Either view comic

app have to do with design71: However, at the time

pages in their entirety or swipe the screen to transition from panel to panel. It's free and you get a few sample comics. Check it out! Developer URL:

Cost: Free app, comics priced at £ 1.19


creattvero's guide to iPad p

iPad apps for desi.gners.

.. . _ including Developer

Sketchbook Pro
A.utod.eSk. is.a w.ell.-kno.wn player in th.e world desktop paint packages, and Autodesks Sketchbook Pro is now available
Of ...

on the

iPad. The

app offers a variety of paint tools, including

75 preset brushes for colour selection

pens and markers. You can edit brush ,E'nsitivity, layers. Is it the best in class? Probably.

customise colour swatches, use an eyedropper and work with multiple URL:

Cost: £4.99






. Developer

Air Video Server

serv.ers are great. We love them. No, seriO.usly. And Air Video Server is a great way to push video to iPads within your agency. Simply install the

software from the dev site on your Mac or PC (where the videos will reside), then install Air Video Server on each .iPad that you want to push video to. It's a great way to share video, and ensures valuable iPad disk space lsrrt taken up with work-related URL: wwwinmethod com/air-video movies.

Cost: £1.79

.. . Navigating Developer Cost: £0.59

FlickStackr is a really useful app for browsing photos and pinch/zoom. be easier, and the same carl be to browse throuqh the the photos irl your Flickr account, with the option to

swipe through

your photos couldn't

said for uploading.

But the really great [hi ng about FlickStackr is photos.

that you don't actually need a Flickr account millions of published URL: www

. feature-rich Developer of all, tt's free!


work via a website, thee,', a very good chance that you're using WordPress

to power the little blighter. The WordPress app

for the iPad enables you to add new posts whilst you're on the go, and you can also attach pictures to posts. It's not the most app we've ever seen, but it's intuitive URL: WWWlNQrdpresscom to use, and, best

Cost: Free


The creative pro's gUideto iPad---


I Me art Of Viaeog~
~""""""",-,-,,""""' ... 1h~1

Technique 0



PI. nand design you r owniPad app

64 Design

an app icon in Photoshop

72 Get to grip, with the excellenl Brushes app

_Discover how to design great iPad apps, create cool icons, optimise your site for iPad and much more by following our expert guides ...
58_ Design an app for tbeiPad
Expert workflow wireframing tips for and designing


Plan a website in iMockups

Use iPad to mock up a site and logo design to show clients

an iPad app in 15 steps

82 _ 64_ Create a scalable iPad icon

learn how

Use Things to get more done

Plan your time and complete creative projects using Things to your advantaqe

plan, design and

deploy your own app icon for use

76 Wi.eframe

you. site using iMockup'

on the iPad and App Store

86_ 68_ Design a website fit for iPad

learn the fundamental producing beautifully steps for designed

Behind the scenes: Wired's digital magazine

Scott Dadich on how the magazine took its co nte nts to dig ita I

and iPad-friendly websites

92_ 72 _ Learn to paint on iPad

Get to grip with Brushes, the dosest thing to a digital colour palette available

Behind the scenes; HelvetiNote

How Todd Berger and the cypher13 team created a note-taking aimed at designers app


Behind the scenes: Alice for iPad

Discover how Atomic Antelope brought lewis Carroll's children's

86 Behind the scenes on the Wired Reader

novel to life on the iPad

WNW Compl Jtffiurs.cO

I Ik

The Creativepro's gUideto iPad--


o Technique

Design anapp foriPad

Sarah Parmenter reveals her workflow tips for wireframing and designing iPad apps
iPhone and nowiPad are still relatively new mediums for designers to work i.n;considering how long we've had to hone and develop our skills as graphic and web designers, these devices are still very much in their infancy. In this tutorial I'll be taking you through the process of app for the Pad - nothing too fancy to: designing a train timetable

or complex, as we'll be focusing on the process and the'how

but Iwill show you basic principles you can port across to each project you work on. For the purposes of this tutorial, we're going to pretend we are pulling the train details in from a compatible API source.

Sarah Parmenter , Owner of Essex desig n swdio You Know Who. Sarah Parmenter ,peciali,e< in user im"rfaa> de,ign lOr "'<!bsiles. iPnOfie eoos and fPad oW>She founded the studio in 2001 See more of Sarah's work or


,k omvvvho


The creative pro's gUide to iPad

OLJEfraas m l J k

Design an app for iPad 0

Once you've got your app idea, you


need to ceteqorise it clearly, as this will determine what it looks like later on in the process. We can do this easily by using the Apple HIG (Human Interface Guidelines) graph, Serious Entertainment, Fun Entertainment, Utility, Serious and Fun tools all have a specific look and feel to their user interface, and they are all very different from one another. For this tutorial, we'll be designing a utility tool, so the dot on the graph will sit dead centre

Start by ensur,ing that the idea you've had for your iPad app doesn't already exist. If you come across something similar, you need to find a way to make your own app better and add your own u niq ue twist, The best way to do this research is simply by scanning through the iTunes store and looking at existing iPad apps.


Now that we have confirmed our idea and categorised' our app, we need to


down the key functions the app

will have. Doing this early is especially important when you're working within a team, because as the ideas start flowing it's easy for people to get carried away with just how many features need to be in version one. Apple calls this stage the creation of the 'application definition ADS for short statement: or ...



The creative pro's guide to iPad__


o Technique


JIIIiII!Il"'~ ~

ill t

~ ..... iIoI!'~ ... ~ ~~





05 We are making a utility application, and they normally only requ ire a single screen with an information screen on the back accessed via an information button in the screen's corner. If you are making any other kind of app, you'll require quite a few more screens. It's essential to cover how each of the screens interacts and reacts with the others. It is also especially helpful to pass this information on to onward developers; I call it the'App

It's tempting to skip the earlier steps

screens we think we'll need, as well as adding some user interface elemen ts, such as buttons, that the user will interact with. Pick the few features that will be most frequently used by the majority of your users, and which are most appropriate for the mobile context ofyourapp.

Funcrtonallty Walkthrough~

You can now start producing some wireframes. The key is to not produce


now that we have a really clear picture of what we will be working on, bu t don't - they are essential to the overall process. WeTI now move on to using pen and paper, the best and most inexpensive way to produce wlrefrarnes. We'll start by sketching out how many

them in too much detail; they are meant to be a step up from your paper sketches but only use block colours, block graphics, and don't get bogged down in the finer details.


creattve pro's guide to iPad

Design an app foriPadO

PrQ Ii p: Te mplatin g INhen Crf',1l m::1(:I Wlfdrom~ In Phoro~1 H.1f"J, .cnrJ be handy TO visua tse your a pp wil lun Il,e Pa<fs ·n\~rfa(~ In order to do ran download a PSD template lroru here: hnpiLl"i'd'N comj:lutcJ~n,[0 lIly'd~lW'fcllRi1d


As we are creating a utility app, the


It's essential that the information

we are

main graphical screen which shows the train times will be the focu s of our work. We don't need it to do ally thing but show us an approximate arrival time, a about departure time and information or delayed.

displaying is very clear and concise, and that we don't add in frivolous graphics or anything that could potentially confuse the user when they're viewing your app at a glance. Alternating the row colours and displaying large text for the destinations and times are all good user interface habits. The back information screen can be Apple standard and simply enable us to search for trains to add to our Favourltes'in utility app. 11 __ the

whether the train has been cancelled

about the graphical user interface,


Since Apple likes tangible user


At this stage we need to start thinking which is where the details matter. For these steps I am using Photoshop, but you can use your favourite graphics editor. I simply take a l024x768px ca nvas for the iPad, then start designing according to the wireframes and little snippets of information that I've already produced.

interfaces, we're going to make our new app resemble the kind of interface a user might already be familiar with for a train station timetable, As Forthe colour palette, we're going to use lots ofgrey, black, and briqht yellow and red. We will also add a number of custom buttons to indicate delayed and cancelled trains.

I'm using lots of subtle gradients, some textures and, most importantly, ensuring all information confusmq to the user. is available at a II!> glance and not hidden, obscured or


The creative pro's gUide to iPad---


o Technique

Pro tip: Help fil., Apple's own D~"" ope A~'eemem ond X(ode IDC ll"ve some Pll;:'l Ty ~trI{,~eu es and requ ..:non'), meke sur e you t ead and understand them What s morel checkout some oi the other developer gUide 5 ava,ldb e 1hrough Apple, surh ~, the Pmg rarnm Ing GUide" 11 Hum" n Imerl oC~ d Gu delines, You C::Indownload them here:



r1Qpll~ CQ

m/fpadfscl ~I



_ ._ _ _...--c.__ ~"""'oIiIMI~"""lIrnIiIIlt!o!
.~ _ _'I""

,....,.,.If!I!IilIIi~~~~IbI!~~ ....



l!liiI~"'''~D'~~UI~,''',,", Itf"c.tIOII!id'II"IIIIIIIi:llld!~iZ4M.r«I.1i'''ttIiIi:i.



... 0iJ00



~ ...... -*'




14 lfyou are nor developing the app yourself, you're going to need to


produce some clear instructions to pass on to your developer" I've put together a comprehensive

single screen of how

A ~lqEf HU~W'jVlN cr HOIV1Il[ MAI11scntrs ------


Iim'K,; --

the app wi II work, covering all eventualities I can foresee and also documented the developer. how the app works for


Now is the time to think about icons; these are what will going to set your


any text and should use some of the




If possible, your icons shouldn't contain same texru res and gradien rs that you have used in your app. You want to give potential buyers a feel Forthe high quality of the UI that you have gone to the trouble of desiq ning. Don't forget your Spotlight (29x29px),. iPad (72x72px) and Large (S12x512px) icons when designing your set.

We then package everythi ng we've got - ou r wlrefrarnes, full UI (norma.lly as a PSD) and icons - then place them into a folder and neatlylabel everything. You

app apart from other apps on the App Store. Think of a single, defined silhouette of what your app represents, and start sketching ideas from there.

may also need to pre-slice your UI into _PNGfiles for onward development


creattvepro's guide to iPad

movie credits ......,......... ......

Make better

40 cool features you probably dont use...


o Technique

Createa scala e iPadicon

Kevin Andersson demonstrates how to rustle up your own icon for iPad and the iTunes App Store
In th is tutorlal, textures resulting as scalable we will be creating everything but shape elemen.ts in Photoshop, in an icon for the ifunes Store. This method will the icon for different sizes. depth by using layer styles. units to use pixels (if you don't want to with the

enable us to quickly optimise and we will grve everything by configuring Photoshop

Everything will be made by using simple shapes in Photoshop,

k, the iPad display is made up by pixels, we'll start out

mess with your settlnqs.just skip ahead and continue main tutorial). Select Photoshop>Preferences>Units Slices', and set the 'Gridline every' amount

& Rulers and update both Rulers and Type to 'Pixels: Select 'Guides, Grid &
to 10 pixels, with a

'Subdivisions'value of 10.

Kevi n Andersson

Danish jrJterface de,lgner and developer Kevin ~onts, which d~"""alywhal~

Create a new Photoshop 512x51 2px. Set resolution Make the background Create a rounded document. rectangle document to 132ppi. with a transparent.


0'Now let's add some styles to that background.

Select the layer, click Add

Layer Style and select 'Inner Glow' with the colour val ues R: 230, G: 175, B: 106 at 45% opacity, 180px, and with Overlay as the blend mode. Now add a Gradient Overlay layer style with Soft Ught as the blend mode, at 72% opacity and at a 1OS-degree angle.

says ~ does: creates UJ1lq...e icon, fo, diems

in such dOte,,,, industries a'Sair travel and wine IaSlir>g. See e><lmpleso~ jeoOOt;,jgo dk

corner radius of 87px at the size of your Wi rh the rectanqle selected, create a new solid colour with the val ues R: 236, G: 222, B: 164. The solid colour should be masked with the rounded rectangle.


creattve pro's guide to iPad


Create a scalable iPad iconO





-~ -...... ,~


Create a new rectangle shape by holding rectangle AltiOpt and 512 pixels hig h. Duplicate the shape to the right. With the selected, create the

shape, 5px wide and dragging

G: 176 and B: 52. Set Blend Mode as


Add Inner Glow, colour values R: 209, Linear Dodge, Opacity at 5% and Size at

1OOPK Add a standard Gradient Overlay

solid with Blend Mode as Soft light, Opacity at 53% and at 105 degrees. Create a new layer group underneath rectang Ie layer you just made. the brown

a. new

colour from your Layers panel with the val ues R: 194, G: 103, B: 7R Set Opacity to 60%, Duplicate the layer and rotate the the lines 90 degrees. Double-dick val ues to blue lines. 04, Now we are going to add the top part of the notepad. rectangle Create another selected, create a 512px wide and 140px high. _

solid colour layer and change colour

OuMake a new rectanqle solid colour with the values R: 236,

and create a new

Create a new


R: 89,

G: 119, B: 164. Duplicate


above the torn

and drag the line until you have nine

paper layers, Create a new solid colour from your layers panel with the values

G: 222, B: 164. With the Pen tool, add vectors along the lower part of the rectangle to make it look like tom paper. Add a Drop Shadow layer style (colour val ues R: l' 70, G: 93, B: 15; Opacity 45%; Distance Spx; Size 8px; Noise 2%). Add an Inner Glow layer

R: 0, G: 0, B: O. Add a Drop Shadow layer style (Colour values R: 123, G: 64, B: 5;

Blend Mode Mu'ltiply; Opacity 70%; Distance 1Opx; Size 20px; Noise 2%).

With the rectangle

Your Layers panel should look something like image


new solid colour from your Layers panel with the values R: 86, G: 64, 8: 39, Select the layer and add a new Drop Shadow layer style with Opacity at 65%, Distance at Spx and Angle at 90 degrees. Add an Inner Shadow with an Overlay blend mode at 20% opacity and an angle of -90 degrees.

style (Opacity 8%; Linear Dodge; colour

values R: 255, G: 255, 8: 190; Size 1 px) and a Gradient Overlay layer style (black
to white;

B above.


we Just need to add the final touches. Create a new layer group and call it Details, Create

90 degrees; Opaci ty 45%; Soft


Add a Stroke layer style (Size 1 px;

new rectangle, 512px

Colour values R: 247, G: 239, B: 220). Dupl icete the layerand flip it horizontally to add another torn page.

wide and 5px high, and fill it with a new solid colour with the values R: 36,

G: 64, B.: 39,



The creative pro's gUideto iPad---


o Technique







ThIS OPt'fltJi)n

......11cit. "h,

WIllI d:,,1"'" w~nt W Li,vo,' VtctOI'




C__ I ,


'8.tcl<gfO" lid'

V V.<t""

CorttenQ Only

. ,_ __
~Jt&~.IIilIt. ~"Qto:I;IIX~'ILJiI.'hI~

I :~.-





iPro tip,' Mas king Your fi I~ ,110uId 001 be masked, a, the iPad will add the mask aUlomo'lcaliy (. nd corwer [ .ran'p<1'ency [0 blackl




-- -~ -I!!I-_.._'_'"

-(l)-'---"~~-,----.-. ----


-8· .. ----e-----~-.I.' .-1!I!i



__ I

Select the layer and add a new Drop Shadow layer style, using white as a All colour, and Normal as the blend mode. Set Opacity to 17% and Distance to 1px. Add an Inner Shadow with Blend Mode at Multiply and Opacity at 46%, Set Distance to 2px and Size to 4px. 11

Now we need to align the shapes to the pixel grid and optimise some of the elements that are too detailed. First select the blue hori·zontallines with the Path Selection tool. Because some of the shapes are positioned on subplxel positions, they become blurry. Reposition the lines so that they align with the pixel grid, then select the two torn paper layers, Scale them to 200% of their current size, and move them down As the icon for the iTunes Store is masked automatically, with black added to all transparent areas, we need to add a background. Duplicate the yellow background. Select the shape and press De,lete, When prompted, select 'Delete Vector Mask',This will keep the fill layer but discard the mask



Create a new recta ngle, 40px wide and Spx high, Fill it with a'new solid colour with the values R: 181, G: 167, B: 110. Add a new Drop Shadow layer style, with Blend Mode at Multiply, Opacity at 60%, Di5tance at 1px, Size at 4px and Noise at 2px. Add Inner Shadow, with Blend Mode at Colour Burn, Opacity at

5 pixels.

Now change the Drop Shadow

opacity for the torn paper layers to 85%, Conqratulationsl You now have a full


resolution icon for the iTunes Store, and you're just a,few simple steps away from having yourPad icon too. Save the icon as a 24bit PNG file for the store front.

Double-click one of the Metal Band Sma-rtObjects. Change the Drop Shadow size to 0, then save and close the Smart Object. This will update all your Sma rt Dbjects. Finally, save the icon as a PNG file by selecting File>Save As and choosing PNG from the Format drop-down menu.

55%, Di5tanceat 1px and Size at 4px,

A Gradient Overlay will add a subtle metallic effect Set Blend Mode to Soft light, Opacity to 91 % and Style to ReAected, Set Angle to 0 degrees, and bump Scale up to 150%. Right-click this layer and convert it to a Smart Object. Duplicate the metal band across the Notepad so you have eight bands in totel



Now that we have ouriTunes Store icon, let's take a look at the iPad version. Save your document as a new PSD file. Select Image>lmage document Size and set the size to 72x72 p.ixels,


creattve pro's guide to iPad

o Technique

Designa websi e fit foriPad

With an ever-increasing iPad audience. knowing how to create a compatible site is essential. Matt Booth recommends 12 key tips for lPad-friendly site design
WIth the release of Apple'siPad, have a new way of browsing have to build iPad-compatible the internet. sites for optimum audiences viewing. now Accordingly, we


Here, we'll look at the specilics of designing a site that can be viewed on iPad, taking into account the device's screen dimensions. We'll also look at arranging your content in different ways to account for the change in orientation, This design will be a mobile version of a website, and when the iPad is spun from portrait to landscape and back again, the content's layout changes rather than the page being scaled, Your design could be used to work across both desktop and mobile devlces, or it could be used a, an alternative to an existing Flash site when viewed on iPad.

Man 15• dlgiliOl creab~ who has W{)rked with ageFides arou nd the globe b

brands such as R.ed Bull. Ollypso, Dr Marte", and Hoo>on

Jeans, HHoIio ca n be viewe:la\~ ~ajh!emplecom


creative pro'5 gUideto iPad


Design a website fit for iPad 0

'l'hat.'a right,



~GO ~-~.




• J. •


The creative pro's gUide to iPad---


o Technique

To move through the list ofT-shirt


surrounding my design 50 I can see


designs, the central part of this page has a horizontal scroll using touch-gesture panning. This ca n be done using the jQuery Swipe gesture. For technical details on this, read more at http)/ pi uginsJquery_com/project/swipe.

I like to have an outer image of an iPad exactly how it will look on the device, I don't do this with site designs for desktop, but they can't be viewed in both portrait and landscape modes, You can download an iPad template at www.computerarts,co,ukJde5ignforipad,

Like iPhone, iPad doesn't have the

roll-over mouse event that we're used

OLthat iPad has a screen resolution of


to using for desktop website design.

The first thing to get used to is the fact 1024x76S_That's the full screen, thouqh. When designing your site, you have to take into account the bar showing the time and power level, plus Ssfarrs address panel. This occupies up to 78px of viewable height dependi ng which way round you have the iPad. 03 Another point to remember is that, while browsing on iPad feels fast its processor isn't as powerful as that of your desktop machine, To maintain the speed, you need to cut back on excess graphical weiqht.!n this example, we use strong background colours rather than background images, and we've simplified the corners of the buttons. __

Think about the hornepaqes function, This site's purpose is to sell f-shirts, so

Secause of this, you shouldn't hide any content, controls or other elements that you would normally conceal within a desktop site to minimise space. So although we may have hidden the 'Buy Ir: and 'The Details' buttons until the user rolls over a T-shirt design within a desktop environment, on iPad they need to be visible at all times,

we go straight into the various designs. The design for the site makes good use of the available browser space" so there's no need to scroll down in order to see more content. The site's logo and header stay locked to the top of the screen, and the navigation bar stays locked across the bottom

The bottom panel contains other information for this site, such as the


A person's fingers are larger than a


'About' detai Is,sizing info and upcoming shirt designs, To retain the 'app' feel of the site, we don't leave the homepage to view the extra information - it all remains self-contained, When one of the links is clicked, the bottom panel pops up. Clicking the link again drops the panel back down.

mouse pointer, so there's the possibility that a user's hand could obscure what you want to show in your site design, Because of this, links, navigation elements and buttons shoo.Id be made particularly clear end large.


creattvero's guide to iPad p


Design a website fit foriPad 0




.. -.. __


09, We move to a different page when the Details button is clicked To show the transition, we've changed the


11 browser heigh t as possi,ble in your design, If this is the case, you cou Id move items to d ifferen t parts of the page, such as the navtqetion or ad banners. We've moved the product


You may need as much of the available

background colour. To keep the page clear of clutter, the bottom panel is removed, wh ill" the images are navigated through in exactly the same way as on the main site page,

details to the right when in landscape mode, allowing the product images to stay the same size.We still scroll through them in the same way, though.

Tes! you. ,i!e de, ig n You can vlew your site design by using an ""lem,,1 app I,e Iv.View by Nkholas Zambelli, This en"bl., you In to posmon a VI 11'1.1 :JI iP,a around on youl sceen while vieWing what's wilhln Th~ IPad, I V~ are".


Take a look at what happens when you turn the iPad to landscape view, When on the front page, the layout changes, but as we've allowed for this everything still fits, However, when we open the bottom panel we move the product images up beneath the header. Clicking outside the panel closes the panel. This process helps to reinforce userfamiliarity with the site no matter what Format it's viewed in, Check the look of your site regularly.. You can view your design as it would look by exporti nq the design as a series of JPEGs and syncing them to your iPad, enabling you [0 view them from your Photos app

WNW complJIffilU:;,co


The creative pro's gUide to iPad-----71

o Techn.ique

Getto gripswith Brushes

Visual development artist Goro Fujita shows you how to create stunning digital concept art on the iPad using the Brushes app
Brushes is arguably the fastest and most intuitive painting application on iPadright now. There are other
pa inti n9' appl lcarlon s,such as Aurodesk's exce IIent Sketch Book Pro, but Brushes is my personal favourite because it's very simple and easy to use. In this tutoriali'll walk you through how I created the Head to the App image on the right - called 'Market Street' ~ in Brushes. I also used a Pogo Sketch Stylus (see Store to purchase Brushes ~ it only costs £4.99 - and get painting!


- Concept ernst aM
3D ~nima\orGoro Fu~ta born in Japan, and moved to Germany he WilS two. He I, currently workinqas a vi ","I dewlopmmt arliS!at PDlIDreamWork5 in ROOwood City. USA To see mO!€ of hi, work



and Y'MY.chaQ!er·S6. bloospO! com

72--The creative pro's gUide to iP"d


Get to grips with Brushes0


The ereatlve pro's gUide toiPad--73

o Technique

02, in your painting. This means you can move, scale and rotate them without changing the background sketch underneath. I'm going to flatten the

Create another layer for the characters

layers eventually, but it's good to keep them all separate in the beginning so you can experiment with the composition as you go along.

icon (next to the Brush icon) at the bottom of the Brushes interface. For the i nlttelsketch. set a thin brush by sliding the size slider down. At this


background colour. That way I can work in both directions: highlights and shadows. If you start out with a. wh ite canvas at the beginning, you already have the brightest colour in your image and it's harder to work OUI the val ues once you start painting. Change the colour of the background to a neutral grey by using the Fill tool. Note thai the line drawing layer should always stay on top of other layers.



To get started, tap the Brush Properties

Once I'm satisfied with how the sketch looks, I Hatten the llne drawing layers and lower the opacity of the merged layer (both using the Layers panel). From this point on, I won't touch the line drawing layer again. I will simply use .it as my guide for the painting. As I move on with the illustration, I keep lowering the opacity of the Iine drawing layer until I don't need it any more.

stage you should have two layers: the background layer and the sketch layer. Set them up by clicking the Layers icon at the bottom of the interface. Notice that I'm not using white for the


creattve pro's guide to iPad


Get to grips with Brushes 0

Brushes Viewer

enables ycu [0 opel I your 'Pact pa'n(ing files 0 1 you Ma<: or K_ Download 1\ Irom wv-.wbrU51.. ", The or-~ ai,,, nab \ you 10 rl"y 1",,'1; yorn pd:inrll19 pJ!oce~..., ...,[~ 1119'If.r r~~ol LJl on ilnd 01", expert as or> U 100m pressed llFF iii". wh th ls ideal for print

t"] Ie Sru. 11~ V1f."W~a pp

I start blocking in the shadow areas using a larger brush. It's important to


remember to work on the entl re image with the same level of detail the whole time, That way you can stop worki ng whenever you choose to and the painting wi.lliook finished, Avoid getting carried away with the details too soon. Paint quickly, focusing on lighting and composition 05, Once I've finished painting the main shadow areas, I'm ready to move over to the highlights, I usually start working on the environment first. Once I have all my light sources and light directions laid down on the canvas, I can start working on the lighting of the various characters in the scene. instead. __


Always remind yourself where the light in the scene is coming from. Here, I have a strong key light coming from the upper right corner, a sky fill from the top and plenty of bounce light from the walls and the ground as well.l add more highlights and shadows,

OGadd a texture layer on top of the whole image. Therefore I create a new layer with Blend Mode set to Overlay. I choose a random texture brush and paint over the whole image. ,Ilike to experiment with colours and values to create different effects. Also, I've used the Overlay blend mode to push the warmth of the colours.

To linish the irnaqe, I create another layer with Blend Mode set to Overlay,


00Now I can start integrating I used for the environment, areas and the highlighted the characters. I use the same technique

To emphasise the level of deta,il, I like to

and use it to make some minor colour adjustments. Once I'm done with the painting, I can email the Brushes file to myself and open it using the Brushes Viewer apphcation

Starting with areas. I have

a mid tone, I then work on the shadow all the elements of the painting blocked in, so I can hide the line drawing layer as I no longer need to use it.

WNW complJIffilU:;,co


The creative pro's gUideto iPad---75

o Techn.ique

Plana websiein ·Mockups

Tom Sommerseth shows you how you can use Pad to qulddy mock up a site wireframe and logo design to show clients
Designers often use wireframes website before entering to visualise a a design application.

They are

used to determine functionality, which makes it easier for dients to focus on what the application does rather becoming preoccupied with colour and aesthetics. The iPad has introduced some really interesting tools for creatfves, whether it comes to sketching, drawing or, in this case, mock-ups for web design. In this tutorial. I will be looking at how to create an easy wireframe of your web design idea. iMockups has a decent library of elements that help you visualise a website. I will also be using two other apps: Harmonious, which I use for illustration, and SketchBook Pro,which I mainly use for colouring and grading. Sketching mock-ups like this takes just minutes, and moving objects around is a breeze. Download iMockups (it costs

£3.99) and get to it ..

o Graphic




de5igr>er. web dt'Sig",r and 3D artist Sommerseth runs Sam rnerseth Design togeth!'f with his girlfriend Malin. The pair also haw a Inong partnership with Adrem in(ernell a nd DesignHub Norway. They work with dient'

such asThe Norwegian Swlmmlng. Feder~tion. and Arsenol Norway (fanzineJ, and are involved with clients in renewable e",rgy. aochilecru '" and lhe maritime sector. \Ii'itlhemilt~ sgrnmewbde5.ign DQ


creative pro's gUideto iP"d


Plan a website in iMockups 0

Right, let's begin by creating the project and/or slide title. If you have several different art boards in your project library, it's wise to give each one a title that ma kes sense so you can identify it easily later, For example, 'Cllentnarnemainpage' ,'Clientna rne-aboutpaqe'

end so on.
01 __
0;>you can access an overview of the available elements in the iMockups library. If the library isn't present and _

Start by opening iMockups_ As you can see From the start-up screenlllustranon the main function of the app is to replace the pencil and stencil,

To get the most out of your mock-up,


your screen, slide it out lTom the right

start flicking

downwards/upwards ...

to see all the premade elements.


The creative pro's gUide toiPad--77

o Technique

Notjurt sites iMuckun, ( r ,P"d an be "I~d to create mock-l'r, fur 0 II nanr el 01de"'""1 anJ al'rllcaLlun;t a\ lust w~b,',,,, Ihere are library ltem fot PI",neaoo IPad apps, along w th W€b apps.u's a versat I~ tool to have wnon go ng 10 any d iem m "eli ng - yo u can quickly show elrents P05 il on ng wit hoU! reschedu Ing or erna ling at a later date tr, "1'0 great for putt ng de", down qu ck Iy while on tile move or in 11a! rneeunqs,

" •• ?

,.. M

Counter page, pre-launch


Launch '181<1

00Continue by dragging in the desired elements you need to create the mock-up for your client's approval, In this example, I've added more images

Start by dragging out the Web Browser element from the library. Position it where you want it on the canvas. You can use one of the four corners to rescale the element, and point and drag to reposition it. Tapping it brings up an Inspector that gives you more options.

(scaled down) and some text to explain what's going on, When adjusting position and size, there are guides to make the process easier.

Placeholder. You can lock the object to

The last thing to do is to share the

you've created with your

For the logo placement, create an Image its position or delete it easily, I often lock down the position so that the object Is safe from deletion, and so that there's chance of it being nudged away from where it should be.


client and/or colleaque. You can choose to either export the current page or the entire project with its subpaqes (Main Page, Home, Contact and so on).


creattve pro's guide to iPad


Plan a website in iMockupsO



00Here's the final design for the counter




The third app is SketchBook Pro. If you have decent drawing skills, you can create some really attractive work with this app. It supports various natural media brushes, layers and more. In this case, I only used it to COIOUT logo for the client approval. 11 This is the web version of the logo as the client approved it. Being an architecture firm and having orange as their siqnatu re colour, the cI lent liked the results with the 'S' and 'A·combining to create an orig;inal. geometric form. __

page; we've gone from mock-up to final design in a few simple steps. You can view a demo of the cou nter at httpJI adrernno/kunder/sundt-counter.


As an aside, I'd like to mention two other apps I use in my workflow. The fi rsr one is an amazing sketching app called Harmonious, which we used to sketch the logo for this cI ien t. The brushes in this app take some time to get used to, but the results are extremely crisp and very nice to look at.

WNW complJIffilU:;,co


The creative pro'sgUide to iPad-----79

, ar """'ts


_Expert design tutorials _The best new artwork _Top interviews and features _Inspirational behind-the-scenes access _Industry and business advice Subscribe now at:



o Technique

Get more donewith Things

Cultured Code's Things is a very powerful task management app that can help you plan your time and complete creative projects
Irrespective of how well-designed it is, you might think that dropping £11.99 ona glorified to-do list for your iPad is insane when the world contains Post-it notes.
But if you take the time to set Ihinqs up well, it can help make you more productive - which means you can make more money and be less stressed. The joy ofTh in gs is th at you can ch uck aII the tas ks you have to do - professionally, personally, whatever - into it, and as long as you've been disciplined enough to give each item a due date, and built ina bit of a warn in g for yo urself. you can just open the app each morning and be presented with a list of things you need to do that day. So here's our guide, especially for creative professionals, to ge tti ng sta rted with Th ing s for iPad.

Christopher Phin v Chris Phin started hi' profelsiOl'1allil'e as a 9 ",phi<: designer, but Is now a tech journallst. He sometimes lu,reptitioulty sniffs proofs and rerrerobers
the old day~!UJlit£

Though you can start just bashing in to-des straight organising



Once you've named your project, you can assign tags to it. Any task assigned to this project will have those tags applied automatically, making it easy to filter lists later. Tap Tags, then scroll to the bottom and tap Manage Tags. Add, nest and reorder at will.


and worry about

them all later, you get the features. Tap on

most out of Things if you use its filing and management Projects at the left, then the pi us sign at the top right to create a new project.



creattve pro's guide to iPad


Get more done with ThingsO


- ----.--~------ --~.Edl1 Oue- Oate -;;-

o MacFonnatsil.6

Z ellra


3 cloys !MI[",


Pre tip: 0 •• ktcp v.. rslon ft...sWei es the tPlJJ epp, theres e so 0!1 desktopvers on of Thing, lor Moe. COIl "9 [44 95, III rot ",,,,,1 y cheap bur" doe, have a myriad olfearures that enable you 10 ma nilge TO dos in a more lam Iar desktop environ.rrren[. The lacllrntyou can Sjrr>e il wnhthe ,Pol! "pO and your 1(,;. calender il ,-",'y I", \00



Compu!OI An., I.lure:

h JdtIM


o ".f... "'.IIou1I.

MAcFd ...... l .U.r.dedgn.J







Though individual tasks can have their own due dates, you can also set one for the entire project Tap Due Date, then spin the dials to set the date. You can also use the 'Show in Today' option to tell Things when it should alert you that the project is due,

Once you've set up your projects, start adding tasks, Make sure you've selected any entry at the left other tha n Projects, then tap the plus sign at the top right to create a new to-do. Give it a name, assign it a due date and tell Things when it should appear in Today. Tag it.,.

... and then tell Things where to file it. If you tap Create In then select one of your projects, as we've done, the task is assigned to that project and will have its tags applied. You can dump random tasks into the Inbox, or use Scheduled and Sometime. II!>

WNW complJIffilU:;,co


The creative pro's gUide to iPad-----


o Technique

o 8Ia!nsI:;; ......
_11'>">g' __
Cor"Ii"m _ ..... h Gr;/wn 1I1Jngo I« POd OlIo

.... -"

o ~ ... .... "" AI1.oIO


~ ~~unvnl ..... illI"Ij u


..... -" ......



Swtao _lOpna~


'_- .._- ..
" """





+ .- • '------:::1 r: I'I~' n.. ho ill

g '" ...

____ -

...• Z:a•••
1i!I-"IIIIIiiII!II ....


Ma.cFormat site redesign


resea rell 10< exlstJ'lI


COmnls.$kln PaUlI lor CMS


OQand added your tasks, you can tap on Next to get an overview of aII the tasks you have to do. split by project. Tasks not assigned to a project appear at the top of the Iist.The checkboxes for due tasks appear red.

After you've configured all your projects







To get a better idea of the things that you need to do sooner rather than later, tap the alarm clock icon at the top right to order tasks and projects by due date. (If you haven't given a task a due date, but have assigned it to a project, it inherits the project's date.)

Now all the work you put 'into creating tags and assigning them to projects and tasks pays off; tap the tag icon at the top righ t to filter to-des by tag, so you can concentrate on just client work, say. I'f,Iike us, you've nested your tags, you can select 'parent' tag,) 100.

Alternatively, you can tap Projects at the left to see all your added projects as a series of books; tap on one to focus on tasks for one particular job or client. like to-des. Projects can be made inactive by filing them in Scheduled with a start date in the future.


creattve pro's guide to iPad


Get more done with ThingsO


..... I!IO:rn.. lli

... ;..



Pro tip: S<l>ed ul in 9 tasks A 'lreill r"all re afTh ihe obi il)' I(}scnedule luture ""k,ar><1To-d"'.Th" me~~III"'l {you know vouve go a PI ojer. [ (Q do wirh a dead i Ie in 21 lew months, you can set Ih ing' 10 rem nd you about 11 l'J1en work needs TO be srsned he PIng you gClll out of you r head un lill"" time I~ r ght

"'J' ;



And here's where it all comes together. If you've been discipl:ined in flagging tasks and projects with due dates and 'Show in Today'alerts, you can open Things in the morning, tap Today, and lind ou t what you need to do, Note the manually-added task in yellow,

Then comes the good bit: simply tap



the little checkbox next to a task to tick it off the list Completed tasks are archived to the logbook daily, You can also mark off entire projects when they're done: if it contains uncompleted tasks, you'll get a warning,

Things uses the'Show in Today'field for each project and task to know when it needs to autornatkally show tasks in the Today tab. However, you can tap the star icon at the top right to move things to Today manually if you want to get them done sooner.

WNW compl11ffil[f:;.co


The creative pro's gUide to iPad--- 85

o Behind the scenes

The making of the Wtred Reader

V11red's creative director Scott Dadich explores his magazine's widelydiscussed and potentially game-changing

Behind the scenes

transition from print to iPad


The creative pro's guide to iPad

The making of the Wired ReaderO


team wo,ked closely with W1fE1i to come up with an .,se",,1 of tablet magazir>e layoulloois to plug d i,ec!ly into rhe ,oftware used to oeere the print tssoe

02 __ One otthe Will'ti re"m~ primary aim, wiU, the 1Mred Read.. Wil' far tt to o~rmaximum engagement whh a minimum of physic a 1anion

AboUlWlred So n F,rilnci,co,bo5ed Wrll'd i, a Conde NaSI titl~ that e>plores how new tech noIogie> affect our world, "', renowned for edgy design and agendarsel!ing editorial. 'Int~rilaJve design has certainly infllJ<'nced the graphic design that we've teen doing in recent Y"''': say, SCOIt Dadich, "'Ml1'n we l1arted pu~uil1g a tablel verslon of Will'd, Apple hadn't yE! hinted at tbe iPad: Wrredworked wi!h Adobe 10 prod uce a set of dig;tal publ i,hing tool' thet could sheke up (he wider mag.';"" induSiry at Ia rge_'Wrll'd is about the monthly ClJr<niC<1 of highly desigr>ed and !ightly imegra(e(l conterr; and not all magilLine:swill ,uil (he same app experience: Dadich 'eneas,'Su t t!;ere's room e~olJgh for illl poblshers 00 this plartorrn and tha was !:he bask i nten t of til i, projKL' wyywwjrrdCQuk



Wired is a magazine
changing begging experience our world,


how technology was that a digital


had to be presented simply and honestly, with calls to action that don't require special swipes or multi-touch maximum engagement with a minimum controls, We wanted of physical action: the

and our content

for the enhancements

could provide,

The Wired Reader creates a digital

easiest way to turn a 'page' and get to where you want to go. Readers understand the opportunity the way content and ads orient in but also take of a print, and we wanted to leverage that knowledge,

media experience that combines the de5ign quality - and fidelity " - of a print magazine with the convenience and Functionality of an interactive, connected video and connectivity product. photography, audio, I love having multidimensional

to design for the device. It's a re-imagining

magazine experience, not simply a porting over of a PDF into an iPad.I've seen those, and I don't think they work. We also thought a convention about how scrolling vertically is now of reading in a digital space, Reading a web page,

as tools in editorial storytelling. Many of

our infographics, for instance, are about complex processes and leverage a lot of data that we don't often have the room to let come alive in print. The iPad is a tremendous device, but it's onl:y the beginning. Tablets are going to be big, and it won't just be Apple involved, We wanted to find a way to author this content, and let it be read and viewed on all devices. Navigation inspiration in a minute orless, Content A crucial

while a bit fractured as a design experience, fundamentally involves moving from top to bottom on the Y-axis_That was worth capturing here.


I had actually been thinking about what Wired would look like in a touch interface ever since the iPhone came out. Last summer we partnered with Jeremy Clark and his Experience Design team at Adobe to create a new set of layout tools that plug diredly ... Our goal was walk-up usability, so readers could just lire up the app. dive in and be fully profioenr

WNW campI

JIffilU'i£O Ilk

The creative pro's gUide to iPad---


o Behind the scene

Key components: The Wired Reader at a glance

Scott Oadich shares his six favourite features of the iPad app that's got the magazine industry talking
Browser A puled-bao, contextual view thaI erlables re;lder<; 10gauge the length of a story aoo where it falls in relation to other stories and advertlsements, the Browser serves a'S an interactive ccrnenrs page [hat gives a I:<oad overview of each particular issue, 'This context is crucial 10 uOOer<;tandir<g the new dual-sxis navi9'loon s!rLK!.u,e; arg ues D.3dich, saubber Anothe.r irwallJable naviga!iooal ,tool that makes the molt of the IPad~ touch-screen interface. the Scf1.J bber is essentially a thumbrolktyle timeli"" view thar make' it qUid< and easy to ,cmll throogh conteru, akin [0 leafing [I>rough P<lges of the magazine: "Irs great for quick browsing, or Aipping back and forth to find content yolire .t"""dy fo miliar witl\·D.3dich notes,

A new fW1UFe for W~eds July 2010 [,sue" video thaI can play in line within the context of a layout - although the reader can sull take it full-screen if they wish. "We have a specfic amoum of development nrne bef"", each issue ,hips, so we're constantly pUlling new features in as we nnilh them: reveals Oadich, "By lhistime neet year, the app will be mum more ad""rI(ed~ 360" intera.ctive ads "We're gorng 10 use these a !ot: says. Dadich, ·You can see the same tool in use in two [mally different ways in the launch app: the Lego Lamborghini ad began as 800 separate phOtog'" phs, and we worked with Bryan (hrillie !or almost a month on the Mars sequence, rm really proud of that one:

1nlin~ video

other type, of content into a series of im<'iactiv. ~Iide,hows enables us to hilVe much more visually rich laycut~ PJ!ting grearer focus on design and !m.age q\Jolll)(' reasons Dadich "Plu~ th")l're alwaY' run for readers [0 explore, especially for infog.raphic.s." Dynami( coverflnes ooe of the most fnJwoting reader experiences in print is being hooked bya cover story then <!Juggling to firld it in,lde the mag.1t makes such a differerxe to See a cove<. read a grNt coverlln.e and then be able 10 tap ITand go Imlighl to the storf, Enthuses Dadich. "No more hunting aoo Aipping~


"'TrE abi~ty 10 nest ;"",g<» arid


The making of the Wired ReaderO

03....-- The iPad platform enables [he Wired tea m [Q add dirnensl on, 10th elr infographic. that .re impo"ible via the medium of print

()4___ The Wi"" Readl'r~rien(" is far beyond a djgit,,1 R?gurgi\atian of the print publicotioo. The cre~t""'s really milke th ~ mort 01 IPad functional.ity for audio, video and connectivity as well as lext and Im"ges

v.... orfPW!", P_D '''' ""'old u" bu, '~plmlly .11....

t'M-~dI i"Htifl..,Ir.thc!~ntllJ: pn::!Cf'HH-IlI_dlI..mii..I,

0"" blol"li< .... f,,",,' o:io!!IllIICIIee,.. ", .nl


r.o[k3Wt~ IIl«bM.Ilall.

,l'll!' bit

rmm.... lI>rot:rlnj;ilIIlIII""""'pr\<u""B"' l~ "',,_, b~':I iI:loo'lruUw !ilncr~ IDr,ft;lMf,table'th[rp.


03 .. into the software we use to make the print magazine, Our two teams really clicked, so we were off to the races. Since then we've been speaking several times a day, every day We bounce ideas off each other, sketch layouts and interactions, and generally have

04 learned enough to know what we didn't want to do - from there it was trial and error until we were producing' screens and stack, we liked. FinaLly having an iPad helped us to nail our design work, Until you see type and layout on screen, it's tough to imagine how the pixel density will translate.

a very

good working


Adobe has been a phenomenal Apple announced even a hiccup, We had intended

partner in this exercise, and when on having one Digital Magazine Objective-C viewer

its new Terms of Service for i054. there wasn't

Biggest hurdles File size was a key constraint. At 500MB, it's a big download

- one

Viewer (DMV) Fordesktop, mobile and iPad, but Apple's change simply required us to create a purpose-built

that we hope to get much smaller very soon - and shelf space isn't inlinite. We had to be very selective in what mteracnves we included with the issue, but I think that kind of limitation is a good front to thing; it allowed us to hone our Focus.

Trial and error

We produced a few mock issues, culminating in the March 2010 designed print issue oFWired - the first time we simultaneously and digital. We thought lnteractlve content the eye travels and what the expectations exten t that it overwhelmed

Magazines are meant to be read - sometimes back, sometimes back to front, sometimes

in no particular order

a lot about the reading process, where would be about

at all - and we had to enable and allow for any and all of those Circumstances, Ultimately, I think the app is successful because we " built something that our rea,ders recognised. It looks and feels like Wired because it is Wired - we just have a few more story-telling tools in our kit.

We wanted a layer of richness, but not to the the reading experience.

By the time we started on our launch issue, we had




The creative pro's gUide to iPad---


o Behind the scenes

Behind the scenes

Designing HelvetiNote
pro's gUide 10 iPad

Todd Berger of cypher13 reveals the secrets of the studio's latest

iPad offering - a note-taking app for designers with a penchant for that classic Swiss font, Helvetica

Designing HelvetiNote 0

01-01 __


caned on the !kills of Rage Dig italtc develap the cypherl3 HeII'!'~Nalf> desig n

02--D"'"J~i~g for the IPad'll,fge rouch screen threw up one of the major chall""ges C)lpherI3_ The ream ployed pilnlcula fly "lose attention to the



size of He Iveti N ole's various UI


Todd Berger. AI"" Henry and Lucian Foehr Founded cypher 13 in Boulder, Colorado in 2005 with a simple m iSlian: 10 improve rhe human experience. "We choose diem, carefu lIy, like ClIrallng an exhibition; ""Plai~s Berg"'_ That ffindpicked li>lrurremly include, Irue] Herman Mill",. Ad idas. Ford ar>d Yahoo! HelvetiNote is ihe SILJdio~ ~'SlIPad app. ~r>d while others are on me mle.lhil in-vogue field i5,fl set to dominate its warkflow any time soon. 'As oor stud", has evcwro. it has Foxused on e;;perH:011y collabo rotion: Be<ge< conlfnues. 1n me case of He!veuNQte we consider ourselve, the desig n experts, a nd Rage Digital the development experts. We have no desire to praaice beth design and development in·hallSe."


.. T"'_"",,"M


~~I!iI'''~'''''''''''''' Welcome To H'clveliNolol


.... ..


'1'11111 .. ~-~~_~~t!r~III_'II!I'!!i!iIIi-j"""


--~--.~ __

... -...-

I ~I.oI;;:I,NII~

_m 7'/1MI.


b1an:I ~.t

No IiM& ....




S.. ,gntIL"IIt





:t.1n1EiX!. lpII'I.:4IiIIo ~ h


[)r tt.-. G.irh..n ~...."..-tt


...... i~

rh~..wc r.un ~~Halft~











We all take notes somewhere or somehow, and the iPad is the perfect device to collect our thoughts and organise those notes. But for those
of us fond of type, averse to the font Marker Felt (used in Apple's own Notes app) and seeking a relined note-taking " the apps available leave something HelvetiNote and more enjoyable alternative anything experience, to be desired.

a grid and user interface, developed brand assets, and then ccnsidered interaction design.

and integrated various and mapped out all of the

The next part of the process was to hand over the design assets to Rage Digital to develop the fully functional HelvetiNote app. This took them around three weeks, and after we finally submitted it to the lots of testing and debugging exa ctly 44 days.

was designed to fill a void and to offer means of collecting our thoughts.

everyone - type enthusiasts and designers in particular - a purist We searched tirelessly on the App Store for an to Apple's default app, Notes, but we couldn't find as Simple and refined. So we decided to design our as a potential collaboration.

App Store. From concept to release, the whole process took

Adapting to the platform

Designing for the touch-screen experience certainly threw up some hurdles. For starters, the tactile region that the finger uses to interact with the iPad is much larger than a cursor driven by mouse movement
,0 the padding

own app, and pitched it to our friends at Rage Digital (wwwragedigi_com)

and size of the individual; UI

Design and development

Most of our internal projects move from concept to identity quite rapidly. We performed an initial needs assessment, which alii

elements needed dose consideration. Designing for both portrait and landscape views whilst maintaining a consistent look, feel, and functionality across both of them also proved to be a big challenge. Fortunately. our UI design grid aided in this dual view process, We used the same number otcoloroosecoss each view, and for the landscape ...

starred with an inherent desire within our own studio. From there it took roughly two weeks to develop and refine the concept, destqn the identity and outline the core functionality. We created


The creative pro's gUideto iPad---


o Behind

the scenes

Interface analysis: The appeal of HelvetiNote


Se ,eh

Welcome To HelvetiNote!
Hetvetic<I. Facts
3:47pm 5/1:l110 5/11/10

3 Notes

Welcome Tb HelvetlNote! Death To PJiarkerFelt cypher'13 x Rage OIgttal

1. Hetvetlca was developed In 1957 by Max Mledlnger with Edllard Hoffmann at the Haas'sche SdlrlltgiesS!lrel (Haas type loundry) of MOnchensteln. Switzerland.

2. Orlglnall~ called Nelle Haas Grolesk,

3. In 1960. the typelaoo's name Vias changed by Haas' German parent company Stempel 1.0 Helvetica (derived lrorn Confoederatlo Helvetica, lhe latin name lor Switzerland) In order to mal<e It more marketable IntemaUonally.

Historically Slgntncant logos Set In Helvetica 3M' American Airlines' American Apparel I AT&T I BMW I Jeep I JCPenney I lufthansa I

Microsoft I Ol81lge { Toyota f Panasonlc I MOlorola I Kawasaki' Verlzon Wireless

Stripped·ba(kinwrf~ce ImerHionolly limited in funaion"nty, the HeivetiNot" spp has just a few CQl~ feature-; in its firs! release - with more 10 come. ThaI much.loved Swiss font As the name implies. all notes 10k"" within _ HeM-tiNote are set in Hell'l"!ica, The font suned me veryu ~Iit.l rian IiJnC!ion of r"IOte·!aking perfec,ly: "BeIng designers With a love of type, we frequently rely on Hel"'tica for iTS inherent aesthetks, legibility and overall functiort" e><pIoinsTodd Berger.

Drawing and erasing Toklrlg fu II advamoge of 'he iPad, ,ourn screen, JieI""~Note incorporates slmple drawing and erasing tools so that users can su pplemem wo~s with simple visual sketcnes whete req wired All of is intet)(!ed to "",ke the Hel""iNote user experience more similar to the anillog note-tekinq process of u'ing good old·fashioned pen and paper.


lntUitiVenaviga!iDn . I, may be minimal, but H~VetiNote" navigation hierarchy makes full use of the iPad', screen whether in poruait or landsca pe, NOleS ate organised through a collapsible Notes Panel, and paddjrog_!\,pe size. button slze and [he underlying baseliroegrid were all carefully consdered ~ d<'5igned the initial i'.rorion of HefvetiNOte in roog hly Ii;< hou rs." Berger '"",als, Customised colour palett" The user interface is a~oeasily rweakEd using [he Themes Panel with fou, built-in them", and the facili!\, to create your own 1.0SUit your taSles. 'Our favourite feature. whi le the least utiltta ctiJ n, ~ the level of ClJ'>tomiSiltion;ad rnns Berger."We wanted to cater to lnd ividual user,' colollr preferences."

planning a projecl Accordingly, JielvetJNote doesn~ exiS! in a ""OJ um. Botl' typed and hand·d'awn oetes are optimised for email a, standard, to enable simple ,haring of idea, between colleag lies and coilaborotOfi

5eamleS~ email integrarlon Note'ldkirlg is often a coIlaborotr.e process,

partku li::Irly a studio environment in when


creattve pro's guide to iPad


Designing HelvetiNote 0


OL-To liIckiethe difficulriC'5f de,igni ng o beth landscape and portrat vie"", cypherl3 used the sa me



The"" ". 'pan,,1

The built-in enabies Heive(INote use" to <elect fmm four themes,


or customise- ~fr

,-t ~__ ~I'" 1II~1\o~1:4 III



.. _

.. ~.. ~


..... ~

"O'OS< each view,jusl wldenir.g the column, for the lendscaPI' view

05-.-- Te.5!illg'took p iii"" in-house a [ cyp,ef13 and Rage Digital, the team, at which of!' notorious nore-toke'~ Bugs were Iden]ified arICIl1~mo>ed IMmin a fon nigh]

I ,.~.~-








.. "'tIIl' .. -

IIr'PIIIIiIIo'I .....


Ulsild!IO" ..


IIj,_ .....




~I"'_ ~ ~
T I"



To HalvetlNotel







;;.IftlU twoll1,," __

lIIw~ ~IIioII'I;IIIIIIGHtrfI''''Q.I''''''....w


"R3"'I~HIfIw_~Nl.-nllU'iJla .illl1UI~"'mliIi:b:rg;k •• ~1!IIdIi!tt.irdI .,."".-.

!I.! 1~~.ArItwa









.. view merely had to increase the column gutter width consistent.

wldth, keeping


We typically produce

detailed maps and wireframes, and dearly envisioned

but with a as

project as rapidly conceived function Ultimately, the kons. ln-hcuse.out-of-house have dev-driven simultaneously HelvetiNote

He.lvetiNote, we chose to skip this phase and address scope and

Battling the clock

In the race to design and develop the next hot app, time is ofthe essence. We chose to forego a number of fundional Cerra in featu res were postponed In the not-so-distant features. purely based on the time they would take to develop. and staged for an upd ate release, past, moves like this wouldn't so as to not hinder submission to the App Store. been considered. Products of this nature weren't taken public until every possible function was built in. But, in the fast-paced and cut-throat world of online publishing, - and then improving getting to market virtually immediately your app along the way - has

within the overall UI design was designed

to create

within one multiple-artfrom Photoshop

board Illustrator file, with a little support

In the case of any collaboration out-of-house


in-house design and or a piece

build, be it a website, an app, a,sculpture technical specifications

of furniture, our design liles are based on a grid and are outputted to include precision padding, as they relate to the functions " margins, type and colour. We can by no means claim to have determined seems that well-designed apps with practical utilitarian

become the new protocol. Once we had the first working version, the team at Rage and the three of us at cypher13 installed the app and began aggressive testing straight away, in real-world scenarios, Both of our offices include a rather high volume of note taking, so they were exceptional test)ng grounds - and, in two weeks, a number of bugs and ~xed. were detected

secret to success within the iPad app space. However, it certainly will remain hot items for some time to come. That being said, super-dynamic magazine apps boasting exceptionally rich user experiences will de~nitely thrive and inspire the next generation of apps to come.


The creative pro's gUide to iPad---


o Behind the scenes


T__ making e
96-The creattvepro's guide to iPad

Behind the scenes

of Alice

Chris Stephens from Atomic Antelope explains how he

brought Lewis Carroll's classic into the digital, multi-touch age

The making of Alice 0

01--The Atomic Antelope team though, Alia!< Advenrure;ifj Wlmdedandw be a peri...:t story 10. a di 9 !tally In!~",(l:ive update on the IPad

02--John Te"oiO!I~ original illuWation, were SUl nned from a very early edition of the book, Tffiniel was an English illu;~lor wI;::) also created tile imagery for IhlOl.Jgh the Looking GiOS!

• Ch

.i, Steph ens

• B. n Roberts

Atomic Antelope a Atomic Antelope is a UK ;O"-WOIe desig n stuolo made up of fOlmding perrners BEn Roberrs and (hril Stephens. TIle two-rna n team a~~Phone, iPal Touch and iPad apps and games Including Bauble, Twitch Origins and the e><eellent Alice for iPad. Roberts is the codmg half of the tearn, who before foond ing Atomic Antelope wrOte clever IOftware for fin~r'lCial compo nles that ihe behaviour cf (he 'lock market Robert> i, also OI1e of the lead develope" behind troe Flower projec, an encrypton algorithm that nensooses private data lnro three-dirnersonal Aower models. The C,"'"t~ edge of Atomic M!elope comes from Ch <is Stephens, an i lIustralDr. designer, and gam .. and UI expert with six yeo rs' experie"", of creali ng for me eI1!enai nrnent media incl...suy; Plior to this, Chris """ a writer for The Daily Telegraph and I"ter The Times, and has worked for the BEC. War",r Bros, EMAP and W1illdmaga2ine, Stephens won a Guardi.n Med i1.t Award for his work in journalism, and, according to his bio, fa rnously discove<ed 'rellect0porIT W\ilM,(aromiC3otelopecom



I've illways been a huge fan of children's fiction,

The stories we are told as children often have a lifelong resonence, We wanted to make an app for the iPad that reacts to being that could bring new value to a children's dassic, The iPad is unique because it is the only computer " thoughts touched, tilted and shaken. This was the starting point for our Arst on what to make for it. We realised quite quickly that coupled with a great story work that has now

shape. Alice is always growing Tenniel illustrations,

and shrinking. Children are quickly as they age, and I think the

aware of their own rapid growth

for me ar least, had an eager physicality to

them, They already seemed to want to pop off the page and spring to Hfe - we set them free, We built the app in a two-man team with no corporate tie" so as the designer I didn't have to explain what we were doing to a 'client: Because of this, I made many design choices without necessarily having any rational explanation for doing so. Cholces llke the way the interface works were led by just two questions: will the user get this? And am I having fun? The design and production process of Alice was reIalive Iy stra i9 h tforwa rd, and 0 n l:y in dud ed fo u r key stag es, The nrst was to pick a book to adapt, with the second being to tell Ben how the scenes might move, and ask if it was actually possible Next we had to prepare the artwork in Photoshop, before finally deciding which artwork elements and complete the user interface elements, to add physics to

the best way to shine in the app market was to create something that used all of the iPad's functionality, Fallen into the public domain, Growing market picked from the wealth of amazing illustration

Alice~Adventures in Wonderland has is a favourite 5tory of rrune, and John Tennlel's original illustrations struck me as perfect for
the kind of physics simulations didn't have to negotiate and anima tions we wanted to create, It also appealed because it is a public domain title - we complex ri9'ht5 issues with a publisher. Like many great kids' books, Alice's Adventures in Wonderland deals with spatial concepts, especaty size and

You may be surprised to know that we didn't use any mood boards or sketches in the project - we just went at it



The creative pro's gUide to iPad ---97

o Behind the scenes

Down the iPad rabbit hole: Alice at a glance

The Alice iPod app icon needed !O portray the look and feel of the<:!riven story. Thi I design solunon uses one of Tennlels portraits of Alice, and slts very wellon the iPad', screen, wh e re it looks d lsti nctly' reiro' compared to mOSI app icom and certainly jumps out 01 d1e mer. 'The page5 went &Iroughseveral s!agel of revision, but there was no formal proces~" "'I" Sl"ph",,~ ·just a lot of til rowing paim at tile call\lal,.' Each Illustration wOSscanned from the original Ienniel drawing~ teken from a 145-ye;lr-old edilion of ihe book, and worked up ,in Photo41OP_ 'We used the iPad'sam,lelometer data and [OUChha ndli ng. while [he underlying physics engi ne has it> root> in Cocm2d and 01ipmunk physic~· explain' Stephen" whose Atomic: Antelope partner Ben Roberts hand-coded the app Chipmunk Physics isan open sou rce 2D animalion Iiornry tha[ has on Obj«tive-( wrapper for Pad de5ign. The navigation desiqn and implementation sits well withill the """rail look ol the app, "We wanted people to inleraCl with Alice intu ilively, so we de5fgned the interface to be 10 rgely i nvi>ible, ",aaing only whEm the Pad ls tilted. shaken or touched: says Stephen, To idemily who t would work as imeractive or arlim.led elemenr, from the original graphics, _ [he Atomic Ante!ope team relied on pure in,~nct Once each element was decided opon, Stephens and RoberlS exper;me"ted bY rotating the objects in Photoshop (0 give a roogh preview of 110W various ph)"i<:altra",fo!ms might work was very aware thaI wewe~ making a book for children, so we tried to make rhe text as friendly as pos.sible: "')IS Stephens, 111e pair didn't feel pressure to to be reverent to the original booI;, but think the end resclt is very respenful 1'er'l1aps the illuscradoos odoilled '0 well because Ten niEl knew the iPad was coming: jokes S\ephen~ Atomic Anlelope~ Alice iPad JPp has receveo lots af feedback from users, which has prompted the pair to pion some added updates to be released I.!er in me year,These wm include extra Illustrallons 0 nd (he opuon to tum 'swipe 10 turn page' off for the app's younger readers,


.. 7


The creative pro's guide toiPad


The making of AliceO

03...--U~r>g a cornl::inMan 01 Pllotoshop enhancements [0 the original illu'1fif!ion~ and Chipmunk Physics, rile ream brought elerrerns of the Alke lImy to life

04 - ()6____ The Interface ai"ICI navigation elements were purpa;efully de,igned to be as uno btrusive as possible, allowir>g the illu,tration, to drive the story


rAU.~ II

The Pool Of Tears


The CaUOJ.S .R3C"


o<'ci.\g. 11", Ch ... l\i,,~C'1 <iRing QO .• i:!oug,b of • [IW ~ (,,'" l,.r<b 0(1.The Col ""I).



n sa.........

-Cho;ohi ,,-..I'lL":

AI iCl'.

Time For Prizes

·."ll..". lI.rnldly, ·w....11I l''''' pl.cnSt' 1,('11rill' "'il\id1, n.·ay 'I oughllO go from h.NT


original backgrounds,

06 and there's weeks of work With the Bezier

.. with an open mind. Because.1 knew no one in a suit was going to stop me and ask what the hell I was doing, Ijust messed about in Photoshop Tennlel tribute The bulk of the illustrations in the original illustrations which was published atmosphere areexactly as Termiel conceived he produced them for the very first edition, until I liked how it looked.

tool to get it all cut out It was a long, drawn out and quite difficult process, but was worth it in the end. The one area where I did experiment was with each all dig. that illustration's surroundinqs.l felt the original page backgrounds from the 14S-year-old edition were a bit plain, so I remounted the graphics onto a grungy, muddy background modem iPad look like it has been found in an archaeological that makes the

in 1865. I tried to stay true to the

of the original story and to len ni el's imagery. The bigger in

I made sure that each page's text remained legible by clearing areas for it to sit in. We left out just two or three illustrations we felt could be ornlrted for the bedtime add these in at a later date. There are lots of elements we're proud of, and we're really pleased with the reception the app has had. My favourite scene is where Alice throws sweets at the Dodo.Its people seem to realise that everything has changed for books.lrs the point where the first-time reader goes 'Oooohl' and a smile creeps across their face. not the most " impressive scene, but it's early on and it's the point at which most It edition, but we plan to

process began with me scanning the original prints from an ancient edition of the book. Then I made the illustrations Photoshop, retouched environment without them, and enhanced the colour,

brightness and contrast to make sure they worked in a digital losing their 'aged' quality. The next stage was to cut out all the moving parts from the scene and redraw the backqround plates to fill in the holes where the characters the characters to freedom of movement. once were. The final process was to reintroduce the scene, so they now had complete sounds Simple, but it's quite painstaking

to imitate the style of the


The creative pro's guide to iPad



iPa___ Director
110 of the most groundbreaking, useful, well-designed and just plain silly Pad apps available for creatives ...
Adobe Ideas
Price: Free Developer: Adobe URL:
Adobe's tirst - and so far only - iPad app is a basic sketchbook enabling: you to quickly sketch out concepts and designs, as well as trace photos and sample colours from them. You can also export tiles in PDF format, ready to edit vectors in Illustrator,

Air Video
Price: £1. 79 Developer; Mate} Knopp

App Designer HO
Price: £0.59 Developer; Nate Chiger UR£:
This is similar to the excellent iMockups, but a lot cheaper, However. this is entirely focussed on designing iPhone and iPod Touch apps, A weed-effect background coupled with an intuitive interface makes this an interesting app for 59p_

Air Video enables you to stream videos in almost any format to your iPad (except those with DRM attached), You can stream over local networks or over the internet (indudl ng 3G), A nice app for checking tiles remotely, or just helping you avoid IiJling up your iPad's flash drive,

Air Display
Price; £5.99 Developer: Avatron Software URL:
A del iqhtfully simple yet brillian t iPad app that enables you to use the iPad as an extra display for your Mac or PC - as long as you have a wi-ti network set up, Although video content is unwatchable, it's brilliant for housing all your Photoshop palettes and generally extending your desktop.

Analytics HD
Price; £3.99 Developer: lnlilosam LLC URL:
Analytics HD for iPad gives you everything you need to track site visitor data via Google Analytlcs. See pie chart and list data on visitor recency. length of visit. depth of visit. where your visitors are from, what browser they are using and much, much more,

Artist's Touch
Price; £2.99 Developer: Artamata; Inc URL:
This is one of those apps that enables you to, without any real artistic ability, turn a photo on your iPad into very easy process - select

a painting. It's a a photo (which

the app turns into a sketch), select a medium (oils. watercolour and so on) and then paint over the photo,

Air Sharing HO
Price: £5.99 Developer: Avatron URL:
Air Sharing is a very cool app that enables you to share tiles over the air to your iPad using your local wi-f network You can mount your iPad on your Mac and exchange tiles (many tile formats are supported) which you can then view, share, or print from the app.

Animation Creator HO
Price: £1.19 Developer: Red Software URL:
Featuring some very simple yet surprisingly effective drawing tools. plus the ability to qu kkly knock together animations from scratch on your iPad, this is a very appealing app. Layers, frame positioning and rotation, onion skinning and more make it well worth the £ 1 .19 asking price.

ArtStudio for iPad

Price: £1. 79 Developer: Lucky Clan URL: uruno.iphaneclan.comi

Another creative drawing and painting app, ArtStudio has an impressive range of features and is very inexpensive at only

£ 1.79, Create art at up to 1024)(1024px,

utilise the 25 brushes on offer and use filters to add effects to you r sketches or photos. Worth a look


The creative pro's gUide to iPild