13 Lessons from making The Book of Kells for iPad

Slide 1

Slide 1 text

Sunday 17 March 13

Slide 2

Slide 2 text

Masterclass Sunday 17 March 13

Slide 3

Slide 3 text

Expert’s Guide Sunday 17 March 13

Slide 4

Slide 4 text

Manual Sunday 17 March 13

Slide 5

Slide 5 text

We’re pretty good at making websites & stuff for the internet so maybe we can make an app for iOS? Sunday 17 March 13

Slide 6

Slide 6 text

Stripes! Yay! Sunday 17 March 13 Well it says so in stone & metal so it must be true

Slide 7

Slide 7 text

@killianw Awesome developer Sunday 17 March 13 Unfortunately he’s got to go meet a plumber to sort out something at his house.

Slide 8

Slide 8 text

Why put The Book of Kells on an iPad? Sunday 17 March 13

Slide 9

Slide 9 text

Sunday 17 March 13 I work for X Communications. Touchscreen kiosks for museums, CD-ROMs, websites, apps for about 20 years.

Slide 10

Slide 10 text

Sunday 17 March 13 I work for X Communications. Touchscreen kiosks for museums, CD-ROMs, websites, apps for about 20 years.

Slide 11

Slide 11 text

Sunday 17 March 13 I work for X Communications. Touchscreen kiosks for museums, CD-ROMs, websites, apps for about 20 years.

Slide 12

Slide 12 text

1999 Sunday 17 March 13 In 1999 the team rose to the challenge of putting the BOK on CD-ROM - part preservation, part bringing it to a wider audience.

Slide 13

Slide 13 text

1999 Sunday 17 March 13 In 1999 the team rose to the challenge of putting the BOK on CD-ROM - part preservation, part bringing it to a wider audience.

Slide 14

Slide 14 text

1999 Sunday 17 March 13 In 1999 the team rose to the challenge of putting the BOK on CD-ROM - part preservation, part bringing it to a wider audience.

Slide 15

Slide 15 text

2007 Sunday 17 March 13 Few years later it gets updated and re-formatted to be a DVD-ROM. Both were really popular with people worldwide and thousands of copies got shipped.

Slide 16

Slide 16 text

2007 Sunday 17 March 13 Few years later it gets updated and re-formatted to be a DVD-ROM. Both were really popular with people worldwide and thousands of copies got shipped.

Slide 17

Slide 17 text

2007 Sunday 17 March 13 Few years later it gets updated and re-formatted to be a DVD-ROM. Both were really popular with people worldwide and thousands of copies got shipped.

Slide 18

Slide 18 text

Sunday 17 March 13 Need a new modern platform, partly from a technical perspective. Or do we stick with what we have?

Slide 19

Slide 19 text

2010 Sunday 17 March 13 2010: iPad arrives. This stage we had begun work on our ﬁrst iOS apps for iPhone & iPod touch. Two thirds of the design room & at least 1 dev uses iOS so there’s a healthy interest.

Slide 20

Slide 20 text

2012 iPad @2x = no brainer Sunday 17 March 13

Slide 21

Slide 21 text

2012 DVD re-up required Sunday 17 March 13 By early 2012 stocks of the DVD were running out and we were faced with having to either get it re-engineered to place nice with modern OS or go afresh.

Slide 22

Slide 22 text

The Book of Kells for iPad Sunday 17 March 13 So it is decided at some stage in 2011 that this is to be the new platform And we are going to do it in house

Slide 23

Slide 23 text

Winter 2011 Attempt #1 Sunday 17 March 13 Late 2011 one of our designers was asked to kick off into the project. Sadly it didn’t get wings. Why?

Slide 24

Slide 24 text

Winter 2011 Attempt #1 :( Sunday 17 March 13 Late 2011 one of our designers was asked to kick off into the project. Sadly it didn’t get wings. Why?

Slide 25

Slide 25 text

•Retina iPad launches in early 2012 •Designs need re-working to accommodate this •Client decides to take a different approach Attempt #1 Sunday 17 March 13

Slide 26

Slide 26 text

Spring/Summer 2012 Attempt #2 Sunday 17 March 13 We try again. We don’t quite get there again.

Slide 27

Slide 27 text

Spring/Summer 2012 Attempt #2 :( Sunday 17 March 13 We try again. We don’t quite get there again.

Slide 28

Slide 28 text

Attempt #2 •Designer & dev working on it on and off in blocks •Client working on it on & off •Internal scheduling Sunday 17 March 13 As anyone who works in any sort of agency scenario, it’s hardest to get your own stuff done.

Slide 29

Slide 29 text

Autumn 2012 Attempt #3 aka THIS HAS TO SHIP! Sunday 17 March 13 Designer & developer just went into it full time in early August and worked in tandem.

Slide 30

Slide 30 text

Autumn 2012 Attempt #3 aka THIS HAS TO SHIP! :) Sunday 17 March 13 Designer & developer just went into it full time in early August and worked in tandem.

Slide 31

Slide 31 text

Attempt #3 ✓Designer & developer working in tandem full time ✓Attempt #2 = assets to work from ✓DVD stock sold out ✓Time = money! Sunday 17 March 13 More lessons learned. Nothing like a real deadline to push you towards the line. Will come back to the lessons again at the end.

Slide 32

Slide 32 text

Production Elements In no particular order Sunday 17 March 13

Slide 33

Slide 33 text

Sunday 17 March 13 You’re going to need a lot of this before you begin

Slide 34

Slide 34 text

Platform What will we publish for? Sunday 17 March 13 iOS got chosen for a number of reasons: 1. Designers felt comfortable & familiar with UX its conventions 2. Developer who had some experience with coding for it 3. We had to remove some variables - Android was to broad for a ﬁrst attempt.

Slide 35

Slide 35 text

Scope What are we going to put into this thing? Sunday 17 March 13 And possibly more importantly, what are we going to leave out? Part of our struggle was thinking of an existing set of content and repurposing it and that was very challenging to pin down.

Slide 36

Slide 36 text

Interaction How will the user interact with the content? Sunday 17 March 13

Slide 37

Slide 37 text

Tools What should it be built on? Sunday 17 March 13

Slide 38

Slide 38 text

UI Design What should it look like? Sunday 17 March 13

Slide 39

Slide 39 text

Prototyping Make it Sunday 17 March 13

Slide 40

Slide 40 text

Testing Break it Sunday 17 March 13

Slide 41

Slide 41 text

Platform Prototype Tools Test UI UX Scope Sunday 17 March 13

Slide 42

Slide 42 text

THIS? Sunday 17 March 13 Initially we were all feeling a bit frustrated and a bit like this.

Slide 43

Slide 43 text

Chill - it’s not a production line Lesson #1 Sunday 17 March 13 Learned from Attempt 2 that it was deﬁnitely not a linear process! It’s something you’ll adapt to if you give it time.

Slide 44

Slide 44 text

Scope is a beast Lesson #2 Sunday 17 March 13 First thing we tried to hammer out and ended up hammering out right up till about a week before we deemed it “ﬁnished’. We dreamed of presenting the user with the book and then diving into content from there but in the end we over-ruled it when we weighed pros & cons, thought of our audience etc

Slide 45

Slide 45 text

DVD •Lots of videos (stills with voiceover) •Much smaller in size (800x600) •Single language •Simple interaction •People liked it Sunday 17 March 13 We had an existing product. Do we start from scratch?

Slide 46

Slide 46 text

iPad •More interactive •Totally different type of interaction •File size & other unknowns? •Set the foundations for multiple languages Sunday 17 March 13 1. Would we do new videos? 2. Being a different platform, we have to give people what they expect 3. How big/small a download should it be? Should we care? 4. What about all the stuff we still don’t know about?

Slide 47

Slide 47 text

Only One Certainty We had to include the manuscript as a whole Sunday 17 March 13 So that was the ﬁrst area we worked on to perfect.

Slide 48

Slide 48 text

@MrDoodson Sunday 17 March 13

Slide 49

Slide 49 text

Creating the Book •Page scanned to high quality JPEG •Page cropped •Page lined up with opposite •Add spine, match levels etc •x 680 Sunday 17 March 13 Patience of Andrew Doodson a graphic designer who was used to working with large formats and had a keen eye

Slide 50

Slide 50 text

Creating the Book •Deﬁne dimensions & naming system •Output pages •Test ﬁle size •Output again... Sunday 17 March 13

Slide 51

Slide 51 text

Creating the Book •Interface around the book •Prototyping •Testing •Reﬁning Sunday 17 March 13

Slide 52

Slide 52 text

Oh yeah the holes Sunday 17 March 13

Slide 53

Slide 53 text

Creating the Book Roughly 4 weeks x 3 people Sunday 17 March 13 Between getting the content ready, putting a framework in place for it with naming conventions, UI elements, testing, tweaking...

Slide 54

Slide 54 text

Slide 55

Slide 55 text

This will take longer than you think Lesson #3 Sunday 17 March 13 An app like this with large assets and weird content will probably take longer than you realise. Plus if it’s your ﬁrst time at anything you have to allow for learning curves.

Slide 56

Slide 56 text

Sunday 17 March 13 Even when you think you’re done, you’re not done.

Slide 57

Slide 57 text

iOS != iEverything Lesson #4 Sunday 17 March 13 Having had and cherished my iPhone for nearly 3 years I thought I knew the platform. WRONG. It’s about the marriage between hardware, software and user.

Slide 58

Slide 58 text

Hardware Software User X Sunday 17 March 13 Solve for X. Had to spend time using the iPad - taking it home for evenings and weekends and throwing myself into it

Slide 59

Slide 59 text

Prototype Often Lesson #5 Sunday 17 March 13 It’s the only way to really get a feel for what’s working PLUS it’s often the only way a client will get what you’re trying to describe.

Slide 60

Slide 60 text

Sunday 17 March 13 This was the crux of the failing of attempt 2 where the client really wanted the UI and text to be as unobtrusive as possible.

Slide 61

Slide 61 text

Slide 62

Slide 62 text

Showing the Detail How will we show this thing off properly? Sunday 17 March 13 Started with zooming to twice the level then pushing it further and further until we hit a lag in the image drawing on screen. Enter the delicious CATiled layer.

Slide 63

Slide 63 text

Sunday 17 March 13 Some slightly mind-bending maths and a series of really impressive automator scripts later, we had a smooth solution

Slide 64

Slide 64 text

Test Early & Often Lesson #6 Sunday 17 March 13 See what works, don’t get precious about things that don’t.

Slide 65

Slide 65 text

HTML & CSS Rocks Lesson #7 Sunday 17 March 13 In both the design and build phases, even prototyping. For example for mocking up text areas. Pretty handy for the multi-lingual side of things.

Slide 66

Slide 66 text

You can’t stop the screenshots Lesson #8 Sunday 17 March 13 This is true but you can watermark all your images!

Slide 67

Slide 67 text

Copyright Protected Sunday 17 March 13 This is a stunning piece of work. While we’re eager to preserve it and bring it to a wider audience we also have a duty to protect it. It costs a fortune to maintain work in the library so we have to try protect it.

Slide 68

Slide 68 text

Digimarc Sunday 17 March 13 Subscription service, watermark is invisible to the naked eye. Online service crawls the net looking for your images.

Slide 69

Slide 69 text

Talk to People Lesson #9 Sunday 17 March 13 Don’t be afraid to ask for help!

Slide 70

Slide 70 text

Thanks @dermdaly Tapadoo = awesome Sunday 17 March 13

Slide 71

Slide 71 text

Follow the Rules Lesson #10 Sunday 17 March 13 Apple have comprehensive user interface and developer guidelines. Get to know them inside out and you shouldn’t fail.

Slide 72

Slide 72 text

Design on a Mac Lesson #11 Sunday 17 March 13 I designed on PC and it was a pain in the ass. From type-setting to sharing your display via Adobe’s fancy tools like Edge.

Slide 73

Slide 73 text

App != website Lesson #12 Sunday 17 March 13 There’s no such thing as tweaking it after it goes live. Apple are in control and will do as they see ﬁt be it OS updates, pricing etc. It’s a different way of working, a different set of challenges but deﬁnitely transferrable skills. No browser testing!

Slide 74

Slide 74 text

Get it out there! Lesson #13 Sunday 17 March 13 We were in danger of constant tweaking while also in danger of wanting to run a million miles after looking at it for months on end. Get it out, get feedback and iterate.