Design
Are You Ready For A Web Design Challenge?
This is not a normal Smashing Magazine post. I’m not going to teach you something new or inspire you with examples of great work. Instead, I want to encourage you to complete a Web design challenge. I believe this will help to address a weakness that exists in many of our design processes.
If you complete this challenge, it will make it easier for clients to sign off on your designs, and it will improve the quality of your work.
So, what are we waiting for? Let’s get started.
The Challenge
If you’re like me, you did some form of higher education in art and design and will know about “the crit.” These meetings involve the class coming together with tutors to analyze and provide constructive criticism on each other’s work.
These were terrifying meetings in which I justified my design approach and defended it against criticism. Although I hated every minute of them, I believe they nurtured one of the most useful skills I have as a Web designer.
The ability to logically justify our designs is a skill many of us lack. This is the heart of the challenge I wish to lay down.
My challenges is this:
Write a blog post justifying the design approach you took to one of your websites. Then, encourage other Web designers to provide feedback and ask questions.
Admittedly, this might sound like a lot of effort, so let me explain why it is worth your while.
Why This Challenge Is Worth Undertaking
As I said in a previous article, being a great designer is not enough. You can produce outstanding work and be the envy of your peers, and yet struggle to convince clients of your approach. The reason is that clients do not understand design the way your colleagues do. Therefore, you need to be able to articulate what makes your design right.
Our ability to justify our choices is crucial to our relationship with clients. Without it, clients will lack confidence in our abilities or, worse, feel excluded from the process. A lack of confidence leads to micro-management, and exclusion leads to frustration and resentment. Therefore, explaining our approach is vital.
However, it isn’t just about the client. It’s also about your personal development. If you don’t have a clear idea of what works, then improving will be difficult. Design critiques are as much about improving the quality of your work as justifying it to others.
Unfortunately, this requires that we overcome two barriers.
First, many of us don’t fully understand why we have designed a website a certain way. We design at a subconscious level, based on years of experience. When you have been driving for a while, you cease to think about the process of driving. Likewise, design decisions are often handled at a deeper level than the conscious mind.
Secondly, many designers haven’t had to justify their approach in the past. Either they haven’t gone through the rigorous critiques that I experienced in university or they don’t have the experience required to articulate their decisions.
It is for these reasons that this challenge is so valuable. By writing a blog post about a particular design and encouraging feedback, you move your decisions from the subconscious to the conscious level and gain valuable experience in articulating them.
Of course, knowing where to start such a challenge can be a challenge in itself.
Where To Start
If you are not used to thinking about design at a conscious level, then you might struggle to begin. While there is no right way to do this, I can share the approach that I use.
When discussing my design with others, I tend to look at the various components that make up the product. These usually are:
- Grid,
- Layout,
- Color,
- Typography,
- Imagery,
- Styling.
Ask yourself, why did you approach each of these elements the way that you did? Let’s consider each in turn.
Grid
Why did you use that particular grid structure on the website you are reviewing? Can you articulate your reasons for using a 12-column grid instead of a 16-column one? What about the margins and padding? If a client complained that there was too much white space between columns, would you have a response?
Another common issue is when you purposely break out of a grid. Was the choice intentional, with good reasoning, or just an impulsive decision? What would you say if the client asked about it?
The choice of grid might be based on the content or on the constraints of the style guide. It could have to do with making the website work on mobile devices or with allowing flexibility for future changes. Whatever the reason, you need to be able to clearly articulate them to yourself and the client.

Are we selecting a particular grid because it is right for the website or just because we have fallen into the habit? We need to be able to justify our approach to our clients and ourselves.
Layout
Layout and grid might sound the same, but they’re not. By layout, I am referring to white space and the placement of elements on the page. These are often points of conflict between the designer and client, so being able to explain your approach is important. For example, how would you justify all of the white space that Google has chosen to use on its home page?
Why did you leave so much white space on the page? Was it to draw the user’s eye to a particular element, or perhaps to improve readability?
What about the positioning of elements? Why is the search box in the top-right corner? Is it because this is the convention and people look for it there, or perhaps because you wanted to associate it with other elements that are in proximity?
Color
Color is probably the most controversial of subjects, and so we need to understand our motivation. I tend to approach color selection in one of four ways:
- Corporate branding guidelines
The palette has been defined by the guidelines, and I work within these constraints. - Theory
I use a tool such as Kuler, which produces a palette based on established theory. - Emotional response
The extensive research done on people’s responses to colors informs my palette. - Main image
If the website has a dominant image that has already been approved by the client, I use it as the basis for the color palette. There are great tools for extracting color palettes from images.

Adobe Kuler is just one of many tools that help you apply color theory to your palette selection.
By explaining your choices in these objective terms, you prevent color from becoming a matter of personal preference and thus avoid conflict.
Typography
Something as seemingly simple as typography consists of many different decisions. These decisions extend far beyond the selection of typeface and encompass line height, size, weight, kerning and much more.

With services like Fontdeck making so many fonts available to us, the need to understand and justify our choices is more important than ever.
You need to be able to speak confidently about your choices if you are to demonstrate your expertise and convey that what you do is a lot more complex than it might appear. Taking the time to explain the complexity behind your typographic decisions might sound boring, but it will impress. It will also force you to put more consideration into your choices.
Imagery
To many clients, imagery is merely about subject matter. But we know it is about much more. We select imagery based on the mood it sets, the colors it contains and even things such as the eye line of the person in the photograph.
We need to be able to articulate these decisions so that others recognize that you cannot easily substitute one image for another without significantly affecting the design.
Do you know why you selected one image over the thousands of others in your library? What made that image special? Can you explain this to yourself and the client? Was it really more than a “That’ll do” decision?
Styling
For me, styling refers to screen elements that are not directly content-related: buttons, links, call-out boxes and the plethora of other elements that need to be decided on.
How you style these elements can dramatically shape the feel of the website. From the chrome buttons on Apple’s website to the sketched buttons of Moredays, styling can make a huge difference.

Styling dramatically shapes the feel of your website. But can you justify why one approach is better than another?
Can you explain why your styling creates the right feel? Have you shown the client alternative approaches? Did the client sign off on moodboards, which set the style? If so, refer back to them when justifying your design.
Reference Material
In fact, whenever justifying a design, always refer to the material that has already been agreed upon. For example, if the client has signed off on moodboards, we should use these to justify our choice of typography (“I used the same typeface that we agreed on in the moodboarding stage”). We can also refer to the target audience, business objectives, branding guidelines and even previous comments by the client.
Reference material can be taken from farther afield, too. For example, when justifying your decision to ignore the fold, you can refer to research done by ClickTale. Citing research and experts is a great way to justify an approach.
But remember, being able to explain your design is only half of the objective in this challenge. The other half is about improving the quality of your work.
Improving Our Work
Getting into the habit of justifying your decisions will inevitably improve the quality of your designs. Instead of leaving it to the subconscious, the act of considering imagery, layout, typography and so on becomes a part of your conscious decision-making process.
The act of discussing your process refines it and makes you more efficient as a designer. For example, in carrying out the challenge, you will probably struggle to justify some of your design elements, elements that in hindsight would have been better left out or presented differently. This will inform your next website, and over time you will find that your designs become more refined, simpler and more effective.
So, What Are You Waiting For?
Smashing Magazine has a quite large readership and a remarkable community. We have an amazing opportunity to start talking about our work and providing each other with constructive criticism. Write a blog post on one of your designs, justifying your approach. Then link to it in the comments below. Encourage other people to provide feedback on your design, and take their criticism to heart. Finally, don’t forget to make comments and ask questions of other people who have posted their own work.
My hope is that this post will not only help us speak confidently about our designs and improve the quality of our work, but encourage a dialogue about the design process. We are good at showing off our products but bad at explaining how we came up with them. As a community, we could benefit from more discussion about the process itself, rather than endless inspiration galleries.
(al) (il)
© Paul Boag for Smashing Magazine, 2011.
Useful Resources, Tools and Services for Web Designers
Productivity is a crucial asset of professional Web designers and developers. We regularly look for new resources, tools and services to make the search of these ever-growing techniques easier. Once we have a reasonable number of useful resources, we prepare them in a handy overview for your convenience. In this post we present some of the useful resources and tools for designers and Web developers.
Please don’t hesitate to comment to this post and let us know how exactly you use these tools in your workflow. Please do avoid link dropping and share your insights and your experience instead. A big thank you to all designers and developers out there for releasing and producing useful, valuable resources for all of us to use. We sincerely appreciate it.
Useful Resources and Websites
Method & Craft
Describing itself as “the DVD extras of design,” this site offers a behind-the-scenes look at different designs, including how they were achieved, the techniques used and how the designers have grown in their professional careers.
DesignersMX
This site is dedicated to finding out which tunes keep designers around the globe rolling and get their creative juices flowing. Just sign up, log in and share your own compilation of fresh beats and bright tunes.
Little Big Details
This site features tiny details that help improve the user experience of websites and mobile apps. You can also share your favorite little things on the website. The collection is very useful — with more design examples submitted regularly.
Shady Characters
This blog, owned by Keith Houston, aims to shed light on the history of both well-known and outlandish marks of punctuation. It’s an interesting study in the stories behind the punctuation we use every day.
An Illustrated Guide
This project reviews some of the notable picture books. Guide’s authors, Catherine and Matthew Buchanan, have collected many of them from the last decade. The books are categorized according to cover art styles and reading level.
CV PARADE
This website celebrates the art of the résumé — a great collection of different and unique CVs that might be useful for you if you are about to polish your own CV.
Comic Sans Criminal
The next time you see someone using Comic Sans inappropriately, consider sharing with them a link to this site which lays out the reasons why Comic Sans is misused and offers some helpful alternatives.
Where Do You Want To Work Today?
A simple way for freelancers, contractors and other nomadic workers to check out some great places where they can work in a different environment for a change.
Node Cloud
NodeCloud is a resource directory gathering sites related to Node.js and ordering them by their Alexa traffic, allowing to evaluate relative popularity of a project.
WeekendHacker
This site provides a mailing list you can issue a cry for help for one of those tiny projects that cross your path — whether you’re a designer, developer, or both.
The Phraseology Project
Here you can submit a letter, word or phrase which is then turned into a beautiful design by the website’s founder, Drew Melton, or his colleagues.
Designers & Books
This projects presents short reviews of books that esteemed members of the design community identify as personally important, meaningful, and formative. Designers introduce one or more books that have influenced their ideas and values. You’ll also find members who have created must-read lists for different disciplines in design.
Quotevadis
Quotevadis is a Tumblog that offers quotes from creative and intelligent individuals from both past and present. An excellent replacement for the dusty old “about:blank” page in your browser.
Let’s Swap
In case you’ve had a particular artistic piece hanging around for a while, you could try swapping it with other artists for prints, books, zines, original artwork, tshirts, sculptures, or any other objects.
ideeeas
This project collects brainwaves from people who have brilliant, fancy ideas on any topic. There are posts with popular or useful social ideas that could make the world just a little better.
A Working Library
A great book cover definitely makes for a graceful entrance, but the thought of it disappears as you start reading the book. This website aims to explore the ways we read — without being overtly conscious of the cover design.
The Godfounder
A blog which showcases details that make Web apps successful, in particuliar little details that show designer’s attention to users’ needs.
FPO: For Print Only
A blog dedicated to both visual stimulus and detailing of the development and production of printed matter such as annual reports, books, business cards, stationery suites, collateral materials, posters, packaging and anything else where ink meets substrate.
What Software and Hardware Do Professionals Use?
A useful resource for people who love to keep discovering new tools. Browse these nerdy interviews and guaranteed, you will come across some new wonders, especially because every interviewee explains why they have chosen a particular tool.
Browser Details for Tech Support
When in doubt, send your customers to the website Support Details. Their data will be automatically read out of the browser and sent directly to you via email or will be saved. The free service uses Flash but can also complete its task without it.
The UX Bookmark
A resource for HCI and human factors professionals, usability engineers, interaction designers as well as information architects. You can submit a link if you feel that it would benefit the UX Design Community.
Web Font Hosting Services Reviewed
A good overview of web font hosting services you can always look up when in doubt:
Android Patterns
Design patterns, which are basically reusable solutions for recurring problems, can be found in many design niches. Recently, they’ve also turned up in user interface designs for Android apps. Android Patterns publishes a comprehensive set of interaction patterns that can help you design Android apps.
Useful Tools, Libraries, Plugins
Rapid Prototyping with flickrBomb
flickrBomb is a jQuery plugin that helps you quickly fill your prototypes with relevant content, and not just dull gray placeholder images when making a website.
Unix Terminal/Console/Curses Tools
A nice list of 28 tools for the UNIX Terminal and Console. Some are little-known, some are just too useful to miss, some are pure obscure. You can use your operating system’s package manager to install most of them.
.htaccess tester
A very simple tool that lets you test your .htaccess rewrite rules. Simply fill in the URL that you’re applying the rules to, place the contents of your .htaccess on the larger input area and analyze if the rules are doing what they are supposed to do.
CSS Lint
CSS Lint is a useful tool to help you detect problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don’t want.
Log.io
Here is a way how to perform real-time log monitoring in your browser. Harvesters watch log files for changes, send new log messages to the server, which broadcasts to Web clients. You can then create stream and history screens to view and search log messages.
Popuload for Adobe Photoshop
Rather than idly waiting for each processing task in Adobe Photoshop to finish, you can spend that time browsing the latest news feeds. Popuload has been programmed to detect when any Photoshop loading bar appears; it then appends to that loading bar window throughout the duration of the processing time.
Asciiflow: ASCII Flow Diagram Tool
A simple Web based ASCII flow diagram drawing tool which allows you to draw boxes, lines, arrows and type and then export it straight to text or HTML.
Microjs: Micro-Frameworks and Micro-Libraries
Microjs helps you discover the most compact-but-powerful microframeworks, and makes it easy for you to pick one that’ll work for you.
Showoff
Demonstrating your ongoing projects could be a huge pain. In general, your best option is to upload the files to a server somewhere. You could prepare a video or send over a huge package of files or just .zip it somewhere on project collaboration website. But what if you just want to quickly show someone a project you’re working on without sending over the large files? This tool aims to solve this problem. If you’re looking for an alternative, you might want to consider LocalTunnel.
Meld
A visual diff and merge tool that lets you compare two or three files and edit them in place (diffs update dynamically). You can also compare two or three folders and launch file comparisons.
Convert Unix Time
A Unix timestamp (or epoch time) is the number of seconds that have elapsed since January 1, 1970 00:00 UTC. The mission of this site is to convert your timestamp into a human readable format and vice versa. You also might want to check out Epoch Converter.
Drush
This Drupal tool lets you install, download and uninstall modules and much more without even opening a Web browser.
Bones
A WordPress development theme that was created after years of editing and reusing the same template to develop custom sites. A nice, well organized boilerplate for developers of WordPress themes or designers using WordPress in their projects.
Fructose
Fructose is a subset of Ruby that’s designed to be compiled into PHP 5.x. The generated code should run on any PHP version above 5.0. Most major Ruby features are supported, including operator overloading and blocks. Eventually, most of the Ruby standard library will be available to Fructose programs via libfructose.
loads.in
By simply entering the URL here, you can test how fast a webpage loads in a real browser from over 50 locations worldwide.
WriteMaps
WriteMaps is a Web application that allows you to create, edit, and share your sitemaps online.
Wirify
Wirify is a bookmarklet that lets you turn any Web page into a wireframe with a single click. The bookmarklet also helps you get rid of all distractions by blocking out copy, images and ads, letting you take a closer look at the website’s building blocks.
Lorempixum
Hand-selecting and inserting placeholder images in a layout can be a hassle. This tool takes care of that task by providing you with placeholder images for every possible usage, whether for Web design or print layout. Using it is simple: visit the website, pick the URL, define dimensions and category, and insert it in the layout. You can use the “Placeholder Generator,” which lets you specify the size, category and color settings of the placeholder image.
f.lux
This tool makes your display adapt to the lighting of the room you are in, all the time. During sunset, your screen mimics room light, and in the morning the tint resembles sunrise and its natural light. Configuring f.lux is easy: simply tell the control panel what kind of lighting your office has and where you live. The rest is taken care of automatically. The free tool is available for Windows, Mac and Linux.
Solarized
Solarized is a free custom palette of sixteen colors (including four background tones, four “content tones” and eight accent tones). The content and accent tones are visible on both the light and dark backgrounds and are based on established color theory principles.
Useful Services
PayPal Fee Calculator
A PayPal ‘percentage fee’ is determined by which country you are registered in and how much you receive every month via PayPal. The PayPal ‘fixed fee’ is determined by which currency the payment is sent in. This calculator helps you keep an overview of fees as well as currency conversions.
courteous.ly
A helpful way of letting people know your real time email load and when sending mails works best for you.
ifttt (if this, then that)
This tool allows you to create simple “if then” actions based on common activities, and lets ifttt automate them. By triggering an email when the weather forecast predicts rain, this can help remind you to take your umbrella with you. The service is currently in private beta, but you can request an invite.
Unsubscribe.com
A fast way of unsubscribing from any mailing list by simply clicking on the emails you no longer wish to receive.
minutes.io: Take Notes Quickly and Easily
minutes.io lets you take notes in your browser even when you’re offline and waits until you’re online again so you can send and share with others right away.
Doodle: Easy Scheduling
A great way to mutually agree when to meet by simply creating a poll, inviting participants and cofirming the date and time. Free of charge and without registration.
Focus Booster
A simple and elegant application designed to help you eliminate the anxiety of time and enhance your focus and concentration.
Typography Insight iPad App
Typography Insight is an iPad application that introduces new methods for learning and teaching typefaces. The project stemmed from my love for typography and evolving mobile platforms
FontDeals
This service is like Groupon, but for fonts. Various font deals from various type foundries are offered at lower prices.
Last Click
Weave Silk
Is your desktop, motivation or even design work in need of something fresh, swirly and remarkable? Just weave some Silk! Yuri Vishnevsky created this experimental, magical interactive gimmick. You can spend minutes playing around with this little technique, based upon HTML5 Canvas: no Flash in use.
Keyboard Shortcut Skins for Macs
For all of you out there who are shortcut lovers, here are some amazing custom-fitted color-coded keyboard skins that will help you fly through Photoshop, Aperture, Final Cut Pro, and many more.
Ro.me: Three Dreams of Black
“3 Dreams of Black” is an interactive film by Chris Milk and some friends at Google that showcases the creative potential of WebGL. WebGL is a context of the HTML5 canvas element that enables hardware-accelerated 3D graphics in the web browser without a plug-in. This is why we &heart; the Web.
(vf) (il)
© Smashing Editorial for Smashing Magazine, 2011. |
Permalink |
Post a comment |
Smashing Shop |
Smashing Network |
About Us
Post tags: tools, Web Design
Print Loves Web
Reflecting On The Web
I started to think about not just the delicate nature of accessing Web content, but also what it feels like to look at and navigate websites and use applications via a computer. It’s clumsy to have to press keys to say what I want to say, then have to stop pressing the keys to hold onto a small bit of plastic which moves a tiny pointer on my screen, which I then have to click on stuff that makes other stuff happen. It also made me question my own trade of designing these sites that we expect people to use and enjoy. All the effort that I put into styling buttons, spacing letters, creating harmony in colour and then building it to work in browsers I’m convinced don’t actually exist. A whole heap of work for a lousy user experience of clicking, typing, scrolling, then clicking again, then typing. A modern Web user is spending less time sitting at a desk in front of a screen and is constantly connected.When Two Trades Go To War
In our industry, print design and digital/Web design are two very different trades. Print designers (or graphic designers if you want to get all old school) are seen to be folk that don’t have a place in a trendy digital agency with their mumbo jumbo talk of spot colours, bleed and ligatures, and Web designers are seen as a bunch of jack the lads that know nothing about typography and how to use colour, they simply talk of validation, hover states and hex values. This might be true in some cases but the real story is that these two trades better get together over a beer and make friends. The future of online content depends on it. I don’t own an iPad or Kindle but I’ve used both and I do have an iPhone which I use a lot. If you take a step back from the technology of these types of device and just think about the function for a moment, it’s clear that they have been designed to be held and touched (haven’t we all) in much the same way as a book. Many apps that are available on the iPad and iPhone right now are based on physical objects that need to be touched to work like a piano or guitar. So what does this have to do with print and Web becoming best buddies?
Web, Meet My Friend Print
I have a background in print and I’ve been lucky enough to work with some brilliant graphic designers who have taught me about paper types, printing techniques and good typography. These are skills the graphic designers have developed over a much longer period of time than the Web has existed. Good graphic designers are able to communicate a message visually in more than just two dimensions. Being aware of scale, environment, textures and light are all skills that are fundamental to graphic design. Graphic designers were user testing their creative even before Tim Berners-Lee had even come up with the catchy mouthful WorldWideWeb. I’ve been involved in focus groups where participants have been asked questions about not just the message and content of printed direct mail campaign but also on the quality and finish of the paper. Imagine creating a super team of forward thinking product designers, Web designers and print designers to re-think the way we deliver content online and digitally. Collaborative working with experts in these fields focusing on new ways to deliver and present a print style magazines in a digital format is an exciting prospect. Thinking beyond the faux page turn styles we’ve all seen in various book readers over recent years but moving more towards a device that can re-create fidelity of a printed page and content that can dynamically populate itself with location aware content and personalised messages.
Future generations of the iPad could find a way of re-creating the sensations I experienced when I flicked through that book during the power cut. Tactile feedback and textures could be standard features and the way colours behave in certain lighting could be much more realistic. Devices will have a whole new approach to power consumption, too. Speech recognition is a dead donkey, and only ever used by sales reps who are happy to listen to sound of there own voice while weaving around on the M25. The ability for the device to connect to the users mind to cut out all the mundane key pressing and link clicking would be a wonderful feature — thinking and doing at the same time.
The Future Of Content Delivery
One thing most of us humans have in common is the ability to touch, talk, see and think so we should be designing for everyone. Hardware builders need to consider all environments on earth and think about things like battery life, connectivity and sustainability, too. I’d like to see the large hardware manufacturers that are celebrating massive financial profits exploring ways of making their devices usable by every human in every environment. The information available on the Web should and can be available to everyone on earth. With a new breed of mobile device that delivers this content in a whole new way will ensure that each and everyone, young and old will understand and enjoy accessing this content. We need to think physical and we need to think touch but we also need to review the way we behave online right now and decide what goes and what stays. It’s up to us, the designers (both Web and print), to be pushing and nipping the heels of the hardware manufacturers to encourage these new ideas. Apple’s App Store is good at this; it’s still not perfect but the Web as a whole will allow these ideas and thoughts to trickle out and be picked at and improved.Asking The Pros
I asked our industry experts in both print and Web what they thought about a future where print and Web designers join forces to create new form of Web content. Can it work? Should the age old rules of print be used in the next generation of Web content? What Web design rules can we safely leave behind and what new rules should we adopt?Brendan Dawes
Brendan Dawes is Creative Director for magneticNorth, a digital design company based in Manchester, UK. Over the years, he’s helped realize projects for a wide range of brands including Sony Records, Diesel, BBC, Fox Kids, Channel 4, Disney, Benetton, Kellogg’s, The Tate and Coca-Cola. Brendan was listed among the top 20 Web designers in the world by .net magazine and was featured in the “Design Icon” series in Computer Arts.
“I think in many ways we are still tethered to romantic notions of how things were in the past; whether that’s adding filters to digital photographs to make them look like Polaroids, or typing notes into apps that are made to look like their paper counterparts. There seems to be something warm and more human when you add these analog layers on digital things; layers derived from the things from our past and how things used to be. But for me I think it’s short-sighted to let the past bully potential new thinking in this way. Personally I hate digital page-turn effects — why are we trying to shackle digital interfaces to old paradigms? You turned a page because that was how a book was/is constructed, but there are no pages as such in the digital domain.
If we’re talking about making a deeper connection from a user experience point of view then trying to emulate the past is not the way we should be going — we should be exploring entirely new techniques that are born from the exciting possibilities of the new rather than the old ways of the familiar. But there is comfort in the familiar; familiar is easier, whilst new is harder and often scarier. Yes, I love holding a beautifully printed book in my hands, the feel of the ink on the printed page and all that, but I equally love holding a beautifully crafted, often magical app in my hands, too. Surely, it’s more exciting to create new things rather than Xerox the past? I know which one I’m more excited about.”
Steven Heller
Steven Heller wears many hats (in addition to the New York Yankees). For 33 years he was an art director at the New York Times, originally on the OpEd Page and for almost 30 of those years with the New York Times Book Review. Currently, he is co-chair of the MFA Designer as Author Department, Special Consultant to the President of SVA for New Programs, and writes the Visuals column for the New York Times Book Review.
“Whenever I hear print and Web mentioned in the same sentence, it is usually a downer. Print is dead. Web is alive and weller. Well, I think the marriage of the two may not last into the 22nd century, but for this century, there should be happy bedfellows. Can’t wait to see the offspring. ”
David Airey
Graphic designer and design author, David has been featured in Creative Review, HOW Magazine, Digital Arts, LogoLounge, and more. He also has been mentioned on the New York Times website, and was interviewed live on BBC Radio. David’s graphic design blogs Logo Design Love, davidairey.com and brand identity showcase Identity Designed attract more than one million monthly pageviews.
“A future where print and Web designers join forces happened some time ago. Today’s designer considers every aspect of a project’s deliverables. S/he might not take full responsibility over each touchpoint, but there should at least be some level of knowledge acquired about the project’s bigger picture — the main goal.
Compare it to a jigsaw puzzle that was pieced together by five different people. Each person focused on one specific area, but at the same time, before they began, all five knew what the completed puzzle was going to look like. This insight helped them to streamline the process, placing the pieces they were responsible for in the correct area within the overall frame. They saved time and effort, just as designers of today who specialize are at an advantage when they stand back and view a project from every angle.”
Conclusion
It seems there is no place for the traditional print designer, but then again, nor is there a place for the traditional Web designer who ignores our print design history. The modern designer is much more than a Web, print, digital or visual designer. Perhaps the modern designer is one that embraces all forms of design to create content that ‘knows’ where it is and ‘lives’ and behaves in a way that brings us as humans much closer to it. What do you think? Feel free to share your thoughts with us in the comment section below!Further Reading
- Mike Matas: A Next-Generation Digital Book (Video) Software developer, Mike Matas, demos the first full-length interactive book for the iPad with clever, swipeable video and graphics and some very cool data visualizations to play with. The book is called “Our Choice” — Al Gore’s sequel to “An Inconvenient Truth.”
- Flexible Phone Made From Electronic Paper A prototype flexible smartphone which has been created by Canadian researchers with the help of electronic paper.
- Microsoft Surface 2 CES (Video) A demonstration of Microsoft’s second generation of Surface.
© Mark Cossey for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us Post tags: print, Web
Optimizing Emotional Engagement In Web Design Through Metrics
Emotional-Behavioral Response Relationship
Let’s start with the basics: an emotion is a psychophysiological response in your body to a stimulus. It’s an internal process that in turn triggers an external behavioral response. Behavioral responses help you decipher the emotional responses of others. Things like facial expressions and body language give you clues to whether the chef wielding the knife is angry and going to attack you or happy and going to make you dinner.
For example:
But you don’t have to be face to face in order to read a person’s behavioral clues. In digital environments, users’ behavioral interactions with the platform can give you insight into their emotional states. Instead of reading facial cues to analyze how your UX efforts affect users, you can measure their responses via metric data. Metric data is a user’s behavioral response quantified. With a little reverse engineering, you can identify strong emotional triggers, optimize weak elements and create stronger user experience strategies, using psychology as your secret weapon.
By The Numbers: Behavioral Response
Behavioral psychologists have classified emotions in numerous different theories. A large majority of these theories agree that emotions manifest in various intensities and can even combine with others to build new emotional states. One example of such a theory is Robert Plutchik’s emotion wheel.
Plutchik’s emotion wheel.
When it comes to user experience, emotional engagement builds on itself as the user continues to interact not only with your platform, but with all aspects of your brand online, including SEM, press coverage and social networks. Emotional engagement with a digital product can be divided into four categories based on how much information and engagement the user has with your website: awareness, attraction, investment and adoption.
Awareness
User experience doesn’t start when they hit your landing page or start your app, but prior to it. Visitors have to make their way to your website in the first place. They’re navigating through websites full of frustration-inducing elements, trust-busting perils and anticipation-inducing amusements. The focus at this point is on building trust, anticipation and whatever other emotional responses you’ll target in your copy, imagery and overall storytelling.
- Track awareness-level engagement using metrics like page views, page hits, video views, impressions and click-through rates.
- Identify emotional image and copy triggers during the development phase by A/B testing on micro-sites, as well as using ad content and email campaigns.
- Create dynamic content that spotlights your SEM, SEO and advertising goals, giving users exactly what they want as soon as they hit your page.
- Leverage strong referral sources and advertising platforms to build trust and credibility. The coffee vendors featured in the screenshot above use Google, and the companies featured to the right of this column you’re reading use Smashing Magazine to reach customers. By aligning their messages with these brands, they are able to build more trust in the user than an ad on a less relevant platform (like Craigslist) might have.
- Use emotionally rich imagery in your advertising messages, and carry that messaging through to the website itself. “Fresh-roasted coffee” begins to paint an emotional picture for the user of that perfectly roasted cup of steaming delight first thing in the morning. If your click-through rate is low, then your ad may not be compelling enough.
- Develop intuitive and relevant architecture to decrease frustration and increase trust. First impressions count. If the bounce rate is high or the time on site is low, then the story you are telling in the awareness phase might not be carrying though to the user’s interaction on the platform.
Attraction
Attraction-level engagement keeps users interested in your platform. Cohesion of the UX elements and usability is the name of the game. Building emotional engagement at this level is critical because behavioral engagement consists mainly of superficial interaction such as navigation and content absorption.
- Track attraction-level engagement by looking at bounce rates, session lengths, pages per visit, abandonment rates, email opening rates and click-through rates.
- Stay up to date on current trends in usability to create systems that are user-centric.
- Identify high-focus areas in your user interface through eye-tracking, heat maps and software that records mouse movement. Optimize your framework, and place emotion-building content in strategic areas.
- Continue building and reinforcing motivational and emotional triggers through engaging imagery, emotionally charged words for headings and main copy, and persuasive triggers. @Mailchimp publicizes a lot of “free”, “big” offers and uses bright imagery to boost joy and anticipation levels. Negative emotions, like sadness, can also build strong emotional engagement in users. Examples are the powerful images of animal cruelty often seen in PETA and ASPCA campaigns.
- Highlight brand relationships, security measures, press and endorsements. Aligning your product with other respected brands builds trust. The list of brands that Mailchimp uses to show its press features builds an impressive amount of credibility. This is immediately followed by the call to subscribe by email. Putting the call to action after the trust-building credentials is more effective than the other way around.
- Develop proper system-generated feedback and error handling. This could include loading notices and 404 pages with content referrals, which reduce abandonment due to user frustration.
Investment
Investment-level engagement involves a commitment from the user. It moves beyond a simple navigational interaction; the user is no longer behaving based on curiosity and anticipation alone. The user is interested in what you are offering, they trust your credibility, and they anticipate further interaction; thus, they act appropriately. They are now engaged enough to invest time, or do something risky like download a file or submit credit card information, or assume an identity (real or fictitious), stepping out of the role of anonymous Web surfer.
- Track investment-level engagement by tracking your social network followers, RSS feed or podcast subscribers, email newsletter subscriptions, file downloads, e-commerce conversion rates, purchase line items (both items and amount), community sign-ups, and warm leads.
- Leverage your existing community to motivate others to action. @Mormon.org leverages its community to build trust, and its strong messaging of love and belonging and its interesting interface build joy in users.
- Minimize frustration by requiring the fewest steps possible to achieve the objective. For example, allow users to order without logging in. The more information you require (such as Social Security or credit card numbers), the more trust you will have to build.
- Reiterate trust, security and credibility elements during the check-out or registration process.
- Monitor your online reputation.
Adoption
Adoption entails users accepting the website structure as a common platform for interaction or knowledge on a subject. Emotional engagement is extremely high, and interaction is consistent. If investment-level engagement gets users involved, then adoption-level engagement makes them your cheerleaders.
- Adoption-level engagement can be seen in return customers, unique versus returning visitor ratios, geo-location check-ins, and participation in “karma” systems (badges, etc.), to name a few.
- Use strong social interfaces to spotlight followers, supporters and die-hard addicts.
- Put community-building messaging in your copy. “Colbert Nation,” “Psychos,” “Gleeks” and “Chipotle for Life” are elements that brands use to add excitement and enthusiasm to their products and reinforce the emotional engagement of their communities.
- Make it easy for users to integrate the product into their daily lives, as Foursquare, Facebook and Twitter do via apps and open APIs.
- Invite fans to help shape your future, and make it easy for them to share information, spread your brand and recruit their network.
- Let users play. It’s just a burrito wrapped in foil, but @Chipotle builds an addictive community element into its website by combining joy, trust and anticipation with quick, simple interactive elements.
Summary
So, what keeps people coming back? Or more to the point, what keeps them from coming back? Using metric data, we are able to trace behavioral and emotional responses to identify the weak spots in our storytelling strategies. By identifying and optimizing these areas, we’re able to make our products better, faster, stronger. These are just some of the ways to quantify emotional engagement strategies. How do you measure your engagement successes? Share in the comments below.Resources
Looking for more information?- UX Booth A great resource on all things user experience. It goes into detail on many of the subjects touched on here.
- Occam’s Razor, Avinash Kaushik A blog dealing with Web analytics and its practical applications.
- Web Analytics 101: Definitions: Goals, Metrics, KPIs, Dimensions, Targets A very good introduction to all things analytics, via Occam’s Razor.
- A Cognition-Emotion Integrated Model of Media Message Processing, International Communication Association Looks at the significance of communication messages in the cognitive-emotion-behavior relationship.
- Affective Computing Group, MIT Media Lab Always has interesting projects on the affective-cognitive experience of human and technology. Many studies are publicly available in PDF.
© Shell Greenier for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us Post tags:
Two Cats In A Sack: Designer-Developer Discord
Shared Priorities
A belief that design and development have competing interests is an obstacle to successful collaboration. There are, of course, developers who design and designers who code (I’ll return to this point later on), but the tension referred to here is between the designer and developer who believe that their respective discipline is more important. Conquering this belief is crucial to avoiding a clogged workflow, low team morale and, ultimately, limited project success. Design is not completely an aesthetic concern, nor is development an entirely technical one; designers must consider how functionality affects form, and developers must be creative in building out functionality. Similarly, if we look closely at design and development, we find that principles of good design are often similar in good development. Focusing on these overarching ideas reveals a large pool of reciprocal interests.Harmony of Parts
Paul Rand, a designer’s designer, creator of the IBM, ABC and UPS logos, wrote in A Designer’s Art:Copy, art, and typography should be seen as a living entity; each element integrally related, in harmony with the whole, and essential to the execution of an idea.He wrote this in 1985. Today, the principles remain mostly the same, but one component is sorely missing from Rand’s statement: technology. Copy, art, typography — and technology — are the bones of a project, where design and development are the joints and skin that connect and hold together the parts. When all of these elements fit together well, you essentially have design and development working together as the support structure for the user experience and overarching concept, the so-called “living entity.” While far too simplistic a metaphor to cast a strong light on the process (building a website in fact looks much messier), Harmony of Parts does illustrate how design and development should ultimately work towards the same goal.
It is also worth mentioning that development, like design, encourages the harmony of parts in programming concepts like polymorphism and encapsulation. These ideas quite broadly mean that pieces of functionality should work well when placed inside or beside other pieces, another way of saying, “each element integrally related, in harmony with the whole.”
Teachability
Both design and programming are teachable, and where there are talented individuals there is also hard work, discipline, teachers, mentors, standards, taste, ruthless editing and constructive criticism, all of which are cultivated. There is bad work and breathtaking work. There is the scrap heap, the slush pile, the useless code: all evidence of learning. This commonality between disciplines is important because it presents an opportunity: designers can learn about development, and developers can learn about design. The democratization of resources in this information age (which some would argue we’ve already passed) means that we have little excuse not to obtain, or teach, at least a basic understanding of each other’s crafts. Not doing so will work to the detriment of the team. And when there are gaps in knowledge, rather than reprimanding, we should encourage an open dialogue to protect our most valuable learning tool: the ability to ask questions.Elegance and Efficiency
Chris Coyier, self-described Web craftsman, blogger, author and speaker, writes in “What Beautiful HTML Code Looks Like”:Code? Beautiful? Sure. After all, code is poetry. This is just HTML, so it can’t be quite as intricate and elegant as a dynamic language, but it still bears the brush strokes of its creator.What is elegance? It could mean restrained beauty and grace, as in art and fashion. But in design as well as math and science, something elegant typically embodies simplicity and effectiveness, sometimes solving two or more problems at once or by an unexpected insight. Elegance, then, refers to underlying content or an underlying process. Design may rely on aesthetics for its medium, and development may rely on code, but both draw on theories of efficiency (perhaps a synonym for elegance) to create effective output: elegant code is efficient code, and elegant design is efficient design. This means that design and development share some core values of process.
Shipping
In his article “Design Is Not the Goal,” Francisco Inchauste writes:The end product (website or application) should always be the focus.Inchauste goes on to say that too often, process insists on polishing irrelevant deliverables; for example, over-updating wireframes instead of moving on to the build and user testing. The true deliverable is the final product that we launch and that people interact with. Jeff Gothelf goes more in depth in his article “Lean UX and getting out of the deliverables business.” In a healthy team environment, we designers, developers, copywriters, user experience designers and project managers are all shippers. Bigger agencies tend to lump design and development teams into the Production Department, for better or worse, and this is telling. It demonstrates that both “creative” and “technical” professionals share a predominant interest: they must ship.
Correcting The Workflow
It may be that designers and developers are perfectly capable of collaborating effectively, and that management and process are the biggest hurdles or frustrations within a team.Good Ideas Intersect
The logistics of securing work often mean that the earlier a great idea is identified for the project, the happier and more secure the client will be, resulting in a better working environment for everyone. However, it also means that stakeholders will come together early in the process to come up with ideas. This can occur to the preclusion of the very people who will produce the final work, especially in hierarchical agencies. This undermines the designer or developer’s ownership and discourages self-direction and personal investment in the project. One solution to this problem is to ensure that great ideas are universally respected, wherever their origin. Michael Lebowitz of Big Spaceship famously preaches an agile workflow, saying in a New York Times interview:We also invite people from all of our disciplines into all of our brainstorms. Great ideas come from everywhere.A policy like this opens communication channels in a team framework and dispels departmental inequalities. When something goes wrong, finger-pointing is no longer an option if everyone’s had an opportunity to provide input, and collaborators are forced to learn from mistakes. This is not to say that responsibility is evenly distributed, but allowing teammates and workspaces to intersect in unexpected ways will allow great ideas to surface.
Waterfall vs. Agile Thinking
In waterfall-structured processes, where development is held up by unfinished designs, developers are the ones who end up staying late to finish the project on time. Not only is this unfair to developers, it is complicated, because pointing the finger at designers for taking too long is too easy an answer. Responses to a design can be so subjective and cryptic (“I don’t know why I don’t like purple, I just don’t”); true insights require time to unearth and can result in unpredictable delays in the process. Hold-ups are best avoided not by keeping design and development separate but by bringing them closer together via an iterative workflow. This agile methodology distributes responsibility and assigns value to each team member. Furthermore, departments are not tied to an inflexible plan. All of these attributes of agile thinking help to alleviate designer-developer tension.Giving Credit
In the fable “The Lion, the Bear and the Fox,” a lion and bear fight over prey until they can fight no more and fall over exhausted. Meanwhile, a fox who has been watching the fight sneaks up and steals away with the prize. The moral is this:Saepe alter alterius fruitur labribus. From the labors of others, it is often another who profits.Giving credit where credit is due and sharing the rewards is better, but unfortunately, in a fast-paced digital environment, whoever is left sitting at the table is often the one who gets the final praise. It is up to that last team member (the project or account manager, art director or tech lead) to pass feedback onto the rest of the team in a meaningful context. The cost is minimal (however long it takes to shoot an email or walk to someone’s desk), but the shared joy (or misery) will bond design and development teams because they will see the end product as the force that unites them.
Work Habits: Playing Nice
Sometimes playing nice is as simple as extending a courteous email; other times it is as complex as learning a new skill set. There are many concrete ways, big and small, for designers and developers to become more compatible colleagues. Let’s first look at efforts that can be shared, then at tasks more specific to designers and to developers.
Both Designers and Developers
Despite being in separate disciplines, our greatest commonality is that we are human. So, many of these shared tasks demonstrate how to play nice with anyone:- Keep an eye on the big picture. Pre-established goals that are developed by the whole team should inform decisions (and compromises) throughout the process.
- Cast a wide net for inspiration. Look to a variety of sources for a well-rounded understanding of the topic. Discriminate material by quality, not subject matter.
- Check in early and often. Avoid making too many decisions in isolation.
- Be nice. If you must criticize, make it constructive. Being kind often reaches far beyond office walls.
- Teach each other. In their book Rework, Jason Fried and David Heinemeier Hansson preach transparency between companies and their customers: “Letting people behind the curtain changes your relationship with them. They’ll feel a bond with you and see you as human beings instead of a faceless company. They’ll see the sweat and effort that goes into what you sell. They’ll develop a deeper level of understanding and appreciation for what you do.” This works for designers and developers, too. Revealing the inner process means teaching, and teaching is a way to invest in a relationship and build mutual respect.
Designers
There are innumerable great tips to help designers become better colleagues. Here are some of my favorites:- Explain the design rationale. Design isn’t magic, and making an effort to analyze and share design decisions will create a conversation and demonstrate to colleagues that their insights are valued.
- Practice PSD etiquette. Adopt the Photoshop Etiquette Manifesto for Web Designers.
- Design thoroughly. Think through the interactivity of the product, which includes designing the on, off and current states, designing error messages for forms, designing 404 pages, etc. This will save your teammates valuable time.
- Be considerate. Avoid making others wait on you. Be proactive and organized, and ask for feedback often.
- Enlist a developer. If the technical implications of the project are unclear, grab a developer to go through it with you. They’ll likely appreciate being involved.
- Learn about development. Knowing even a little about code will make you a better designer.
Developers
Here are a few ways for developers to improve their work habits:- Make yourself available. Being a part of the process from concept to realization will translate into a sense of ownership of the project. Ask colleagues what they’re working on. Make your expertise available as a resource.
- Simplify the explanation. If you can help team members from all levels and backgrounds understand high-level concepts and how they affect a project, you will become more valuable.
- Develop the design details. Much of a designer’s craft lies in the details; if they are forgotten or changed, the designer’s time and effort will be wasted.
- Be honest about what can’t be done and why. Big ideas often struggle against time and budget constraints; that’s nothing new. Knowing the development constraints ahead of time allows the team to create more appropriate solutions.
- Learn about design. Theories, rules and standards play important roles in aesthetic and usability decisions. A little knowledge of these concepts will help you better navigate designs.
The Hybrid’s Role
Designers and developers come in many shapes, and design and development skill sets are overlapping more and more. Hybrids, who have one foot in each discipline, seem to be increasingly sought after by clients and employers. This begs the question of whether we need to get along better or simply become more like each other. Hybrids are in a unique position to answer this question. If you consider yourself both a designer and developer, tell us: What is it that you find easier or harder about being involved in both disciplines? What do you like or dislike about it? What can we all do to become better collaborators?Post-Disciplinary Collaboration
Way back in 1999, Andrew Sayer, professor of sociology at Lancaster University, published an article titled “Long Live Postdisciplinary Studies! Sociology and the curse of disciplinaryparochialism/imperialism.” Despite the hefty title, he wrote quite simply:Interdisciplinary studies are not enough, for at worst they provide a space in which members of different disciplines can bring their points of view together in order to compete […] Post-disciplinary studies emerge when scholars forget about disciplines and whether ideas can be identified with any particular one; they identify with learning rather than with disciplines.Competition is fierce in our industry, and as talented new generations join the workforce, it will only become fiercer. Web makers will need to work harder and more efficiently to retain that quality that clients and consumers value: the ability to surprise. For this, we need innovation, but designer-developer cat fights take up precious time that could be put to innovation. If we instead incorporate post-disciplinary collaboration into our process (a fancy way of saying, “Let’s forget about job titles for a moment and work toward something together”), I believe we’ll be more successful and find our jobs more enjoyable. (al) (il)
© Cassie McDaniel for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us Post tags: communication, Design, designers
Getting Ahead Of The Curve: Branding On Mobile Devices And Desktop Browsers
According to Brandweek, “brands are the express checkout for people living their lives at ever increasing speed. This article shows you how, and why, to add “app”-like icons to your sites for several mobile and desktop browser displays, to clearly and elegantly identify your site with an icon that stands out from the crowd.
Logo Presentation And The Nine Basic Ballet Movements
When I was a lad growing up in rural America, we only got four channels on television, all local affiliates of the four national networks (yes, four; you’re forgetting PBS, which I only watched when they did dinosaur specials). The ABC and CBS stations came in fairly clear if you adjusted the “rabbit ears” antennae just right, and wrapped tinfoil on ’em.

Not too far off from what sat in our living room. (Photo credit: David E. Bowman, used by permission.)
NBC’s station came in over the new-fangled and somewhat unfathomable UHF channels — we had to actually twiddle a dial that looked like an old radio selector to tune it in. That channel was always static-laden, and required not only tinfoil on the rabbit ears, but sometimes needed my brother or me to stand next to the TV, carefully grab one of the rabbit ears, and, in my wife’s words years later, assume one of the nine basic ballet positions. (Her dad did the same thing to her, until he got angry at something President Johnson said and kicked out the picture tube. True story.) If we did the grand plié just right, the NBC channel would come in nice and clear, at least until Don Meredith dropped back for the touchdown pass and the signal would go out.
The television was also a black-and-white job.
So, given all of that static and lack of color, the lack of a screen display and the inability of anyone who lacked sniper-quality vision to discern what the number was on the little plastic channel dial from across the room, how were we to know what channel we were watching at a glance?
Short answer, we didn’t. Longer answer, we depended on the networks, or the local station, to tell us. That involved the use of a logo, on the networks’ choice of identifying themselves — part of their branding.

The 1960s version of the ABC Network logo. (Photo credit: Kris Trexler, used by permission.)
In those days of low, low-resolution black-and-white signals, we sometimes had to depend on the network logos to determine what station we were watching. I wasn’t old enough to see the logo ABC used in the 1950s (the letters stenciled in light gray on the side of a television camera, very unreadable), but I do remember the 1960s version: three smaller-case letters in RGB colors (they looked like different shades of gray to us) in a black circle. Easy to see and understand. ABC still uses a variant of this logo.

The 1960s version of the NBC Network logo. (Photo credit: Fanpop.)
NBC flaunted its embrace of color by pasting a color-bedazzled peacock on screen. It gave us a rather undistinctive text block at the bottom of the screen, and we couldn’t see the colors, so it didn’t convey quite as strongly (besides, no one wanted to watch NBC programs if it meant you got to stand by the antennae in allongé position for more than a few minutes). The peacock survives, in a much more stylized form, today.

The 1960s version of the CBS Network logo. (Photo credit: Solar Navigator.)
CBS used the “Eye of Horus” (they still use a version of it) flanked by three nicely serifed letters in a different RGB arrangement of colors — again, easily identifiable.
Self-Identification And Browser Speed Dials
This blast from the static-riddled past came to mind when I installed Opera 11.10 (code-named Barracuda in Opera’s best double-naught spy naming tradition) on my machine the other week. I didn’t install it the day, or the week, it came out, in part because I’m lazy and in part because I like to read up a bit on how the new browser iterations are doing before I throw my doors open and invite them in. I installed it today, or more accurately Opera got tired of me ignoring it and installed it itself, and I instantly noticed a change.
I use Opera’s Speed Dial facility for my home page, and two things were different. One, there were more (and smaller) icon docks, requiring me to fill up the screen with a few more bookmarked sites (can’t have spots unfilled, it’s asymmetrical and my OCD wouldn’t like it). Moreover, I noticed that some sites didn’t use the usual half-random screenshots to serve as their icons. Instead, some of them, like SitePoint and Google Images, seemed to now sport spiffy, iPad-like icons (minus the glossy overlay). Previous iterations of Opera merely gave screen capture “icons.”

A portion of my current desktop in Opera 11. The variances in the icon displays are obvious.
It was obvious how useful the little icons are. The chunky SitePoint blue/orange stylized “S” for example, is instantly discernible, as is the colorful Google Images “logo” (like CBS, they use a tastefully subdued serif font along with an array of bright Crayola colors). On the other hand, some sites not using the icons didn’t fare so well. Mine, for example. I got a nearly-random screenshot of my LinkedIn and Twitter contact icons, nearly useless for identifying anything. A Facebook page I visit regularly got turned into a blurry mush, as the program squished the entire page down into a barely discernible thumbnail shot. The screengrabs for Six Revisions and Smashing Magazine didn’t do so hot, either; without the text blocks on the bottom of those icons, I couldn’t easily tell what page it was (though Smashing’s logo is more discernible than Six Revisions’s). And who wants to rely on a text block to identify something?
So, with a few minutes’ Googling, I found out that the icons are completely controllable from the client end — in other words, just like the Apple iPad/iPod/iPhone icons that we can also use on our websites (Apple calls them Webpage Icons; Android’s mobile browser uses something similar), we can add an icon that will stand out on Opera users’ Speed Dial. I also found that if we prefer, we can use Speed Dial-specific CSS or content, and even add a soupçon of HTML 5 goodness.
In other words, we control the appearance. I don’t know about you, but in this day and age of not rationally being able to design sites that appear pixel-identical from browser to browser, I’ll take a bit of control over appearance and presentation any time I can get it. And, as we’ll see shortly, the effect isn’t limited to Opera’s desktop Speed Dial, but translates to many mobile displays as well.
And doesn’t it look like a mobile desktop display? More on that later.
(Not sure how to get Opera to display Speed Dial as the home page? Online How To gives a quick and easy walkthrough, though as the article notes, Opera 11 uses Speed Dial as its default for the home page selection. Here’s how to change Speed Dial icons on your, and only your, browser. And if you are new to the whole idea of Speed Dial, Opera’s given us a slick, short YouTube video to peruse.)

Chrome with Speed Dial extension, in a screenshot from December 2009. (Photo credit: Technobuzz.)
Firefox has a Speed Dial extension that I started using after I got spoiled by Opera’s own feature. Firefox also offers a similar extension called Fast Dial, but it seems to have some workability issues. Chrome also has an extension that gives its users a Speed Dial, and in a fashion somewhat similar to Opera, it allows for the use of site logos as dial icons, though without the customizability.
Internet Explorer 9 has its own built-in Speed Dial feature that is similar to Chrome’s, though it doesn’t seem particularly customizable (I don’t use IE9, so I can’t say with any authority). Mac users have a reason to preen, as Safari has done Speed Dial for years, perhaps as far back as 2003, though I understand it’s an online app and not necessarily a browser inclusion (I don’t use Macs, either, so someone here can correct me). PCMag’s Michael Muchmore claims Opera did the Speed Dial first, for what that’s worth.
Going Mobile: Stealing A March On The Future
The question of “why bother?” is valid. After all, Opera’s desktop browser has less than a 5% market share no matter whose numbers you accept, and I’m certain most users of other browsers don’t use their Speed Dial facilities. But that’s not the entire deal. Opera is well known as a cutting-edge browser whose best features often find their way into other, more popular browsers down the road. (A list of Opera innovations going back to 1994 is available on Opera’s Wiki, if you’re interested. Opera has introduced such features as screen zooming, user-defined CSS, mouse gestures, pop-up blocking, and voice navigation, and it’s had Speed Dial since version 9.20 in 2007.)
I’m not going to start trying to sell Opera to you, you use whatever browser you prefer, but if Opera’s doing it today, Firefox and Chrome and the rest will likely do it tomorrow. So making an Speed Dial icon for your site now might only delight the very small percentage of users who use that facility for now, but chances are that icon, or a variant thereof, will come in handy for another browser’s own take on Speed Dial in the near future. Opera’s desktop enhancements often move on to the Opera Mobile and Mini browsers, which at last take have well over 100 million users between them. That’s a significant user share. And, as we’ll see along the way, the same technique can be used for placing your logo on Apple’s mobile touch-screen devices.
Speed Dials are nothing new, certainly. But the ability to customize them, now for Opera and almost certainly for other browsers in the near future, is something fairly different.

Apple iPad desktop, in a screenshot from April 2010. (Photo credit: Pat Moorhead.)
It’s also becoming axiomatic that if you’re designing for the future (even if that future is next month), you’re designing for mobile. If you’re not designing for mobile, you’re not serving your clients. Author and UI expert Luke Wroblewski points out that the trend towards mobile is already large and growing by leaps and bounds, and cites the stats to back it up.
A research firm made a bold prediction in December 2009 that by some time in 2012, global shipments of smartphones would surpass global shipments of desktops, notebooks, and laptops combined. That happened in late 2010, almost two years early. The gap will continue to increase. Since 2008, home usage of PCs has declined 20%, and will continue to shrink, as consumers increasingly rely on their smartphones to surf the Web.
In 2011, worldwide PC shipments fell over 3% and will continue to fall; US shipments fell over 10%. Many buyers who would have purchased a PC are now buying tablets such as the iPad. 22-25% of American and British mobile Internet users don’t bother with a desktop computer at all for Internet surfing. By November 2010, the number of visitors to web-based email sites dropped by 6%, while at the same time the number of users accessing their email by their mobile devices grew 36%. And of the mobile devices out there, Smashing Magazine author Nick Francis tells us that half of the smartphones being sold today run on the iPhone OS, and half of the remainder run on the Android OS. The Apple iPad tablet is selling like crazy.
Besides making me feel old (how about you?), these stats tell me that if I’m designing for a client and ignoring their mobile needs — and particularly failing to focus on the need to address their users’ Apple devices — I’m not serving their interests. The client may not even know that you’re not giving them what they need, but it’s on the designer and developer to know that needs exists, not the client. We know that more and more of our clients’ users may still be using a desktop or notebook to access the Internet today, but tomorrow they’ll be using a smartphone, and if not tomorrow, then check back next week, because they’ll have made the switch. Moreover, they think of websites less and less as “sites” and more as “apps” (even though we know the terms aren’t interchangeable).
The techniques we’ll learn here apply right now to Opera Speed Dial for the PC and for the Apple touch screens. Tomorrow they’ll apply to more devices, probably the Opera Mobile and perhaps the Mini. And, I believe, other desktop/laptop (think “fixed” computers, though the term isn’t quite accurate) as well: I have a feeling that in a year’s time, or perhaps two, a lot of browsers’ home-page displays will employ some version of a mobile-like Speed Dial facility. Let’s steal a march on the future (and on our competitors) and see how it works.
Step One: How To Customize Your Site For Opera’s Speed Dial
[Y]ou can offer [an icon] that can be displayed on the [Apple touch screen] devices’ Home screen using the web clip feature. — Alexander Dawson, Six Revisions
The new [Opera] implementation also allows site developers to choose what appears in users’ Speed Dial entries for their sites. — Michael Muchmore, PC Magazine
Dev Opera’s Tiffany Brown wrote a quick and well-detailed how-to guide for whipping out an Opera Speed Dial icon for your browser, or for customizing your dial icon via CSS or other content. Brown verifies that if you don’t do anything special, Opera’s Speed Dial will just use the usual screen capture, and we already know how poorly that can turn out for you.
Unsurprisingly, the process started with the idea of the “favicon,” or the bookmark icon. We’ve been incorporating those as far back as 1999, when Microsoft bowled us all over with their inclusion in IE 5. They aren’t part of the HTML 4 specifications, but that didn’t stop many people, and browser vendors not named Microsoft didn’t wait long to add support for icon as a value for the rel attribute of the link element. Apple built on the idea of the favicon for its touch-device icons through the apple-touch-icon value. And HTML 5 has added icon as a valid and standardized value for the rel attribute, unless they change it next Tuesday.
(Note: Opera will not pick up a favicon for Speed Dial bookmarks. If it doesn’t find some kind of icon dedicated to the purpose — Opera doesn’t require the Opera-specific coding, but it does require link rel coding specifically for an icon. It won’t default to displaying the favicon, but instead will give users a screen capture as an “icon.”)
The Basic Icon Code
It doesn’t take a lot of time or effort to code a new icon for yourself. Brown gives us the dirt-simple code needed for the head of your document:
<head>
<title>Spiffy page with Opera Speed Dial icon</title>
<link rel="icon" type="image/png" href="http://path/to/logo.png">
</head>
It doesn’t get much easier than that (you can even leave out the type="image/png", as the PNG MIME type is assumed). You can see the rel difference from the Apple-specific code used for the Apple touch icons:
<link rel="apple-touch-icon" href="http://path/to/applelogo.png">
The icons themselves are a bit different from the Apple-dedicated icons, and may require you to take a run through Photoshop, GIMP, or your graphics editor of choice. The specs are simple. The minimum size is 114px by 114px (smaller ones, such as the Apple-sized 57×57 PNG icons, will be ignored, though Apple devices will use almost any reasonably sized icon, scale it down to 57×57, and add its own rounded corners — more on this in a bit) and the maximum is 256px in width by 160px in height. (Display sizes can be changed in the opera:config menu from your browser, but that only works for you and not the Opera user in Katmandu.) The file must be in either PNG, JPG, or GIF format — no SVGs.
(Web developer Mathias Bynens chided Apple for not “implement[ing] the standard <link rel=icon> and [coming] up with a more verbose proprietary link relation instead.” I have to agree.)
Using Multiple Icons
If you use an animated image, only the first frame will be used, so don’t bother. But, you can use multiple icons. What’s the difference? It will let you give users one icon to bookmark a page and a second for their Speed Dial. You’ll have to decide whether this is a nice plus or a source of potential confusion — we usually like some degree of uniformity among our logo presentations, for identification purposes.
If you want to go down that road, it’s not much harder than the first one. Here’s how:
<head>
<title>Spiffy page with Opera Speed Dial icon</title>
<link rel="icon" type="image/png" href="http://path/to/128x128image.png">
<link rel="icon" type="image/png" href="http://path/to/200x200image.png">
</head>
The larger one will be chosen by Speed Dial as its icon, regardless of whether it comes first or second in the list. If both icons are the same size, Speed Dial will use the first and the second one will become the favicon.
So far it’s been easy. The next part is, well, easy too, but allows for a good bit more customization if you choose to implement it.
Using view-mode: minimized
Opera’s view-mode media feature lets you specify styles by viewing mode. If you use view-mode: minimized, you can do more than just provide a bigger, splashier favicon for your visitors’ Speed Dial. View-mode works like other media features such as device-width. You probably already knew the media query needs to be within an @media block. Here’s the code:
@media screen and (view-mode: minimized) {
body {
color: #fff;
background: #b20000;
}
}
This still has Opera use a screengrab as its “icon,” but it customizes the appearance: in this case, changing the font and background colors.
If you’d rather, you can link to an external style sheet (we’ll debate the pros and cons of that method some other time), and set the value of the media attribute to (view-mode: minimized):
<link rel=stylesheet type="text/css" href="minimizedstyles.css" media="(view-mode:minimized)">
If you use (view-mode: minimized), you’ll trigger a Speed Dial viewport that is 256 pixels wide by 160 pixels high. That may not be an issue for you, but it’s something to know.
What you definitely need to know is that if you use view-mode: minimized CSS, Speed Dial will use that as its first priority, over a more generically provided icon.
Other Possibilities
Brown gives examples of several other facilities: serving a different URL via an HTTP request, cycling through a number of pre-selected icons using auto-reload, using mod_rewrite to redirect Speed Dial requests, and using a server-side language such as PHP to serve different content at the same URL. If you find these interesting, I’ll leave you to review her article if you want to explore those aspects of Speed Dial.
Extras
The visual users among us might appreciate the YouTube walkthrough Opera gives us. Opera Mobile, very popular on Android and Symbian devices, also uses Speed Dial, as does Opera Mini, though neither Mobile nor Mini versions allow for client-side customization just yet. (Firefox and Chrome’s mobile versions have their own versions of Speed Dial, as does the Dolphin mobile browser.) If you’re up for taking a brief stroll into the weeds, the Dev Opera forum has a discussion on Brown’s article. And Opera’s planning on adding extensions to the Speed Dial in the new desktop release.
Gallery of Websites’ “App” Icons

An older Opera Speel Dial screenshot from early 2011. (Photo credit: Martin Brinkmann and Ghacks.net, used by permission.)
You saw how my computer looks with the new Speed Dial activated. For comparison purposes, this is how the Opera Speed Dial looked before Opera 11 on a desktop monitor without the use of the spiffy new customized icons. Not bad, but you can see how some of the screen captures don’t stand out very well. Even when I zoom the graphic, I can’t tell what sites all the screengrabs represent. The point? Many websites’ “app icons” still look the same in the upgraded Speed Dial. But, they don’t have to.

Opera Mobile screenshot from early 2011. Photo credit: Dev.Opera, used under Creative Commons license.
For comparison purposes, here’s what the Speed Dial looks like on an Opera Mobile browser. Obviously, all of the “icons” are screen grabs. I expect Opera will upgrade its Mobile Speed Dial facility to be customizable in the near future.
Let’s find some icons on the spiffy new Speed Dial and see how they look individually. Here’s a group of them from my desktop:

Four not-so-randomly selected Speed Dial icons from my desktop, circa April 2011.
I just chose four that represent the idea of the customizable icon or the well-selected screenshot: Google Images, SitePoint, Yahoo Mail, and Media Matters. SitePoint uses the apple-touch-icon value in its coding, and the others either use more generic coding or just let the browser do its screengrab without any intervention. (The blue border around some of the icons is triggered by mouse hover, and comes from me being a bit sloppy as I selected the icons for screenshotting. I left the borders on some of the shots because I rationalized that we need to see what the icons look like both with and without borders, but mostly because I was too lazy to redo them.)
The visual benefits are apparent. Google Images and Yahoo use their colorful text as their brand identity. The Media Matters logo displays clearly, though it’s apparent that the “icon” is a nicely, and serendipitously, selected chunk of the top left quadrant of their display (you can see the slice of navigation bar in the icon, though I don’t think that detracts from the strong visual impact of the brand presentation). SitePoint, with the usage of their Apple icon displaying on the Speed Dial screen, probably makes the strongest impact. Very clean and strong, and instantly recognizable.
Here’s a shortcut to Opera’s own Speed Dial icon. Not surprisingly, they go with their big “O” logo, though I do miss the (apparently outdated) slanting shadow behind the letter. As with all the Speed Dial icons, the text is grabbed from the title of the page, explaining why it displays as “Opera brows …” We can, of course, control that with our own sites if we want to truncate or manipulate our titles to give a short, snappy text display, and users can configure their text to say whatever they want for the icon.
This is a shot of Apple.com’s Speed Dial icon. Who expected this? I was expecting some version of the “apple” logo. It stands out nicely from the pack, and the title, the single word “Apple,” is effective, though I’m not sure the photo of the iPad does the trick for identification purposes.

Apple’s iPhone and iPad Speed Dial icons.
Surprisingly, neither Apple’s iPhone website nor its iPad site use a dedicated icon and don’t use the apple-touch-icon coding. The screen capture for the iPhone site is fairly striking; for the iPad, perhaps less so. Perhaps Apple doesn’t expect mobile users to visit these sites?

Microsoft.com’s Speed Dial icon.
Here’s the Microsoft Speed Dial icon. Or the screengrab that Opera uses for the icon. Obviously Microsoft isn’t trying to comply with Opera’s requirements, or Apple’s for that matter. Like almost everyone’s “icon” out there, it’s a screen capture from the top left of Microsoft’s home page. It’s serviceable, and that’s about all it has going for it.

Speed Dial icons from WordPress.com and Facebook pages.
Here are screencaptured “icons” from a WordPress blog and a Facebook page that I work with. You can see just how unsatisfactorily these serve the purpose of branding icons. They’re just two screenshots of incredibly compressed content. Even the identifying text blocks don’t help much.

Speed Dial icons from Six Revisions and Smashing Magazine.
These are the screencaptured “icons” from my bookmarks for Six Revisions and Smashing Magazine (showing then-current front page content). Although they’re not as bad as the two examples above, and Smashing’s logo is clearly visible, they’re not particularly pleasing. Six Revisions looks like a WordPress site, because the day I made the bookmark, the site was featuring an article about fine-tuning WordPress for SEO purposes. And Smashing’s article about achieving pixel perfection in Photoshop has long since gone off the front page, though a slice of the title remains in my icon. These icons don’t show fresh content, and don’t do justice to the sites they represent
And ending where we started … While the other two major television networks just let Opera do a screengrab for their “icons,” NBC gives us the 21st-century version of the venerable peacock. They code a more widely applicable JPG to serve the purpose.
Step Two: Apple Plus Opera Equals a Sea Change In Browsing

An early version of a homemade “app” home page. (Photo credit: Geniosity, used by permission.)
The idea of a home page as a collection of “apps,” or more accurately links to a variety of user-selected websites, was not introduced with either Safari’s or Opera’s first Speed Dial. Computer maven John Dvorak has had a version of his “personal portal home page” available since 1999; all of his iterations use text links only, no icons, for faster loading time. More recently, a developer who blogs at Geniosity wrote about his own handcrafted, text-link driven home page he created for his copy of Firefox (image at left). The author tells me he still uses a version of this for his home page.There are other examples out there for the Googling.
I think the idea, lurking as it has on the edges of browser conventions for over a decade, is about to step to the forefront. If it does, it will be because mobile users want their desktop, laptop, and notebook browser displays to function in the same way as their mobile desktops — as a collection of personally selected, icon-based links to sites they use on a regular basis. This will be one of the first instances of mobile browsing conventions effecting a major change in “fixed” computer browsing.
I firmly believe (without any hard evidence, it must be noted) that sometime in the near future, desktop/laptop users will want to move to a Speed Dial-like browser interface that replicates what they have on their mobile devices. I see it as a sea change in browsing: instead of desktop/laptop browsers driving what mobile browsers are able to do, the reverse is going to happen. Instead of the traditional desktop “home page,” users will want a multi-app interface like they use on their phones and tablets.
If this does happen, then designers/developers who get ahead of the curve will be prepared when the changes come down the pike. We’ll already have our sites, and our clients’ sites, ready to display well in the near-future “desktop app interface” browser facility. (And if it doesn’t happen, we’ll have spent a very small amount of time on the preparation, with no harm to our sites. There really is no downside to this, as you can outfit a website for this new function in less time than it takes the local teenager to deliver you a pizza.)
So, if I have no hard evidence to show you, how can I convince you? Maybe I can’t. I may well be wrong. But I don’t think so. Years ago, science-fiction writer Robert Heinlein wrote, “It steamboats when it’s steamboat time.” (The historical reference is simple: while inventor Robert Fulton is credited with “inventing” the steamboat, there were a dozen guys on three continents working simultaneously on one variant of the steamboat or the other. Same thing with the telephone; while you and I learned that Alexander Graham Bell “invented” the contraption, there were a lot of guys working on one aspect or the other of voice-driven communication over a wire. It was the proper time in Western society’s technological development for steamboats and telephones; the need was there, and the devices’ creation and dissemination were inevitable.)
The wave of the future is mobile computing, and one of the most fundamental aspects of mobile computing is the app-laden desktop. The idea of opening a browser to a single home page is rapidly becoming obsolete, I feel. I started using Speed Dial on my browsers (all of them except IE) over a year ago, and I wouldn’t go back for a plateful of Grandma’s brownies. The usefulness and convenience of having (in the case of my Opera “home page”) 25 “apps” on my desktop as soon as I open my browser precludes me ever going back to a single home page again.
Still not convinced? Okay, open your desktop browser and stare at whatever home page you’ve chosen. Now flip open your mobile device and look at the array of apps and websites ready to be accessed. Which one gives you more options? Which one feels more modern? More useful? (There are certainly exceptions, particularly companies which require the employee to have the browser set to the company’s or department’s home page, other organizations such as libraries and community centers which have their home pages hard-set, and users who spend so much of their time working on a single site that for them, it wouldn’t make sense to have a “home page” full of icons to different sites when they will always go to the same site first.)
The Future Is Now
[I]n the coming years, more and more websites will have mobile incarnations that look a lot like applications. [P]eople won’t even realize that in the end, the next generation mobile web won.
— Kim Pimmel, Smashing Magazine
For now, the best way I see to prepare for this predicted oncoming mobile transformation is to combine the requirements of Apple’s touch-screen devices and Opera’s Speed Dial. Apple requires a PNG file of at least 57×57 for conversion to a touch-screen icon. Opera requires an icon at least 114×114. And Opera will recognize Apple’s touch-screen HTML code. I’d say create a PNG icon of 114×114 or larger, not forgetting Opera’s maximum size requirement of 256×160, and use the apple-touch-icon coding:
<head>
<title>Spiffy page with icon for Apple and Opera</title>
<link rel="apple-touch-icon" href="http://path/to/appleoperalogo.png">
</head>
Another viable option is to use two strings of code:
<head>
<title>Spiffy page with icons for Apple and Opera</title>
<link rel="apple-touch-icon" href="http://path/to/applelogo.png">
<link rel="icon" href="http://path/to/speeddiallogo.png">
</head>
to ensure full inclusion and forwards compatibility, especially if, as I suspect, Chrome or Firefox will incorporate client-side customization to their own Speed Dial (or dial extensions) in the near future. By doing it this way, you can design separate icons for the touch devices and the browser(s) that take advantage of each one’s individual characteristics.
The 114×114 icon will be scaled down for different devices. The guys at DevDaily remind us that the iPhone 4 uses the 114×114 icon, whereas older iPhones will scale the icons down to 57×57. An iPad (v1) will scale it down to 72×72. The same 114×114 icon will work perfectly nicely on all these devices. (Bynens gives some instructions on forcing Apple’s iOS4.2 to use multiple icons for different device resolutions, if you’re interested.)
Here’s the proof in that particular pot of pudding: a before-and-after pairing of my site’s icon in Opera’s Speed Dial. For the second go-round, I used the apple-touch-icon coding so that the icon will appear on Apple’s touch-screen devices as well as in Opera’s Speed Dial.

Comparison of my site’s old and new Speed Dial icons.
The difference is marked. The first icon presents little more than icon gibberish; since I use text and not a graphic as an <h1> site heading in my site, Opera used some of the first graphics it came across (the three icon buttons) and went from there, providing a screen capture that does nothing whatsoever to identify my site as anything of consequence. It took me maybe ten minutes to whip out the new icon in Photoshop, write and insert the code line, and upload it. And that was with the assistance of tabby cats!
You guys could do it in less, I’m sure. I’m not entirely happy with it; it’s smaller than the bookmark canvas, the corners arent’t rounded, and where the icon canvas is rectangular, the icon itself is square (if the background were white, it wouldn’t matter as much). But whereas the first icon is almost entirely meaningless, the second one conveys.
Side note: There are tutorials out there advising us to create icons for Apple devices in Photoshop that include the rounded edges, drop shadows, and “gel” overlays. Don’t do it. Keep the icon edges sharp and don’t include the glossy overlays. Apple devices add those effects automatically. The icon I created will have the rounded edges, drop shadow, and glossy appearance on Apple devices. If you want to force Apple to use your own icon without modification, you can use this code:
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
allowing you to add your own effects as you desire.
Bynens writes: “I’d recommend to always use precomposed icons. It gives you full control over your icon, and it’s the only kind of icon Android 2.1 supports.” He also notes that iOS1 and Blackberry’s OS6 do not support precomposed icons. He gives a somewhat more broad-based, cover-all-your-mobile-bases code snippet, which I’ll pass along:
<!-- For iPhone 4 with high-resolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png"> <!-- For first-generation iPad: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"> <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
Opera 11.10 supports precomposed icons as well as the Apple Touch icons.
Conclusion
Right now this works on Apple’s touch-screen devices and on Opera’s desktop browser. It’s my educated guess that within a matter of months, it will work on Opera’s Mobile browser and at a later time on the Mini as well. It wouldn’t surprise me if, by this time next year, the code string works on new Speed Dial facilities in Webkit and/or Gecko desktop and mobile browsers (be they actual browser inclusions or extensions). We might even see something of the sort in new IE versions; it’s never smart to count Redmond out. So: take a few minutes, steal a march on the competition, and add the feature to your sites right now. You and your clients will be glad you did.
There is a better way to do it. Find it. — Thomas A. Edison, who telephoned when it was telephone time.
Related Links
- Designing For The Future Web
- Smartphone Browser Landscape
- Everything you always wanted to know about touch icons
- Mobile Developer’s Icon & Image Checklist
- A Study of Trends in Mobile Design
- Mobile Web Design: Best Practices
- Making It a Mobile Web App
- Mobile Web Design: Is It Worth It?
- Holistic Web Browsing: Trends Of The Future
- Apps vs. the Web
- Web Development For The iPhone And iPad: Getting Started
- How to Use Your iPad for Real Design Work
- How to Make an HTML5 iPhone App
- How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
- The State of the Mobile App World (infographic)
(vf) (il)
© Michael Tuck for Smashing Magazine, 2011. |
Permalink |
Post a comment |
Smashing Shop |
Smashing Network |
About Us
Post tags: branding, logo, mobile
How To Get Sign-Off For Your Designs
“How did you do that?” My colleague Leigh sounded impressed. He had been working with a problem client for weeks trying to get design approval. Then I came along and was able to get signed-off in a single conference call. “Can you teach me how you did that?” he asked. I mumbled something about years of experience, but the truth was I didn’t have a clue. It just seems I can find design approval easier than most.
As I thought about it I realised there are actually quite a lot of things that have become second nature for me over the years. But I have learnt the hard way through many painful projects. Unfortunately because I started designing websites back in 1994 there was nobody around to teach me this stuff. I wish somebody could have just shown me how to avoid all of those endless revisions. Hopefully some of the advice I share with you here can help you avoid years of pain and suffering.
My first piece of advice focuses on the old adage — prevention is better than cure.
Prevention Is Better Than Cure
In our enthusiasm to start a project we often don’t take the time to prepare the client. For many clients this will be their first web project. So they may not really understand what that involves or what their role is.

At our company, we pre-empt common issues and prepare the client by giving them a PDF factsheet about working with designers.
So before you leap into your next project, let me recommend you complete the following steps:
- Educate the client about their role
Take the time to explain to the client what you expect from them. I always make the point of telling our clients to focus on problems, not solutions. I encourage them to avoid making design suggestions, but rather to point out why they feel a design is wrong. The job then falls onto us to come up with the right solution for their problem. - Take the client through a process
Because many clients are not familiar with the Web design process, take the time to explain it. This has two benefits. When people are in unfamiliar territory they attempt to take control. This leads to micromanagement. By explaining your process you reassure them, giving them confidence. Second, explaining your process demonstrates you are the expert and puts you in the driver’s seat. - Pre-empt common issues
We all know there are certain issues that always come up. Things like “make my logo bigger“, “can we use comic sans?” or “put everything above the fold” have become standing jokes in the Web design community. Why then would we not pre-empt these issues? By talking about them upfront it makes it much harder for the client to mention them later. After all, none of us likes to be the person who is predictable, making the ‘dumb’ request.

WeeNudge is a superb site for pre-empting common issues and educating your clients about the Web.
Even once your project is up and running prevention can still be better than curing. For example, when you complete a design and show it to the client you can do a lot to prevent problems from coming up.
First, you should always present the design. This is your chance to justify your approach. Refer back to previously agreed upon work. If you have used moodboards, point out how the design draws on them. The same is true for wireframes, personas or any other elements the client has signed off on. It’s hard for the client to reject a design built on elements they have already agreed upon. You must never hand over a design without explanation.

Never simply send a design to a client asking them what they think. Take the time to present the design and ask for specific feedback.
Secondly, be aware the client may show the design around. This is problematic. Although you may have been careful to explain the decision making process to the client, others will not have this background information. This inevitably means the third parties will fallback on personal opinion and potentially sway the client in the wrong direction.
The solution to this problem is not to present your design as either a static image or as a final webpage. Instead, record a short video talking the client through the design. This video can then be passed on to whoever the client wishes to show. That way whoever views it will get all the information they require to provide educated feedback.
Finally, control the kind of feedback you receive. Never ask a client what they think of the design. Ask them instead how they believe their users will react to the design or whether it meets their business objectives. You can even go as far as asking them whether the design reflects the signed-off moodboards or wireframes. If you can get them saying yes to these questions they will realize that even if they personally dislike the design it is still the right solution.
Of course, when I was able to get the design signed-off on Leigh’s project, I hadn’t had a chance to lay down any of this groundwork. So what other factors came into play that made me successful where he had failed? One was my attitude going into the discussion.
Get Your Attitude Right
Leigh had been trying to get design sign-off for weeks. Both he and the client were frustrated. Battle lines had been drawn despite the fact both sides wanted the project completed.
This is a common problem. We start to see our clients as the enemy. In fact, there are many cases where bad past experience puts us on the defense from the outset. At every turn we start to build into our controls the limitations for the number of iterations and endeavors of the client’s influence. We even moan to one another how life would be better without clients.

Because of bad past experiences with clients we can often get off on the wrong foot with new clients.
It’s not surprising that design sign-off becomes a battle. We are looking for a fight even before we begin. It’s vitally important that we change this mindset and see every new client relationship as an exciting opportunity and not as a potential point of conflict.
When dealing with Leigh’s client, I had the advantage of not being on the defensive. My ego had not been bruised by rejection. You need to leave your ego at the door. Often it is worth picking your battles and letting the client win from time to time. This helps them feel their contribution is worthwhile and valued. It is when the client feels ignored or isolated from the process that conflict arises.
By getting your own attitude right, this goes a long way to establishing a good relationship with the client. This is key to successful design sign-off.
Get The Relationship Right
We would love to deny that the client is an intrinsic part of the Web design process. However, you can be the best Web designer in the world, but if the client isn’t on your side, you are wasting your time and ultimately the project will cost you money.
In theory we should all be experts in establishing good relationships with our clients. After all, we pride ourselves on empathizing with users and understanding their motivation and needs. We should then be able to apply these same skills to our clients. If we then understand their needs and motivations, it is much easier to establish a good relationship.
Working closely with them helps. The temptation is to hold the client at arm’s length and minimize their involvement in the project. However, if you want to get the client on board, you are better off working with them collaboratively. This means they will feel a sense of ownership over the design, and are more likely to sign off on it.

We find wireframing with the client is an excellent way of involving them in the process and building a better working relationship.
The other advantage of collaboration is that it makes the client feel important. It provides them with a sense of purpose in the relationship rather than just being a spare part to rubber stamp your decisions. I tell clients that it is their site and their decision, I am simply there to give advice on the best practice. This allows them the sense of control that is so important.
“But what if they make silly decisions?” you may ask. Often they will listen to you simply because you aren’t arguing with them. However when they still pursue an unwise course of action, I do not allow things to descend into a fight. Instead I make my position clear and leave the decision over to them. I have also been known to use phrases like “that is a brave decision” or “that’s an unusual approach” which is a less confrontational way of telling them they are being dumb.
Giving the client a sense of control doesn’t mean you are a doormat. In fact, I don’t believe clients want that. They want you to control the process.
Take Control
Although clients want to feel involved and have a sense of control, they don’t want to run the show. Most clients only interfere in the process when they feel you are out of your depth. It is important that we always appear to be the authority in the project.
I think this is the primary reason I managed to get sign-off on Leigh’s project. On our conference call I took control. I was careful not to be arrogant or push the client out, but it was clear I was in charge of the process. I achieved this using the following techniques:
- I was confident
Sounding confident can often be half the battle. Listen to the client and make a recommendation. Know what you think and communicate it confidently. If you sound like an expert people will treat you as one. However, be careful not to come across as arrogant. Just know your mind. - I was willing to challenge
When a client asks for something you disagree with, say so. That said, don’t immediately jump in with why it is wrong. Instead ask the client why they want to take a particular approach. Often the client hasn’t really thought things through and a few well placed questions will help them to conclude it isn’t sensible. Also by asking questions you demonstrate you have thought things through in a lot more depth than they have. - I referred to third party material
A great way of demonstrating your expertise and control of the situation is by referring to third party material. Stats, quotes from other experts and references to case studies go a long way. Show that you know your stuff and that you have solved these problems before. - I kept us moving forward
Design sign-off can be full of endless discussion and navel gazing. The more a client thinks about a design the more likely they are to second guess your decisions. Keep the momentum going by focusing on the deadline and the fact that design can always be tweaked once it goes live.

Clients will often take notice of research carried out by people like Jakob Nielsen over your own opinion.
By setting your ego aside, establishing a good relationship and taking control of the process you can usually get the client to sign-off on a design. However, like all things in life, no approach is full proof. In such cases I have a couple of fallback positions which have been known to work.
What To Do If A Client Digs In Their Heels?
Some clients can be very dogmatic and no amount of careful management can lead them down the right road. In such situations I use three techniques in the following order:
- Suggest testing
If the client wants one thing and you recommend another, suggest testing both approaches with real users. It’s hard to say no when services like verifyapp.com are so cheap. Often clients will give in at this point because they don’t wish to be proved wrong. - Ask to have your name removed from the project
Often client’s don’t believe that a change they are suggesting is really that bad a thing. They just think we are being overly precious. One way to show how serious you are about your concerns is to say that if the clients’ changes are implemented you would like your involvement with the project to be kept secret. As designers are normally so keen to promote their work, this makes a client realize how unhappy you are. - Give the client what he or she wants
It is important to remember at the end of the day that it is the client’s website, not yours. I know that some people advocate walking away from a project before compromising their ‘standards’. However, personally I think that is unprofessional in all but the most extreme cases. If a client is really insistent and unwilling to listen to reason I will deliver the site to the exact specifications they requested.

Tools like verifyapp makes it very easy to quickly test design. This can be a great way of diffusing disagreements.
I imagine this post will generate mixed reactions. Some of what I have said here seems to be manipulative. I believe it is simply nudging the client in the right direction to give them what they ultimately want — a great website.
Other things won’t sit well with some designers. Suggesting you give the client what they want or letting them win even some battles might smack too much of compromise. Nevertheless, in my opinion this is what a collaborative relationship is about.
However, I am interested to hear your approaches. Where do you draw the line between what you believe is right and what the client wants? What techniques do you use for nudging the client in the right direction? Do you set limits on revisions or the client’s involvement in the process? Let me know in the comments.
(jvb) (il)
© Paul Boag for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: Design, sign-off

























































Graphic designer and 






