Since most designers spend a great deal of time looking at and choosing stock photos for various projects I thought I’d create a post covering a (very) brief history of stock photos.
Our lives are increasingly seen through the window of a small glass screen. Not surprisingly the people who shape our intention as we look through that window, product designers, are in great demand. As more apps and sites appear daily there is a huge gap in the need for experienced product designers than what the design industry can organically produce.
With this ‘product designer gap’ in mind I set up a panel discussion on September 20th 2017 to explore the topic as part of the AIGA’s Design//Work panel discussion series titled Getting Into Product Design. The panelists were Hillary Lindeman (Product Designer/Google), Deny Khoung (Founder/Whitespace), Faith Bolliger (Sr. Director of Product Design/SoFi), Loredana Crisan (Product Design Manager/Facebook Messenger), all moderated by the wonderful Amy Stellhorn (Founder/Big Monocle).
What is product design?
Previously product design referred to physical objects being created in a factory somewhere for mass sale in a brick and mortar store. It came with a great deal of legacy knowledge about the materials used (steel, plastic etc) and/or anthropometric aspects of how the object fits the human shape and lifestyle.
However when it comes to the digital experience that weaves it’s way through our average day product design is used to shape our access to services such as finding out what the weather will be like tomorrow to finding a parking space in a built up city. Neither app creates the real world ‘product’ but merely offers the ability to know or book said analog experience.
With shorter attention spans than ever and tens of thousands of apps available there becomes a kind of app war for each category as they disrupt the previous, more analog version of a similar service or create an entirely new service that never existed before. With this highly competitive explosion of apps, product designers are being used to deliver a service to a user with the least amount of visual and mental friction in order for the business to survive and be profitable. Fingers mean funds.
As Deny put it “It’s a great time to be product designer, especially in San Francisco ((where the talk was held)). For example you could work on Facebook Messenger like Loredana and touch 1.3 billion people’s lives. You have a chance to work on something that big or a rocket ship that may become that big one day.”
What’s so different about product design?
With product design you’re not creating something finite like you are in other forms of design but rather it is something that needs interaction on the user’s part. Gone are the days when you could expect a reader of something analog to work their way through long instructions. The information was presented from front to back, top to bottom, left to right.
Now users pull information from multiple data sources onto a page that exists purely in that moment. That information needs a framework imposed over it as users want to asses the data quickly and choose a course of action with just a click. As a result buttons on every page should be similar so that the user isn’t frustrated by spending extra brainpower working out which is the right button. Rather, they should be spending the time working out which is the right content or course of action they want to take.
This means the overall structure a product is presented in is almost as important as the product itself. This can create a great many pages/screens and options. In the process this obviously creates a whole different set of axioms in which to operate: “Design thinking for product design is about designing a system that is the foundation you are building on” says Faith “for example the component library must be consistent. As a result there ends up being lots of arguments about whether something is MVP (Minimum Viable Product) or not”.
The other key aspect of product design is fact that it is never finished. Like a living organism a product and how it’s users’ interact with it changes over time. Faith went on to say “I heard designers shouldn’t be attached to their work. I disagree. The better and harder skill is to know when to walk away from your work with grace. You have to pivot with feedback or if you learn something new in a usability study. Essentially you have to fail gracefully.”
What hard and soft skills do product designers need?
As with most jobs there are hard and soft skills needed to thrive in a product design job. For the software part of the hard skills needed Hillary had this to say “At Google every designer uses Sketch for wireframes and user journey flows to have that high fidelity. We also use Principle to prototype and an internal prototype tool similar to Origami.”
When looking at potential candidates to join their existing product design teams Hillary had this to say about the soft skills needed: “Storytelling i.e. how you communicate beyond the screens. How do you put it in a larger perspective. The key is to articulate the problem and it’s context in order to to sell your idea.”
Hillary also added: “You need to be able to collaborate and communicate well with cross functional teams as you will work with product managers, developers and research teams. You need to develop good and strong relationships. People who are good at those skills create good workflow.”
Meanwhile Loredana added this about prospective candidates: “We need to see intentionality – that each choice is intentionally made. That they ((the candidates)) understand all the possibilities and the intent of projects. We also need to see self awareness of where they are in their career, can they move beyond this point and have the drive to get there.”
What is product design workflow like?
Since the scope of a product design project is so large and involves many other teams such as Engineering, User Research, Marketing/Sales etc the average week of a product designer involves a lot of meetings. These could be stand-ups or follow the Agile method so that ideas can be whiteboarded or designs presented in a quick and efficient manner. In between those meetings a product designer may only get sporadic slots of 30-60 minutes to read emails or do actual design work. As a result it’s hard to carve out enough time to do a deep dive into a problem. As a result product design teams like structure.
To expand on this point Loredana described the average week of the team she manages at Facebook Messenger:
Monday: we come together as a design team.
Tuesday: we have 4 hours of crits, one hour per team. We look for things like patterns, interface guidelines and general design.
Wednesday: we all work from home so we work on the feedback.
Thursday: we get feedback from our internal partners.
Friday: we have our team meeting and all come together.
With this structure the deep dive may come after hours as different options need to be explored based on the different sets of feedback. Ideas and designs change often along the way. And of course since these products are never “finished” like in other fields of design. “You get a lot more attached to your work when you try a lot of different things but there’s very little legacy that a product designer leaves behind” Loredana continued. “You have to get attached to outcomes because that’s what you create.”
Titles, salaries and hours
About titles, Loredana had this to say “At a start-up you can make up any title you want but in a bigger company ‘product designer’ could include someone who prototypes, someone who does visual design etc. You could be very senior but still have the title ‘product designer’.”
Deny said that the salary for a product designer could be anywhere from $85,000 to $140,000 in the San Francisco Bay Area which includes Silicon Valley. Deny felt that further down the Peninsula (towards Silicon Valley) the salaries were lower – probably because of the high cost of living in San Francisco. He feels that communication/visual designers would probably get 20% less than product designers.
Deny also says that, in a trend that is counter to the way things were 10 years ago, in-house teams now get paid more than agency teams. It used to be that designers in agencies worked long hours, often due to disorganization and often on pitches the night before (due to the disorganization). These agency designers were paid more in an effort to keep them happy. Now in an in-house design job you are often expected to still be available when not in the office. The scale of operations, not a client, is the main drive for these internal deadlines. Just remember, if you change a button here or there on Facebook Messenger and 1.3 billion people may click it tomorrow.
How to get noticed as a product designer?
And what if you are a fledgling product designer? How do you get a fully fledged product design job? What should go in your portfolio? Where should you be showing it?
About the work itself, Deny had this very poignant piece of advice: “It’s a continuum getting the right kind of work in your portfolio. Firstly, nothing beats a real job. Then comes a non profit work. Then there’s something like a Hackathon and finally a passion project.” On the same point, Faith added “You can also deconstruct stuff in your own time. I interview a lot of designers who have passion projects in their portfolio.”
Then, with regards getting your work seen by the right people, Amy Stellhorn, the evening’s moderator, had this to say: “Go to the watering holes i.e. where people are already going.” ((I have noticed that when I put anything on Dribbble many people see it within an hour or two)). Hillary pointed out that she got found by Google because of all the work she posted on her Dribbble page. Hillary also added: “You can find someone that you respect and just email them. I did that and was amazed at the people who responded with help.”
Loredana summed up much of the panel’s feelings with on this topic with “Put yourself in a situation that creates work for you as that shows what you can do. To do this you could be at a start-up as they need generalists”
This major field of design is only going to expand further or mutate into something even more advanced and engaging in the future. Condensing what the panelists said, the way to thrive in product design involves striving for greatness while working with non designers as you all work towards a common outcome (not goal). Wow, that’s a mouthful. Sounds easy, right?
But what of the future of product design?
About this Deny is quite bullish: “As older companies remodel themselves as tech companies they want to be more relevant through how their product is designed and there are still many problems to solve out there through product design.” It’s not just here to stay but product design will probably be the bridge to lead us into the future by delivering newer ways to do things we can’t even predict now.
Appendix: webpage for the event: http://aigasf.org/event/d-w-getting-into-product-design/
In their career, most designers will eventually be asked to manage other designers. The assumption is that if you’re good at designing and a bit charismatic you’ll be a good manager. However managing is not something designers are taught in college or even on the job. Designers are just expected to work it out.
With this ‘management gap’ in mind I set up a panel discussion to explore the topic as part of the AIGA’s Design//Work panel discussion series titled Managing Designers 101. The panelists were: Amy Stellhorn (moderator and Founder of Big Monocle), Brynn Evans (Senior UX Manager, Google), Jennifer Sonderby (Design Director, SFMOMA), Susana Rodriguez-de-Tembleque (VP Brand Experience, Apple) and myself (Creative Lead, Unity). The following article is based on the discussion held that night…
What does it mean to manage?
Firstly let’s look at just what managing is.
Susana Rodriguez de Tembleque started with an interesting point “In Spanish you don’t have the word ‘manage’. We say ‘dirigir’ which means to direct… it’s a much more inspiring word.” She described the process of directing as not solving day-to-day problems or managing people but is in fact looking after projects. Having responsibility as a leader in the creative realm means you are driven by a high level vision of the end solution. It doesn’t mean it’s about you or any control issues you might have. This can be hard because as designers we all want to be artists of some kind. We love creating great pieces for our portfolios that the industry will applaud. But as designers we put form to other peoples’ ideas not our own. As a result understanding both the problem outlined in the brief and the mind of the person whom it’s for are the key parts of leading creative projects.
To illustrate this point Susana described a time when she was an individual contributor working on a commemorative book for someone senior at Coca-Cola who had passed away. She spent a few weeks working on it, all the while thinking she would have a great portfolio piece. When it came to the review with the Creative Director he pointed out that the book was not supposed to be her book but was in fact for the people who knew him well, especially his family. After slowly taking down each printout one-by-one he replaced them with blank pieces of paper, on which he wrote a single word written on them. Those words were ‘Whisper’, ‘Celebrate’, and ‘Thank’ saying “This is what you have to communicate”.
So, what does a good boss look like?
Everyone wants to have a good boss but just what makes a boss ‘good’. When the audience was asked what phrases came to mind when thinking about good bosses they called out phrases like ’empowering’, ‘listens’, ‘trusts’, ‘gives good feedback’, ‘encourages’, ‘backs up direct reports’, ‘appreciates your genius’ and ‘acknowledges good work and it’s creator’.
A key theme that emerged was that good bosses try to find the right role and work for people to self actualize. This sounds ideal and there was a consensus among the panelists about this. At this point I mentioned that when training new team members I make it very clear that I’ve done a good job only when the designer can think for themselves and do the job without needing my input.
And how do you treat direct reports? Jennifer Sonderby pointed out that it is key to “model the behavior you would like to see”. This is the acme of managing other people akin to following The Golden Rule but with more depth: “I’ve had some amazing bosses. The one I currently have is the Chief Content Officer. Essentially he functions as my support mechanism allowing me to take risks, allowing me to fail when I need to fail, take risks when I need to take risks and excel when I need to excel on my own growth trajectory.”
Good bosses also delegate. A lot. It’s hard to be any kind of individual contributor with even a few direct reports so the key is to teach them to mange more direct reports too. More delegation means you are less stuck for time and therefore able to take the decisions and meetings that come your way more seriously. At the same time you are further empowering your direct reports to make their own decisions too. Don’t be afraid to let go either. It’s fairly universal rule of thumb that it’s extremely hard to manage more than about a dozen or so direct reports. Just look at look at corporate org charts or the size of company boards or even the number of members in the President’s Cabinet.
What does a bad boss look like?
Your commute to work might be long and the work might be bad but having a terrible boss makes your life a living hell. This is something that most people overlook – the fact that your boss is likely to be the gateway to your happiness. Just as people end relationships that aren’t working for them they tend to quit their relationship with their boss not the job itself.
Why is that?
Well, when asked what they thought, the audience said that bad bosses are: ‘unavailable’, ‘micromanagers’, ‘managing up not down’, ‘contradict themselves’, ‘have no follow through’, ‘bipolar’, ‘made me anxious’, ‘mentally exhausting’, ‘didn’t respect what I do’, ‘most of my goes potential goes unused’ and ‘doesn’t even know what I do’.
Most bad bosses tend to be very focused on the task or goal to be achieved. Often they’ve squeezed out the human part of their relationship with direct reports. Or worse, they know only too well the impact they have on their direct reports and love the power trip of being in control. Having said that a fairly reliable indicator that a team is managed by a horrible boss is the fact that it has a high turnover of staff.
What is it like to manage for the first time?
As mentioned before, designers often get promoted because they are good at a core skill such as designing. Becoming a manager for the first time often means you are still an individual contributor but now have to think about other people, their tasks and their problems. You may be good at managing your own time but now you are responsible for others people managing their time too.
So far I’ve talked about the mental leap of understanding things from your direct reports’ point of view but there’s also a a leap in how they see you. After all you may have been ‘just one of the team’ up until recently. They will already have a good sense of what you are like dealing with time pressures, working with others or getting things done under pressure. However once you get promoted above your peers it can create a huge amount of hubris.
Amy illustrated this point with an anecdote. She had to promote one of two creatives over the other. It seemed to go ok until she asked the one that wasn’t promoted “How do you feel about X now being your boss?” To which she got the reply “Oh I don’t see X as my boss” Amy had to explain why this person was promoted and how the two roles suit each of the two designers’ personalities and abilities. Amy realized she had to make it clearer that both designers had a defined career path with growth built into it.
What’s the difference between leading and managing?
As designers we are often expected to both lead and manage so I thought I’d explain difference.
The short answer to ‘what is leading?’ is that it’s driving the creative direction and the steering the whole team month-to-month or year-to-year. A key point to remember is that you don’t need to have ’director’ in your title to think like a leader. Meanwhile managing is more about taking care of the day-to-day problems that arise or how a finite project gets finished. As before, you don’t need the word ‘manager’ in your title to do this. In fact you’re probably doing this already by thinking about what your boss would like you to do.
In further describing the difference between the managing and leading I used a fictitious example from my military past. Leading is about providing overall direction as officers do e.g. “We need to take this hill because the enemy are using it to ambush aid convoys”. Managing is more about how we achieve the main goal like NCOs (non commissioned officers) do e.g. “First section will provide a diversion at the base of the hill while the second section will sneak up the side in order to launch a surprise attack from the flank”.
Crystal clear? If not here’s an anecdote from the design world to make it more concrete:
There was a time when I had to provide creative direction on a project for a stakeholder who could be quite difficult. I prepped the designer by explaining that in order to get something approved sooner rather than later we should do three concepts. The first concept needed to be too plain yet ticks all the boxes in the brief. The second concept needed to be really out there – “let your flights of fancy take you wherever you want and it can go in your portfolio” I told the designer. “Next, create a third version that is just right (and somewhere in the middle of the other two)”. I went on to explain that the stakeholder will kill off both the plain and fanciful concepts. “Once they feel empowered by killing off the first two concepts they will naturally pick the one that we think is just right” I explained. In the actual meeting the designer struggled not to fight for our two sacrificial goat concepts. Yet by doing so the meeting went exactly the way I had stage managed it in advance.
What do you do when you are stuck?
Sooner or later you’ll get stuck with a problem. It’ll either be not enough time, the brief isn’t clear, your resources are shrinking or there are technical problems. All of these lead to panicking or frustrated direct reports which means they aren’t doing their best work. No matter what the problem is you will be the one expected to come up with a solution.
Bryan Evans talked about how someone told her “Your role now is to be the shit shield. You’re going to hear a whole bunch of shit and you’re never going to want to pass that on to your team” when she first became a design manager. She strongly disagreed with that concept saying “I don’t believe that because I always found that if I know a little bit about what is happening beyond me I could do my job better. I try to relay the stuff that I think is important to people so there are no surprises forced on them. If something big is happening next week they can think about it now.”
Evan had some of these gems of wisdom to ask when there’s a problem:
– stay calm
– find out if it’s a tech problem.
– draw the solution out of those telling you the problem causing the hold-up.
– buy more time for the team if you can
– talk to people outside the team as to how they impact your team
– be transparent: put work up on a wall for reviews so everyone can see
– if you don’t have a specific solution say “I’m not sure but I trust your judgement on this”
Tips on managing
– Always remember birthdays
– Model the behavior you want to see in your direct reports
– Give credit where it’s due and don’t steal it for yourself
– Don’t panic – pause to take deep breaths
– Stay fresh by being hands-on on a few projects
– Manage up and down not just up
– Connect with direct reports once a day, even if over something small
– Be authentic: don’t change your feedback in front of non team members
– Don’t leave it to last minute to review work – no one likes late nights
– Reward time spent on drudge work with a more creative project
Hopefully if you’ve read this far you are ready for the mental leap that managing/leading creative teams and projects takes. Maybe you’ve made the leap already. Personally I see managing as more of an extension of design. You can do so much more if you magnify the positive energy and creative ideas that leading a team brings. In many ways it’s like being a parent. It’s very hard at first, taking up so much of your time and energy. But once you hit your stride it is very rewarding being there for their failures as well as cherishing all their great achievements.
*Panelists: Amy Stellhorn (panel moderator and Founder of Big Monocle), Brynn Evans (Senior UX Manager, Google), Jennifer Sonderby (Design Director, SFMOMA), Susana Rodriguez-de-Tembleque (VP Brand Experience, Apple) and myself (Rick Byrne, Creative Lead, Unity).
Every day more and more start-ups emerge to fulfill unforeseen needs and there aren’t enough designers to meet the demand. Whether they are the size of Google or just 4 people in a loft, chances are you’ll work in one at some point in your design career. With that in mind I’ve written this post on what it’s like to be a designer at a start-up with a leaning towards San Francisco/Silicon Valley.
So what is a start-up?
Usually a start-up is a young company that is creating an app, product or service that is using technology in a new way to solve a previously existing problem. Start-ups begin small and major growth spurts often come through rounds of funding from Venture Capital firms. These VCs hope the start-up will become the next big thing. However for every Airbnb, Facebook or Google there are thousands of small companies just a thumb swipe away, each one trying to ‘make it big’ too.
Working at a start-up vs traditional companies
When compared with older, more established companies, start-ups definitely have a different feel to them. Filled with hope for the future everyone at a start-up is feverishly working away on a product that may be huge one day. However there are 4 major influences on any start-up that create it’s corporate culture:
Firstly, start-ups are living on borrowed time as the money to pay for everything usually comes from Venture Capital investment rather than sales. With their board appointees in the company the VCs demand growth in order to get a return on their investment. Results are key on a quarterly basis and not a lot of time can be wasted on getting things wrong.
Secondly, start-ups attract a lot of Millennials as employees. Young, idealistic and probably lacking a mortgage, spouse or children they can risk having the uncertain future and lack of stability that comes with working at a start-up. This is just as well since Millennials may not thrive well in traditional companies where it could take years to get a senior role there.
More unique to each start-up is the founder’s personality who bring their own unique flavor to the company’s dynamic. They may be super focused and quirky but their vision saw a big enough gap in the market to create a company around. The Founder(s) will have a lot of control over company and product direction and will expect things to happen fast. They are godlike in their domains…
Lastly, each start-up’s industry will heavily define the corporate culture. For example, if you work in a gaming start-up the vibe will be very different from an enterprise data solution start-up. You can guess why and you can also guess which one would be a lot more fun (speaking from experience).
How do you thrive at a startup?
’Start-up environment’ in a job spec used to be a warning that you’ll work very long hours but now it means more than that. Get used to these aspects of a start-up if you want to thrive in one:
Firstly, expect there to be few boundaries and scant or no job descriptions. However the increased expectations of delivering projects often causes equally increased autonomy which in turn inspires individuals to work harder and for longer hours. It’s a trade off: experience and responsibility for effort.
Secondly, get used to change. As the company expands it may physically move office several times. Likewise the whole direction of the company’s product(s) may change as customers use it in unexpected ways. The two factors combined may create a very disorganized start-up. It all comes with the territory: forewarned is forearmed.
Thirdly, accept failure or cancellation of your projects. Start-ups are trying to do something entirely new and no one knows if the market is ready for it. And since time is money (either could run out any time) projects can get cancelled to save both. Don’t worry – you can still put the project in your portfolio in order to get your next job.
What’s the day-to-day work like for a designer?
So how are things different for designers at a start-up compared to traditional companies?
Firstly, you’ll need core design skills such as UX, visual or product design. Ideally all three in the fluid environment of a start-up. This is a good thing for designers since you get to design a wider variety of projects with more responsibility than you would in other roles.
Next is scale. You’ll be working on huge projects that you can’t do on your own such as an app, website or game. As a result you’ll be collaborating with a lot of people who have very different skills to yours such as developers, data analysts, business development etc. Expect to do a lot of group white-boarding sessions with a huge amount of smart thinking. so you’ll be kept on your toes intellectually.
Thirdly expect to do lots of iterations in bursts of activity called ‘agile sprints’ which are pretty much applied to everything in start-ups. This process was originally devised for developers to work in parallel on large projects. As a designers you’ll need to do a lot of prototyping or proof of concept mocks to communicate ideas or pinpoint errors. The ‘fail fast and fail often’ mantra is used at this point to avoid wasting more effort later on. However in reality people don’t want you to fail at all and would rather you are ‘outcome creating’. Be warned.
What will I actually be doing as a designer?
You’ll be working on an entirely new ideas (hopefully) as your start-up tries to create a better, faster or simpler method of doing something. Hopefully the team will be putting the user first with everything you work on. This isn’t rocket science. Users vote with their thumbs in a fraction of a second. Whether you’ve solved the problem well or not will be apparent very fast. With that as your compass here’s what you’ll be doing on a daily basis
With that in mind here are the activities that will fill your days:
– Talking. A LOT of talking. New ideas are what make start-ups thrive
– Meetings with product, marketing, sales and engineering etc.
– Drawing, mostly boxes, on whiteboards
– User research: asking people a lot of questions
– Creating personas of the end user
– Wireframes in Balsamic, Zeplin or similar programs
– Interactive prototypes in Principle, Invision or similar programs
– Detailed files in Sketch, Photoshop or Illustrator
Getting a job at a start-up
The same thinking applies to getting a job at a start-up as it does for any other job. Ideally you’ll demonstrate an interest in the company’s mission e.g. an interest in fitness if you want a job at Fitbit. Look at it from the company’s perspective – they want their start-up populated by enthusiastic people who are living the dream.
You’ll definitely need to have used the product/service before an interview if you can. Even better if you make a case study out of solving an existing problem with the product. Think like the user and think like a business to show you have a ’T’ shaped skill set: flexible enough to be broad but also show you can go deep in one or two core areas. Demonstrate your process with good thinking visualized well and keep any text in a case study to a minimum.
Also try to find someone at the company and get them to add you to the internal system. Most start-ups offer good incentives for employees to find good hires. While you’re at it do your financial research – especially if you would be leaving a full time role to take a job at a start-up. Be aware that you may get offered shares or stock options as part of any financial package. Speaking of which…
What are stock options?
During your job application at a start-up you may get asked if you’ll take stock options as part of your compensation package. So what are they?
Well, they aren’t cash or shares.
Primarily it is the option to buy stock (shares) in the company at a later date. That’s right – they are an option to buy shares: not real money. In order to ‘execute’ your option you will have to pay money to buy the shares from the start-up itself. The hope is that the shares will rise in value when the company goes public.
So why would a company offer stock options? Primarily options allow companies to give some kind of (hopefully) financial benefit without any cost in the short term. However these stock options have to ‘vest’ over time i.e. usually you gain an additional 20% ownership of the stock options for each year you work at the start-up. This is after an initial 1 year ‘cliff’ during which they don’t vest. Eventually you end up with 100% ownership of the options after 5 years.
Before accepting a job offer look at the start-up’s stage of funding i.e. whether it is at series A, B or C of funding. This is key as each round of funding dilutes the value of stock options. In contrast to stock options you may also be awarded RSUs (Restricted Stock Units) which are already paid for stock (shares) in the company.
Click here if you want to know more about the ins and outs of stock options.
Long hours and the commute to work
Once you get offered the job at a start-up then comes the commute. Previously a start-up job might have needed long hours in the office on top of sitting in traffic for a few more hours every day. However with advances in technology it doesn’t have to be that way…
At the moment I work on a team which has people in Montreal, Shanghai, Copenhagen and San Francisco. This process creates non traditional hours as a result. You can leave work at 5pm to go to a networking happy hour or home for dinner with your family. Later on you can do more work from the comfort of your couch.
In the San Francisco Bay Area, many of the larger companies have wifi enabled coaches that take their employees from SF to Silicon Valley. Facebook even has a boat to get employees from the city or Marin to their HQ by the water in Menlo Park. Click here to read more about it.
Initially it might seem like you are doing more hours in this kind of ‘always on’ environment. However you have the flexibility of setting your own hours or being able to do something during the day such a child’s school event.
If you’ve seen the show Silicon Valley you’ll have seen how it parodies the incredible roller coaster ride of success and failure that comes with trying to start a company and launch an entirely new product. Art definitely imitates life in this incredibly well written show.
Your own job at a start-up could be similar: you could be working on the next big thing or it could just as easily crash and burn. It could be both over time as risk is inherent to start-ups.
Either way it’s usually a good experience to have under your belt. After all you’ll probably have fun and do interesting work. For example, one start-up I worked at had huge growth quarter after quarter. I had more responsibility than any previous job and I created a large body of work for my portfolio. I left for another job and by coincidence the company then had two bad quarters in a row. Almost everyone I had worked with was laid off in one day. Such can be the way of start-ups…
If you now feel uncomfortable or unsettled about the design listen to the small voice at the back of your mind. It’s your subconscious trying to tell you something about the design. Maybe your subconscious can see a better solution that your conscious mind hasn’t worked out yet. it’s your gut check moment. If you do make changes or additional versions at this point the client will still be happy with more options to choose from rather than less options. Don’t show them any you hate just in case they pick it. Remember you only need one concept approved.
In my portfolio I always show the whole process from my initial sketches to the final design. I’ve found that most people seem more interested in the whole story of how the logo was created than the final deliverable. I use as many pictures as possible to explain each step. This is because most people will just scroll down each page in a few seconds skipping over the text
Fun vs Stress
There’s an emotional ebb and flow to the logo design process which I’ve turned into a graph above. Really, it could be any design process but the simplicity of the logo creation process makes it a lot easier to chart. The process is its most fun when there is the least amount of stress like in the early research and inspiration phase. This is mostly because you’re in the lateral thinking phase and haven’t had to come up with any ideas yet. Everything is up in the air and full of hope for the future of the logo.
Directly inverse to the fun curve is the stress curve which gets more intense as you have to bring the vagueness of the concept into the real world. This is the linear part of the process: “I need 3 concepts by the end of Thursday.” Usually the stress curve reaches it’s peak at or just before the client presentation.
Billing and taxes
There’s also the tax benefits for write offs such as the percentage of office space used in your home, any phone and internet expenses as well as the depreciation on computers. You’ve got to keep receipts for everything but it all adds up to lower tax bills. Speaking of which…
Cassie Walker: firstname.lastname@example.org
A friend asked me to design a logo for a nonprofit focusing on raising funds in the US for various South Africa organizations who work to preserve endangered species, especially Rhinos (the original name has been altered below until it has been trademarked).
I was very busy at the time so only had an hour here and there to devote to the project. All together it was 6 hours and here’s how I broke it down into small sprints.
But first, here’s the final logo:
I looked at other non profit bodies doing similar work (1 hour).
While sketching I narrowed down a concept fast (30 minutes).
I changed a stock icon bit-by-bit for uniqueness (90 minutes).
I looked at primitive and yet contemporary styles of logos (1 hour).
Next I started looking at color families (30 minutes):
Next came a font study to create a more primitive feel (1 hour):
Voila! The final logo in horizontal and vertical formats (30 minutes).
I already had a series of business cards which used the ‘Aviator’ image plus details on one side and 10 different movie quotes on the reverse thanks to Moo.com. It was always fun handing them out as the recipients guessed the movies that the quotes were from. After a while I wanted to take the project further.
One day, while in the local library in San Rafael, I looked across the street at The Belrose Performing Arts Center. While looking at the converted church I had a eureka moment: I could use multiple outfits from the costume shop underneath the theater to create 10 different personas. Seizing the moment I went across and explained my idea to Tori Arnold behind the counter. She was very helpful and I started quickly thinking through 4 different personas and poses on the fly.
Surrounded by over 3,000 costumes and a multitude of props I dived into the project by taking selfies. Having art directed photo shoots many times before I got all 10 personas done in two 3 hour sessions.
Each character took about 100 shots to get right with constant checking for light and angle as well as finding the right pose for each persona. Once back on the laptop I culled them down to two or three.
Next I would take my final selection into Photoshop to convert to black/white and alter the brightness/contrast. For the priest I added some shade to the background in order to bring out the bible (actually a diary).
I was much more prepared for the second session and finished the Gentlemen Adventurers with 10 characters: the Explorer, the Pirate, the Soviet, the Mummy, the Knight, the Viking, the Priest, the Bandit, the Sailor and the Aviator.
For two weeks I uploaded a new persona onto Facebook with a suitable cover photo.
Next I designed the cards and sent off the 10 different characters to be printed at http://www.moo.com (100 cards, with 10 different designs for a total of $54 plus shipping). This was the only cost for the entire project!
Capturing images: 6 hours
Photoshopping images: 5 hours
Design layout for cards: 7 hours
The Belrose Costume Shop:
Pacific Sun article on Margie Belrose:
Moo printing (up to 50 different backs per print run):
Tomorrow morning when you wake up, try to count all branded items you see from the moment you wake up until you reach 100. What time do you think it would take until? When I taught art direction at San Francisco’s Academy of Art I asked my students the same question. Most thought it would be midday. They were shocked when I told them that assuming they woke at 7am it would probably be somewhere between 8 and 9 am.
Why? Almost every item we touch or see has a logo on it. In fact, there are so many we blank them out.
Despite this ‘blanking out’ process, brands still represent a certain intangible something in our minds. We often think of brands as being a physical product but they could just as easily be a religion, a service, an app, an ideology or a blog like this one. All these things represent a world view condensed down into its simplest, most easily understood form, each trying to be distinct from other competing world views. In fact, the more competition there is for the same world view then the more energy is spent differentiating these brands. After all, Coca-Cola developed a more distinct brand when Pepsi started competing with it (see below).
Just what is branding? (in less than 250 words)
If I ask you to think of something you really like what’s the first thing that comes to mind? It’s probably not the logo but a warm fuzzy feeling. Great brands elicit this response in us without any of us realizing. Think of Charmin toilet paper vs. Facebook. Both are useful. One fulfills a need physically while the other’s ‘need’ is emotional. Yet why do they make you feel the way they do?
You know the brands so well in the above lookalike logos that you immediately get the joke. This is because part of the branding process is to create an expectation in our mind of what’s coming – whether it’s a drink, a movie, a piece of technology etc., and the product then has to match that expectation. These two steps are combined to form the ‘brand’ in our mind as all those emotional feelings about a product gets distilled down into a logo. The logo itself is not the brand but is often confused for it as it’s an easy way to be recognized in a crowded marketplace like a store shelf.
However, good brands aren’t just recognizable but also create an internal resonance within us. They make us feel good to use, to wear or to be identified with ‘our’ brands. This can be from simple things like whether you are a PC or a Mac person, or it could be whether you wear Manolo Blahnik or Tory Burch shoes. As a result, the accumulation of feeling from all these different brands can form a huge part of how we self-identify in our modern, highly consumerist society.
Start with a story…
For thousands of years human beings have relished listening to stories. From tales of how the gods made the world to watching the bickering of real housewives on Bravo. We are all preprogrammed to like a narrative story with highs and lows, lots of drama and a climax. Similarly in a marketplace filled with brands telling well-honed stories anything short of that merely seems like a gag or a pun.
No one likes to be ‘sold’ to but people do like buying into a good, authentic story around a product or service. Part of that story can be the creation myth of how the company came into being. It could also be the founder’s metaphorical journey in the wilderness with only their vision of how things should be to sustain them, such as Steve Jobs. It could equally be as simple as how a company saw a real need that nobody else addressed. Whatever the story, there should be depth and authenticity to it.
Another aspect of good stories is the actual storytelling process. Here’s where designers, marketers and advertisers come into the equation, as they distill all those complex and subtle ideas into something tangible that can be communicated to large groups of people.
…then think of a name.
Why did Uber catch on more than Lyft? Or Zipcar over City Car Share? Why did cell phone manufacturer High Tech Company change their name to just HTC? They all give a more distinct name to a brand. Similarly when we meet people for the first time, we learn their names and get a general impression of them quickly. Likewise in a market where there are entirely new concepts or products, it is easy to start imbuing a new meaning into a brand’s name. It may seem like just a word made of a few letters, but it helps create the overall impression as it carves out space in our minds.
This is where brands with names that only mysteriously allude to what they do create an undefined but strong feeling in our mind such as Googol, a number represented by “1” followed by 100 zeros. It’s a great way to summarize the enormous possibilities of the search tool without spelling it out. Likewise a combination name like Wikipedia (Wikea + encyclopedia) gets the point across.
While in the past there has been a profusion of descriptive names for brands or companies, the current trend is for something shorter and non-descriptive. Then throw in X’s, Y’s and Z’s to make a version of the name with a URL still available. Hence Xfinity, Lyft and Zynga (the latter is actually the name of the founder’s dog’s name but hey, it works). Also, with a more unique name it is easier to turn it into a legally ownable corporate asset.
Remember the logo is just a symbol for the brand
How a brand’s name comes to life in its most succinct form is often the logo. The two are inseparable. The style of the logo is also used to create an emotional tone of the name: calm or hurried, conservative or risqué, stylized or minimal. Whoever we are there are brands that resonate with us. In fact, Logo Lounge produces a trend report every year showing the changing styles in logos: http://www.logolounge.com/trend-reports.asp
For example, the choice of a late nineteenth century script in the Coca-Cola logo effuses a sense of classic Americana. Meanwhile, Apple uses the sans serif font ‘Myriad’ in a stylishly minimal way because it says modern and utilitarian. Pepsi changes their logo’s look with the times while keeping the same name. In fact, in a recent campaign Pepsi has gone back to a nostalgic look like their arch rival Coke.
Once developed, the logo often gets applied to everything that makes up part of the brand such as websites, t-shirts, packaging etc. But good branding is more than just trying to brand a herd of cattle with the same mark (see appendix). As the next section will show, we’re not simple animals and need much more mental stimulation than that…
“Don’t show me logos, show me a system!“
We all like to believe there is one overall vision guiding a brand and hence the part of us that has an emotional connection with it. After all, we are all individuals. It all boils down to the fact that everyone that interacts with the brand in any of its forms has an expectation of what it should be. The more complete the brand the more trust we have in it and branding is all about reputation.
As mentioned earlier, any given brand represents a view into the world as defined by that company or product. Branded materials should look like they all fit together as a cohesive whole. This creates a more compelling and complete world view with more emotional appeal. Once you know some of the brand then you begin to have expectations for other parts of the brand. These expectations create desire for more.
Apple is great at creating this desire. They don’t sell cardboard boxes but when you see their packaging you want what’s inside. Even if you only have the box from the time you buy it to the time it takes you to open it, say, maybe 5 minutes. Those moments form part of the expectation for the actual physical piece of technology inside.
Even as we blank out brands that don’t seem relevant to us we have an undefined emotional association with them. It is the total experience of the brand from price to how it meets our needs to how it matches our expectations.
Here’s an example of a brand that has followed all of the points above where every point of contact sets a tone before you come into contact with the core product, i.e. the wine from JAQK Cellars.
San Francisco agency Hatch had the idea of creating or ‘hatching’ new brands of their own each year. Their first was a gaming themed winery. Why gaming? In the words of Joel Templin, one of the founders of JAQK “everyone plays games.”
First the name: by taking the letters from the Jack, Ace, Queen and King cards the unique name ‘JAQK’ is formed – very intrinsic to the brand.
Next is the marketing and the bottles’ labels: the latter are all of high quality with captivating designs often spanning not just the labels, with each bottle telling its own story within overall gaming framework. These labels/bottles are important as they are a key point of differentiation in the wine industry.
Then there is the experience of the product itself: does the wine‘s taste actually match the high expectations set by the brand promise of its promotion and the packaging? I can truly say it does and encourage you to try them here: http://jaqkcellars.com
It all seems so easy. Right? In a comical way the show Silicon Valley conveys just how difficult it is to work out what a brand (Pied Piper) is and to get it out there in the marketplace. If big companies are spending millions of dollars on all their logos/brands why do we as consumers have such a sophisticated ability to tune out most of them?
Well, maybe it’s because there are now so many brands in our daily lives. They ALL vie for our attention like a crowd of people constantly pestering us to do something. In your head you’re thinking “I don’t have time for this”.
Marketing people want brands that stand out when really they should want their brand to be desired, as this is what good brands do. Hopefully by following these simple steps your brand will have the depth needed to be desired:
- Define your audience tightly as you are probably not talking to everyone in the world
- Tell a story of the product or service that is relevant to your audience
- Set expectations of what the product will do
- Make the product, story and logo intrinsic to each other
- Find out if the story is unique or if somebody else is already doing it
- Always remember, the logo is only a symbol or summation of the brand story
- Think about how the brand’s story could be told in different contexts
- Finally, and most importantly, the product must deliver on the expectations of the brand – without this vital step your brand will fail.
Get all these right and your brand will begin to design itself.
Appendix: A short history of ‘branding’
The idea of marking herds of animals had been around for some time before the nineteenth century. However, while huge herds of livestock roamed across the American West and Midwest, the danger of cattle rustling was very real, usually coming with a death sentence for those caught. As a result, ranchers had to put a permanent unique mark on the hide of every animal so they could be distinguished from one another if the herds were intermixed or if the cattle were stolen.
These squiggly or unique marks were what we would now call brand marks but back then they were called cattle brands (actually a ‘brand’ is the name of the metal implement used to apply the mark to the animal’s hide – see picture above). At the same time, in the crowded cities of the post-industrial revolution, what we now call ‘consumer products’ began to appear. Some were beginning to stand out by emphasizing a distinctness more than just the product itself. Somewhere along the way the cattle brand metaphor was used in context to trademarks and products in the cities, and the branding industry was born.
INTRO: THE B2B LANDSCAPE
The process of one business selling to another business (B2B) is enormous and involves billions of dollars in the US economy ($559 billion according to this study). Yet if you Google ‘designing for B2B’ why is there hardly anything on the internet?
So who are the companies that spend these billions on B2B? It could be anyone from coffin makers selling to undertakers, or, on a grander scale, the likes of Cisco, IBM, Intel or HP selling cloud storage to equally large companies like Apple or Microsoft. It’s a very different type of sell since no one is going to buy a server farm from a banner ad.
And just who am I to talk about designing for B2B? Well, currently I head up the creative for CBS Interactive’s B2B division, dealing mostly with big tech clients so in this post I’ll mostly be looking at designing for these types of clients.
CBS Interactive’s Visualizer 360 brings together all of Brocade’s social media – click images to see original live version (Vica Filatova, Jeff Hill and Rick Byrne)
As consumers, we experience ads or sites that ask us to do something straight away, such as buy now, watch a video or learn more. However, the cost of buying something large like a company’s data storage is too huge to pull off in an online experience and a business still needs to get the message out to its audience somehow. These ads/projects are part of a brand awareness campaign and are intended to get customers on the first rung of the purchase funnel. They are usually hosted around relevant content (articles, videos, white papers etc.) found on publishers’ sites.
For a big splash such as a product launch there are immersive fullpage takeovers (covered in this post more extensively). These certainly generate higher engagement rates, often with many replays of the ad. In catching people’s attention they have both higher close rates and higher brand recall rates when compared to regular banner ads – the two go hand-in-hand.
For a more semi-permanent branding experience CBS Interactive offers its ‘Visualizer 360’ as a sort of one-stop-shop for all a client’s social media, videos and white papers, etc. It can be built once in Flite’s console with multiple units such as a pushdown or lightbox acting as a window to that file. Our major user of the Visualizer is Brocade, who loves how it allows them to consolidate all their social media feeds which are scattered across different sites. The Visualizer can also be hosted on different sites and networks, rather than on a single page that would need ads to drive traffic to it – see for yourself by clicking here.
The Lead Gen process: click the banner, fill in the data entry form and download the white paper (courtesy of LinkedIn)
LEAD GENERATION (LEAD GEN)
Building awareness of a new product/service/app is one thing but no one is going to buy 100 laptops from a banner ad. To get around this, B2B advertisers can offer users a chance to download a white paper or similar giveaway in order to get their contact details for a follow-up sales call. This process is called lead generation (Lead Gen).
Simplified, here’s the process:
2. Data capture
4. Follow up call.
For Lead Gen ads there are a huge amount of clicks on the initial banner ad offering a download a white paper or similar asset. However when faced with the data entry page that follows, users can abandon the process (called The Abandon Rate). To avoid this some kind of warning of the process ahead should be in the text or button/call to action such as ‘Find out how to download’. This may create a lower CTR (Click through rate – see Measuring Success below) on the initial ad but creates a much better brand experience for the user.
Another drawback of the process is that the user filling in the data can provide false information; except for their email address (usually how the download link is delivered) everything else can be incorrect. According to Stephen Corby, CEO of Specless, a mobile ad agency, another drawback is that the process doesn’t work for mobile and tablet users as the mindset for both of these environments doesn’t lend itself to lots of clicks or reading documents. Pinable ads may change this in the future like this.
Fullpage takeover for an editorial feature with IBM sponsorship (Rick Byrne)
The main aim of any of these campaigns is to sell more of a client’s product or service. In order to do this a campaign is broken down into smaller phases (CBS Interactive B2B defines these in 5 steps: Discover, Investigate, Compare, Justify, Optimize) each with its own target impressions, clicks or leads. Since this is a post on the business of business let’s look at the metrics of how online campaigns are judged:
Impressions are a measure of the number of times an ad is displayed, whether it is clicked on or not.
Cost per mille (CPM) (Latin: mille = thousand) is a commonly used measurement in advertising indicating the cost per thousand people who see an ad (impressions). To see just how it’s calculated click here.
Click-through rate (CTR) is a way of measuring the success of an online advertising campaign for a particular ad by the number of users who clicked on a specific link or button.
Cost Per Lead or CPL is an online advertising pricing model, where the advertiser pays if an individual signs up for an advertiser’s offer. This is the primary metric used for Lead Gen campaigns.
Cost Per Action or CPA (also known as Pay Per Action, Cost Per Conversion or Cost Per Acquisition) is an online advertising pricing model, where the advertiser only pays for each specified action such as a purchase, a form submission, watching a video etc. To see just how it’s calculated click here.
If you were in the B2B industry which one would you like to be seen as?
THE B2B CONUNDRUM
Selling cool stuff to the average consumer can be a lot of fun. However for a multi billion dollar industry B2B is often not seen as cool nor targeted to cool people. B2B is commonly seen as boring and bland, like the businessman on the left above when really the industry should see itself as more like the guy on the right: cool, playful, modern.
This is the B2B conundrum – everyone in agencies regards it as something that has to be done as opposed to something they want to do. I have found that consumer clients work faster and are more on top of the details than Enterprise (B2B) clients.
This may be because of the longer buying cycle and the fact that agencies are populated with people who would rather be working on something else more hip. Creative teams dedicated to B2B can get bored and lose their edge – they’ll need to find other ways to be to creatively challenged or they’ll leave. Rotate them out with consumer clients over time or give them more creative freedom on RFP mocks.
Office’s elegant and creative Smarter Planet campaign for IBM (courtesy of Lisa Friedman at Office)
B2B DONE RIGHT: IBM’s SMARTER PLANET CAMPAIGN
Just because the B2B Conundrum exists doesn’t mean that it is all bad. In fact IBM’s Smarter Planet campaign is a major B2B project done right.
Ogilvy & Mather New York asked the San Francisco based agency ‘Office’ to develop a visual vocabulary for the launch of the Smarter Planet campaign–an entire visual language system that would illustrate how IBM was transforming the world’s most important systems such as food, energy, transportation, healthcare, education, and banking. Here is a description from Office’s website:
The design challenge was to create a visually arresting language that was as bold as the ideas they represented. How do we create something that will grab people’s attention and engage them so they want to learn more? How do we distill complex essays into one clear visual concept? And how do we represent these big, complicated problems in a way that’s approachable?
The Office team was inspired by the creative vision that designer Paul Rand developed for IBM in the ’50s, ’60s and ’70s. Rand’s work was about boldness and clarity, and had a “wink” that created an emotional connection with people. These became the team’s driving principles.
The resulting pieces give a playful feel to all the parts of the campaign from essays to giant posters to banner ads. A lot of thought has gone into each of the icons as manifestations of different aspects of IBM. Visual cliches were avoided with the assumption that their audience is made up of smart and creative thinkers. Even if their audience doesn’t look too deeply into what the image represents it is still very appealing to the eye and in the online world where the eye roams the finger/mouse follows.
Animated banner ad for ZDNet.com aimed at CIOs and IT professionals (by Rick Byrne)
HOW TO GET BETTER (INTER)REACTION
– B2B tends to have a more male bias especially in tech
– This is not an excuse to be one dimensional
– Enliven ads with better design and copy
– Where possible, use endorsement of specific industry leaders for more clicks
– The B2B process is long so break down CTAs into smaller actionable parts
– CTA for awareness ads should be succinct such as ‘Learn More’ or ‘ Watch Video’
– For lead gen the CTA wording should warn the user about the data entry process
– Avoid obvious stock photos – they look very inauthentic
– ‘Native’ ads use the site’s own look and feel to deliver authentic sponsored content
– Images/videos/names of endorsing experts in the industry drive more interest
– Avoid product imagery in ads unless done in a very eye-catching way
– Most servers look very similar and aren’t likely to sell based on looks
– Ads should be led by a product feature (either copy or images) for memorability
– For tech clients add a techy feeling and/or abstract imagery – let the copy do the hard sell
– Avoid visual clichés for tech such as circuit boards, cursors, streams of ones and zeros etc
– A great many B2B clients use blue/gray palette as it’s ‘safe’–perhaps too safe
What makes designing for B2B so different? Well, nothing really, except for the mindset of those involved. To paraphrase JFK, “The only thing we have to fear is fear (of boredom) itself”. This often arises when everyone involved in the B2B industry plays it safe because they are appealing to a committee of business decision makers. Yet this committee is made up of individual human beings, each with their own aspirations and limited time. Lose sight of that and you will be permanently dealing with the B2B Conundrum.
WHY THE NEED TO BE CREATIVE?
30 Rock: Jack Donaghy appears to Liz Lemon in her dreams as her Shower Effect
There are plenty of banal ads out there selling all sorts of things. They pander to the average person. But then most people aren’t average and they certainly don’t think of themselves that way. To get through to them creatives hear a litany of creative briefs asking for ‘outside the box thinking’ or for something ‘impactful’ that ‘cuts through the clutter’. Designers and copywriters are then wheeled in to come up with more creative concepts. The bigger the problem the more creatives are added as though it’s a battle of attrition–metaphorically like the troops trying to fight their way off the beaches on D-Day.
Usually the actual process involves doing research on a project, followed by a brainstorming session which produces a certain amount of results. Yet despite all that someone has a sudden vision of the solution in it’s totality the next morning while in the shower (or other non work place). This has become so well known that there was an episode of 30 Rock devoted to this process (The Shower Principle above). In this post I attempt to answer the two big questions around the Shower Effect: why can’t you plan for this moment and how can it become part of the creative process?
THE CONCEPTING LANDSCAPE
Edison famously said “Genius is one percent inspiration, ninety-nine percent perspiration.”
To give the Shower Effect’s it’s full context I’ve added it into the 5 common stages of the concepting process as defined by David Perkins in his book The Eureka Effect:
1. The Long Search: The deep thinking, experiments and gathering of information conducted when launching into the project. This is best illustrated by Edison’s methodical search for the right material for a light bulb filament which took years. Inspiration came when he thought of using the carbonized bamboo of fishing rods to create the filament (hence the visual cliché of a light bulb turning on to represent a flash of insight).
2. Period of Little Progress: Since, for most concepts, the low hanging fruit are already taken there is a period of stressing about getting beyond what is already out there e.g. the Wright brothers struggled for years with no success.
3. Precipitating Event: Something happens to bring about the moment of insight. For most people this is being in the shower. Similarly Archimedes saw water overflowing from his bath tub that gave him the vision of how to measure the volume of an object.
4. Cognitive Snap: The falling into place of solution: this is the crux of the Shower Effect.
5. Transformation: New means of seeing problem from that point on.
THE PROBLEM WITH BRAINSTORMING
The dream of brainstorming: this only exists in the world of stock photos
The reality of brainstorming: note the reserved body language
If you’re reading this you’ve probably been in a brainstorming session at some point. You’ve seen how a group is gathered in a meeting room for one or two hours with the hope that with so many people battering away at the problem a definitive solution will be reached at the end of that time period. A profusion of ideas are generated to be honed down afterwards. However there are two big problems with this approach…
The first is that brainstorming produces consensus not uniqueness. Individuals feel that they personally are being evaluated as if in a test and tend to clam up (Evaluation apprehension). Individuals also tend to match the productivity of others in the group tending towards under contribution rather than over contribution (Social matching effect). In brainstorming sessions anyone can easily coast along during the session with minimal input to the group (Free riding) while all the time thinking they are making more of a contribution (Illusion of group productivity). Brainstormers also tend to listen more closely to the louder or more senior people over those who have neither of these qualities (Blocking).*
The second big problem with brainstorming is that while there may be many ideas at the end of session they mostly lack any depth. There is no one person sweating it out during a deep dive into the subject. Research indicates that the act of listening to others actually stifles creativity. The best concepts have something of their originator in them. That’s the part that resonates with us. After all ads/branding/designs have to connect with individuals in a deep way, something that committees can rarely achieve.
*All phrases in brackets are the psychological terms for these effects as defined by Stroebe, Diehl & Abakoumkin in “The illusion of group effectivity”. Personality and Social Psychology Bulletin 18 (5): 643–650.
DIGGING DEEP FOR CONCEPTS
Simple ideas with a lot of impact usually come in a flash and need little explanation.
The average day exposes us to an enormous amount of ads/messages which we mostly screen out. This means that it is harder to come up with something that connects with another human being in a meaningful way. Part of fertilizing the brain in order to reach these connecting creative breakthroughs involves a deep dive into the subject matter.
The inward soul searching is necessary to rethink a product/service: how it’s used, how it makes something more convenient, how it’s held, it’s intrinsic appeal etc. Applied to that is the pressure on the individual to come up with results for whatever reason: a job, peer jealousy, profits, a patent, ownership etc. Somehow in all this someone has to pour their soul into the project in order reach another person’s soul. Think of Van Gogh who told his brother that no painting ever sold for as much as it cost the artist to make it.
This doesn’t mean that the solution will automatically come after all that work. It’s more like your brain is facing the problem across a no man’s land of the mind. You keep probing, looking for a weak point in the line for a breakthrough. However, as Louis Pasteur said, chance favors the prepared mind so without this preparation the sudden moment of realization that is the shower effect would never happen.
THE A-HA MOMENT
I often have A-ha moments during meetings on other projects: this post-it note sketch is for HP Airprint
The period of frustration in the digging deep phase primes the subconscious perfectly for the A-ha moment. This hardship fertilizes the incubation period of the idea just before the transformative insight. Like a giant connecting of the dots the solution just seems to fall into place, just not when or where you want it to.
But why showers? Well it doesn’t have to be a shower but could be any activity not connected directly to the problem at hand. A night’s worth of the subconscious mulling over the problem also helps connect the dots since we have hundreds of dreams a night are bound to throw up more strange scenarios. One of them is bound to be right. But then it’s often lost again. By the time we are getting our head around the day you are probably in the shower already. The lack of concentration needed to perform this physical act means and the lack of outside stimuli leaves the mind is completely free to wander. Suddenly the solution emerges from the subconscious to the conscious: A-ha!
But how is the vision so complete and not partial? A study by Dr Mark Beeman of fMRI brain scans during these A-ha moments reveals a huge explosion of activity in the right hemisphere. It’s as if the seeds of scattered thoughts are sown across the brain during the deep dive phase, to be incubated by sleep followed by a sudden blossoming all at once in a single solution.
TIPS FOR ACHIEVING THE SHOWER EFFECT
It’s not just taking a lot of showers
Routine is the Enemy
– Take a break and talk to someone you don’t normally talk to.
– Other people may provide unexpected insight into the problem.
– Switch off fully to the problem when not working on it.
– Mix up the usual routines you do as you’re working.
– Time pressure may help to edit out the bad ideas.
Intuition needs to flow
– Do not over think things as you will end up second guessing everything.
– I used to listen to audiobooks to occupy the second guessing part of brain when painting.
– Now I watch murder mysteries to keep my mind in puzzle solving mode.
– Outside projects help to get your mind out of its usual pattern of thinking.
– Ji Lee, CD of Facebook and Google Labs, got these two jobs due to projects outside of work.
– Work backwards from the final vision to fill in the main steps.
– Think about the approvers and how they’re likely to react too to the idea.
– If you can’t explain the idea in 30 seconds then it may be too complicated.
– Creativity appears in clusters so dive into the next project quickly.
– Don’t get caught in the rut of thinking the same lateral solution will work for everything
Jack Donaghy’s nightmare: listening to multiple Liz Lemons’ problems. It turns out to be his shower effect
No matter where the creative process takes you there’s still the need to dig deep in order to prime your subconscious. Although the Shower Effect is unpredictable, following this simple formula will help:
Deep dive + frustration x primed subconscious during sleep = A-ha solution
The main thing is being open to letting it happen. It doesn’t have to be a shower. Erich, a designer I used to work with, came up with all his breakthroughs while going to the bathroom. It happened with surprising certainty. In the episode of 30 Rock ‘the Shower Principle’, Jack Donaghy (Alec Baldwin) works out that listening to all of Liz Lemon’s (Tina Fey) problems gives him enough of a break from his own to allow flashes of insight to happen. Have fun and take a shower.
This article was originally printed in the July issue of InPrint magazine
The political poster has played a significant role in political gatherings for the last two hundred years. They could be produced cheaply and plastered up quickly. Epic clashes of ideology fought it out in visually compelling posters that are easy to show in design and history books. To see some great example click here.
Political posters are conceptually easy to design. They just need a great image, a gripping headline and maybe a logo. There are no clicks or metrics or market share attached to them. However the very idea of a poster is under attack due to the dominance of TV/web as the main mediums for political messaging along with green issues of paper wastage. Is there still the kind of great clash of opposing ideologies that historically gave rise to all those great posters of previous eras? In this article I ask if the political poster is it now an out-of-date medium?
IS THE MEDIUM THE MESSAGE?
Plastic yard signs with prongs for insertion into the ground have sprouted up all over suburbia. These have largely replaced paper posters in the US as the main conveyor of political messages at the street level. This is where we passively form our opinion of a candidate as we go about our day-to-day life.
Other processes for mustering up the vote occur in the privacy of the home such as email, telemarketing, direct mail and websites/online banner ads. All of these can bring a more detailed message to specific households. However these messages are more likely to be lost in the daily mass of unsolicited spam, junk mail and the ever annoying telemarketing phone call.
TV remains the dominant medium for presidential or congressional election campaigns as it is the main chance for individuals to see the candidate in person (so to speak). Just like a brand the footage gives a general impression of how the candidate conducts themselves–more so than in other media.
However despite all this individuals still wave posters at the party conventions and carry them in parades. There is something about their size and manageability that keeps them in the human scale. The fact that anyone can now design them and get them printed adds to their universal allure. Click here to see CafePresse.com’s Obama and Romney pages and just as before they still remain the main artifact for a political campaign.
DESIGN OF POLITICAL POSTERS IN THE US
Large last names, stars and red/white/blue: the main ingredients of US political posters
So what goes onto these printed posters? There is definitely a very unique view of designing political campaigns in the US. There is a certain psychology at play and design for political posters process reflects this.
Firstly the biggest unique aspect of designing election posters in the US is the use of a candidate’s last name as the largest element. Sure the name appears on the ballot and it’s important to recognize it. However in Ireland and the UK political posters have pictures of the specific individuals on them as the largest element. The name appears big as well but it is a secondary element.
Next comes the use of variations on stars and stripes to convey how ‘all American’ the candidate and their values are. Smaller parties like the Greens or Libertarians don’t use the generic American look to present a non standard view of their policies. The concept of ‘Blue’ states (Democratic) and ‘Red’ states (Republican) emerged through TV’s portrayal of the vote counting. However red is not seen as a particularly American color on it’s own in politics. This is probably due to red’s association with communism and a general negative ‘stop’ or ‘danger’ connotation.
Thirdly I find the absence of party branding on these posters is very odd. Almost all candidates in presidential and congressional elections are members one of the two main parties yet they don’t use their logos. Obama made up his own logo and uses that. By contrast European political parties each have their own distinct color branding and party logo on everything. I think only the green party in the US has a distinctive brand color but with a name like that it would have to.
A VISION OF IT’S TIME
A selection of compellingly designed political posters
Not only does every good political poster have it’s own message but to be a great political poster there usually has to be a strong opposing viewpoint. Consider the iconic ‘I Want You’ Uncle Sam poster from world war one or the equally iconic British ‘Keep Calm and Carry On’ poster originally to be pasted up if the Germans invaded during world war two. Both so captured a feeling of their era that has lived on beyond their origin. Check the links as the end of this article to see American, Communist and Nazi posters from world war 2.
While the clash of ideals provides a political viewpoint it also creates an impassioned group trying to use it to electrify or shock the public. If the group also comes from the fringes they may have less to lose. A great example of this is the Silence = Death poster created in reaction to President Reagan declaring AIDS “public health enemy number one” in 1987.
Now in this election year what is our vision of the future? Is there an epic clash of ideologies? During US elections the two main parties seem to mostly target the voters in the mid ground. These are the people who will sway an election rather than the dedicated party followers. As a result in deciding their messaging politicians in the US tend to play it safe. Currently Obama and Romney’s political platforms cover job creation, economic stimulus, the deficit, auto industry recovery, healthcare etc. The detail varies but in the run up to the election these differences will be expanded to appear like the epic ideological clashes of the mid 20th century.
CASE STUDY: OBAMA HOPE POSTER
Shepard Fairey with his famous Obama image in the National Portrait Gallery and some of it’s parodies
Against the backdrop of stars and stripes dominating political posters the Obama/Hope poster emerged to capture the imagination of the public in 2008. It seemed to capture Obama’s vision, whether real or imagined. It also encapsulated the public’s desire for change, something John Kerry was unable to do in 2004.
The artist Shepard Fairey designed the stencil style poster in a single day and then printed off 700 to sell on the streets of San Francisco. The original poster merely had the word ‘progress’ but Obama’s campaign people later asked if Fairly could do a version with ‘hope’ and even later on a version with ‘change’. The non specific message captured a feeling rather than a specific policy allowing anything to be read into it. It no doubt helped sway many of the undecided voters who needed a clear brand-like sense of what Obama stood for.
By October 2008, Fairey and Yosi Sergant, his publicist, claimed to have printed 300,000 posters (most given away) and 1,000,000 stickers. For a year after it’s creation the image and parodies of it appeared everywhere. In fact to make your own click here.
Despite a legal wrangle over the use of the an Associated Press photo the original hand finished collage now hangs in the Smithsonian Institute’s National Portrait Gallery. Unlike most of his predecessors, Fairey has shown the dramatic impact a single political poster can achieve.
GET OUT THE VOTE
The urban myth that more people voted for American Idol than in a presidential election of 2008 is widely believed (although not true). As the amount of people casting their votes declines, the mobilization of the non-voters has become the key focus of the Get Out The Vote (GOTV) campaign. Rock concerts, college campus gatherings and posters target the 18-25 age group–the very people who most want to change the world yet often feel that they can’t change anything.
The narrowness of the margin in votes between the two presidential candidates in Florida 2000 caused an even larger GOTV drive in 2004 and 2008. As a result various GOTV campaigns in the US are populated with people with left wing/Democratic political views. My gut feeling is that groups with right wing/Republican views mobilize better as a voting block. It is ironic that while previously great political posters used to say who to vote for while now they are just asking people to vote.
The AIGA (the professional association for design) has organized a selection of print ready posters open to anyone use. To see the full range of magnificent posters click here. The project is a return to the vision that graphic posters can sway people to vote for something. In the last election approximately 100,000 of AIGA/GOTV posters were printed. There is still an epic clash of great ideals, but now the ideological clash is between democracy and apathy.
WILL WEBSITES REPLACE POSTERS?
Websites are increasingly used as the main contact point for political campaigns. Unlike other media, online campaigns are a two way process, can be tracked for usage/clicks and are easily updated as policy changes–everything a poster is not. So with websites being a more effective tool for reaching the electorate than a poster should they still play it safe?
A disastrous political website appeared earlier this year in the form of the highly racist Bettie-spend-it-now campaign for Senator Pete Hoekstra. Aimed at his opponent Debbie Stabenow’s spending policy it has an Asian girl saying in pidgin English “Thank you Debbie SpendItNow. You borrow more and more from us. Your economy get weak. Ours get very good. We get jobs. Thank you Debbie SpendItNow.” The website had Chinese fans, dragons and the red communist flag all around the video. Click here to see the video (which also played as a tv ad during the Superbowl).
It definitely cut through the masses of safe political messaging by having a more unique take on the issue and created a big media buzz. Pete Hoekstra discovered the fallacy of the adage that there is no such thing as bad publicity and had a drop of 5% in support (comparing a poll in November 2011 to one in February 2012). It is surprising that the drop was only 5% and not more. The site was taken down due to so many complaints and original URL (debbiespenditnow.com) now directs to PeteSpendItNot.com. Hoekstra’s willingness to not play it safe could have created something great. After all it clearly changed many of the electorate’s minds–just not in the way Hoekstra had in mind.
The future equivalent of the poster may lie online
No longer the outsider, Obama cannot reuse the emotive ‘change’ theme of his first presidential campaign. Instead he has now gone for the safer middle ground. Web ads now present him more like an everyman figure with his wife and children being co-opted into them. There is even a reality TV-like online ad campaign where donators to the campaign can win a dinner with Obama himself. By contrast Romney’s message so far is mostly about jobs and economic growth. Gone is the iconic poster from the fringe declaring Hope, Change or Progress.
So how do you end up with a great political poster? Put simply it’s the combination of being at the right time and place to capture a zeitgeist of an epic clash of ideals, preferably in a new artistic style. It seems that without this epic clash there won’t be an epic poster. Maybe as the messaging changes from either side in the run-up to November 1st’s voting, a more diverse clash of ideals will emerge. Someone just as lucky as Fairey may yet capture the spirit of the time.
Some fantastic posters:
World war 2 American posters:
INTRO: WHAT ARE FULL PAGE TAKEOVERS?
Imagine going to your favorite website for news on your particular interest in life (sports, tech, games etc.). You’re used to mentally screening out the banner ads on the page–they’re always in the same place and seem the same. You’re about to check out the latest news when suddenly the web page opens up to reveal some strange new ad you’ve never seen before.
These are full page takeovers–an immersive ad experience that hijacks the page for a few seconds. They emerged due to increasing pressure on advertisers to be entertaining enough to cut through the daily clutter of the online world. They make a much bigger impact, are more easily remembered and get more interaction than banner ads.
Also given other names such as website takeovers, rich media takeovers, page morphs or overlays, full page takeovers are appearing more frequently all over the web. They run the fine line between having web users who think they are annoyingly intrusive and those who think they are really cool. In this post I will be looking at the best practices for designing the latter.
In this Mediamind takeover the ship draws the user into the trailer below–click above to see original
CONTEXT IS KEY
As with all new art forms they tend to replicate a previous art form e.g. early silent films mimicked theater productions and early TV replicated radio. So too with the web as most publishing sites mimic newspapers and magazines. Most web terminology even comes from its print predecessors. Animated ads may be more eye-catching but their placement is still treated like press ads.
The notion of webpages being finite like paper is a misnomer. Really the web experience is more like a window onto a layered digital world made of pixels. Emphasizing what is unique to the web as an art form, it can appear to change format, often tricking the eye into reacting as though it was a real world object in the process. The size of the canvas available to play with is big, both physically and metaphorically.
Thus the web context is key for full page takeovers to be successful. For example in the Tron example above, the ship draws you into the lower ad where the trailer plays while the top ad allows you to buy tickets to see the movie. By contrast, this Playstation Vita example from Ireland is so involved that it may as well be its own site rather than a full page takeover.
This Luftansa takeover from Flashtalking interacts with it’s host page nicely–click above to see original
WHAT MAKES A GOOD TAKEOVER?
A good full page takeover tells a story in about 8 seconds (the usual length before the ad experience automatically closes). Some kind of meta story needs to remain in the mind once the ad ends. The user may remember the experience but not necessarily the details. This kind of subconscious impact is more appealing to an individual and drives them to want to do something such as clicking to learn more, watch a videos, etc.
Because they are so intrusive a good full page takeover needs to create a sense of awe so the user thinks ‘how did they do that?’. In order to elevate the brand in a user’s mind, a takeover should not be gimmicky but rather it should use an effect that is intrinsic to the brand. For example in this Insidious pushdown when you click ‘watch the trailer’ the eyes follow the cursor as it moves around, adding to the innate creepiness of the experience (designed by Justin Herman).
I often like to keep some part of the original page visible, even if it is just the masthead. This keeps the eye engaged and avoids the user feeling like they have been sent off to a new site unexpectedly. Clients may feel they have a larger canvas in which to put their brand but in reality the average user finds it annoying since they would rather be enticed to the experience and not driven unwillingly to it. In the Luftansa example above the takeover was placed over the page regardless of content–as a result it was also able to be served across many sites in one day (a Flashtalking specialty–third party hosters of full page takeovers).
RFP illustrating the HP OfficeJet’s ability to print to a printer anywhere in the world (design Rick Byrne)
CASE STUDY: HP AirPrint
In order to look at how a full page takeover can organically grow out of a brand and still be entertaining I thought I would detail one project’s conception process.
The original brief for HP Officejet printers was generic with none of the usual clues/restrictions of an RFP except for the request for custom creative. CBS Interactive had already done this 300×600 Filmstrip for HP so I thought it didn’t need to be a nuts and bolts ad unit but something more splashy.
For inspiration I asked myself what is so unique about these printers? Researching further I discovered that HP Officejet printers all have the AirPrint feature which means they can print from the web to a printer located anywhere in the world.
Looking at HP’s official page for AirPrint I saw they used a paper plane as part of the feature’s imagery. I then asked myself what would be interesting to the astute, tech focused audience of CNET. I soon hit upon the idea that the CNET page could fold up into a paper plane that sends itself from the web to the printer. A simple story that is hard to forget even if the advertising copy isn’t read.
RFP for Lenscrafters: the user can move the in focus area around via the cursor (design Rick Byrne)
JUST HOW DO THEY DO THAT?
For most of these full page takeovers a Flash file is placed over the page’s content. Some full page takeovers can demo a more involved process/activity before collapsing. If the demo strikes a chord with the user they could click to relaunch the takeover but this time with a deeper and more involved experience such as sound or longer videos.
For some takeovers a snapshot of the site’s page is taken via an automated screenshot tool every 15-30 minutes (news changes throughout the day). The jpeg is then fed into the code and distorted from there. Frequently a standard banner ad on the page draws the takeover files from the publisher’s server. Frequently it will come from the third party hosting the ad (e.g. MediaMind, FlashTalking, Pointroll etc.)
In the example above for Lenscrafters, two screenshots of the page would be fed into the Flash file simultaneously (one blurred on top and one sharp below). The upper blurred jpeg would have a circular mask with a blurred edge that can be moved with the cursor. The usual arrow image of the cursor is substituted for a pair of glasses. The automated version of the takeover demos the cursor moving around before collapsing back into the banner ads. If clicked, a second, user initiated version would launch where the cursor/crisp area could be moved around the page.
The file size limit caused the animation‘s bitmapping-compare it to the sharpness of background image
Since I’ve done several full page takeovers and pitched many more here are some tips that I’ve picked up. Apologies if they seem obvious. I’m stating them here because I see these points constantly not applied:
– have a clear call-to-action in the takeover for users that are interested
– add a replay button: if it’s that good users will want to see it again
– add a ‘click to hear sound’ button if sound is present
– add a close button as some people will not like the intrusion of a full page takeover
– Pay attention to a takeover’s CPU usage–some sites will have caps
– file size limitations may be low–bitmapped imagery destroys an ad’s believability (see above)
– many sites have frequency caps i.e. the takeover will only auto initiate once a day
– some sites have cut-off on the duration of a full page takeover–CBS Interactive’s is 8 seconds
– avoid auto-initiated sound as it is considered one of the most annoying experiences online
(if you don’t believe me click here to see what it’s like-make sure your audio is switched on)
– the takeover and its leave-behind banner ads should be designed together
– the page’s banner ads will need to summarize the experience and house a replay button
– some pop-up blockers may prevent the full page takeover from launching from the banner ad
This post provides a good understanding of full page takeovers that if done well, really get through to the user. Don’t just take my word for it. The numbers back me up as takeovers have a much higher click through rate (2-3%) compared to the average for banner ads (0.01%). However, eventually we, the users of the internet, will get jaded of full page takeovers as they become commonplace.
So what will happen then? As in all art forms something else will replace them either technologically (such as HTML 5) or new thinking on how they should be handled will emerge (or more likely both). With geotargetting, cookies and word search cues, ads may become much more specific to the individual’s headspace at that time. Users may expect less intrusive generic takeovers and more engagingly customized ones for a better web experience.
However, no matter what comes along to replace full page takeovers it will still need to tell a story intrinsic to the brand that uses the medium uniquely and still retains that sense of wonder in the user to be effective.
Some live links to takeovers:
FedEx on The Economist
Ford page chainsaw
In Bed photo tagger iPhone App
Luftansa passenger iPad
Norwegian Cruises wave turn
MSN DK Gaming Mod Nation
MSN UK Green Lantern movie
MSN Fr MacDonald’s
Unstoppable movie on IGN.com
Volvo on CBS.com (Click the buttons to the side)
Windows on CBSSports
WHAT ARE SKINS?
Called many other things such as wallpapers, wrappers, homepage takeover skins, gutter ads or left & right rails a ‘skin’ is a static background image that serves as a branded frame for a web page. By wrapping the page’s banner ad experience a “perfect” skin focuses the user’s attention towards the page’s clickable ad units similar to a painting’s frame–focusing the viewer’s attention onto the picture but not competing with it.
CNET Networks (now CBS interactive) was one of the early adopters of skins on it’s Gamespot site and now hosts approximately 900 skins a year across it’s network of sites. Skins are now beginning to appear everywhere on the web from corporate websites to IMDB. If you want to have a go at making your own skin go to Twitter’s page here
Despite this if you Google ‘designing homepage takeover skins’ (their most common name) or any of the other names above you come up with nothing. I’ve been working on skins daily now for 5 years and devised the CBS Interactive’s standards for them so I thought it was time to examine them in detail.
One of the most elegant skins I have ever seen
THE USER’S EXPERIENCE
Many advertisers think of a skin as even more space in which to put their advertising messages (logos, products, ‘buy now’ etc). However a website’s user is often overlooked in the attempt to bombard them with the same repeated messaging. Less premium sites tend to facilitate the latter approach. More premium sites tend to expend extra energy juggling the user’s, advertiser’s and site’s needs to create a more balanced skin experience. It takes more effort but it is definitely worth it to keep a site’s audience happy.
Skins should be thought of as part UX design and part advertising. Ideally advertisers want the site’s user to be entertained by an immersive experience rather than wince at an eyesore. As a result creating one expansive brand experience is the key to a good homepage takeover rather than a series of smaller distracting experiences (see the two Walking Dead takeovers below).
Another consideration is the type of audience. Skins on gaming sites are part educational as it’s users want to be visually entertained and yet be informed of new games. A skin on a business site may be more toned down for a more conservative audience who may see a skin as distracting. Entertainment sites usually feature a film, tv or music star in their skins.
Compare the single high impact of the top takeover to the smaller multiple impacts of the bottom takeover
WHY SHOULD SKINS AVOID REPETITION
I used to see a lot of clients asking for an exact repetition of the page’s banner ads in the skins as though they were two skyscrapers on either side. This approach is similar to thinking “maybe the user will look over here, or up here or down here” and that everywhere they look the message must be the same. In reality the user reacts badly to these types of skins for three major reasons:
1. It creates a negative user experience by being visually unattractive. After all, the user is on that particular webpage for a specific reason. They may already mentally wince at a takeover. Why blow the chance to make a good impression because of the visuals when the offer/price/product is already good.
2. By exactly repeating a banner ad’s imagery and messaging in the skin it makes the latter look clickable. Since the mouse tends to follow where the eye is on a page a distracting skin steers the user’s attention away from the banner ads which actually are clickable. As a result the click through rate (CTR) is driven down.
3. The average user already sees so many brands creating great web experiences through skinned homepage takeovers all across the internet. As a result a brand that creates a sub premium experience is seen by a user as a sub premium brand.
Top: the IMDB client approved the elegant skin Middle: with safety area Bottom: what most users saw
A skin is ‘ad served’ to slot under all the page’s content. While a skin’s specs could state that there are maximum dimensions of 1600 x 1000 px of this slot in reality the site’s ad server can usually take a file of any dimensions. Consequently skins are often designed to be huge because of the maximum dimensions available (see the IMDB example above). Physically, the only real limitation is the file’s k size cap (e.g. CBS Interactive’s is 150k, IMDB’s is 120k, YouTube is 256k).
However what the end user is likely to see varies greatly depending on their individual monitor size or settings. At CBS Interactive we recommend keeping the key imagery within a designated “Safe Area” approximately 1200 px wide and 600 px deep. We can assume most (but not all) of our sites’ users will see everything in that area. We recommend putting all logos, product shots and key messaging within that area in order to create a user experience that will work across multiple browsers and screen resolutions. Anything beyond that should be seen as a ‘bonus’ and would ideally just feature supporting imagery rather than the fine detail of banner ads.
To get a feel for what this display screen issue is like Google set up an interactive page here. Simply type in a particular site’s URL to see their matrix overlaid on top of it. The matrix is a little too small by current standards and is left aligned instead of center aligned (like most current sites) but you get the general idea.
Added to this are other variables, none of which can be controlled by the host site:
– individual users can have their browsers set to zoom in or out
– gamers are likely to have wider than average monitors
– manufacturers are increasing the physical size of their monitors size over time
– Apple is now supporting 1680 x 1050 px display size
Shadows highlight the clickable areas in a takeover
SKIN DESIGN TIPS
Since I’ve done thousands of skins over the years here are some tips that I’ve picked up. Apologies if they seem obvious. I’m stating them here because I see these points constantly not applied:
Logos in the skin
• I frequently advise that logos be left off skins
• large logos get cut-off if they are partially outside the safety area
• logos within the safety end up being too small for a dominant brand presence
• clients frequently agree when shown the a jpeg of the safety area in place
• logos should be on the right side of the skin to avoid clashing with the site’s logo in the masthead
Scrolling or Static skins
• sites have either ‘scrolling’ skins or ‘fixed’ skins
• fixed skins stay in place and remain constantly visible as the user scrolls down the page
• scrolling skins move and disappear as the user scrolls down the page
• most skins on the web are now scrolling
• page shadows direct the user’s attention to the clickable area/ads
• however skins without a shadow around the clickable areas look more elegant
• skins without shadows are like banner ads without buttons i.e. they get less clicks
• increasingly skins are appearing on the web without shadows
• the shadow layer can also have a black panel (covered by the content) to keep the final file size down
• add a gradient at the bottom of a skin in order to fade to a solid background color
• this background color (hex code) continues the expansive feel of the skin
• a product image can be large in the skin as a texture instead of being small inside the safe area
• background imagery in the form of clouds, forests, cityscapes etc. make excellent supporting skins
A good example of a toggle skin for the movie Sucker Punch (designed by Justin Herman)
OTHER TYPES OF SKINS
Not all skins have to be static although they are by far the easiest to create. There are a range of options that we’ll see more of on the web as skins become more commonplace. As with regular skins the key is to enrich the immersive branding experience for the user not to drive them away by bombarding them with messaging.
Toggle skins allow the user to change the page’s skin from a set of options such as the Sucker Punch example above where the user could pick a character to skin the page. Other fun things can be done in a skin such as the mouse giving off bubbles in this ABC example (seen by clicking here). It doesn’t take attention away from the existing takeover but enrichs it.
CBS Interactive now supports animated skins such as the Skyline one found here (also designed by Justin Herman). The key is to make sure the animation isn’t overdone by treating it as another space for an animated Flash ad e.g. think of beer pouring into the skin filling from the bottom up for a Budweiser skin. Combined with the Toggle skin the takeover could also do something interesting that changes as the day progresses e.g. the skin could switch out to gradually darker scenes from a cityscape with undead creatures emerging from the shadows.
Some skins are also clickable. These initially have a higher CTR but this is generally caused by a lot of false clicks as users don’t realize that the sides of the page will direct them elsewhere on the web. The whole process creates a bad user experience and as a result non-clickable skins are generally seen as a more premium offering.
This skin cleverly supports its ads: balls get flicked across the top ad and drop down to the bottom hand
Skins will become increasingly relevant as display sizes and monitor widths increase. More of the non-content area will be visible over time and rather than leaving a vacuum I can see skins being increasingly omnipresent across the web. They could be intrusive or they could be cleverly entertaining like the Lumension example above. In developing these best practices for skins I chose the latter approach by putting the user’s experience as the cornerstone of the process.
By taking the user’s perspective the craft of designing effective skins is easier since their role becomes that of supporting the page’s banner ads. Bad skins, like a bad painting, have a kaleidoscope of competing distractions that all sap the eye’s focus. Just like good paintings, good takeovers have a focus (banner ads) and a background that gives the eye a break (the toned down skin). Paintings may move you emotionally but good takeovers move you to click.
And maybe they’ll move you emotionally too…