Dinosaurs with Laserz

I’m turning a website for traveling surfers, www.surftourist.com, into an iOS app. It’s the first time I’ve designed for iOS, and I’m building my workflow – setting up shop – for future projects. This post follows on from iOS App Design Workflow: Part 1.

Keeping in touch with the team online

I’d recommend using Campfire with Propane for online team communication, although on this project we’ve been using Skype — out of laziness perhaps — but as we’re building it for ourselves it’s a bit more of a casual arrangement. If you are using Skype with multiple users be careful – it doesn’t save the contents of a chat between more that two people. Yes, I did find that out the hard way.

Remembering everything

Ideas and key points from conversations get pasted into Evernote. I’ve tried Yojimbo and Together – digital scrapbooks – but settled on Evernote because it’s development cycle seems to be the most active. If you’d like to try an alternative check out Together. I also recommend Yojimbo vs Together vs Evernote: a review.

Information Architecture: Sketches

The features and direction weren’t defined well enough to jump straight into wireframing, so I sought feedback from sketches first. The sketches were rough enough not to waste time but clear enough to get the ideas across.

For the novelty of it, and a little added convenience, I sketched on an iPhone App Sketchbook from appsketchbook.com. On standard delivery it arrived in two weeks – far too long. If you’re not in the States get it sent express.

Also check out UI Stencils’ stencils and notepads. UI Stencils iPhone Sketch Pad doesn’t provide enough room for adding comments and notes to screens for me, but they have got great products including a dry erase board with browser chrome, a really great idea.

Information Architecture: Wireframes

The sketches triggered discussion. Once there was general agreement I produced a new round of rough sketches for my own use that covered every screen of the revised app.

The approach I’m taking to the user experience on this project is more casual than what you’d find at a UX studio, which would be defining personas, scenarios and user testing in a more scientific, methodical way. If you’re interested in those processes there’s plenty of fantastic resources online waiting to appear in a results listing. See No excuses – budget usability testing for a start.

Until this project I’ve used Indesign for creating IA documentation — very much a designer’s approach. Professionals advocate Axure, but I was hoping to find something that was more mobile app aware. See The search for the perfect IA application if you want to read a little about Balsamiq, Omnigraffle and some of the other available options. The tool that best suited what I was looking for was FlairBuilder.

The most attractive feature of Flairbuilder is the ability to push a working prototype online with the click of a button. This was a major plus not least of all because our team is spread across Australia, Scotland and Japan. Another great feature is a component library that includes mock iPhone UI elements and device artwork.

Flairbuilder runs on Adobe AIR. Despite some fiddly bugs, which were noted and sent to the developer (who has promised they’ll be ironed out in the next release – thanks Christian!), the app was intuitive enough that I had a 40 screen iPhone IA/prototype with site map built in two days.

Not only could I create a working (clickable if you like) prototype, the ability to add interactivity meant that I was able to create user scenario paths that the other team members could click through. The team could forget about navigating the IA and focus on experiencing how users would complete specific tasks.

I love crafting user experiences, and writing front-end code too for that matter, but what people know me for is interface design. Looking ahead to commercial projects I’d like to partner with a UX team. If you have any recommendations leave a comment or dm me.

Thanks for reading. The next article will focus on interface design. Do you build apps and have suggestions for a mobile workflow? What’s your advice?

Extensis, the outfit known for its font management software Suitcase/Fusion, launched a web font service called WebInk in August 2010.

After a quick snoop around WebInk’s website the two main differences when compared to Typekit are JavaScript not being required to run, and pricing structure.

If you’re a Typekit user like me you’ve been adding two script tags to every page that uses web fonts. Not particularly efficient. WebInk simply uses the @font-face rule in your CSS to load fonts from their server, like this:

@font-face {
font-family: Grotesque;
src: url('http://fnt.webink.com/wfs/?drawer=SSDFR111-0000…&font=ANRVDHQ-VFDSN…');
}

BUT, (that’s a big but btw) one of the benefits of Typekit’s script is that it hides the Flash Of Unstyled Text (FOUT) by concealing the text until it’s ready to display styled. Ironically WebInk provides a script called FOUT-b-gone via its blog to fix this, so technically their “No JavaScript” claim is BS. The problematic browsers in question are IE 7-9 and FF 3.5 and 3.6. Other modern browsers have already pulled into line, so eventually FOUT will be a thing of the past, the script can be deleted and we can all forget it ever happened.

The next main difference is pricing. Typekit charges an annual fee, WebInk is monthly. Typekit calculates bandwidth based on page views, Webink on the actual amount of bandwidth that’s been used serving the fonts (at least that’s how they distinguish it in their plans).

WebInk’s pricing plans:

If you’re hosting a personal site that’s getting less than 5000 visitors a months, Webink would be the marginally cheaper option at $23.88 to Typekit’s $24.99. Negligible. WebInk’s monthly pricing means if your bandwidth varies wildly from month to month your fee will too – check your credit card statements. Typekit state on their pricing page if your bandwidth is exceeded they’ll contact you to recommend a different plan. It does give the impression that WebInk’s fee is more prone to fluctuation.

Typekit’s pricing plans:

Obviously other factors such as font libraries and their browsing experience, and account management also needs to be taken into account. WebInk isn’t ground breakingly different enough to Typekit for me to switch my existing sites over. I’m keen to give it a go on a future project to fully understand the subtle differences.

Personally I also prefer Typekit’s website to WebInk’s (seriously guys, Futura?). Any product or service whose customer base are designers can’t afford not to be obsessive over their aesthetic presentation, and I find the WebInk site a little gloomy. Was using Futura a conceptual statement? It’s a classic typeface but it just doesn’t work for me in this context. (Jim Kidwell from Extensis points out that the fonts used are Proxima Nova and Foco, my bad.)

Typekit.com and WebInk.com

I’m turning a website for traveling surfers, www.surftourist.com, into an iOS app. It’s the first time I’ve designed for iOS, and I’m building my workflow – setting up shop – for future projects.

Step 1: Read the instructions

It took a couple of afternoons to read Apple’s iOS Human Interface Guidelines. I got a bit carried away taking notes and ended up publishing a seven part article, which reformatted the guidelines specifically for designers. It’s been getting roughly 100 hits a day, and is the second result after Apple on Google for iOS Human Interface Guidelines. If you’re reading the HIG, check it out.

Step 2: App Def

Create an App Definition Statement. Challenge yourself to make it as short as possible.

We wanted our app to:

• Let surfers search for surf spots.
• Create and maintain a surf trip itinerary.
• Share their trip progress and surf spot discoveries.
• Give surfers the ability to record their regular day to day surfs.

If that sounds like a lot for a mobile app, you’re probably right. Regardless of it being ambitious or crazy, I managed to whittle it down to the following App Definition:

Plan your surf trips. Share your surfs.

Step 3: Feature List

1. Plan your surf trips
- Search surf spots via either map or country
- Collect spots into trips, check in to those spots during a trip

2. Share your surfs
- Share your regular surfs and trip surfs with comments, ratings and photos

For the purpose of this article that should do. I continued to break the features down into finer detail, turning features into functions, separating functions into groups, and began sketching a basic Information Architecture.

Next: iOS App Design Workflow: Part 2. See what tools I used to create the Surftourist Information Architecture.