Fingers and thumbs on the iPhone

I am itching to get my iFingers on the Apple iPhone. I can't wait, but will have to till Apple release it in Blighty. I am also keen to start developing web pages for the iPhone too, which is a lot of fun, according to Daniel Burka.

Digg on an iPhone

Daniel helped design a special part of Digg, custom made for the iPhone - digg.com/iphone. Not only that, he has kindly shared his thoughts on the design process - Digg on an iPhone.

Honkin' Fat Finger

"Even more fun is developing specifically for the user input quirks of the iPhone. When your primary input device is a honkin' fat finger, it changes the way you think about links and buttons. Everything's got to be bigger... way bigger. The yellow digg box and Digg It button are about twice as large on the iPhone as on the normal website. I also made the clickable area of the Digg It button even larger than the button itself so if you click on the edge of it, you'll still get a press. You also have to make sure buttons aren't too close together so that you don't mash one when you intend to hit the other."

No relation

No, Honkin' Fat Finger is no relation to me, but until I can get my iFingers on the iPhone, this is about as close as I will get to experiencing it.

A touch too much

Apple have created a site for iPhone web development too, which is worth touching on too.

Apple iPhone web development

With much fanfare, the Apple iPhone is finally available to buy (in the USA). This much anticipated gadget is expected to sell like hot cakes, so Apple have published a guide to Optimizing Web Applications and Content for iPhone.

Apple says, " Safari on iPhone uses the same Web Kit engine as Safari on the computer desktop. With the Safari Web Kit engine, you can develop sophisticated Web 2.0 sites and applications that will impress and delight iPhone users. To design a web application that shines on iPhone and ensures a great user experience, you'll want to:"

• Understand the capabilities of iPhone.
• Follow established design practices for the web.
• Adopt iPhone-specific design principles.

Time will tell how successful the iPhone is. Will it have the revolutionary effect of the iPod? I think so.

How to be a creative sponge - John Hicks

Hicksdesign, based in Witney outside Oxford.
Famous for Firefox and Thunderbird Logos

How do you do it? How do you get te ideas to actually design something?

Lots of parts of the design process - colour, grids.

"Designers need to be visual leeches, constantly cataloguing and recording information - Jason Santa Maria

Creative Sponges - collect creative juices

The 3 stages of the creative sponge

1. Collect
2. Catalog
3. Create

Collect

Everything you collect is relevant to the design progress
Observe life, how does the light reflect off the walls?

• Collect Books
• Penguin books - a design classic, good typeography - cheap!
• Collect Magazines - weekend supplements - good ideas for quotes, headers and side boxes, typography.
• Found Typography - Take pictures of signs
• Stuff off the internet - very easy to drag and drop
• Print and Pattern blog, johnsons thought of the day
• Veer - good for type - try the flont
• Freebies - Sign up for mailinglists - T26, Burbank
• T Shirts - threadless t shirts, great t shirts, colour schemes
• Leaflet Racks - oooh, lol they are the designers buffet lol take everything, one of each, take even the bad ones.
• Clothing labels and tags
• Packaging - breakfast cereal boxes - dorset cereals - american typewriter
• Photos that go wrong: Photos using other objects - take photos through a beer glass
• Doodles from you head - let out the stuff in your head
• But, don't collect websites! Approach doesn't work.

Catalog

"Designers are magpies..."
The good old sketchbook - use Moleskine, and letraset, writing notes is as important as images

John Hicks used to spurn Moleskine but now actively uses landscape Moleskine Reporter notebooks. These have great paper, and fit nicely between you and your computer keyboard.

• Binders
• Box files
• Not an easy way to get it out again
• John Hicks uses iPhoto. Create hierarchical Scrapbook Folders
• Yojimbo - takes everything

The "killer app" for the web creative sponge: flickr

For the first time peoples personal collections are being shared, great groups - Pictograms and Pucblic Space Typeography

Create

Peter Blake, famous for the sergeant pepper album - goes to markets, buys objects nad rearranges them.

The Fear : blank white paper

The process of collecting can stimulate

Creative Cataysets

• Deadlines!
• Change of environment - walk/drive
• Go to bed!
• Peace and quiet (go for a wee)
• Take a shower - hot water stimulates the brain
• Mind Mapping

Critique it!

Shows example of the London 2012 Olympics - and Daily Mail readers versions - any better?
Mood Boards are your friend!
Create a British Theme - not the empire and stuff. Italian Job, Mr Ben, Coldstream Guards, Sgt Pepper Album - look for common elements eg Red.
Someone else would do it and get a totally different mood board

Advantages of mood boards

1. Concentrates on the concept/mood
2. Stimulates concersation
3. Quick
4. Clients can make their own

Design Patterns

Patterns are optimal - collect design patterns - check out tab design patterns on flickr

Sample colors

Dodgy phtotos can create color patterns

Finally a couple of examples

Open Doors student site - slanted text, copied colors

"Soak up everything, you never know when you are going to need it"
- John Hicks

• http://hicksdesign.co.uk/journal/be-a-creative-sponge
• http://del.icious.us/jonhicks/sponge

FOWD - Designing a web app with character

Continuing my Future of Web Design 2007 notes. Please welcome on stage Denise Wilton of moo.com.

Designing a web app with character

So, what is your character?

Why character? Well if you're like me, you design and develop a website, then you enter lots of nice copy. But is it really nice? How do you want people to feel? Make sure all informative copy is in 'character'.

The tone of your text says a lot more about your web app then your poncy graphics or xhtml validation.

flickr loves you

People love flickr. Not just because it's functional, but because it's nice to them - it has character and personality. Making people feel welcome and keeping them informed in whatever ways they are using the app.

Say what you're saying

Your typeface says a lot about you. Don't use large jagged red letters, unless you are doing a scary site!

Break it down

No matter how simple your app is - break it down into easy steps. Newbies will find all applications daunting to start with.

Functionality first

Use conventions - don't be afraid of these. Character should come second to functionality/usability.

What is it we're designing?

Don't get caught up with the design. Who are you trying to impress? In other words, "don't show off!".

Our work here is done... isn't it?

Once your design is finished, wait for the code, and be sure to apply liberal amounts of tweaking and refining before you move on to your next project. Don't launch a site then forget about it - bug fixing is all part of the process. Don't feel afraid to change stuff and remember, people engaging and sending email is a good thing.

FOWD - Designing for Web Apps

Ryan Singer of 37signals in Chicago, has helped create such celebrated products such as Basecamp, Backpack and Campfire. Not only is he a good designer, he is also a great speaker and I enjoyed his Future of Web Design presentation.

Ten tips for better signup forms

Making stuff up is hard

Ask easy questions first, this helps build momentum. Asking for a name is easy, asking for them to create a username is not.

Username is taken, try this…

Use AJAX to do live checking on usernames. e.g. Rockstar1966 is taken…

Keep it simple

Design the form with the minimum amount of information possible. Disregard passwords at this stage.

Words are your friends

Keep it friendly and conversational. i.e. "Which room would you like to reserve?"

Form Validation

(262) 914 - 5802 and 262 914 5802; are the same number. Make it easy to enter information in any format.

Muse Me

Show examples beneath form fields. i.e. beneath a "Company" form field, you could have "Apple, HP, BMW" .

Tell me what I'm gonna get

Remind people of why they sign up.

Kind Error Handling

Do not use BIG RED CAPITAL LETTERS, instead try this:
Please check the following:
Your NI Number.

A Warm Welcome

The whole experience should be comfortable, the first time a user signs in, they should get a special welcoming page. i.e. "Thank you for signing up".

Just give me the keys

Generate a brief sign up email, then move the getting started guide to the app.

Conclusions

Momentum, think about users, signup doesn't stop at submit, users don't worry about the tool, they just want to do their "thing" — let them get on with it.

Future of Web Design - Brendan Dawes

Halfway through the Future of Web Design Conference in Kensington. I am sitting outside, the sun is shining and I haven't seen so much as any html code. I was hoping for a bit of a brain storming session of best practices and solutions for creating better websites, and by that criteria, I am pretty happy. No, I haven't had to examine doc types, DOM or anything else remotely techie, but instead the focus has been on the user experience. How can we add value to what we already do? Here are some of my notes that I have made on the conference.

Brendan Dawes - Finding your creative vein

Magnetic North

I have had the pleasure of witnessing Brendan talk before, at a Flash Forward Conference a few years ago. Then he talked about design, from some observations he made about his cooker. Not exactly rocket science, but entirely appropriate. Once again, Brendan didn't launch Flash or BBEdit, but instead talked about cowboy films, litter found on trains and good old fashioned bookshops that still prevail, because of adding value, or creating an 'experience' for their customers.

Insert Silence

One technique, Brendan called "Insert Silence". He showed how this delay, this slight delay in user gratification, actually could reap larger rewards in the overall experience. He then showed a clip of the 1952 cowboy film, 'Shane'. He showed his edited version first, then showed the original. The original was more powerful, and in this instance, the baddie, used this pause to create a cruel, and meditated murder, Brendan's edit made it seem like a regular western shoot out.

He also showed examples of how WordPress makes a cool red flash when you delete a comment. Confirming to the user, that the operation has been dealt with, in a slick and reassuring manner.

Priceless.

Silence

I believe in the power of silence. Silence is the part of a song that gives the rhythm section space and notes to form. It is this silence that defines the actual sound. Silence is an important part of buddhist teachings, and I am sure many of my own recordings could do with a lot more of it, oh, and if you ever listen to my neighbour, you'll know just how much, I value the sound of silence.

Nice one Brendan
Peace

The FOUC Safari

The Flash of Unstyled Content FOUC has been with us poor web developers for a while now. However Apple's Safari browser also falls foul of this CSS disease.

Fouc Me

Been Googling for Safari FOUC fixes with no joy. Google Adsense has been mentioned with the FOUC word, but I haven't found any concise fixes.

Fouc You

Do you have a fix for the Safari FOUC bug? I would love to hear it and so would these fine people. Thanks.