While this is only a preview of the OS it’s still interesting to compare it’s style with the current OS, as well as competitors — and perhaps even more interesting to theorise about the reasons behind this shift. There are a number of UX refinements as well as some lovely new and appropriate animated transitions, but I’m just reviewing the visual style for now, it’s hard to judge other aspects of the interface without using it for a period of time.

There’s no doubt the style looks completely different, in fact it doesn’t really look Apple branded at all. Apple is known for their unique design and it’s a core part of their brand, they often set the precedent for best practice and establish a visual trend that ripples through the industry. I’ve always appreciated the fact that the whole Apple experience was designed for the user, from hardware to software. This design doesn’t feel unique at all.

Visual trends in digital design are often picked up quicker than other design industries. Many websites, games and apps have already leveraged the original Microsoft metro design language introduced with Windows 8. It’s meant the style is a lot less own-able now, and therefor difficult to support a branded personality. Android borrows heavily from this design langauge and now it seems Apple have adopted it too.

Windows phone set the trend for a flat, simple aesthetic with large type.

The home and lock screens on Android have obviously provided a lot of inspiration for iOS 7.0. The large clock and even the weather icons are very similar.

In some regards a consistent use of an establish visual style is beneficial as it helps users navigate, as they are already familiar with it. It’s just a shame the personality, and subsequently brand, is diluted. Mobile rivals Android and Windows phone were always trying to play catch up, perhaps this proves they already have? At the very least it places Apple in a weaker position to be the design leader it was once known as.

iOS 7 has a simple look to it. Large type contrasts with flat plain backgrounds. There’s little distinction between content and interactive elements. Icons introduce gradients and adopt bright colours.

While the screens above present a consistent style in reality iOS 7 is a bit of a mess at the moment. There are still many legacy items that haven’t transitioned to the new visual style. This demonstrates the extent of battles that must have occurred within Apple, politically and technically, to support such a massive shift. Perhaps we won’t see a truly consistent new style until iOS 8 is released.

Typography

Both Android and Windows have developed custom typefaces that are optimised for legibility at small sizes on screen, they also help to brand each OS, lifting them a little from the generic, especially Android as it came later.

Windows uses a version of Segoe for digital interfaces cleverly called Segoe UI. It was originally designed in 2004 but the latest versions have included some updates. Android uses the Droid Family, in sans-serif, serif and mono-spaced variations. It was first designed in 2007 but updated with a Pro version in 2009 and a bespoke condensed handset version in 2010.

Apple has stuck with Helvetica, which was originally designed in the 1960s — though they have moved to adopt the ultra light variations and the updated Neue variation from the 1980s. It’s a lovely typeface but very generic due to over use and so it lacks personality. It’s also optimised for print legibility, though with retina displays this is less of an issue. There was an opportunity to bring some brand personality through here, perhaps with a custom Apple typeface.

Apps on Windows phone looks similar to iOS 7 apps; they both have white backgrounds with black text and simple icons. Windows phone is more playful with large custom-designed typography and therefor I feel has more of a brand identity to it, being a more ownable style.

Users engage in three core activities on mobile at the moment: social, news or gaming. Payment systems have not been perfected yet so aren’t a common use, there’s still room to develop the right solution. Mobile content needs to be touch optimised, aware, consumer friendly and intimate. It has to have clear goals and understand it’s purpose (there’s no point building an app for the sake of it).

Current feature sets mean it’s become a physical sensor to transform real world objects to digital content. Blippar is an Augmented Reality Advertising app

In the future the mobile device should be aware and anticipate the user’s next move; if they are getting a flight later in the day it should update them with what time they need to leave for the airport based on current travel time as well as the latest flight status. It will integrate more with wearable technology such as Google Glass.

There’s a big movement towards behavioural UI design, where visual communication becomes experience communication. The future mobile UI understands the environment it’s being used in and adapts, not just the geolocation but the actual room the user is in. It gathers biometrics to understand the user’s mood too, so it can adapt if a user becomes frustrated or seems to be in a hurry.

Future content will also be language independent through the use of more sophisticated software. It will shift to a subscription model and be stored in the cloud.

Recommended books for mobile designers

See larger image Simple and Usable Web, Mobile, and Interaction Design (Voices That Matter) (Paperback) By (author): Giles Colborne List Price: £18.99 GBP New From: £9.29 GBP In Stock Used from: £9.75 GBP In Stock

See larger image Smashing UX Design: Foundations for Designing Online User Experiences (Smashing Magazine Book Series) (Paperback) By (author): Jesmond Allen, James Chudley List Price: £27.99 GBP New From: £14.72 GBP In Stock Used from: £15.29 GBP In Stock

See larger image 100 Things Every Designer Needs to Know About People: What Makes Them Tick? (Voices That Matter) (Paperback) By (author): Susan Weinschenk List Price: £18.99 GBP New From: £9.39 GBP In Stock Used from: £11.25 GBP In Stock

Technology is going to play a lesser role; it will be more embedded, smart, aware and connected. It will be become invisible but exist everywhere, with agency and autonomy. The future is less about hardware specifications and more about communication. Future content will be real time.

Oreo launched this campaign right after the black out at the Super Bowl in the States and found it very successful.

Science Fiction gauges public reaction to technological development. It’s already identified the need for boundaries and the choice for adoption of technology, including the need for a visible off switch.

Microsoft’s Kinect 2.0 and Xbox One threatens to be always on, with a camera right in your living room, which is already gathering negative feedback even before being released.

The Internet user of the future will exist in one of three categories:

1. The hyper individual – who is research focussed, they use the Internet to maximise their behaviour and efficiency.
2. The digital consumer – uses smart algorithms to discover the best products and services, apps that optimise their household services and recommend based on their purchase habits and preferences
3. Performative self – the user with a social media overlay, they like to be liked and fit within a recognition culture. Their identity is expressed through social media rather than consumption of products or fashion.

Another consideration for the future of the Internet is the toll of digital data on the environment. We are already exceeding the bio capacity of the planet. Digital data can surprisingly be not very environmentally friendly due to the hosting resources required.

IBM Smarter Planet is an initiative to make data more environmentally friendly

Sharing from mobile devices account for 31% of shared items today. Photos make up the majority of shared content, most of them being food. The theory why food is so popular is because it’s relatively private (there’s no one in the photo) but still involves an intimate moment — it conveys emotion and tells a story — content that can do that is the type of sharing that will grow in the future. Sharing will also be used to make services more useful, apps such as Sticher already recommend based on what others are listening to.

Exercise maps such as a jog or cycle routes are another example of content that tells a story without invading personal privacy too any great extent.

Nike is is a good example of a company that has reinvented itself; from a successful sneaker producer to an innovative producer of connected running devices (shown in the image above). R/GA is another company known for successfully re-inviting itself. Sometimes an entire industry needs to change it’s offering in order to remain successful. The mobile phone industry was shaken up and forever changed when Apple introduced the iPhone. They proved consumers were willing to invest in such a device.

Probes attempt to explore new opportunities and generate innovation in order to set about re-invention. In this context they are edge finding acts that discover, provoke and engage. They help shape the future and provide the opportunities for how a company, brand or industry can adapt. They are usually small, odd, cheap and different — often quick and dirty prototypes. Sometimes they fly in the face of cultural norms, breaking the rules of capitalism. Bars adopted the use of probes when they started hiding their entrance, or even not allowing guests to enter. It proved successful as it created more interest than any normal advertising campaign. Ideally a small percentage of time and money should be devoted towards the creation of probes as a method of insuring on-going success.

Examples of probes in different sectors

This campaign for Coca Cola re-enchanted the existing environment and reversed the purpose of CCTV technology. Instead of capturing crime they used to it capture joy.

Le3 created a projection of a tiger that they ran through the streets of Paris over a few nights. A legend was born; only a set number of people saw it but word of mouth carried the story through social media.

Kate Stone used her love of creative technology with physics to develop interactive paper using ink that carries a current along with a small circuit board. She proved paper could play sound via bluetooth, connect to social media and it could start to accumulate analytical data on readers by creating rough prototypes to allow her to gain investor support.

Microsoft’s Kinect was basically a sophisticated probe for exploring how the mass market would adopt motion tracking in games. The conclusion now is that it’s better as a device that compliments a gaming controller rather than something on it’s own. Obscura explored it’s use as an interactive motion tracking device by prototyping. One of the outputs of probing was this pool table — a somewhat more sophisticated probe itself.

The topic of human augmentation can be a scary one and the industry is moving quicker than most people realise. It’s almost possible to replace existing limbs and organs with improved versions. A showroom in Berlin has been built to probe the social reaction to offering biotic implants that can replace and improve on existing physical ones.

Recently aired on Channel 4 in the UK was this documentary that probes the possibilities (technically, socially and ethically) of prosthetics by constructing a bionic man.

The information and examples in this post were influenced by the latest Creative Social morning I attended. The speakers were:

• Dr Kate Stone, Cambridge Tech Innovator + TED speaker
• Grant McCracken, Founding director of the Institute of Contemporary Culture
• Dr Bertolt Meyer, Visiting Professor for Work, Organisational & Social Psychology at Chemnitz University of Technology
• Mark Cridge, Director Of Consulting, BERG
• Gregg Mayles, Design Director, Rare Studios
• Fredrik Forrest, Creative Director, Obscura Digital

This is why it’s important to have a strong, unique brand personality. The brand can get diluted in an interactive space, and if it’s too generic the unique brand personality may vanish. The UI will fail to leave any sort of brand impression on the user, which can effect it’s communications, perception and ultimately value.

Avoid adopting generic brand values

Virgin Atlantic has created it’s own space within airline industry helped by it’s strong, unique brand values

Generic brand values such as professional, simple and straight-forward don’t carry any real personality in offline communications, and even less when executed within a user interface. No interface strives to be amateur, complex and clumsy — so there are no distinguishing values to separate it from any other UI. Unfortunately some brands come with values such as this, in these circumstances all the designer can attempt to do is refine them to a more unique subset for their digital communications.

Create unique, specific experience principles

Luke Wroblewski has written a good article on how to develop experience principles, as well as a comparison between Facebook’s generic principles and the unique HTC Sense set.

Experience principles need to be specific rather than a set of best practices. They are usually designed to meet user and stakeholder needs rather than the needs of the brand. So it’s generally best to keep them separate to brand values — they can help influence experience principles though. Where suitable, some brand values can be translated in to some of the experience principles to help create a consistent experience.

Recommended books on experience design

See larger image Designing Interactions (Hardcover) By (author): Bill Moggridge List Price: £30.95 GBP New From: £21.32 GBP In Stock Used from: £13.49 GBP In Stock

See larger image Lean UX: Applying Lean Principles to Improve User Experience (Hardcover) By (author): Jeff Gothelf List Price: £18.99 GBP New From: £9.31 GBP In Stock Used from: £10.11 GBP In Stock

See larger image The Starbucks Experience: 5 Principles for Turning Ordinary Into Extraordinary (Hardcover) By (author): Joseph Michelli List Price: £16.99 GBP New From: £7.95 GBP In Stock Used from: £0.01 GBP In Stock

Design integration with UX, development and content

Designers have always had to have worked closely with collegues with other specialisations; often projects were set up in ‘waterfall’ though, where the project was passed between people with minimal cross over. It also meant the design was done in isolation with little input from non-designers. However now we need to produce refined prototypes because of the greater variations in screen sizes and interaction technology. This means all team members need to be working at the same time while the design is passed back and forth through Content, UX, design and development — so all team members have more exposure to the design process and are able to give constructive feedback. This also means less design work in Photoshop and more with browser based tools. Many responsive design elements are quicker to create and test straight in the browser.

The end of designing in a fixed rectangle

I posted on the idea of ‘designing outside the rectangle’ in 2011. It was an innovative idea then, in 2013 I think it demands closer consideration. This prediction is in some ways an evolution of three 2012 predictions; multi-platform touch points, the removal of interface elements, and animation.

Developments in web page rendering means designers can adopt the use of a 3D plane, but that’s just one half of designing outside a rectangle. There’s also the demand for interfaces to flex to different size screens rather than a fixed shape. The web is already on mobile and tablet devices, but it’s becoming better on TV, game consoles and even cameras.

Designers need to consider the elements of a page and where they sit at different resolutions and aspect ratios. This means content and navigation elements define the start of the design process through break points, rather than a fixed grid, type sizes and colour palette — as it often did in the past. It means the end of the 960 fixed grid and the adoption of modular grid systems that maintain consistency through scale and proportion and can adapt to different aspect ratios. Older tools used to define type hierarchy come in useful for creating these scales; Typograph and Modular Scale.

High resolution assets

I predicted this for 2012 but only really saw it in practice in December on one commercial project, as there was a strong business need for it. I think it will become the norm for 2013 though. Responsive and adaptive design means graphic elements need to be optimal for display on small screens with high resolutions as well as large screens with low resolutions.

So bitmap assets generally require a number of file variations. Server technology either provides the appropriate asset for the device, or can even automatically create it, all seamlessly. The designer still needs to consider how this should look though, often proportionally different sized images will have an impact on layout.

An ideal method of avoiding multiple file variations is to use vector assets as they look sharp at any size. So rather than using bitmap file formats for icons, a typeface can be created from the icons and this can be used to render them as vector assets.

Recommended books for web designers

See larger image Universal Principles of Design, Revised and Updated: 115 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions and Teach Through Design (Paperback) By (author): William Lidwell, Kritina Holden, Jill Butler List Price: £18.99 GBP New From: £10.19 GBP In Stock Used from: £13.42 GBP In Stock

See larger image Don’t Make Me Think!: A Common Sense Approach to Web Usability (Paperback) By (author): Steve Krug List Price: £24.99 GBP New From: £12.56 GBP In Stock Used from: £10.99 GBP In Stock

See larger image HTML & CSS: Design and Build Web Sites (Paperback) By (author): Jon Duckett List Price: £19.99 GBP New From: £10.67 GBP In Stock Used from: £11.06 GBP In Stock

See larger image The Elements of Typographic Style: Version 4.0 (Paperback) By (author): Robert Bringhurst List Price: £19.20 GBP New From: £12.36 GBP In Stock Used from: £14.87 GBP In Stock

See larger image Grid Systems: Principles of Organizing Type (Design Briefs) (Paperback) By (author): Kimberly Elam List Price: £16.99 GBP New From: £8.66 GBP In Stock Used from: £2.58 GBP In Stock

See larger image Smashing UX Design: Foundations for Designing Online User Experiences (Smashing Magazine Book Series) (Paperback) By (author): Jesmond Allen, James Chudley List Price: £27.99 GBP New From: £14.72 GBP In Stock Used from: £15.29 GBP In Stock

See larger image 100 Things Every Designer Needs to Know About People: What Makes Them Tick? (Voices That Matter) (Paperback) By (author): Susan Weinschenk List Price: £18.99 GBP New From: £9.39 GBP In Stock Used from: £11.25 GBP In Stock

10. Skyrim: Dragonborn

This expansion adds a whole new island to the game. Not only did I come back to Skyrim to complete this but I also went back to the mainland to finish the Hearthfire DLC as well as a few random quests I still had to do. More Skyrim is never a bad thing.

9. New Super Mario Bros 2

This is the only game I’ve actually completed on the 3DS and I bought an XL especially for it. It’s mario as I remember it in 1991!

8. Borderlands 2

I was addicted to the first one and this is more of the same; fantastic co-op focussed game presented in an over-the-top cell shaded humorous world. It’s all about the game play here. Eventually I overdose on it and it becomes tiring though.

7. The Walking Dead

A frustrating control system (can’t invert controls!) and several bugs didn’t prevent me from playing through each of it’s 5 chapters in one sitting. The story and character development make this adventure game / interactive graphic novel stand out.

6. Dragon’s Dogma

It received mixed reviews but soon after creating my character I realised it was a hidden gem. Sure, it’s got a badly designed menu system, weak fast travel system, odd (Japanese style) story moments and awkward cut scenes; but the immersive atmosphere of the world combined with reasonably deep real time combat from diverse player classes, and a unique pawn (NPC) companion system, make up for it. Climbing up a giant monster so you can plunge your daggers in to it’s neck, only to be thrown off, cast a healing spell, rebuff your party and run back to start climbing again make this feel really unique.

5. Dishonored

I didn’t expect to like Dishonored as much as I did. I spent most of a weekend working my way through the campaign. It’s all about the game play, and the freedom you have to tackle the assassinations in each level.

4. Assassin’s Creed 3

Yes, there are lengthy tutorial-like chapters and it’s an evolution of previous games rather than an innovation; but it’s still got an immersive world to explore with beautiful graphics, a refined combat system and an engrossing story. I prefer renaissance Italy but this isn’t far behind.

3. The Witcher 2: Enhanced Edition

Technically released in 2011 — though this version came to console in 2012 so I’ve included it. There’s nothing to fault with this game; involving story with strong characters, multiple paths based on player decisions, deep sword play and magic combat and a beautifully crafted fantasy world to explore.

2. Mass Effect 3

I has hooked on Mass Effect since the first game so returning to it’s world and story was instantly satisfying for me. I didn’t mind the ending but thought it was a little unclear and was disappointed that all my efforts to raise my ‘war effort readiness’ didn’t seem to pay off. Still that’s about all I can fault. It’s also got a great co-op multiplayer that provided an equivalent amount of entertainment as the single player.

1. XCOM: Enemy Unknown

This was the easiest way I could lose a few hours this year. Intense turn based combat combined with base building strategies mixed up the game play that it was hard to put down. I also appreciated the references to B-grade sci-fi movies.

Honourable mentions

Kingdoms of Amalur: Reckoning It took me a few hours to get in to this, nearly giving up — partly because at first it felt like a single player WoW, which wouldn’t have interested me. Once you master the combat system and level up a bit you realise how fun it can be. Play through the main quests and don’t bother about the side quests, both DLC packs are worth playing too.

Syndicate Picked up this because of my love of cyberpunk but also for nostalgia for the early 90’s original. Slick art direction, immersive environments and fun multiplayer make up for an otherwise fairly standard first person shooter game mechanic.

Sleeping Dogs Jumping between cop and gangster provides an interesting pace and character development. Fast paced engaging hand to hand combat and the immserive open world of Hong Kong. It starts off fairly generic but the story picks up 5 hours in.

Journey Lovely art direction and music with a simple but satisfying game mechanic. The story didn’t appeal to me and I had no emotional response like many reviewers seem to have had. Still, a lovely game and worth playing.

More lists from more people

• Revision 3 discuss game of the year
• Gamasutra: The 10 best games of 2012
• Eurogamer Readers’ Top 50 Games of 2012
• Forbes: The best video games of 2012 in pictures
• Giant Bomb’s videos on Game of the year 2012
• Hey, Game Developers: Please Steal These Ideas

Visual rhetoric differs from rhetoric applied to language because visual meaning is personal to the reader (viewer), unlike written communication. Visual meaning is based on their previous experiences — whether that be with the product/media or their environment and culture, often a combination of other factors too.

Meaning can be taken from anything we choose to take it from, whether an intentional act or not. Designers are responsible for intentional acts of communication which should encourage readers to extract meaning. A designer may use a certain colour or image or other graphic element (called the signifier in semiotics) that she/he believes conveys a particular message, the reader interprets that signifier by applying their own experiences or culture (signified) and creates the resulting final meaning (sign).

Designers need to understand who their demographic is and how they are likely to interpret meaning from graphic elements, along with a knowledge of the medium or channel (The medium is the message). Often prototyping and testing will reveal answers to these topics. Good design is a combination of design craft (colour, layout, type etc), a knowledge of the audience, medium (where a good technical understanding can help with digital content) and appropriateness.

The reader isn’t always going to interpret meaning in the same way as the designer, so a piece of work that uses poorly set type may in fact be brilliantly designed and just not meant to speak to those with an appreciation of typography. That’s not to say having an intimate knowledge in the craft of design isn’t required, in order to break the rules you need to understand them. Knowing how to kern type can be used to make it more accessible, alter the meaning, or make it more appropriate for a certain audience.

An understanding of the typeface used can help deliver the intended sign in some cultures; The Romans used serif faces to represent the empire, while san-serif faces represented the republic, for example.

Rhetoric in automobile instrument typography

It is important to be able to be read instruments quickly and accurately for obvious reasons and many cars use a simple sans-serif such as Futura. However there’s often a requirement to carry rhetoric in order to support the meaning of the brand and/or create more appeal for the demographic.

In 2006 Renault showed the Nepta concept car at the Paris Motor Show. It’s instruments use two typefaces — the outer one clean and relatively simple though with hints of the modern style, especially the number 3. The inner typeface is a pixel based font, suggesting a relationship to technology — though strangely dated.

BMW uses Frutiger in all of its cars –- a typeface designed by Adrian Frutiger in Switzerland in the 1920s. It’s a simple, strong and versatile and suits its application perfectly. It’s highly legible while also supporting the brand meaning, reliability and quality. Frutiger isn’t BMW’s own custom brand font though. Their custom font is based on Helvetica Neue Bold and also highly legibility. So it’s a strange decision to not use it, especially considering they’ve probably had to licence Frutiger for every car they produce.

Jacques Durand’s theory

Durand states that there are always two operations in figures of rhetoric; addition (eg: repetition) and suppression (eg: concealment). A substitution or exchange may also occur in either of these figures. A substitution is a suppression followed by an addition, and an exchange is two reciprocal substitutions. Each figure can be executed in several ways. Rhetoric adopts two levels of meaning, or language, ‘language proper’ and ‘figurative language’. This relates to both Barthes’ and Eco’s theories on semiotics in that they split meaning in to two areas as well, Barthes in to ‘language’ and ‘speech’ and Eco in to ‘signification’ and ‘communication’.

Language proper is the syntax/rules that the communication must follow in order to communicate and figurative language is the system in which the message is communicated, ie: the nature of the operation and the relation that unites the variable elements.

Absolut have a whole series of ads using suppression; the product is missing and so becomes obvious through its absence and the reader adds meaning. They even have a cult following!

Recommended books

See larger image Mythologies (Vintage Classics) (Paperback) By (author): Roland Barthes List Price: £8.99 GBP New From: £2.24 GBP In Stock Used from: £1.43 GBP In Stock

See larger image Rhetoric: A Very Short Introduction (Very Short Introductions) (Paperback) By (author): Richard Toye List Price: £7.99 GBP New From: £1.43 GBP In Stock Used from: £1.73 GBP In Stock

See larger image Defining Visual Rhetorics (Paperback) List Price: £36.99 GBP New From: £28.01 GBP In Stock Used from: £27.25 GBP In Stock

thewanderlust.net varies it’s layout to make best use of device resolution and orientation, it’s responsive rather than adaptive as the UX patterns and code remain the same.

Grids & type

Strong grids are a staple of anyone who loves design and typography. A grid can inherit the typographic proportions and allow for consistent and beautiful positioning of elements. Grid thinking became a big part of my visual design process in web. At first grids were fixed with a width of 800px, then slowly evolved to 1024px — but in recent years there’s no longer a standard. As mobile and tablet hardware became popular and a vast range of resolutions and pixel densities have become popular.

Key things to note:

1. Designing grids for responsive design is about proportions rather than fixed pixel sizes.
2. The grid need to cope with modular reorganisation as the system responds to different aspect ratios and orientations.
3. It’s important to identify the break points in the grid system based on the needs on the content — the content defines the break points rather than the devices. As the screen size changes if something stops working address it and define the break point then.

Resources to help establish a responsive grid and type system:

• Multi device layout patterns
• Fluid Type
• Responsive Typography: The Basics
• The responsive grid generator
• Designing for device orientation
• Unit variations

Multiple interaction methods

The mouse is obviously no longer the only input method for navigating sites. This means the following things need to be considered when defining UX patterns.

1. UX patterns need to accommodate a touch screen input; interactive areas need to be large and hover states can’t be relied upon.
2. Prepare a device matrix based on the target personas, this will limit the variables available and help give an understanding of all input methods.
3. Design for touch screens should aim to de-clutter the UI, as users can interact directly with content. e.g.; a scroll bar isn’t needed on a touch screen because users are familiar with being able to push content with their finger. The scroll bar’s only use is to demonstrate the position in a block of content. Many other UX patterns may need to alter their behaviour and design between the two input methods too. A store locator module could show you your nearest store and direct you turn by turn on mobile, where as on desktop that functionality wouldn’t be as useful.
4. Mobile design is the often the most challenging because it’s stripped down to it’s simplest form — an effect of the screen size, unique user needs and the type of interaction. So it’s usually the best place to start when designing a responsive system. Interaction and design are then scaled up or adapted to tablet and desktop.

Resources on touch optimisation and optimising patterns for multiple platforms:

• Designing for touch
• Futurist mobile interactions — an increased focus on gestures
• Responsive web design patterns

Screen clarity

Pixel density varies greatly meaning many mobile devices actually have higher resolutions than desktop monitors. These finely tuned screens are so crisp that when graphic elements don’t sit exactly on pixels they loose their sharpness and look blurred.

1. To ensure the highest clarity across different pixel densities and resolutions vector graphics are preferable to bitmap assets.
2. If vector assets are designed by hand they should be perfectly aligned to pixel edges to avoid blurring. Apple’s Macbook retina display is meant to be a bit more forgiving in this area with their sub pixel aliasing. If using icons consider implementing them as a font rather than bitmap assets, Symbolset is a semantic symbol font for vector rendering.
3. Bitmap assets are still required for photography, and often older mobiles need them for UI elements. Where possible they should be high resolution so they maintain clarity on larger monitors and high pixel density mobile screens, this comes at the cost of file size. Server side scripts can automatically generate the required image size on request to avoid having to download overly high resolution images for the platform.
4. Type also renders differently at different pixel densities. Just as some typefaces that were designed for print look poor on screen, and vice versa, typefaces designed for 72ppi don’t look great at 144ppi. A detailed look at this along with examples can be found in this post on Information Architects.

For a detailed look at how to set up software and create pixel precise assets refer to these links:

• Pixel fitting
• Viewport Sized Typography
• IcoMoon — custom icon font builder
• Illustrator for App design
• The pixel precision handbook

Recommended books for web designers

See larger image Responsive Web design (Paperback) By (author): Ethan Marcotte List Price: £9.60 GBP New From: £6.99 GBP In Stock Used from: £8.66 GBP In Stock

See larger image Universal Principles of Design, Revised and Updated: 115 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions and Teach Through Design (Paperback) By (author): William Lidwell, Kritina Holden, Jill Butler List Price: £18.99 GBP New From: £10.19 GBP In Stock Used from: £13.42 GBP In Stock

See larger image Don’t Make Me Think!: A Common Sense Approach to Web Usability (Paperback) By (author): Steve Krug List Price: £24.99 GBP New From: £12.56 GBP In Stock Used from: £10.99 GBP In Stock

See larger image Smashing UX Design: Foundations for Designing Online User Experiences (Smashing Magazine Book Series) (Paperback) By (author): Jesmond Allen, James Chudley List Price: £27.99 GBP New From: £14.72 GBP In Stock Used from: £15.29 GBP In Stock

See larger image 100 Things Every Designer Needs to Know About People: What Makes Them Tick? (Voices That Matter) (Paperback) By (author): Susan Weinschenk List Price: £18.99 GBP New From: £9.39 GBP In Stock Used from: £11.25 GBP In Stock

Online resources for responsive design

Some of the better resources I’ve discovered; a constantly evolving list:

• Demonstrating responsive design
• Pixel perfect responsive design testing tool
• Responsive design workflow
• OpenType features in modern browsers
• RG/A talks about their challenges adopting responsive design

Change of state

Borderlands 2 flashes the screen when the character’s shields are depleted to let the player know something has changed (ie: they are being shot at), rather than using a traditional health bar. Many other first person shooters splash blood on to the screen to let the player know the same thing. Another, more elegant, example of this execution is the fading colour of the world in Mirrors Edge to represent the character’s depleating health. While the message that this pattern communicates is based on a narrative that is unlikely to exist in other forms of UI the idea that the whole screen or colour of an element changes to reflect a state is easily transferable.

Tagging for sharing

The player tags the van for other players on their team to see

Battlefield 3 and Sniper V2 let players tag targets so that others can identify them. This social UI pattern is easily transferred to content, and is already common practice. Users are able to tag for sharing, leaving a digital trail of where they’ve been for others to follow.

Radial menus

Dragon Age and Mass Effect are a few of many games that use a radial menu to map multiple actions to one button. They also often let the player map their most used action to a single button. The menu allows for quick navigation where actions or content can be grouped together — they can be triggered from a relatively small visual, or just mapped to a physical input. They allow for hierarchical navigation to be shown and placed in the most relevant area at the most relevant time and are becoming very common in other types of UI too.

Projected UI elements and mode switching

Deus Ex Human Revolution uses a mode called Smart Vision that overlays the environment with information, enabling the player to identify enemies through walls, Syndicate – another futuristic game, uses something similar too. Once an enemy is identified the player can tag the target so when the mode is reverted the target remains identifiable.

Another lovely, though more simple, example is Splinter Cell Conviction’s use of 3D typography projected in the environment to communicate messages to the player.

Combining the UI with real world objects will become more common in UI design for augmented reality but examples of this practice have already been tested in fictional 3D game worlds.

Cusomisable navigation

A lot of games allow the player to chose what buttons perform the character’s actions, making the game accessible to more people. Even the simple task of being able to switch from normal to inverted controls makes the game accessible to more players.

Darksiders 2 goes further with this pattern and allows the player to set and change actions to buttons through out the game.

Web content often uses a navigation bar instead of relying on a complex physical controls of hardware, but the pattern remains the same — it allows users to customise this navigation bar to allow quick access to their most commonly used tasks. Apps use this pattern as real estate is valuable. Example; the Music player on the iPhone has a cusomtisable quick bar.

Contextual navigation

Assassin’s Creed has a map of controller buttons in the top right of the screen with their relevant actions; when the player holds the run button the menu items change to reflect actions the player is more likely to perform. This is almost the opposite of the example above, where the system choices the most revenant options for the user rather than the user choosing their own, and therefor requires some sort of artificial intelligence. Microsoft Office adopted this pattern a few years ago. It could be a very successful way of navigation web content if it can be implemented around the needs of personas.

Prioritising player (user) needs for content

Infamous automatically loads your most recent saved game upon launch, so you are instantly ready to play. This follows the 80/20 rule; 80% of players probably want to load their latest save so why not start there rather than having to navigate a menu every time? This provides a good reason to avoid any sort of intro screen to a website. It’s also interesting when considering home page content; once you understand why 80% of the demographic is visiting your site.

Recommended books for web designers

See larger image Universal Principles of Design, Revised and Updated: 115 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions and Teach Through Design (Paperback) By (author): William Lidwell, Kritina Holden, Jill Butler List Price: £18.99 GBP New From: £10.19 GBP In Stock Used from: £13.42 GBP In Stock

See larger image Don’t Make Me Think!: A Common Sense Approach to Web Usability (Paperback) By (author): Steve Krug List Price: £24.99 GBP New From: £12.56 GBP In Stock Used from: £10.99 GBP In Stock

See larger image HTML & CSS: Design and Build Web Sites (Paperback) By (author): Jon Duckett List Price: £19.99 GBP New From: £10.67 GBP In Stock Used from: £11.06 GBP In Stock

See larger image The Elements of Typographic Style: Version 4.0 (Paperback) By (author): Robert Bringhurst List Price: £19.20 GBP New From: £12.36 GBP In Stock Used from: £14.87 GBP In Stock

See larger image Grid Systems: Principles of Organizing Type (Design Briefs) (Paperback) By (author): Kimberly Elam List Price: £16.99 GBP New From: £8.66 GBP In Stock Used from: £2.58 GBP In Stock

See larger image Smashing UX Design: Foundations for Designing Online User Experiences (Smashing Magazine Book Series) (Paperback) By (author): Jesmond Allen, James Chudley List Price: £27.99 GBP New From: £14.72 GBP In Stock Used from: £15.29 GBP In Stock

See larger image 100 Things Every Designer Needs to Know About People: What Makes Them Tick? (Voices That Matter) (Paperback) By (author): Susan Weinschenk List Price: £18.99 GBP New From: £9.39 GBP In Stock Used from: £11.25 GBP In Stock

Generally there seems to be a lot of colour shifts, darker items are now light and vice-versa. There’ve also got rid of the harsh lines that appear in gradients. I recently read an accessibility report that said when these lines appear behind text they are more difficult to read for certain disabilities. Perhaps that’s why they were removed but I think the movement away from gloss is an industry-wide trend and it’s probably more likely to just give the OS a fresh feel with the relatively minor feature updates, and possibly keep up with visual trends with competitors .

The phone keypad has gone from dark to light; there’s also been a slight shift in button sizes and now the call button has an awkward space above and below. The line in the gradient has gone from all but the bottom row of buttons.

The bottom button bar is strangely inconsistent but suspect that’s the left overs from legacy work, hopefully 6.1 might tidy it up.

Apple has created their own version of the maps app, rather than use google maps. The new version has a really nice 3D features but it’s only available on the 4S and 5.

Apart from the 3D view the maps now highlight buildings, the un-occupied ground is yellow and parks have a noise texture to them. There’s also a series of icons representing restaurants, cafes, bars and petrol stations etc.

In most cases the bottom icon bar has changed to a soft grey gradient, such as in iTunes.

The play head now animates to change the reflection as you move the phone, not quite a skeuomorph as play heads don’t exist as button in reality, but it fits with the skeuomorphism design style.

The design direction is less gloss, more slickness.

The title bar has also had it’s colours switched and the gradients softened.

Skeuomorphism also occurs in visual interface design where elements appear like their physical counterparts, often icons — such as the use of an envelope or stamp for email. Interactive design also leverages sound to create a skeuomorph, such as keyboard clicks on digital keyboards or the sound when you unlock your iPhone.

Skeuomorphisms have had a much slower introduction and subsequent evolution in digital design though, simply because early computers couldn’t render the required detail or produce the equivalent sound, and maybe because early software rarely relied on UX specialists. This is one of the main reasons why the first consumer computers weren’t considered user-friendly and probably why there wasn’t wide adoption. It wasn’t until the introduction of a GUI with Mac OS and subsequently Windows 3, that Skeuomorphs began to really appear.

When Apple introduced the Mac with it’s GUI tasks could begin to visually resemble physical actions and icons were introduced, the trash icon for example.

The recent Podcasts app actually looks like a tape player with all the control and animation. It’s questionable how many of it’s users ever used a professional tape deck such as this, and I think is harder to use because of it’s visual design treatment.

Interestingly Apple made a move away from skeuomorphism with the iTunes icon a few years ago, but this pattern didn’t continue to the rest of their UI design work.

The iTunes icon evolved from a CD to a circular disc, demonstrating that music was no longer soley associated with CDs. I can imagine that was quite a political discussion.

Skeuomorphism helps introduce users to new technologies, or processes, but inevitably it should be disappear so that it doesn’t prevent innovation. There’s a danger designers will just copy real world behaviours when there’s scope for much more.

Microsoft took the lead in cutting back the level of skeumorphism when it came out with it’s Metro design language. It stripped back the icon-lead user journey and detailed textures and replaced it with bold typography and simple colour. Many brands followed their lead, the BBC were one for the first with their GEL design language.

Third party developed phone applications like Feedly are now taking the Metro approach

I think it’s great that we’re seeing the end of skeumorphism in UI design, it’s about time, and it proves users are accustomed with digital journeys. It will empower designers to explore beyond physical metaphors. It seems Apple is mainly responsible for hanging on to it though.

There will always be room for historic visual cues in order to create a layer of nostalgia and let designers hark back to an age of craftsmanship; they shouldn’t be relied upon or used to describe behaviours once the user is accustomed though. Curtains in front of cinema screens add to the experience of a night out but once they’re open they don’t distract from it.

Further reading:

• Clive Thompson on Analog Designs in the Digital Age
• Ugh. God. Why Is Apple Making Everything Look Like an Ugly Wild West?
• Skeuomorphism in Interface Design
• Will Apple’s Tacky Software-Design Philosophy Cause A Revolt?
• Can We Please Move Past Apple’s Silly, Faux-Real UIs?

Move beyond reference points and create your own

Moodboards are often made up from other design solutions. This helps inform the design process but there’s the risk that reusing what’s already there or following specific design trends prevents innovation and means you’re designing in someone else’s shadow.

Randomness should be introduced to the design process but in order to do that you need to embrace failure. Experiment but know when something isn’t working and move on.

Graphic communication that uses distinct styles and reveals the personality of it’s cultural environment is far more powerful and memorable

Indian Street Design

Japanese Map

This sort of design work won’t appeal to everyone, but that’s not really what it’s trying to do. It’s appropriate for the audience and the message.

If design needs to appeal to a global audience it needs to be toned down. There’s danger designers we’ll end up using a bland global design language for everything and these rich visual languages will disappear. That would not only prevent innovation but it’d be a boring world if we all spoke the same language.

Global brands such as Apple often use the same design language for every market

The AIGA attempted to create a set of icons that could be universally recognised globally.

Tibor Kalman then highlighted that the toilet door signs weren’t actually universally understood.

Design outside the rectangle

Design has historically always fit within rectangles because that’s always been the format; from newspapers to books, photography to tablets and mobile phones. However, screens are evolving from rectangles that we look through in to destinations we can move in to. This evolution is happening with the help of software and hardware technology:

1. Gesture and voice control

Content becomes a destination and enables users to interact directly — removing UI elements and giving meaning to the space.

2. Sites with multiple planes

HTML5 introduced panes that could scroll at different speeds enabling a faux 3D environment, eg: nikebetterworld.com or Iutopi.

3. UI in the 3D environment

Games lead this trend because they were the first digital spaced to use 3D engines to render content.

4. Multi-screen UI

An audience may interact directly with a character in a film on their TV to then break out in to their wikipedia or IMDB page on their tablet. Microsoft recently showed this at E3 2012 working with the XBOX, called SmartGlass

5. Augmented reality

Interfaces that exist along side the real world are only just starting to develop. This video by Keiichi Matsuda gives a glimpse of where it could go.

Reactive Design: the future of the UI?

Reactive design can sense the the user; if they are panicking because they are lost, it adjusts and offers help. It they squint to read type, the size automatically increases. It’s an interesting thought when augmented reality merges with a reactive UI.

It’s been a great asset when having to quickly inspire a team of designers with a direction to explore, even if it’s just a colour palette or style. Or even to run a client through in a design workshop — and often to help with the development of moodboards.

Recently I had the chance to browse back through my collection. These images are some of the highlights I was drawn to for their aesthetic qualities. Unfortunately some of them I can’t trace back to the creator.

Photographs by Nicholas Alan Cope:

Great patterns for use as iPad, iPhone wallpapers from Simon C Page:

Coverstory illustrations from La Tigre

VM’s lovely retro compositions on DeviantArt:

Mark Weaver — a graphic designer & illustrator in the New York City area:

Unknown:

Paul Tebbott:

ISO50’s blog, often present a very similar style but also often quite inspiring:

Unknown:

Tanya Creer, some great work on SBS news:

Typically the process is made up of the following stages, though often stages are skipped or shorten to fit within budget and time constraints:

1. Creative brief

The brief creates a measurable set of tasks to work towards.

2. Visual audit

A visual audit allows the design team to examine how the visual identity is currently being executed across all communication platforms. This helps to set the direction and demonstrates the core brand DNA elements.

3. Competitor analysis

Looking at what competitors are doing ensures the visual language creates a distinction in the market and also allows one level of bench marking.

4. Visual exploration

This stage is the beginning of the concept exploration. Key brand values and themes are explored visually; creating a graphic essay that supports the design direction.

5. Mood board

The mood board is the output from the visual exploration and often includes key moments from the visual audit and competitor analysis. It may also pull in some core brand DNA elements. It helps inform early concept work.

6. Concept

Design work begins and rough concepts are created. The creative concept is developed and set to provide a high level direction for all work including interaction experience and copy as well as the visual language.

7. Design direction

From the concepts and mood board a direction is refined and selected through open discussions and workshops.

8. Design production

The chosen design direction is applied to multiple elements, modules and pages to describe how it flexes across the content requirements.

9. Style guide

Design is documented and each stage in the process is explained to ensure any future work builds from the brand DNA and follow the creative concept.

Top Image: Windows metro visual language applied to the Xbox dashboard. Above: Windows metro visual language applied to the phone UI

Once the concept starts to take shape there are several ways to begin evaluating the visual language in order to ensure it can successfully be implemented in to an interactive space.

Is there a creative concept?

A core creative concept gives guidance and meaning to the direction of not only the visual design, but the user experience, interactive behaviour, content and copy. It acts to re-enforce the brand values, attributes and personality. It gives meaning to the detail in the visual language from a bigger picture perspective.

Are there established design principles?

Principles establish a set of rules and the core DNA of the visual language. They make it easier to create additional elements and screens as content requirements develop.

Is the language rich enough to demonstrate state changes?

A website user journey should provide pace through the visual design. The same module should adjust to reflect the progress through a journey. For example: Navigation modules need to be flexible enough to visually demonstrate multiple levels of hierarchy within the site structure.

Is it future proof?

The visual language needs to meet the demands of a modular design system that can adapt and scale to different content types and platforms. Sizes should be relative and not based on fixed pixel sizes.

Is there brand differentiation?

While it’s important to adopt standards for interaction design it’s also key to create brand differentiation. This ensures users intrinsically know the brand they are interacting with and form an emotional connection with the brand’s personality and key values.

Windows metro visual language applied to the desktop OS

Further reading and other opinions, Designing the well-temperd web over on Smashing Magazine.

So here are my 2012 predictions for trends in visual design for the web:

Crafted typography

The use of typographic variety on the web has been a big advent for 2011. Foundries are now hinting faces specifically for use at smaller sizes on the screen. This means we’re not only able to use a wider variety of faces but that they have also been custom designed for screen, creating faces with optimised legibility and giving tangible options to Verdana.

Font views have doubled every four months on TypeKit

Multi-platform touch points

Responsive design has picked up but I really hope I’ve seen the last of fixed 1024x768 grids. Sites will not only adapt to different devices using variable scales and grids but content will be also accessible from multiple devices at the same time. An interface on the TV may need to be able to react to interaction from a mobile device.

Removal of interface elements

A trend that emerged from touch screens, people are now learning to interact directly with content rather than use traditional UI elements such as scroll bars. More focus on the content, less on UI clutter.

The new Windows Metro interface loses many traditional UI elements

More personalisation

More sophisticated server technology and the ability to link to social networks will mean content is personalised for users. Hopefully it’ll also mean no more spamming irrelevant content through devices like carousels.

Evolutions of rich graphic elements and the use of vector assets

Information will make use of more graphic communication rather than relying on just plain text. True responsive design demands vector graphics for scalable elements at different resolutions. We’ll see more UI elements created in HTML and the use of vector formats rather than multiple bitmap files.

Social content platforms rather than micro-sites

Micro-sites will become less popular and branded content will continue to use existing social platforms such as Facebook and YouTube instead.

Animation

Improved technology with HTML5, JQuery and CSS3 and faster internet will allow for more animation. UI elements will evolve from having simple rollover states to richer interaction animations that will help to inform and guide users.

The iPhone 4S site made use of nice interactive animation

Recommended books for web designers

See larger image Universal Principles of Design, Revised and Updated: 115 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions and Teach Through Design (Paperback) By (author): William Lidwell, Kritina Holden, Jill Butler List Price: £18.99 GBP New From: £10.19 GBP In Stock Used from: £13.42 GBP In Stock

See larger image Don’t Make Me Think!: A Common Sense Approach to Web Usability (Paperback) By (author): Steve Krug List Price: £24.99 GBP New From: £12.56 GBP In Stock Used from: £10.99 GBP In Stock

See larger image HTML & CSS: Design and Build Web Sites (Paperback) By (author): Jon Duckett List Price: £19.99 GBP New From: £10.67 GBP In Stock Used from: £11.06 GBP In Stock

See larger image The Elements of Typographic Style: Version 4.0 (Paperback) By (author): Robert Bringhurst List Price: £19.20 GBP New From: £12.36 GBP In Stock Used from: £14.87 GBP In Stock

See larger image Grid Systems: Principles of Organizing Type (Design Briefs) (Paperback) By (author): Kimberly Elam List Price: £16.99 GBP New From: £8.66 GBP In Stock Used from: £2.58 GBP In Stock

See larger image Smashing UX Design: Foundations for Designing Online User Experiences (Smashing Magazine Book Series) (Paperback) By (author): Jesmond Allen, James Chudley List Price: £27.99 GBP New From: £14.72 GBP In Stock Used from: £15.29 GBP In Stock

See larger image 100 Things Every Designer Needs to Know About People: What Makes Them Tick? (Voices That Matter) (Paperback) By (author): Susan Weinschenk List Price: £18.99 GBP New From: £9.39 GBP In Stock Used from: £11.25 GBP In Stock

Graphic communication that uses distinct styles and reveals the personality of it’s cultural environment is far more powerful and memorable — look at the rich, vibrant visual language used on the streets of India or Japan. This sort of design work won’t appeal to everyone, but that’s not really what it’s trying to do. It’s appropriate for the audience and the message.

Mumbai and Tokyo maintain a visual language linked to their culture

If design needs to appeal to a global audience it needs to be toned down. As globalisation occurs there’s danger designers will end up just using a bland global design language for everything and these rich graphics will disappear — just as some old spoken dialogues have disappeared. It’d be a boring world if we all spoke the same language.

In comparisson Nike use a very bland graphic language, without personality to offend but it doesn’t appeal either

There is a place for the more bland, wider appeal, of global graphic communication. I’ve explored this notion before. I discovered in previous research there are some elements of graphic communication that work across cultures, and where it’s actually a requirement — airport signage for example. It is impossible to use exactly the same visual language across all cultures though, as can be seen in this example inspired by Tibor Kalman:

So back to Barnbrook and his point about that London Olympic logo — ie: it has nothing that relates to the strong historic visual culture of London. It’s become a neutral brand designed to fit within a global corporate graphic design language. Barnbrook explored this idea in his Olympukes work. Obviously it needs to appeal to a global demographic but at the same time the message is about London and shouldn’t design be appropriate for the intended audience but also help carry the meaning of the message? Shouldn’t the personality of London, or indeed the United Kingdom be elevated and celebrated? Playing devil’s advocate one could propose it does do this — after all London is one of the most international cities in the world so perhaps adopting that bland global visual style is appropriate for the message … ?

The ISO 50 blog features a post that displays all of the Olympics logos. I think the Mexico 1968 Olympics logo is one of the better ones but also think Munich 1972 and Beijing 2008 work well to convey some of the cultural identity of their host cities. In fact all of them have a stronger cultural visual language when compared with the London 2012 logo.

The 1968 Olympics in Mexico had great branding and graphic communication that inherited the vernacular visual culture of the host city

The designer of the Mexico 1968 Olympics logo, Lance Wyman, echoed these thoughts on the London Olympic logo in an article in Creative Review:

“The London 2012 logo has been presented with promising descriptive text but besides the date, I don’t think the logo itself attempts to reference anything of significance,” he says.

Design has historically always fit within rectangles because that’s always been the format; from print based design; newspapers, magazines, books, photos etc, to interactive screen design; TVs, PCs, mobiles, tablets etc. It was such an obvious constraints that as designers I don’t think we even paid attention to it.

I sense a change though; new opportunities are becoming available as we adopt 3D technologies, augmented reality and gesture based control. Screens will evolve from rectangles that we look through, in to destinations we can move in to. While augmented reality enables the user interface to exist along side the real world. The content becomes a destinations and enables users to interact directly — giving meaning to the space.

With 3D relevant information can be brought in to the foreground of a space while non-relevant content can still exist but in the background. All evolving the notion of progressive disclosure. The UI integrates with content rather than just sitting over the top on a flat 2D plane. HTML5 sites have started to play with the idea of multiple planes such as the Nike better world website but games lead this methodology because they adopted gestural input and were able to render 3D environments first. Many games overlay the UI in the game world (see my previous post of user interface design for games) but the idea could be used in a film also. An audience may interact directly with a character in a film to then break out in to their wikipedia or IMDB page. They may then drag content from the TV to their table device in order to inspect closer (see my other post on the future of web design).

The Cannes Lions touchwall last year enabled the audience to interact directly with the content:

As technology improves you can imagine how useful an interface over the real world could be. Keiichi Matsuda demonstrates the idea of user interface elements blended with the real world in this video (put on your red/green 3D glasses):

In the future these inputs will begin to be able to sense emotion and the UI can react accordingly. Interactive design is moving towards reactive design. If the user of a website is panicking because they are lost, the UI could adjust and offer them help. It someone squints at a screen to read the type, the size could automatically increase. There are so many interesting possibilities with reactive UI design that I can’t wait for the technology to catch up!

Recommended books for web designers

See larger image Universal Principles of Design, Revised and Updated: 115 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions and Teach Through Design (Paperback) By (author): William Lidwell, Kritina Holden, Jill Butler List Price: £18.99 GBP New From: £10.19 GBP In Stock Used from: £13.42 GBP In Stock

See larger image Don’t Make Me Think!: A Common Sense Approach to Web Usability (Paperback) By (author): Steve Krug List Price: £24.99 GBP New From: £12.56 GBP In Stock Used from: £10.99 GBP In Stock

See larger image HTML & CSS: Design and Build Web Sites (Paperback) By (author): Jon Duckett List Price: £19.99 GBP New From: £10.67 GBP In Stock Used from: £11.06 GBP In Stock

See larger image The Elements of Typographic Style: Version 4.0 (Paperback) By (author): Robert Bringhurst List Price: £19.20 GBP New From: £12.36 GBP In Stock Used from: £14.87 GBP In Stock

See larger image Grid Systems: Principles of Organizing Type (Design Briefs) (Paperback) By (author): Kimberly Elam List Price: £16.99 GBP New From: £8.66 GBP In Stock Used from: £2.58 GBP In Stock

See larger image Smashing UX Design: Foundations for Designing Online User Experiences (Smashing Magazine Book Series) (Paperback) By (author): Jesmond Allen, James Chudley List Price: £27.99 GBP New From: £14.72 GBP In Stock Used from: £15.29 GBP In Stock

See larger image 100 Things Every Designer Needs to Know About People: What Makes Them Tick? (Voices That Matter) (Paperback) By (author): Susan Weinschenk List Price: £18.99 GBP New From: £9.39 GBP In Stock Used from: £11.25 GBP In Stock

I’ve come away with a lot of notes however and have gone through and extracted the insightful and inspiring points. From these I’ve come up with my top 10 points on how to create innovative design and top 5 points on how to create user centred design. Two of the most important areas for my work. Credit goes to the following speakers: Nat Hunter, Kutlu Çanlıoğlu and Titus Nemeth, Jonathan Ellery, Tony Brook, Joachim Sauter, Tom Uglow, and Jeff Faulkner. I also plan to publish more detailed summaries of ideas I took away from Dale Herigstad and Jonathon Barnbrook in separate posts.

Design for innovation

1. Share, inspire and teach design.
2. Have a flat hierarchy among designers during the creative process to encourage ideas from everyone
3. “Quality is the best business plan” and “Pain is temporary but suck is forever”.
4. Be provocative “Safe is the definition of sucks”.
5. Designers need an understanding of web type production and rendering while developers need an understanding and appreciation of design intent to successfully create beautiful typography online — just as graphic designers understood letterpress and vice versa.
6. Experiment but know when it doesn’t work, this is key to design — even if it’s commercial. Embrace failure.
7. Interactive designers contend with the following four variables and need to understand them all in order to get the best design: Platform (eg: web service, location, cloud etc), Interaction (eg: touch, gesture, mouse, voice, augmented reality), Device (eg: tablet, console, mobile, PC, browser) and content (eg: audio, video, web, app, social, RSS, twitter)
8. Design for human exploration, facilitate curiosity but enable the user to focus when needed
9. Free pitching has no attitude, good design work doesn’t come from the stresses involved in a pitch.
10. Move beyond reference points and create your own. Designing for an audience that’s too wide or following specific design trends such as those award judges look for prevents innovation and means you’re always designing in someone else’s shadow. Randomness creates innovation

“Design supports luxury but when people have no money all it causes is misery“
–Neville Brody

Design for the user

1. Colour contrast requirements for type alter for different language scripts.
2. User test to resolve design conflict among the team.
3. Know the user and the space you’re designing for them — different cultures have different expectations on interaction patterns, don’t just follow the traditions. Know what the needs of the user are and what they want to consume.
4. Adding a narrative to information creates more engaging content — it’s always nice to have a story but story telling is also a natural human communication method.
5. Never have a dead end — continue the user journey through to other content rather than sending them back to the start or home.

Erik Spiekermann on stage opening the conference

The conference featured 8 speakers. They varied their topics and the intended audience between typographer, web developer and web designer — though most of them were directed to the later. For me the best speakers were all on in the morning; Vincent Connare, Jason Santa Maria, Jon Tan and Jonathon Hoefler.

Here are some of the facts, links, quotes and points of interest I took away from the conference.

History repeats

In the 80s there were a lot of typographers working on translating metal type in to digital files that could output to printers. Now the same is happening again, only this time they are translating digital files meant for print to digital files meant for screen. This requires that each glyph is manually hinted and optimised to render legible at small sizes while inheriting the original concept and mood of the typeface. This means there are theoretically three design variations of any one font; an ideal state (how it should look across mediums), and two states that attempt to look as close as possible to the ideal state. One that printers interpret; and the other that browsers and operating systems can interpret, or render. All are different so the result can look the same. If you’re using a typeface for the web (particularly body copy) it’s essential to ensure it’s been designed for the screen.

The medium is the message

Use the appropriate face for the task. The lizard brain theory states that we have an initial emotional response to everything — the typeface supports that response before any content is read. Display faces aren’t appropriate for body copy, especially on the screen. eg: Bodoni is a beautifully designed face but only works at larger sizes. Use it for body copy on a web site and it’s illegible. Meta on the other hand is a workhorse typeface that comes in multiple weights, works at small sizes and also has an inherit beauty that is reveals itself at larger sizes. Avoid ‘ready-made’ faces that have an existing design language embedded. Instead apply the intended visual language to a simple typeface.

Type as a brand

Typography can communicate a brand, and often acts as the memory of that brand. The typeface used for the London underground would look out of place in another city. The New Yorker magazine brand is just the typeface. It’s unfortunate the NYC subway system uses Helvetica as it doesn’t give New York it’s own identity. Using a face like Gotham, something designed in, and based on New York, rather than an over used Swiss designed face, would have been more appropriate.

The rules of typography

There are no rules, only guidelines and principles. Three simple principles for better typography: make it larger, increase the contrast/hierarchy of content elements, increase the leading on longer lines. Good typography makes people read content. You don’t need to know everything about typography to start crafting it well. Once you have the basics you can use type much better than if you didn’t know anything about it at all.

The new world order

Historically, setting type was based on a page size. Modular scales and layout were derived from the page it was to be printed on. Responsive design means we no longer have a set ‘page’ size. Take advantage of this and design elements individually to ensure the necessary attention to craft and interaction is given. The layout can then come together at the end. A modular scale can be developed from the optimal body copy size. This ensures the design language works at multiple resolutions creating consistency for responsive design and legible type.

The tech stuff

Windows, OSX and linux have very different systems for displaying and antialiasing type — this is further complicated by differences between browsers on the same platform. It’s important to check how faces render on all platforms, specifically at smaller sizes. Some faces aren’t meant to be readable at screen resolution and shouldn’t be used. Firefox is the only browser that can render the start of letters on half pixels to ensure exact word spacing and kerning is displayed.

Type geeks only

Monospaced faces are often used for code where hyphens are used as minus signs next to other signs and so therefore shouldn’t adopt traditional typographic rules about length and vertical alignment as they are rarely used between letters. Proportional numerals don’t work for clocks, as it means the digitals jump left to right (this rule can also be applied to interactive numerical type). Designing small type for screen is all about designing the antialiasing — the grey pixels. CSS is evolving to include more control over web typography such as kerning and variants (for small caps and swashes etc)

Quotes

Not directly quoted

Web design is a new profession; People come from a range of backgrounds from artistic to technical, and it’s not yet a respected profession.

Communication isn’t just about words; eg: The first 22min of the film Wall-E was no verbal dialogue.

There are parallels between cities and language; Both are planned but they evolve and cater to the needs of the people using them.

Most letters are ‘read’ from the top half. If you cover the bottom half of a line you can still read it, while the same isn’t true if you cover the top half

Pretty pictures

• 8 Faces is a new magazine for devotees of typography
  
• Lost world fairs, nice example of executing web typography
• Web Font Specimen — see how typefaces will look on the web
• MyFonts publishes periodic newsletters: Rising Stars and Creative Characters monthly
• Fonts in use — who is using what where?
• Popular websites messed up with CSS to create art?
• And finally two plugins for better web typography to give more control: Lettering and FitText

Recommended typography books

See larger image The Elements of Typographic Style: Version 4.0 (Paperback) By (author): Robert Bringhurst List Price: £19.20 GBP New From: £12.36 GBP In Stock Used from: £14.87 GBP In Stock

See larger image Type Matters! (Leather Bound) By (author): Jim Williams, Foreword by Ben Casey List Price: £17.95 GBP New From: £9.51 GBP In Stock Used from: £10.80 GBP In Stock

See larger image Modern Typography: An Essay in Critical History (Paperback) By (author): Robin Kinross List Price: £20.00 GBP New From: £10.24 GBP In Stock Used from: £8.95 GBP In Stock

See larger image Stop Stealing Sheep and Find Out How Type Works (Paperback) By (author): Erik Spiekermann, E.M Ginger List Price: £28.99 GBP New From: £14.37 GBP In Stock Used from: £9.69 GBP In Stock

See larger image Grid Systems: Principles of Organizing Type (Design Briefs) (Paperback) By (author): Kimberly Elam List Price: £16.99 GBP New From: £8.65 GBP In Stock Used from: £2.58 GBP In Stock

The mood board acts as a visual brief leading in to concepting. It serves as inspiration, establishes the existing rule-set and helps informs design decisions. It’s based on themes that have been extracted from the brief, brand values and any associated experience principles.

The following sites should prove useful to interactive designers:

Layout for desktop displays

• Site Inspire
• Minimal sites
• The FWA
• One Page Love

Mobile and tablet specific

• Mobile Design Pattern Gallery’s photostream
• Android niceties
• Appetize
• Well placed pixels
• Mobile web visual design best practices
• Tapp gala
• PTTRNS

Interactive patterns

• Pattern tap
• 365 PSDs
• UI patterns
• Lovely UI
• Mobile patterns
• Deviant Art
• MephoBox
• Pixels Daily
• Image spark

Mockups

• PlaceIt by Breezi
• PSD covers
• Teehan+Lax

Visual assets

• The Noun Project
• Icon Monstr
• Design Kindle
• Icon Project
• Icon finder
• Find icons
• Icons Archive
• Kuler
• Dribble

Photography

• Pantonism
• 500px
• Flickr Compfight

Design blogs

• Noupe
• Ffffound
• It’s nice that
• But does it float
• Extraordinary Machines
• A giant girl

Design portfolios

• Cargo collective gallery
• Behance network
• Marius Roosendaal’s posters

Recommended books for web designers

See larger image Universal Principles of Design, Revised and Updated: 115 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions and Teach Through Design (Paperback) By (author): William Lidwell, Kritina Holden, Jill Butler List Price: £18.99 GBP New From: £10.19 GBP In Stock Used from: £13.42 GBP In Stock

See larger image Don’t Make Me Think!: A Common Sense Approach to Web Usability (Paperback) By (author): Steve Krug List Price: £24.99 GBP New From: £12.56 GBP In Stock Used from: £10.99 GBP In Stock

See larger image HTML & CSS: Design and Build Web Sites (Paperback) By (author): Jon Duckett List Price: £19.99 GBP New From: £10.67 GBP In Stock Used from: £11.06 GBP In Stock

See larger image The Elements of Typographic Style: Version 4.0 (Paperback) By (author): Robert Bringhurst List Price: £19.20 GBP New From: £12.36 GBP In Stock Used from: £14.87 GBP In Stock

See larger image Grid Systems: Principles of Organizing Type (Design Briefs) (Paperback) By (author): Kimberly Elam List Price: £16.99 GBP New From: £8.66 GBP In Stock Used from: £2.58 GBP In Stock

See larger image Smashing UX Design: Foundations for Designing Online User Experiences (Smashing Magazine Book Series) (Paperback) By (author): Jesmond Allen, James Chudley List Price: £27.99 GBP New From: £14.72 GBP In Stock Used from: £15.29 GBP In Stock

See larger image 100 Things Every Designer Needs to Know About People: What Makes Them Tick? (Voices That Matter) (Paperback) By (author): Susan Weinschenk List Price: £18.99 GBP New From: £9.39 GBP In Stock Used from: £11.25 GBP In Stock

Many websites fail now that they are being accessed on mobile screens with touch inputs; or viewed on a TV with a remote control. So I’ve been investigating the future for interface design to ensure concepts for visual languages we’re developing now will work when they are live. Here are some of the more interesting findings:

TAT published a concept video late last year exploring the future of screen experiences, looking at technologies such as dual, malleable, e-ink and holographic screens:

Syzygy Lab have a TV experience concept that explores using a combination of devices while watching TV to bring personalisation:

Notion have also explored a similar concept; using an iPad while watching TV. Their execution perhaps isn’t as nice but still serves to re-enforce the concept of multi-device usage from the living room.

IDEO have created this concept for the future of self service banking, including a rich touch screen interface:

Greg Kaufman has created a digital DJ table using a multi-touch screen that mimics real turntables. There’s definitely a movement towards blurring the lines between digital and real.

There’s also interesting research from Microsoft on Mobile Surface devices; perhaps more interesting is the idea of using the body as an input surface with Skinput, and it’s associated interface design restrictions.

Mozilla Labs have also explored projected user interfaces with their Seabird project.

Grip Limited’s site is one of the nicest one-page sites I’ve seen and they even includes a rich typographic variety.

The Samsung NX100 site integrates video and 3D to create a site with a rich visual language.

These two sites feature adaptable layouts — scaling to fit your browser. Though they’re not quite responsive as they won’t work across all devices — notable iOS devices. I think they are really nicely executed and prove flexible grids can work just as nicely as static ones. They both use Flash which doesn’t quite align with my prediction that more HTML5 will be used; I still feel this will happen but perhaps without eliminating the use of Flash completely. I think there is a bigger opportunity to use HTML5 to control progressive disclosure, allowing great improvements in form design. The BBC is using HTML5 for this purpose.

Exhibition Monet 2010

Louis Vuitton Journeys

Personalisation was my other big prediction, and Baynote is providing a strong platform for which this can be achieved. Many large companies have adopted their technology, they just need to start using it in the right way.

As with facial expressions there are elements of graphic language that cross verbal language barriers; unlike facial expressions though, it’s possible to establish and document a consistent visual lanuage. This is handy in multi-lingual/multi-cultural environments such as airport. People moving through airports all speak different languages and come from different cultures but all need to be able to navigate the airport with the same amount of ease. A consistent visual language is applied to ensure this occurs. The AIGA produced this set of symbols that document a consistent visual language used in airports.

Another example of an international visual language is that used on AV hardware. Play, pause, stop, rewind, fast-forward etc are all able to be read regardless of culture so that production of these devices is simplified and multi-language versions are not required.

Mobile devices and touch screen computers have started to define and explore an international gesture language. Users are already getting accustomed to actions like pinching, flicking and sliding to navigate content. Standards for mobile design are changing quickly; screen resolutions and browser technology is quickly advancing on mobile platforms and people are upgrading their handsets quicker than their computer. So it’s becoming hard to set standards for every interaction. JQuery for mobile is beginning to implement these standards.

With the advent of full body gestural interaction a new international standard needs to be defined. Microsoft is leading this development because they were the first to market with consumer technology that makes use of this interaction, the Kinect sensor. They’re already using gestures like a wave to login a user — is the wave a consistent body language across all cultures? It will be interesting to see how this technology is used and what sort of gestures UX designers decide on going forward.

Typographic variety

Finally we’re able to use a much wider variety of typefaces than Arial, Verdana and Georgia. I’ve been obsessed with typography since 2004 and being restricted to these faces has meant I’ve had to explore my typographic interests in print or system user interface design. Now I can happily explore my passion within web design with a number of technologies now enabling the use of custom typefaces.

HTML5/CSS3 over Flash

HTML has come a long way since I started using it in 1996, now it can achieve a lot of what only Flash has been able to do. It’s also compatible with a wider array of platforms, remains the easiest technology for search engines to index and often uses smaller files sizes and requires less processing power. I still think Flash will remain through-out 2011 but we won’t see it used as much, HTML5 is now more appropriate for most situations.

Richer interfaces

With more sophisticated browsers and faster Internet larger images, more detailed textures, video and more complex animation and interactive behaviours will continue to be implemented. This is probably where the use of Flash will remain.

Alternative or adaptable websites

Websites are no longer designed for just a computer monitor with a mouse and keyboard input. Mobile devices have introduced touch interactions, meaning many interactive elements have had to be re-thought and behaviours like hover states have disappeared. They’ve also introduced apps — sort of a hybrid between a website and PC application. People browse sites on bigger screens and smaller devices using a variety of input methods. Many devices have accelerometers, motion capture technologies and Microsoft has introduced voice commands for it’s Xbox 360 interface, it will be interesting to see when these interactions provide alternative ways of navigating websites too, unlikely to be 2011 though.

This variety of inputs combined with the need to work in different resolutions and multiple aspect rations has meant many sites will need an alternative version — a mobile site, or at least elements of the site than cater for mobile requirements and limitations.

I also think there’s a strong movement towards flexible grid-based layouts than can cater for the multitude of resolutions and aspect ratios. It’s now a lot harder to define the fold. While there’s research to prove that people click on things more if they are closer to the top the general user has also learnt to scroll if they can’t find what they’re looking for. I think working towards an establish ‘fold line’ is out of date.

One page website

A popular recent trend with sites and the advent of new technology. These sites can provide simple, effective communication.

Personalisation

Linking content with social networks encourages user generated dialogues. Interaction design has always strived to create a dialogue with users rather than dictate any sort of design. With personalised design this goal is easier to achieve. Users are also using their own ways of consuming content, news readers not only pull content from sites but there’s also a movement to redesign the content too.

Other sources:
Web Design Trends in 2011
Top 5 Web Design Trends 2011
The State of Web Design Trends: 2011 Annual Edition
Web Design Predictions for 2011

Recommended books for web designers

See larger image Universal Principles of Design, Revised and Updated: 115 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions and Teach Through Design (Paperback) By (author): William Lidwell, Kritina Holden, Jill Butler List Price: £18.99 GBP New From: £10.19 GBP In Stock Used from: £13.42 GBP In Stock

See larger image Don’t Make Me Think!: A Common Sense Approach to Web Usability (Paperback) By (author): Steve Krug List Price: £24.99 GBP New From: £12.56 GBP In Stock Used from: £10.99 GBP In Stock

See larger image HTML & CSS: Design and Build Web Sites (Paperback) By (author): Jon Duckett List Price: £19.99 GBP New From: £10.67 GBP In Stock Used from: £11.06 GBP In Stock

See larger image The Elements of Typographic Style: Version 4.0 (Paperback) By (author): Robert Bringhurst List Price: £19.20 GBP New From: £12.36 GBP In Stock Used from: £14.87 GBP In Stock

See larger image Grid Systems: Principles of Organizing Type (Design Briefs) (Paperback) By (author): Kimberly Elam List Price: £16.99 GBP New From: £8.66 GBP In Stock Used from: £2.58 GBP In Stock

See larger image Smashing UX Design: Foundations for Designing Online User Experiences (Smashing Magazine Book Series) (Paperback) By (author): Jesmond Allen, James Chudley List Price: £27.99 GBP New From: £14.72 GBP In Stock Used from: £15.29 GBP In Stock

See larger image 100 Things Every Designer Needs to Know About People: What Makes Them Tick? (Voices That Matter) (Paperback) By (author): Susan Weinschenk List Price: £18.99 GBP New From: £9.39 GBP In Stock Used from: £11.25 GBP In Stock

Once the brand moves in to a digital space there are obvious missing guidelines that need to be developed. As these digital spaces grow, and more people are involved in using these digital guidelines there’s also a need to document them in order to pass design through the digital process — handing over to developers to create the UI elements. The digital style guide therefore needs to be appropriate for the medium it’s being applied to. Measurements, colour spaces, sizes/resolutions and compatibility issues arise and differ from their print based counterparts.

This post attempts to document best practise for developing digital brand guidelines and addresses the medium’s requirements to ensure design is translated accurately from concept to production. It is recommended to consider these items when concepting designs to make it easier to translate the requirements from concept to style guide. The design phase runs right through the development of a website, and style guides help ensure foundation rules are maintained and applied through this process.

Image by Andy Gilmore

Colours

The preference for defining colours is using hex values. It’s also recommended to include RGB values as an alternative and to enable cross checking to ensure correct colours are used.

color_name
A color name (e.g. red)

rgb(x,x,x)
An RGB value (e.g. rgb(255,0,0))

rgb(x%, x%, x%)
An RGB percentage value (e.g. rgb(100%,0%,0%))

#rrggbb
A HEX number (e.g. #ff0000)

Measurements

Since screens are made of pixels they are generally the best unit for measuring spaces between elements. Be aware that on some portable devices screen dpi is higher than the standard 72dpi on monitors, so this space will appear smaller.

However fonts measured in pixels don’t allow the browser to scale them — if the user wants to increase or decrease the size. For this reason it’s best to measure fonts in Ems. When using Ems for sizing fonts, the fonts will re size according to the browser’s default font size setting.

Ems are a relative measurement unit. One ‘Em’ is equal to the height of the capital letter “M” in the default font size. Ems are set to decimal units, like 1em, 0.9em, and 1.1em. These units can be thought of as percentages of the parent element. For example, if the browser’s font size is set to ‘Normal’, then setting the font-size of the BODY element to 1.1em will mean that the font size inside the BODY element will be 110% the size of the browser’s ‘Normal’ font size. If the user then set their browser’s font setting to ‘Large’, then the font size inside the BODY element will be 110% the size of the browser’s ‘Large’ font size.

Typographic leading

CSS has no leading measurement and uses line-height instead. The difference is that leading is measured from the baseline of one line to the baseline of the next. Line-height is measured from the descender of the top line to the ascender of the next line. This means that a combination of line-height and pixel spacing is required if setting leading on the first line, where a line of copy above may not exist and therefore a relative measurement can’t be taken.

As this measurement relies on the font measurement it should use the same value. If set with relative units (like em or percentage), line-height is always computed from the element’s font-size, whether the sizing is explicitly specified for the given element or simply inherited by a cascade. If the attempt is to set the 16px leading for 12px type, then divide the 16px by the 12px font size. That simple calculation would result in 1.333em (or 133.3%).

Graphic vs interactive language

Existing brand style guides rarely talk about interactive language, and therefore is a main component of a web style guide.

Printed communications needs to allow for sign posting content to allow easy eye navigation; material properties of the medium define physical interactions (holding the document and turning the pages etc). This graphic language helps the reader navigation and digest content through colour, layout and typography – all of which are relatively straightforward to document.

Digital work doesn’t have any material properties and often needs to encourage more and varied forms of interactions. This interactive language helps encourage the equivalent of page turns using gestural or mouse/keyboard input. The interactive language is therefore naturally richer, as often includes a variety of states. Demonstrating these states as well as the gesture required is key to explaining how the site should behave and feel. The use of cursors or shapes to demonstrate touch is a useful device to illustrate state changes. It is also advised to document the type of animation from one state to another. This can be done either directly through a screen animation or through a description.

Static vs dynamic

By nature the Internet is dynamic — content management systems allow images and copy to change, users can alter the size of text, video and animation sits alongside copy to help bring meaning to the communication. Standards for cropping and creating images and placement of logos over images etc all need to be specified in the style guide. Content also has loading states; these also need to be shown.

Accessibility

Colour contrast
Digital work is seen on a varied of different monitors at different resolutions and under different lighting conditions – all by people with a variety eye conditions. Don’t rely on colours that are close in the spectrum for zoning graphic elements with meaning. Colours also need to be different enough from their background to enable clear legibility. There are multiple online contrast checkers, this one has been used with success on many occasions: http://snook.ca/technical/colour_contrast/colour.html

Graceful degradation
For elements that require plugins, javascript or a modern browser an alternative version should be shown in the style guide. Its technical implementation needs to be documented, along with its design.

ALT tags
Conventions for alt tags to cater for screen readers should be documented.

Format

Style guides should be created for digital distribution; though occasionally all or parts of the style guide may need to be printed. Having the style guide in digital form also allows access to assets for developers to check measurements or sample colours. It also means multiple authors can add to and moderate updates. New content can be surfaced and it’s easier to search and link an index and glossary. Assets can then be made available as downloadable layered PSD files. Core assets should be named or numbered to make it easier to cross reference with other documentation such as module catalogues and page type examples.

An interesting mix between design, anthropology and psychology occurs when a piece of work is interpreted. I’ve been looking at research in the later two fields and attempting to apply findings to design.

Body language is another form of visual communication. Even Computer Generated acting has the ability to support and carry narrative. Andy Serkis’ work aso played Gollum in the Lord of the Rings portrayal and Monkey in the game Enslaved Odysey to the West is an impressive example of how much meaning body language can carry.

I think it’s the facial animation that really provide the richness to the non-verbal communication. Like design they can also carry cultural associations. Paul Ekman’s research in to facial expressions identified a small number of universal expressions that could be interpreted as emotions regardless of culture or environment: Anger, Disgust, Fear, Happiness, Sadness and Surprise.

Could the same logic be applied to design, and therefore create a set of universal core elements? These elements could then be used to create a basic universal visual language. The process would require lengthy research with several rounds of user testing but perhaps starting with visual representations of Ekman’s facial expression would help in forming it’s building blocks? At the very least it creates a really strict set of rules from which to create a strong design system!

Pig 05049

This book follows the life of a pig after it’s slaughtered. Following all of it’s body parts as they contribute towards producing a wide variety of good. Nicely executed and an interesting, if slightly disturbing, read.

Cafe of equivalents

Selling lunches to city workers at a percentage of their salary rather than a fixed price; this cafe demonstrates how expensive food is in third world countries where wages are extremely low.

Folding UK plug

Those massive UK plugs not only annoy me with their bulkiness. Min-kyu Choi has designed a plug that folds in to a much more manageable size.

It’s Nice That, printed publication

A bi-annual publication that documents all the inspiring work that comes from this blog.

Newspaper club

Giving anyone access to the medium, through the Internet.

Castlevania — Lord of Shadow

The gameplay in the demo I played on PSN felt a bit awkward and turned me off the game a bit. Playing more of the levels at the expo demonstrated that there is more to the actual gameplay, including some giant bosses that reminded me of God of War. There was also a number of puzzle/platform challenges. The control layout still felt a bit awkward, mainly the use off the top buttons to dodge/roll, and the actual combat wasn’t as smooth as God of War. Still, it presented a challenge, the graphics looked nice and the lovely introductions and voice over work did suggest that it could create an engaging story. I’m not convinced enough to pre-order or buy the game on release day but will keep an eye on reviews.

Fallout — New Vegas

After Castlevania the lack of visual fidelity was the first thing I noticed when I took hold of the controller. Not to say it looked bad, or their was no visual style, but the actual textures and the resolution didn’t look nearly as sharp. It sill seemed a mild improvement over the previous Fallout 3, at least on the xbox 360. There was also notably more colour in the environment, probably due to the fact that it’s set in a different location, Vegas instead of the wastelands of DC. Other than that I actually didn’t notice too much difference between this and the previous game, it felt almost identical. That’s not a bad thing, in fact I played through the story and most of the side missions, plus all the DLC, in Fallout 3, so you could say I’m quite a fan. I’ve put my pre-order in for this game.

Dragon Age 2

I saw Dragon Age Origins at last year’s expo and it was immediately obvious that I was going to buy the PC version of the game. The xbox version looked horrible in comparison, the PS3 version did look a little better but seemed to have frame rate issues. The second instalment looks much better on xbox, they didn’t have the other versions to compare it to though.

I eventually played through the main Dragon Age Origins story, it kept my attention with it’s deep story elements. I wasn’t a fan of playing on my mac sitting at my desk though, so would really need to be in the right mood to actually sit down and play it. That’s why it took my almost a year before I completed it.

Dragon Age 2 feels very similar with it’s cutscenes and branching shorelines. The combat seem considerably different with a much more action orientation — though that may be influenced by the fact that I was used to the PC version rather than the console version. You have one button to mash that uses your standard attack, then the other buttons are mapped to cool down abilities. The combat automatically paused when I went to cast AoE spells with the mage, but other than that it was non-stop. The rogue felt quite fun, jumping around super fast, it did present a bit of a challenge keeping up with him and ensuring he was facing the right way.

Hunted — The Demon’s Forge

This game has a really interesting premise, dark fantasy mixed with 3rd person action in a co-op environment. I sort of imagined a mix between Warhammer, Gears of War and Borderlands. I spent an hour watching the developers present the game then played through a co-op level. The environments are nicely executed and do conjure the dark fantasy world, right down to the scantly clad female elf protagonist. The combat felt ok, I played the elf archer so spent most of my time with a bow. There was a cover mechanic and it mostly snapped to targets when you popped out. The sword play felt a bit awkward while magic probably felt the best. It has potential to be quite a fun, online game, but didn’t really seem to offer anything unique or innovative to distinguish it. I’m also concerned there’s no really story to it to drive you through the game. Borderlands didn’t have one but the game play and 4 player co-op gave me my money’s worth, so perhaps this will succeed in the same manner. Still, without any differentiation it’s more likely to be a cheap purchase well after release for me, and that’s only after I’ve read some reviews.

Enslaved — Odyssey to the West

This game sort of feels a bit like Uncharted, which I loved. The platforming isn’t as sophisticated but it’s seems to have a strong story and some interesting puzzles and melee type combat. I’m definitely going to keep an eye on it. I still feel like I haven’t seen enough to come to a conclusion but if the reviews are positive I think I’ll be picking this up!

Other titles

There were a few other notable titles I viewed but didn’t get around to playing, but still perked my interested and would like to investigate further.

Sony Move queues were too long for me to bother, and with all the calibration process for each new player it took even longer. I saw most of the Move games, including SOCOM. They all look like high res Wii games, the boxing was in 3D and seemed to create quite a workout for the player. SOCOM appeared to play with the same fluidity as a controller. Without actually trying it it’s too hard to say, though there weren’t any games that really convinced me I need to investigate buying one.

Microsoft Kinect seems so much more sophisticated than the Sony Move. There’s no configuration, and nothing to hold, just stand up and start moving to play. The dance game does actually look like it would be a great party game. I’m not sure about the other Wii-like titles but controlling the UI dashboard by swiping your hand has convinced me I’ll be looking further in to purchasing one of these when they are released.

Kirby’s Epic Yarn actually looks like one of the few appealing Wii games. The whole style of the game is really nicely executed. I doubt I’ll ever buy a Wii but if I did this would be one of the few games I’d get for it.

Assassins’ Creed Brotherhood seems almost identical to Assassins creed 2 in graphics and gameplay, except this version has multiplayer. You need have a target and you are someone’s target. The trick is to blend in with the crowd (AI characters) while stalking and at the same time avoiding. I was addicted to Assassins’ Creed 1 and 2 and this looked like fun so will likely be a release day purchase for me.

Fable 3 looks like more Fable 2 but sharper, richer and smoother graphics. Fable 2 was odd but after a while I was hooked and spent a few late nights fighting my way through story with my evil mage. I think this will be a release day purchase for me also.

Gran Turismo is still looking really nice, and F1 2010 looks super detailed and smooth. I’ve already got too many racing games but I think I’ll be buy these when I see them at a good price.

What I enjoy about designing custom user interfaces compared to websites or iPhone applications is that there is an opportunity to design the actual physical interface — rather than just rely on a mouse/keyboard or touchscreen.

These iPhone applications are blurring the lines between traditional and digital interactions and mediums — creating an interesting contrast between old and new. They challenge the need to simply use the physical interactions that are packaged with the medium’s physical properties.

BirdBox Alarm Clock by luckybits uses a custom shell to house the iPhone, changing the screen properties and framing the animation. It alters the physical properties of the iPhone so they compliment the application.

Takayuki Fukatsu has designed Phonebook Ride!Ride!, a children’s book that has a pocket for an iPhone. It combines physical page turning with digital — swiping your finger on the screen. The static page arts combines with the digital animation to create the narrative.

As a student again I found myself surrounded by resources to learn more about design and was encouraged to read essays; debate with peers; attend exhibitions, public design lectures and conferences.

One

So one cool March evening in Melbourne I found myself in a public lecture by Austrian born, Stefan Sagmeister. Stefan runs a small successful design studio in New York. The lecture was titled “yes, design can make you happy”. Sagmeister had also considered a career in film, as a music video director. He had recently taken a year off to reflect on whether design was something he wanted to continue doing. Immediately this concept resonated with me.

During his year off Stefan didn’t give much thought to design, and instead just enjoyed the break. At the end of his year off he made a list of all of the happiest memories he’d had in the last 20 years. He eliminated ones that had nothing to do with design but found over half of them still had some association with design. They were split in to two categories, one from a consumer’s point of view where he was happy experiencing design. The other was being happy while designing. His conclusions were therefore that design did make him happy, as a designer and as an audience member for design. He decided to return to work in design but aim to create happiness from his work.

Design can visualise happiness — using a photo of someone laughing or a fun illustration will achieve it. Stefan wanted to demonstrate work that evoked happiness as an emotion within the viewer. He showed the following three pieces that had made him happy:

True, a New York artist, had created his own set of signs for the subway. He printed and stuck them over existing signs enlisting the help of his friends:

Willy Sengewald and Richard The created a kiosk installation in Berlin that projected your eyes on to buildings:

The Bubble Project by Ji Lee puts empty speech bubbles on street advertising encouraging the public to fill them in. Lee then returns and photographs them ads:

It was inspiring to identify with someone who had worked for such a long time in design, and also questions their career. He demonstrated how much more there was to design.

The power of taking a year off remained with him, and since then Sagmesiter has continued to take a year off every 7 years to pursue other interests, spending that year living in a different country. It follows the philosophy of spreading your retirement out through your life rather than using it all at the end of your life when you are often too old to travel and enjoy it. A video of his lecture can be seen on YouTube.

Two

Later that year I attended the AGIdeas conference where I saw a lecture from a few designers at IDEO and Daod Sarhandi talk about his most recent book titled, ‘Evil doesn’t live here’.

IDEO showed some of their recent projects, none where about selling to consumer but rather mixing anthropology and design to create a better experience for their audience. The example that resonated most with me was their work for a hospital. The designers had spent time in the hospital as pretend patients. One of the first things they noticed where that you spent a lot of time on your back staring at the ceiling so they decided to use this as the medium for their work. They used it as a canvas for presenting either useful information or at least something soothing and decorative, which helped relax patients before going in for surgery.

Daoud Sarhandi had spent some time in Bosnia collecting posters from the war in 1994. He gave a talk about his discoveries and showed the work he’d found. It was amazing to see how the poster had taken over as the best form of communication once all the services had been shut down and/or monitored. The power of design to communicate was demonstrated really clearly:

Three

The final discovery was a book by Tony Fry – New Design Philosphy: And Introduction to Defuturing. He had written a number of essays on defining design and the importance of design sustainability. Really widening my definition of design to almost be absolution anything with a plan. The book raised the topic of anti-consumer behaviour and the process of designed objects redesigning themselves throughout their life time.

My conclusion at the end of that year was a curiosity to learn about all these new aspects of design. The movement towards sustainable design, design as a plan or language -– or simply something that creates happiness. While design is exploited for reasons of making money and selling products in certain industry sectors it’s generally a shallow definition. Since 2004 I’ve discovered many more examples of unexpected design projects but it’s nice to look back at these first discoveries with fond memories and see they are still influencing young designers.

One early outcome of the course identified ways which a presenter can enguage with an audience. This list can be used for any topic and the more things you can address as a presenter the more chances the audience will listen to and enjoy your presentation:

1) Have something to say — Ask or pose questions, make bold, controversial statements. Know and be passionate about the topic. Practice the presentation before giving it.

2) Know your audience — Cater the presentation to the demographic. Dress to suit their expectations but also ensure you feel comfortable.

3) Use other methods of communication — Re-inforce your perspective with body language and simple visual support. Leave pauses to allow the audience to digest and reflect on topics.

4) Add a personal touch — Use humour or personal stories to create a relaxed atmosphere and make the narrative more human focussed. Adopt a relaxed, conversational tone that makes it more personal.

There are several styles of presentations that have recently emerged and try to ensure presentations are more enguaging. Used in conjunction with the above list these can help to create a strong starting place for creating an amazing presentation:

Pecha Kucha — Drawing its name from the Japanese term for the sound of “chit chat”, it rests on a presentation format that is based on a simple idea: 20 images x 20 seconds

20x2 — exists to showcase the creativity that lurks in each of us. Writers, musicians, filmmakers, web geeks and other bon vivants are asked to take two minutes each to answer the question of the day.

Ignite — In talks that are exactly five minutes long, Ignite presenters share their personal and professional passions, using 20 slides that auto-advance every 15 seconds.

Finally some inspirational presentations you can watch on the web:

Presentation Zen — Garr Reynold’s blog on issues related to professional presentation design. Links to lots of presentations with commentary.

TED — A yearly conference with some of the most inspirational speakers you’ll see.

Apple Keynotes — An archive of some of Steve Job’s famous keynote presentations.

Games have an inherit association with entertainment, and a history associated with children’s toys. The market developed there because children had a natural tendency to play and weren’t afraid of technology. This historical association is now limiting the medium’s potential, though that’s expected to change as the children who played those games become decision makers and re-purpose the game content.

Although I’m not particularly interested in education I do have an interest in games as a form of digital media. I’m drawn to them from an entertainment, story-telling perspective that often includes great digital artwork but as a web designer I also believe they provide innovation in, and inspiration for, interface design. Above: Heavy Rain for PS3 provides a strong story with innovative interaction.

Game interface design adds the element of fiction, or narrative, to the user interface (UI). This introduces multiple ways of implementing UI elements, as outlined in my previous post, User interface design in video games.

Games have custom control methods and new technologies are being released that allow haptic interactions. The web still relies on 30-year-old interface technology via a mouse and keyboard. The iPhone has introduced gesture based controls for web and we’re beginning to see this technology on computers but it still falls short of physical interface examples being brought to games consoles — see Sony Move and Microsoft Natal.

Games can humanise technology by presenting an interface that isn’t hostile and complicated. The Wii has successfully achieved this and is perhaps why it’s sold so well. Games are developing new relationships with technology. Flower for the PS3 is a great example of this. The player controls the wind with the push of a button and tilts the control to change the direction.

Games are simply another form of digital content. 100% of children between 6 and 10 play games, and 60% of the UK population admits to playing games in some form. The industry produces £1 billion GDP for the UK and the UK is the third biggest market after North America and Japan. They are becoming just as much a part of our culture as books, film and TV. One of the best quotes from the conferences was from Jesse Schell in the closing keynote when he referred to the popular term used to define people who play games, a gamer: “The term gamer is going to appear just as absurd as the term TVer would now”.

The conference included a series of presentations about what is coined ‘serious games’. Where games are being used for purposes other than entertainment and in this case to educate high-level professionals. These games work as training tools because they imitate reality -– sitting along side on-the-job training as the preferred method of teaching. They reduce the shock, preparing the student for the real task and have a narrative that enguages the student’s attention. The experiences are randomly generated ensuring the courses can be reused to test students, and once the assets are built they can be quickly repurposed to create additional scenarios.

Tauma Trainer is one example from TruSim, there are more examples of serious games on their website.

Maritime warfare is another examples of a purpose built learning environment, this time for the Navy and developed by Caspian Learning.

Games are already appearing as a form on content on the web, either as Flash games or integrated in to sites such as Facebook. Web professionals need to understand how to implement this new form of media, having an understanding of its potential can also create innovative content solutions. When video was introduced as a form of web content Designers were tasked with providing its UI — media player buttons and play heads etc. Then the web appeared on TV and they had to re-think the UI for a larger screen with a different interface.

BBC iPlayer for computer monitor

BBC iPlayer for TV

Web content is also expanding to other mediums — widgets are now part of desktop operating systems, mobile phones and televisions. Social networking has expanded on to every platform. All forms of content are merging and web designers need a basic understanding of how these forms of content behave and interact with audiences. Games have their own user interface — so there’s not only an opportunity to provide an interface outside of the content, but also within it.

Games are not only used for entertainment on the web, but also for topics such as sophisticated advertising campaigns, helping loose weight or providing branded content. The interest in the new genre of serious games also presents opportunities for web-based or mobile delivery. Channel 4 has created an education strategy to connect to its audience through digital mediums by developing several iPhone games as part of it’s 4iP programme: Sneeze, Privates, 1066 and Cover girl are a few examples. With connected devices games are also enabling hybrid spaces, or augmented reality — blurring the lines between what’s real, virtual and fictional, and acting as tools for physical spaces. Tate is introducing an iPhone game called the Tate Tramp that guides players through the gallery as they explore it as a hybrid space.

To provide a seem-less interface that compliments content you need an intimate knowledge of what the content communicates and an understanding of how the media works. As Marshall McLuhan said, the medium is the message. Just as it’s important to read and understand copy before choosing a face and typesetting it, it’s important to understand a game’s fiction before creating its UI. So the web designer of the future will be better prepared if they have a thorough knowledge of different forms of content and games and virtual environments will certainly be one of them.

References: Mary Matthews — Strategy and Busines Development Director, TruSim; Graeme Duncan — CEO, Capsian Learning; Lt Cdr Steve Clark, Royal Navy; Serious Games Institute; Tom Chatfield — Author, Fun Inc; Margaret Robertson — Game Design & Consultant; Jesse Schell — CEO Schell Games.

Erik Fagerholt and Magnus Lorentzon explored theories of game UI design in their thesis for Chalmers University of Technology titled: Beyond the HUD — User Interfaces for Increased Player Immersion in FPS Games. They introduce terms for different types of interfaces depending on how linked to the narrative and game geometry they are:

Diegetic

Diegetic user interface elements exist within the game world (fiction and geometry) so the player and avatar can interact with them through visual, audible or haptic means. Well executed diegetic UI elements enhance the narrative experience for the player, providing a more immersive and integrated experience.

Metro 2033 uses a complete Diegetic UI with no HUD elements to help to support the game’s narrative. It runs the risk of frustrating the player though slow response times but this forms part of the game mechanic.

The character’s watch is used to measure how long the filter in the gas mask will last and how visible he is.

Many games get away with using Diegetic patterns because their narrative is set in the future, where UI overlays in daily life are commonly accepted. This is the case for the latest version of Syndicate. If the story was set in a different time period the UI elements would be probably be considered Spatial (explained in detail later in this post) instead of Diegetic.

Syndicate’s DART overlay mode highlights enemies and allows the character and player to see through cover

Assassin’s Creed manages to use a lot diegetic patterns even though it’s set in a historical world because the player of the player is using a virtual reality system in the future. So the story is in fact futuristic rather than historical.

Assassin’s Creed uses it’s eagle vision to highlight enemies and their patrol track. The player and the character see the same thing.

There are cases when diegetic UI elements aren’t appropriate, either because they aren’t legible in the geometry of the game world, or there’s a need to break the fiction in order to provide the player with more information than the character should or does know.

Meta

Sometimes UI elements don’t fit within the geometry of the game world. They can still maintain the game’s narrative but sit on the 2D hub plane — these are called Meta elements.

A common example of a Meta UI element is blood the splatters on the screen as a form of health bar, as in Call of Duty: Modern Warfare 2.

Blood splashing on the screen within the 2D HUD plane to tell the player that the character is losing health

Interacting with the phone in Grand Theft Auto 4 is an interesting example. It mimics the real world interaction — you hear the phone ringing and there is a delay before the character and player answer it. The actual UI element itself appears on the 2D hub plane though, so it’s actually a Meta element, though the start of the interaction is Diegetic.

The character is answering the phone but the actual UI element is placed within the 2D HUD plane that only the player sees

Meta UI elements can be difficult to define in games without a strong narrative element, such as sport or racing games. In Need for Speed: Hot Pursuit I still feel that the speedometer in the 2D HUD is meta because the player’s character — the driver, would know what speed the car is is traveling at and therefor it forms part of the narrative, as much as there is one. Other HUD elements such as track position or track location can be more difficult to define, some could be considered Meta because the drive would have that information while the rest are simply Non-Diegetic.

Need for Speed: Hot Pursuit uses HUD elements such as the speedometer to relay information about the car to the player

Spatial

Spatial UI elements are used when there’s a need to break the narrative in order to provide more information to the player than the character should be aware of. They still sit within the geometry of the game’s environment to help immerse the player and prevent them from having to break the experience by jumping to menu screens. The closer these follow the rules of the game’s fiction the more they can help immerse the player.

Splinter Cell Conviction also adopts Spatial elements in the form of projections that illustrate objectives within the game world. Their scale does seem to challenge the fiction slightly more than other examples.

Type is overlaid in to the environment to communicate messages to the player rather than the character

Fable 3 is another example where Spatial elements are used to provide more information to the player and prevent them from jumping to a map screen. The glowing trail almost fits within the fiction given it’s magic aesthetic quality but the character isn’t meant to be aware of it. It guides the player to the next objective.

Fable’s sparkling trail allows the player to guide the character in the right direction

Spatial elements can be beautiful pieces when they work with the geometry of the world. These Spatial elements from Forza 4 demonstrate a simple style can contrast the rich 3D qualities of the game.

Bold iconography combined with strong typographic layouts help establish a beautiful art direction for Forza 4’s UI

Non-diegetic

Then there are traditional non-diegetic elements, these elements have the freedom to be completely removed from the game’s fiction and geometry and can adopt their own visual treatment, though often influenced by the game’s art direction. I think these elements are best used when the diegetic, meta and spatial forms provide restrictions that break the seamlessness, consistency or legibly of the UI element.

World of Warcraft uses a mostly Non-diegetic UI, one exception being the Spatial player names. It allows the user to completely customise it, hopefully ensuring a familiar experience.

Most of the UI elements in World of Warcraft sit on the 2D hub plane, some elements sit within the world’s geometry such as the player names however the character isn’t aware of any of the UI

Finally, Mass Effect 3 uses many Non-diegetic UI elements in order to inform the player of the character’s selected weapon and power — among other things. Given it’s futuristic setting I can’t help to think if some of this information could have been integrated in to the game world, narrative, or even both.

Mass Effect 3’s Non-diegetic elements still inherit the visual style associated with the game world

Conclusion

Physical interaction methods promise to challenge game UI design further, enabling a stronger connection between the avatar and character as both engage in similar actions at the same time. As a designer currently working in web design I’m almost jealous of the levels of interaction plus the addition of audio and haptic elements available in game UI.

Here is a visual representation of these four terms. The examples used are: Non-diegetic UI — Diablo 3’s health meter, Spatial — Left for Dead’s character outlines information the player of their location (if this was set in the future it could be considered Diegetic), Meta — Metro 2033’s cracks on the screen to indicate damage, Diegetic — Dead Space 2’s menu system is initiated by the avatar.

Recommended books on game and interface design

See larger image Introduction to Game Development (Paperback) By (author): Steve Rabin List Price: £67.31 GBP New From: £31.41 GBP In Stock Used from: £26.88 GBP In Stock

See larger image The Art of Game Design: A book of lenses (Paperback) By (author): Jesse Schell List Price: £37.99 GBP New From: £32.19 GBP In Stock Used from: £31.47 GBP In Stock

See larger image Designing Interactions (Hardcover) By (author): Bill Moggridge List Price: £30.95 GBP New From: £21.32 GBP In Stock Used from: £13.49 GBP In Stock

See larger image Universal Principles of Design, Revised and Updated: 115 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions and Teach Through Design (Paperback) By (author): William Lidwell, Kritina Holden, Jill Butler List Price: £18.99 GBP New From: £10.19 GBP In Stock Used from: £13.42 GBP In Stock

Further reading online

1. Marcus Andrews from DICE examines recent games using these theories from Fagerholt and Lorentzon in this article posted on Gamasutra.
2. Michael Grattan, a senior at the University of Southern California writes a response to the article on his blog.
3. Dave Russell has also written an article on his blog.
4. Video: The UI designer for the game Brutal Legend talks about his work and shares his process.
5. 13 principles of display design by Christopher Wickens et al. in their book An Introduction to Human Factors Engineering.

I Love Typography
I became particularly interested in John’s blog in 1997 because I identified with being a ‘western-born’ designer living in Japan. I began reading it not long after I left the country. He is passionate about typography and the blog has been regularly updated with great posts for the past 3 years. He also set up We Love Typography — a collection of type images posted by various people. And Marginal Notes — a collection of type related images, videos, and other media in an RSS feed.

The Elements of Typographic Style applied to the web
This site is based on my favourite book, The Elements of Typographic Style by Robert Bringhurst, but applies the books typographic advice, guidelines and rules specifically to web type.

The Font Feed
A blog from FontShop, one of the first digital foundries set up by two great typographic designers Erik Spiekermann and Neville Brody in 1989. It’s full of lots of inspirational posts and fonts.

The Grid System
A collection of posts, links and tools related to creating typographic grids for websites. Nice and clean-like.

Typographica
Typographic articles and posts plus one of my main sources for reviews on type books and fonts.

A List Apart
One of the first sites I used to learn CSS about 8 or so years ago. It still serves as a great tutorial-based site for learning how to implement grids and type for the web — plus practical advice on choosing type and layouts. They run a workshop based conference now too, An Event Apart.

Typophile
I lived on these forums during the last year of my Masters when I was writing final papers on typography related subjects. It’s still got a strong, passionate community and a great place to search for answers. They also run competitions within the forums.

Lettercut
This site creates a niche in the typographic blog world by specialising in showcasing customs letter work. It also runs a number of competitions that generate reader created content.

Veer
Veer is a commercial site that provides typefaces, photography and illustration — plus some lovely free desktop wallpaper. They have been posting a blog since 2002 with lots of inspirational typographic work.

Ministry of Type
A relatively new discovery, this is a personal blog by English designer Aegir Hallmundur. It’s got some lovely images of inspiring typography scattered through interesting posts.

Swiss Legacy
Another more recent discovery that has impressed me, this blog features lots of great posts on all things focused on typography and graphic design.

Brooklyn Bookbinder
A great source of traditional inspiration, one that I’ve used to inspire me to pursue personal printed design projects. This site is full of images of hand bound books featuring lovely craftwork and letterpress printing.

Type Chart
An online tool for browsing and comparing web typography, it will also generate the CSS for you.

Recommended typography books

See larger image The Elements of Typographic Style: Version 4.0 (Paperback) By (author): Robert Bringhurst List Price: £19.20 GBP New From: £12.36 GBP In Stock Used from: £14.87 GBP In Stock

See larger image Type Matters! (Leather Bound) By (author): Jim Williams, Foreword by Ben Casey List Price: £17.95 GBP New From: £9.51 GBP In Stock Used from: £10.80 GBP In Stock

See larger image Modern Typography: An Essay in Critical History (Paperback) By (author): Robin Kinross List Price: £20.00 GBP New From: £10.24 GBP In Stock Used from: £8.95 GBP In Stock

See larger image Stop Stealing Sheep and Find Out How Type Works (Paperback) By (author): Erik Spiekermann, E.M Ginger List Price: £28.99 GBP New From: £14.37 GBP In Stock Used from: £9.69 GBP In Stock

See larger image Grid Systems: Principles of Organizing Type (Design Briefs) (Paperback) By (author): Kimberly Elam List Price: £16.99 GBP New From: £8.65 GBP In Stock Used from: £2.58 GBP In Stock

Here are some highlights I’ve seen demonstrated that seem to be presenting innovative game mechanics, compelling story and/or really lovely art direction, click on the image for more info. Many of these games will be free and a lot were created with Flash so can even by played in your browser.

Limbo, from Playdead, Copenhagen, Denmark

Puddle, from students at ENJMIN, Angoulême, France

Trauma by Krystian Majewski, Cologne, Germany

Monaco, Pocketwatch Games, San Diego, United States

Boryokudan Rue, student from UCLA, Los Angeles, United States

Graphic design helps advertise and separate products from one another, often encouraging waste. Design thinking helped introduce product innovation — so more products could be produced and sold.

Communication design develops a dialogue directly with the consumer, and is inherent in visual and physical design. Research in to behavioural patterns have made it more effective too. Emotional connections with consumers are built by targeting basic human needs, as briefly outlined in the diagram below. “The three levels at play in design: visceral, behavioral, and reflective. Visceral design is about how things look, feel, and sound. Behavioral design is about getting products to function well, and about making that functionality easily accessible. Reflective design is about the meaning of things, about message and becomes more important as products mature”. Norman’s book Emotional Design explains it very well, recommended reading.

Consumers demand for news and information has dramatically risen of the past two decades, and now not only do the public consume products but also content. The media marketplace was created to help companies reach consumers. It uses a variety of mediums and provides information and entertainment as well as advertising.

Consumers are used to products being customised to suit their needs and demand the same with content — Designers have been assigned the task of shaping this content. Media plays such a large role in shaping consumers beliefs of the outside world so these Designers also inherit the responsibility for shaping culture to an extent as well.

Design is also responsible for social and personal interactions becoming commodities. Advertising often employs images of families set against a product to suggest certain personal interactions are only possible if you own their product.

Consumption supports the economy and in return supports more consumerism. Tony Fry’s book: A New Design Philosophy, An Introduction to Defuturing, provides some great insights in to design sustainability, and the future of design.

Some interesting thoughts as a designer as we approach 2010 and the pressure to reduce carbon emissions increase.

Adbusters run a Buy Nothing Day campaign every year to try and make people aware of consumerism and it’s effects. They also produce quite a lovely magazine.

Recommended books on design sustainability and ethics

See larger image Design Futuring: Sustainability, Ethics and New Practice (Paperback) By (author): Tony Fry List Price: £16.99 GBP New From: £10.02 GBP In Stock Used from: £9.96 GBP In Stock

See larger image Citizen Brands: Putting Society at the Heart of your Business (Kindle Edition) By (author): Michael Willmott Kindle Edition: Check Amazon for Pricing Digital Only

See larger image The Fundamentals of Graphic Design (Paperback) By (author): Gavin Ambrose, Paul Harris List Price: £26.50 GBP New From: £13.98 GBP In Stock Used from: £13.99 GBP In Stock

See larger image Graphic Design: A User’s Manual. (Paperback) By (author): Adrian Shaughnessy List Price: £19.95 GBP New From: £10.77 GBP In Stock Used from: £10.14 GBP In Stock

It was inspired from some of his earlier work with Nicola Yeoman, a London based set designer and interior stylist. These are two letters from a series in his portfolio, lovely.

Kerry Roper runs a graphic design studio called You Are Beautiful in London. He has an established illustration style with a very deteriorated, monochromatic aesthetic that I really like — I even bought a few of his tshirts. This is an album cover for the band Devi’s Gun.

Why do most people buy houses that look the same as they did when they were children? Is it because we have an idea of how something should look and we aren’t prepared to accept anything different? Many modern styled, environmentally friendly, houses are considered ugly by the majority of the home buying public.

Another example is some of the amazing automotive design that’s usually shown at motor shows but when the car finally reaches production is always tuned down to resemble other cars on the market. Is it a fear in the knowledge that people reject design change if too radical? Cars have changed their design over time, but it has been incremental.

My example about scooter shopping came up when comparing the Piaggio MP3 to the new range of Vespas (which I’ve owned in the past). At first I thought it was ugly and didn’t consider it over the classically designed Vespa but then I started to think why I’d jumped to that conclusion. Why did I think a scooter needed to resemble the original design that’s now 50 years old in order to be beautiful? This view was shared by many people I showed the MP3 too, though the MP3 is a production model, and does sell, I would be interested to see who is buying it though — and what they think of it’s appearance. Maybe it’s only sold to people who don’t care about it’s physical attributes, or maybe there are people that see past traditional design and are ready to embrace a more modern approach to an old idea? The bike has an option of a hybrid engine that’s better for the environment, it’s got 3 wheels so it’s safer and handles better, it uses an internal frame so it’s more rigid — in many ways it’s a better bike.

Another interesting thought is what sort of reception did the Vespa get when it first came on the market? It’s design was far removed from any other available bike, yet it went on to become a great success and develop a cult following. Maybe radical designs do that once they’re accepted?

This principle may work better in graphic design, not to say challenging conventions isn’t worth while. However, leveraging existing cultural visual language to ensure the right message is delivered is a valid argument. More so in interactive design, where you need to ensure an interface is useable and performs as it’s expected. Should we be so strict when we talk about product design and architecture though? Maybe I should really examine why I want a Vespa over an MP3 ..

During this period I read a number of fictional cyberpunk works, the most influential being Neuromancer by William Gibson — I first saw an interview with Gibson in this documentary made in 1990. Neuromancer appeared in Time magazine’s list of 100 best English-language novels written since 1923. Wikipedia states that Neuromancer is considered “the archetypal cyberpunk work”, winning the Hugo, Nebula, and Philip K. Dick awards legitimised cyberpunk as a mainstream branch of science fiction literature.

Steel Widow by Christopher Conte

This years marks the 25th year since the book was written. Gibson’s predictions about life in the early to mid 21 century were quite accurate. The world in which the novel is set — as described by Joe McNeilly in his article on the topic:

“A world ravaged by capitalism, dominated by technology, perched on the brink of social and ecological collapse. The gleaming skyscrapers and walled city-states of the rich stand in stark contrast to a grimy urban sprawl of discarded lives and outdated tech. A vast global computer network, known as the matrix or cyberspace, swarms with renegade hackers, deadly viruses, omniscient AI and the occasional reconstituted consciousness of a dead person. Cyberspace is accessed by “jacking in” to the matrix, effectively forming a direct interface between the brain and the computer. Neural implants and cybernetic prosthetics are also common, further blurring the line between man and machine. Megacorporations effectively replace governments and operate according to their own dictates, waging covert operations against each other, employing spies and private armies in an effort to control dwindling natural resources or the latest tech. Greed, betrayal and cruelty predominate the global monoculture as bodies and minds are steadily dehumanized by the assimilation of technology. The cold logic of libertarian capitalism defines every relationship; every interaction reduced to a commodity, the transaction of biz. Conversely, the dense databanks of the matrix spawn a human-like sentience with murky motives of its own.”

Some of the primary themes (predictions) presented in the novel:

The Internet

“Cyberspace. A consensual hallucination experienced daily by billions of legitimate operators, in every nation, by children being taught mathematical concepts… A graphic representation of data abstracted from banks of every computer in the human system. Unthinkable complexity. Lines of light ranged in the nonspace of the mind, clusters and constellations of data. Like city lights, receding…”

Designer drugs

“The drug hit him like an express train, a white-hot column of light mounting his spine from the region of his prostate, illuminating the sutures of his skull with x-rays of short-circuited […] energy. His teeth sang in their individual sockets like tuning forks, each one pitch-perfect and clear as ethanol. His bones, beneath the hazy envelope of flesh, were chromed and polished, the joints lubricated with a film of silicone. Sandstorms raged across the scoured floor of his skull, generating waves of high thin static that broke behind his eyes, spheres of purest crystal, expanding…The anger was expanding, relentless, exponential, riding out behind the betaphenethylamine rush like a carrier wave, a seismic fluid, rich and corrosive.”

And others such as; the netbook (cyberdeck); private companies becoming more powerful and manipulating governments for profit; biotechnology — artificial limbs and organs; nanotechnology; cloning; robotics; governments electronically monitoring citizens.

Forced Extraction of Truth by Jeffrey Scott

The novel has had various adaptations and strong influences on a lot of good work: Razorgirls, Bladerunner, Shadowrun, Wired Magazine, The Matrix films and a number of anime films such as Akira, Ghost in the Shell and Serial Experiment Lain. A movie is currently in production too.

Recommended cyberpunk media

See larger image Neuromancer (Paperback) By (author): William Gibson List Price: £7.99 GBP New From: £2.78 GBP In Stock Used from: £0.01 GBP In Stock

See larger image Deus Ex: Human Revolution — Limited Edition (Xbox 360) (Video Game) Manufacturer: Square Enix ESRB Rating: Platform: Xbox 360 Genre: action-games Rating: Suitable for 15 years and over List Price: £49.99 GBP New From: £8.50 GBP In Stock Used from: £3.39 GBP In Stock

See larger image Akira [Blu-ray] [1988] (Blu-ray) Director: Katsuhiro Ôtomo Rating: Suitable for 15 years and over List Price: £27.99 GBP New From: £6.64 GBP In Stock Used from: £6.59 GBP In Stock

See larger image Blade Runner: The Final Cut [Blu-ray] [1982] [Region Free] (Blu-ray) Starring: Harrison Ford, Rutger Hauer, Sean Young, Daryl Hannah Rating: Suitable for 15 years and over List Price: £27.99 GBP New From: £6.58 GBP In Stock Used from: £5.26 GBP In Stock

See larger image Watch Dogs (PS4) (Video Game) Manufacturer: Ubisoft ESRB Rating: Platform: PlayStation 4 Genre: action-games New From: £54.99 GBP In Stock Used from: Out of Stock

The Gates of Hell by Auguste Rodin

The Divine Comedy wood engravings by Salvador Dali The Black Cherub, The waterfall of the Phlegethon and Lucifer are 3 of 100 wood engravings by Dalii

The Garden of Earthly Delights by Hieronymus Bosch

Unholy Communion by Wayne Barlowe One of many images from Barlow’s Inferno.

William Adolphe Bouguereau’s painting of Dante and Virgil

Dante’s Inferno game from Electronic Arts An XBox 360 and PS3 action game that although didn’t review particularly well serves as an enguaging interactive environment that lets you explore a modern twist on Dante’s Inferno. It’s almost a shame you are forced to fight it as it’s quite beautifully crafted.

Rather than give my thoughts on each speaker, or mention my favourites, I thought I’d just list some interesting projects that were presented:

Gameboy Instruments by Gijs Gieskes

Urban Play by Stefan Sagmeister

The Sheep Market by Aaron Koblin

You Are Not Here by Mushon Zer-Aviv

Human Skateboard by PES

The Maps by Paula Scher

Random Assistant by Joshua Davis

True Blood titles by Digital Kitchen

The Unfinished Swan — shoot ink to reveal the landscape.

Feist, a beautiful looking physics-based platform game.

Blueberry Garden, a surreal ‘art’ sandbox game — kinda creepy!

Augmented reality games overlay the real world with a virtual world, the two combine to create a gaming space, though this concept requires advances in hardware before it can really enguage audiences. At the moment devices with cameras, such as smart phones, are able to provide some level of augmented reality, but soon there will be a lot more devices able to pull you in to these worlds. Devices like these glasses from iWear that allow graphics to float over a transparent screen, allowing you to still see the real world at the same time as a virtual one.

HowStuffWorks has an article on what sort of technology will/can be used for these games, and wikipedia has an interesting timeline on the concept — which dates it back to 1849. William Gibson’s latest novel features an artist who is a specialist in geospatial technologies. He blends geotagging with augmented reality in order to create historical events which are triggered when the audience walks in to a certain zone. Quite a nice execution of the concept.

North Kingdom have used the augmented reality concept on one of their recent websites. It makes use of your webcam, if you’ve got one I’d recommend trying it.

A similar concept is that of Alternate Reality Games (ARG). The concept uses the real world as a platform in an interactive fictional narrative though — rather than blending the virtual and real together. The concept of an ARG has established itself as a form of mainstream entertainment as well as a method of marketing and advertising.

Then there’s the advent of the massive multiplayer online (MMO) game, which could even work on an augmented reality platform. Most people have heard of online games like World of Warcraft (WoW), either through advertising, media coverage or because they know someone who has played it. WoW has achieved overwhelming success as a game with a subscription model, with approximately 11 million accounts each paying US$15 per month. Many games have tried to compete with WoW. Some of the more successful ones have tried to differentiate themselves through gameplay (EVE, AoC) or build from an already established fan base (LoTRO, WAR, SWG).

Now it seems like a new point of differentiation might begin to challenge the industry in the form of free to play MMO games, appealing to a wider audience and targeting children and people who don’t normally play games (see: Free Realms, Fusion Fall and Runes of Magic). These games gamble on the fact that 1% of their audience will spend a reasonable amount, and 9% will spend a small amount per month on character customisation or transport within the game, etc. They don’t spend much on advertising, so perhaps you won’t have heard of them, for example Perfect World has been around as long as WoW and has 5 times as many accounts but compare how many people have heard of it to WoW. These games need to be accessible so they’re design to run on as many computers as possible, some have even been designed to run within a web browser so no download is required (Fallen Sword).

Advertising often embodies worlds that don’t exist, at least in the physical sense. It makes use of myths and portrays an appropriate moment or environment in order to prompt a certain emotion or reaction in the reader. Like film or TV it  often provides guidance when handling real life events. Advertising and media act as a powerful informers of local culture.

I’ve been ‘exploring’ video games recently — I think this is where some of the leading ideas around interaction is focussed. I’ve lost many hours lost in these virtual worlds. It turns out advertising and gaming are not too dissimilar; they both attempt to create artificial worlds, often based on our own reality, and offer some kind of escape for their reader.

Advertising’s primary goal is to sell a product, service or idea that the world portrays; games on the other hand need to excel in immersion and interaction in order to enguage and in turn succeed and make money. I’ll often come out of a good game as though I’ve actually experienced something amazing or been somewhere new. Books, movies and other forms of media also offer a form immersion in to a story. I’ve felt compelled (addicted?) to go back to a book or follow a tv series, but haven’t felt the same level of character immersion as I have from a game, and from an interaction point of view I find games a lot more interesting because they are not limited to one or two senses.

I’ve noticed that all of the games I’ve been felt compelled to continue playing are games with a strong sense of place and story, and provide a seemless (as possible with current technology) interface with physics that mimic the real world. I assume because that makes them seem more real to me, as they are similar to what my own interpretations of the rest of my life have been. Or they’ll offer a strong social connection — to other real people, giving another level of realism to their world. Whether that’s fighting with them on a virtual battlefield, or chatting about virtual armor sets while standing on the streets of an MMO. If you’re interested in a preview of where interaction and immersion are going I’d recommend these worlds, my highlights of a year of gaming:

Fallout 3 Washington DC, 2277 AD; 200 years after nuclear war

Fable 2 Albion, in a colonial era resembling the time of highwaymen or the Enlightenment; guns are still primitive, and large castles and cities have developed in the place of towns

World of Warcraft; Wrath of the Lich King Northrend, high fantasy period of elves, dragons, orcs, trolls and gnomes

Mass Effect 2183 AD, 35 years prior, humanity discovered a cache of technology built by a technologically advanced but long-extinct race called the Protheans

Assassin’s Creed 1191 AD, the Third Crusade in the Holy Land

If this level of immersion continues to use more of our sense as technology develops is there a place for a cyberpunk future? Will people surrender their real life for a virtual existence?  What is the real world anyway? Can we believe our senses.. if all that’s required for something to be real is just an interaction with our brain why can’t we just bypass our biological senses (ears, eyes, nose etc) and interface directly with our brain? Is it ok to form relationships in virtual worlds, or with artificial people, machines, or dolls?

“If you have two people who think the same, fire one of them. What do you need duplication for?” —Jerry Krause, General Manager, Chicago Bulls.

These constraints are not just limited to the medium, they gather complexity and borrow from other disciplines to varying extents depending on the context of the design outcome and discipline in which the designer works. Fields such as:

• anthropometrics — the size of people for the use of physical objects; physiology — the way bodies work for the design of man-machine systems;
• psychology — how the mind works for when interacting with computer systems;
• sociology — how people relate to each other for the design of social systems;
• anthropology — how people from different cultures interpret meaning for global design;
• ecology — how the living world works to ensure sustainable design.

Once a designer is trained and has worked within one discipline it feels normal and natural to continue working within those constraints. So while designers will usually follow a similar process and evaluate against a similar criteria the variety of their experience within constraints is the key to generating innovation and that’s why using a multidisciplinary team can create a better outcome.

For a richer example we can look at Mirror’s Edge, an upcoming game and one that I’ll no doubt be buying. Traditionally a game that was 3D would still have a 2D interface that would sit on top of it. This game has removed the 2D user interface layer and integrated it in to the 3D environment. It uses colour to indicate health, as your character loses health the saturation of the environment decreases. Colour is also used as a marker for navigation within the space — your character can grab on to red objects, or interact with them in a more complicated way.

Dead space, another new game, displays the interface within the 3D environment. While the interface is still in a 2D form it uses content within the game instead of icons to access it. You can see the ammunition left in the gun is displayed within the environment as a hologram in this video, other in-game interface elements are displayed the same way if you explore other videos.

As internet connection speeds improve and small screens increase in their resolution the use of 3D navigation will increase on the Internet as well as devices. Interestingly the games industry has begun to adopt these concepts even though they’ve had the technology for years. I wonder if there is a future with no more icons and scroll bars? Research continues..

Norman identified three levels of cognitive processing in his book Emotional Design in 2004 which can be applied to multiple forms of design work and help us understand the process of interacting with something new: visceral, behavioural and reflective. These levels are based on primitive instincts related to survival. I will look at how these levels apply to interface/digital design as that’s the area of design that I specialise and am most interested in!

The visceral level of processing is the first, where a judgement is made on the initial sight or smell of something. A conclusion is made on whether it is good, bad, dangerous, edible etc. Interestingly, making an interface beautiful means that the reader perceives it as being easy to use and is more likely to spend time learning how to use it. The interface can therefore be more complicated or even more difficult to use. Creating a beautiful interface for the reader still require an intimate knowledge of what they may find beautiful though.

The next level is behavioural, this is actually how it works, or behaves, and probably the most important part to any interface as failure to connect with the reader here will general mean the design has failed. This could include things like roll over animations to give the reader feedback on their interaction, to the way the menus may animate or the use of sounds. The interface should compliment the readers behaviours and feel implicit.

Reflection is the final level of cognitive processing, which is where the reader considers their experience with the interface via memory. Do they remember the experience as being pleasant? It is also how they might express themselves, though this has more to do with other forms of design. Using a certain product or wearing a certain item of clothing communicates something about choice and personality.

Applying these theories to an object may help explain the levels and how they work. The Apple iPod is a successful piece of product and interface design (proven by sales). The iPod is beautiful to look at, it’s simple, clean lines and smooth corners make it approachable and friendly. It’s also sleek and almost futuristic. It connects with people on a visceral level. The interface is fun to use. The iPod touch menus interact with your fingers and replicate real world physics with acceleration and objects that bounce, meeting the behavioural level needs and creating a pleasurable memory in the reflective level (this is helped by being able to play your favourite music). The iPod is also advertised as being for young technology-loving people who like having fun and listening to music. Owning an iPod is associated with being one of these people, so it also meets the reflective level using this device.

Design to reduce crime

Central Saint Martins College of Art and Design in London has established a Design Against Crime research centre to address issues such as criminal activities and developing products and services that aid in crime prevention. They also have another resource called in the bag to help prevent street crime.

Design Against Crime (DAC) have several interesting projects on preventing crime. They also collaborate with students.

The UK home office employed design to create a campaign warning people in high theft areas and advising how they could reduce their chance of being a victim — the yellow and black are instantly recognisable as a sign of danger.

The Design Council has a number of case studies on topics such as how design can reduce crime, they also cover other topics such as how to reduce energy consumption and create better public services.

Colour to improve the environment

The use of a colour can be used to communicate a mood. Baked Miller Pink is being used in gaol (jail) to calm inmates. However, like other elements of design, colour can shift meaning from person to person depending on personal experience and wider factors such as culture. That doesn’t mean you can’t use colour to convey meaning but simply relying on colour may not work as well as using a combination of visual codes. That is unless there is a particularly strong connection or instead of relying on a perceived meaning the colour establishes it’s own.

The Design Council created the orange initiative – using colour to help reduce theft, rather than relying on colour perception.