20three » op

Sketchbook pages: 02.2012

Owen — Fri, 03 Feb 2012 14:41:46 +0000

Some recent scans of my sketchbook.

Metaphors & skeuomorphs in touchscreen UI design

Owen — Mon, 30 Jan 2012 15:21:06 +0000

Skeuomorph:
(Greek: skeuos—vessel or tool, morphe—shape), is a derivative object that retains ornamental design cues to a structure that was necessary in the original. Skeuomorphs may be deliberately employed to make the new look comfortably old and familiar.

There is no question that Android interface design has caught up with Apple IOS in terms of delivering a premium user experience, and with the release of Android 4 (or Ice Cream Sandwich) it appears that two opposing philosophies are emerging in mobile UI design.

An interview at fastcodesign.com with Android UX Design Chief Matias Duarte makes interesting reading. Duarte’s design thinking seems to be opposite of Apple’s – while Apple go for a skeuomorphic design heavy on using metaphors, Duarte opts for the opposite. His rational (and I’m para-phrasing here, you can check out his interview here) is that people don’t care for real looking buttons or metaphors – they are a hang up of a 30 year old computer interface design, and over-designed buttons with a 3D effect look great on their own but overwhelming when all put together. In his words: “…when you assemble the individual elements on a screen, each one becomes prominent on its own… Each is very pretty, but when you try to make a wall or a house out of them, all the embellishments fight with the larger building.”

In the fastcodesign.com interview with Duarte, references to Android’s new UI design being ‘like a magazine’ crop up rather a lot – although never directly attributed to Duarte as far as I can tell, the magazine as UI metaphor gets mentioned a few times – on the surface this seems at odds with his design thinking, as a magazine inspired layout, complete with turning pages, is of course… a metaphor. Magazines have been around a lot longer than computer interfaces, and can hardly be called a current and modern interaction model.

And then there is that problem of the ‘Pictures Under Glass’ technology, a phrase nicked from the very insightful Bret Victor. In this great blog post, Victor rants (his word) that “Pictures Under Glass is an interaction paradigm of permanent numbness.” – we can’t ‘feel’ the pages of a magazine through the interface of a touch screen device. Using ‘real’ objects as interactive elements within an interface helps a little with this problem – buttons under the glass of a touch screen will never be tactile, but they can have the appearance of being tactile, which can only help.

I am not a huge fan of using metaphors but I often find myself encouraging their use. I have found them useful for quickly communicating functionality – the one great advantage of using metaphors and skeuomorphic design is that you already know how something is going to work – if there is a dial, I know that I have to turn up or down. A toggle? I can toggle it. The big downside is that we tie ourselves to the limitations of the objects we are basing our metaphors on, we lose the chance to innovate or create new methods of interaction.

I would like to think that the average smart phone user is capable of learning new interactive conventions and can get by without the blatant signposting of metaphors, and that decent UI design can be accomplished with new interaction conventions; but to make sure a UI is understandable quickly, without instruction and by a broad demographic I will choose a metaphor. This piece of advice I have lifted from http://developer.android.com sums it up: “Real objects are more fun than buttons and menus: Allow people to directly touch and manipulate objects in your app. It reduces the cognitive effort needed to perform a task while making it more emotionally satisfying.”

Android 4 is promising a much more refined and improved user experience. As more people upgrade and as Android’s market penetration continues to grow it will be interesting to see how Apple reacts.

West Sussex Literary Trail

Owen — Tue, 15 Nov 2011 12:06:13 +0000

Last month, while the weather was still bright and sunny, we had a days walking and one nights camping along the West Sussex Literary Trail. We met at Christ’s Church railway station and walked along the trail till we got to Amberly, were we set up camp for the night. The days walk was about 15 miles and we had the customary late pub lunch at the White Horse Inn in Pulborough along the way…

…

Photos above taken with a Pentax K1000 using 400 ISO Fujifilm. The pic below taken on a HTC mobile.

The campsite near Amberly:

…

op / gh / dl

Design process for mobile devices: Part 1

Owen — Tue, 06 Sep 2011 18:46:55 +0000

At Kerb, the digital agency I work for, we have been doing a lot of mobile work. Most recently we have been commissioned by a large multi-national entertainment brand to produce a multi-lingual ‘match 3′ type game that has to be ported across 33 Android devices and the iphone 4 and iphone 3Gs.

As there is currently no standardized methodology for designing across multiple mobile devices (an assumption based on our own research that was confirmed by various speakers at this years dConstruct conference) I thought I would post up some of our design processes.

This first post is about our initial reaction to the task of converting art and design assets for use on multiple mobile devices.

As is with many projects, time-lines were challenging and we had to get a working version on one particular Android device before we ported the game to the other devices – so we went ahead with the one Android version of the game before we went to work porting the game to other handsets.

The challenge for the design team is to take an existing game that has been designed for one particular handset and then make that design look intentional and considered across 33 other devices which all have different screen dimensions and resolutions.

Now, I must point out that I am not talking about amending the functionality of the game to fit with the functionality of different handsets – I am talking about the graphical aspects, the visual language, and in particular how the interface and art assets would scale to fit different aspect ratios. Our overall user experience, in terms of user interaction, is the same across all the devices.

This process is also particular to our game, other apps and games would not necessarily have the same process; our game is a visually rich experience with lots of animation and illustration all based on our clients IP. Visually simple games and apps would not need the same approach.

So, our initial challenge was to simplify the information we had about the different handsets, and then re-present this information to the design team. This information will help us create a clear strategy for amending our art and design assets with the least amount of impact on time and budget.

We simplified the mobile phone specifications with three simple steps.

1.
Firstly we grouped our device list into their respective screen dimensions. We did not worry about screen resolution at this point as we would deal with resolution as part of the export process (a process I will talk about in a later post).

This grouping helps simplify the list, we can quickly see that there are four different screen dimensions from a list of 33 devices – which means we have four different aspect ratios to consider.

2.
Our first comparison of screen sizes – by anchoring the different screens top left we can see the differences in the aspect ratios and how they will impact our design. We have rich illustrated backgrounds to our game levels – What will be the simplest way to amend our assets to fit these different aspect ratios? Can we keep a consistent grid?

3.
Our next comparison of screen sizes gives us the solution. By giving the four different aspect ratios the same fixed height and aligning the screens on a central vertical axis we can further simplify the amends we have to make – we can now see that the differences in the screens can be restricted to width, and the amends to the relationship of elements within the design (art assets and UI) can be restricted to the vertical edges of the device screen. We are now in a position to make decisions on whether to apply a fixed or a relative structure to our design.

By presenting the information in this way solutions arise, and complex looking tasks appear much simpler and far less daunting.

The next step in our process is the physical amending of the art and design assets and their export to sprite sheets and mobile-ready assets, which we do with both off-the-shelf software and bespoke components we write internally. I will write up these next steps in another post with the help of Kerb’s Technical Director, Pete Hobson.

…And for any Brighton/Sussex based developers, Pete is doing a talk at DotBrighton about developing for mobile on the 28th of September.

Dan Drakeford: new ‘Now In Lemon’ Illustrations

Owen — Thu, 01 Sep 2011 09:27:13 +0000

As well as contributing to the Now In Lemon ‘zine, Mr Drakeford has also updated the Now In Lemon site with a load of new work. I have posted a favourite of mine below but please take a look at the rest of his work – his ‘The Park‘ strip is definitely worth checking out.

Designers Don’t Have Influences: Austin Howe

Owen — Fri, 26 Aug 2011 09:08:40 +0000

I had better start by owning up to not having read Designers Don’t Read by Howe – I had seen lots of press for it but never got round to picking up a copy. So I have come to his second book without reading the first, but Designers Don’t Have Influences (Amazon US|CA|UK|DE) is stand-alone and can be picked up without any prior knowledge of Howe or his writing.

Designers Don’t Have Influences is a collection of short essays on people that have influenced Howe throughout his successful career in advertising. Rather than write about people working directly in his field Howe writes about all sorts of people from various disciplines. He writes in the forward:

“My basic premise is that we can often learn more from people in other disciplines than we can from our own”

This really resonated with me. As a designer my own influences are often from beyond my profession and can be divorced from their context. Howe’s introduction had already got me excited about reading on.

“Disclaimer: this book is not an exhaustive compendium of every notable author or artist or inventor or entrepreneur. It’s really more of a random collection of individuals who have impacted me in some way – people I think most designers would probably appreciate knowing a little more about.”

There are no work samples in the book – Howe explains that Designers Don’t Have Influences follows in the “spirit and tradition of Norman Potter’s little gem, What is a designer: Things, Places, Messages” (a book I would also recommend, Potter is a great influence on me). Howe also explains that he wanted to dismiss the idea that designers don’t read – hence the title of his first book.

Each chapter in Designers Don’t Have Influences is a self contained essay. At the start of each chapter is the estimated time it will take to read it – I loved this element (one he uses in Designers Don’t Read), as I could pick up the book in my lunch time, waiting for a tube, sitting on Brighton beach, and flick to a chapter which I knew I would be able to read in the time I had. I felt I was carrying round a bunch of observations and ideas I could dip into rather than a book I would have to read from page one onwards. Each chapter has a little nugget of Howe thinking, seemingly designed to make you think a little, question a little and maybe re-evaluate your position and approach to your design work.

Some of the chapters are simply Howe’s observations of the experiences of working with others in and around his industry – the chapter on Bill Cahan gives a great insight into the processes of an innovative and successful design agency and those that run it. Many of Howe’s other subjects will be familiar to designers, the ubiquitous Ayn Rand gets a chapter, as do the Saatchis, Julian Schnabel, Josef Müller-Brockman and Damien Hirst, but it is the people I had never heard of that interested me the most – a great example is the chapter on François Allaire, a Canadian Hockey goalie coach. As a Yorkshireman who grew up with only a passing interest in football (my trips to Elland Road were on the whim of friends, I was never a committed football fan), there was no way I was going to have heard of a Canadian Hockey coach. Within this chapter Howe explains how Allaire re-invented goalie coaching from the ground up, and coached some of the most successful goalies in Hockey history. Howe writes about how Allaire can be an influence to someone working in the field of design:

“First of all he teaches us that it can be done, wherever and whenever it is actually attempted. That by questioning the conventions of how something has been done for years, we can find new ways of approaching it, simply by being aware, observant, ambitious.”

At the back of the book, once the essays are over, there’s a collection of doodle style portraits of the chapters subjects (along side a quote), credited to Aaron James. – my favourite is the starey scary disembodied Damien Hirst, but Maurice Saatchi’s portrait is worth a mention. I also liked the book design and typography credited to Fredrik Averin – a seemingly modernist design subverted with bold lines striking through the words, a treatment carried through from the cover to the chapters headings.

Maurice Saatchi

The best accolade I can give this book is that I already have bought his first book on the back of this one – and I will be keeping an eye on out for further publications and writing by Howe.

This review also features on The Designer’s Review of Books.

Now in Lemon: lo-fi art & illustration

Owen — Mon, 01 Aug 2011 18:33:03 +0000

Now In Lemon is a 40 page black and white zine produced by Dan Drakeford and myself. I won’t try to describe it, you can see it all here.

Available for the majestic price of £3.00 plus postage at the Now in Lemon website.

Now in Lemon was printed by those nice people at Footprint Workers co-operative.

Tankboys: Manifesto project 2010

Owen — Fri, 20 May 2011 15:26:08 +0000

Tankboys are an independent design studio based in Venice. I recently got hold of their book: Manifesto. Information about this project from their site:

To say that the end result is what counts is just not true. Especially in design. Rather, a good designer is more concerned with the process; that winding, potholed road he embarks upon every time he gets a new job.

“Manifesto.” is an ongoing project that leaves the final result to one side so as to focus on the creative process. It brings together under one roof the personal manifestos of some of today’s smartest and most renowned international designers.

Whilst some of these statements are very well known, others have been prepared exclusively for the project: some are programmatic pieces of writing, some are detailed work manuals, all are passionate tributes to graphic design, creativity and the design culture.

Reading these manifestos without the authors work shown alongside is an interesting set up as the reality of the finished product does not interfere with the readers interpretation of the words and ideas. Although I am aware of many of the designers work it was still novel to read the words and not see the work – the ideas on process and ‘design philosophy’ can then be taken at their face value and I can imagine more easily applying those ideas to my own work and design processes.

Going back about seven years, when 20three was a working studio, I toyed with the idea of writing a manifesto, or a statement of intent. It never materialized and looking back I think I was lacking the clarity of purpose that is needed to put such concise thoughts to paper. Reading these collected manifestos is inspiring and has given me the motivation to look again at seeing if I can sum up my own design philosophy in a short manifesto.

I wanted to re-produce a couple of the manifestos so readers of this blog get a taste of the book – there are a few I could have chosen but The cult of Done by Bre Pettis and Kio Stark is definitely one of my favorites, possibly as it made me smile the most.

The cult of Done Manifesto

01 There are three states of being. Not knowing, action and completion.

02 Accept that everything is a draft. It helps to get done.

03 There is no editing stage.

04 Pretending you know what you’re doing is almost the same as knowing what you are doing, so just accept that you know what you’re doing even if you don’t and do it.

05 Banish procrastination. If you wait more than a week to get an idea done, abandon it.

06 The point of being done is not to finish but to get other things done.

07 Once you’re done you can throw it away.

08 Laugh at perfection. It’s boring and keeps you from being done.

09 People without dirty hands are wrong. Doing something makes you right.

10 Failure counts as done. So do mistakes.

11 Destruction is a variant of done.

12 If you have an idea and publish it on the internet, that counts as a ghost of done.

13 Done is the engine of more.

Although the book is now sold out, you can read the manifesto’s here: http://www.manifestoproject.it

Barry Windsor Smith: Machine Man covers, 1984

Owen — Mon, 16 May 2011 18:12:11 +0000

Most comic geeks will probably be familiar with Barry Windsor Smith from his Weapon X series featuring Wolverine (Which Smith both drew and scripted) and from his work on Conan. I came by Smith via another route: Machine Man. Specifically a four issue series set in an alternative future scripted by Tom DeFalco with art by Barry Windsor Smith and Herb Trimpe. The series is now probably now more well known for its depiction of an ‘evil’ future Iron Man, Arno Stark.

Apart from a now very crispy Daredevil collected trade I have from 1988, my Machine Man collected trade is my oldest comic book (apart from some Asterix comics I have – sadly I lost what 2000AD comics I had). Why do I love it so much? Mainly because I think robots are cool – and Barry Windsor Smith draws cool robots.

Smith also drew a one issue epilogue to Iron Man’s original ‘Armour Wars’ series. Worth checking out if you like his stuff.

Please enjoy these four covers that make up the series, first published in 1984:

Machine Man one

Machine Man two

Machine Man three

Machine Man four

No related posts.

Kevin Meredith: Toy Cameras, Creative Photos: High-end Results from 40 Plastic Cameras

Owen — Sun, 10 Apr 2011 17:05:50 +0000

I would think that most designers with an eye on the lo-fi will be familiar with the aesthetic of toy cameras. As an arty type with an interest in lo-fi technology and photography I have a couple of toy cameras myself, so when the opportunity came about to review Kevin Meredith’s book on toy cameras – Toy Cameras, Creative Photos: High-end Results from 40 Plastic Cameras (Amazon UK) I was keen to get my hands on it and see what other plastic fantastic cameras are out there.

So what is a toy camera? As Kevin Meredith states in his introduction, it might be a better to ask: “what is a serious camera?”

The answer to that question is simpler, a serious camera is one that has been designed to capture a scene with as much accuracy as possible. The resulting images, while technically perfect, can seem a bit lifeless to some people. Toy cameras are ideal for photographers who don’t want to capture a polished version of the world.

The books setup and approach is straightforward – 40 toy cameras and examples of photographs taken by those cameras. How the book is structured is also simple – Each camera gets a page with an image of, and a few paragraphs about, the camera in question and then several spreads of photography will follow, the photographs illustrating the cameras foibles and quirks. With many images the film type and other details such as the processing technique are given.

The text is informative and succinct. With each camera a little background or description is given, Meredith giving his opinion on the cameras practicality, drawbacks and quirks; for each camera information is given on lens type, aperture, shutter speed, film type, ISO and similar and variant models. The photography throughout the book is excellent – as well as the photography of the author, Meredith has also roped in a load of contributors all who have supplied quality photography.

I was initially surprised at the inclusion of digital cameras, but by Meredith’s own definition a toy camera can be digital and including them supports the inherent inclusiveness of toy cameras. The random ‘happy accidents’ of light leak and vignetting also add to this inclusiveness – no matter what your proficiency in photography the same random results will happen. This is were the divide happens – to embrace such lo-fi photography you have to accept and embrace these random quirks – control freaks should stick to their high-end SLR’s.

The book ends on brief but informative sections on film formats, processing, and toy camera basics: Film speed, shutter speed and aperture.

I don’t have any real criticisms of this book, It is a simple proposition executed well. I would have preferred to have seen larger images of the cameras but that probably says more about me fetishizing cameras than anything else. I did find that the graphical elements of the book - furniture and colour – is a little derivative. It looks like a Lomography product. Lomography is the commercial trademark of Lomographische AG, an Austrian company set up in the early nineties whose name is taken from the former Russian manufacturer LOMO PLC, and their camera the LOMO LC-A, which Lomographische AG distribute around Europe. Lomographische AG have very cleverly promoted and nurtured a large worldwide community whose interests are cheap plastic cameras, soviet imports and processing techniques such as cross processing and redscale. The design throughout Toy Cameras, Creative Photos… echo the Lomography branding used throughout their publications and marketing material. Of course there is nothing wrong with this, in fact from a marketing perspective it is probably the right approach as Lomography is such a recognisable entity and has such a large community. I guess I feel that there has been a missed opportunity for this book to have an identity of it’s own, and break the hegemony Lomographische AG have over lo-fi/toy camera culture. This is a minor gripe though and overall the important bits – the photography and text – are given plenty of space to breath.

For a newcomer to lo-fi photography and toy cameras this book will be a great introduction. To someone like me who has already got the lo-fi camera bug it is still a great buy. There are cameras featured in this book that I never knew existed, the action sampler cameras really stoked my imagination, I can see myself trawling ebay for an Oktomat sometime soon. The Ikimono looks cute too.

This book also works well as a reference book or a source of inspiration – there really is some great photography featured and anyone with an interest in photography, be it lo-fi, digital or film will appreciate the qualities of the images.

This review also appears on The Designer’s Review of Books.