BlogmyQuery – BMQ

For those of us in the business of designing the web, one area of resources that always prove invaluable to have in our design arsenals is tutorials. Learning how other web designers have crafted their designs, and which tools they always rely on can always help to guide us as we are either developing or honing our own skills. So we search the web for useful tutorials. Well today we have done the searching for you.

Given that Photoshop is one of the most powerful and popular graphics programs for web design related projects, we decided to turn our focus in that direction for the search. And our search yielded some wonderfully informative results! Split up among two pages, we have compiled a small handful of great Photoshop tutorials for designing a website. We hope you find them as handy as we do.

Designing the Web

Create a Modern Lab Theme Web Design in Photoshop

This tutorial from Design Instruct will show you how to create a web layout with a sleek and modern look using Adobe Photoshop. The process will take you from finding sources of inspiration to setting up the document in Photoshop and creating design elements that fit with the theme of the web layout. It also gives you some practical examples of how using smart objects in a web design project can improve your workflow and save you some time.

Other important lessons learned in this tutorial:

• Working with the 960 grid system
• Setting up the Photoshop grid
• Creating Photoshop patterns
• Using the rectangle tool
• Setting layer styles
• Using Photoshop shortcuts
• Using the pen tool
• Working with layers & groups
• Working with clipping masks

Design a Professional, Clean Community Blog Theme in Adobe Photoshop

In this tutorial from Webdesign Tuts+ you will learn how simple, straight forward design techniques can create a clean community blog theme in Photoshop. A few techniques discussed in this tutorial include the use of proper spacing, typography, colors and visual hierarchy.

Other important lessons learned in this tutorial:

• Setting up rulers and guides
• Using the rectangular marquee tool
• Creating & using gradients
• Setting layer styles
• Pixel perfect spacing and details

How To Build a Stylish Portfolio Web Design Concept

This tutorial from blog.SpoonGraphics takes you through creating a website with a nice and clean layout making use of a contrasting header area to draw in the user. Otherwise the concept is styled with large typography and subtle details on the interface elements. You will be using various effects, blending modes and layer styles to create all the detailed elements of the design.

Other important lessons learned in this tutorial:

• Using blending modes for transparency
• Creating subtle shadows
• Using pattern overlays
• Creating a button using layer styles
• Using the warp tool to create realistic shadows

Creating a Clean Furniture Website and Gallery Layout in Photoshop

In this tutorial from Designzzz you will learn to create a minimal but feature rich furniture gallery with a patterned background.

Other important lessons learned in this tutorial:

• Using custom shapes
• Using clipping masks to create images with rounded edges
• Using opacity for variance
• Using the rounded rectangle tool
• Using the elliptical marquee tool

Design a Grungy Newspaper Web Layout in Photoshop

This tutorial from Bloom Web Design is a great beginner tutorial that takes you through the process of creating a simple but effective web layout.

Other important lessons learned in this tutorial:

• Creating a grungy paper texture
• Using the ellipse tool
• Using rulers & guide lines to line up icons
• Using blending options
• Using the pen tool grid

Create a Clean, Minimal Website Design in Photoshop

In this tutorial from Visual Swirl you will be shown how to craft a clean, minimal website design using some simple techniques in Photosop. This open layout lends itself well to showcasing visual arts as the work will stand out against the minimal design.

Important lessons learned in this tutorial:

• Using various layer styles
• Using 960 grid system for element placement
• Using the pen tool
• Using the convert anchor point for smoother curves
• Using the brush tool
• Using layer masks
• Using the gradient tool
• Using image adjustments for desaturation
• Cropping with the selection tool

Create Amazing 3D Portfolio Dark Layout In Photoshop

In this tutorial from 1stWebDesigner you will learn how to create a sharp 3D like portfolio design using simple gradients and other effects to add depth and a layered look. Using dark colors and crafting corresponding elements to put this portfolio together in simple fashion, this tutorial is certainly worth going through.

Other important lessons learned in this tutorial:

• Using the 960 Grid for your layout
• Using gradient overlays, drop shadows and inner glow for depth
• Using rulers and guides to line up layout elements
• Using the rectangular marquee tool
• Using blending options
• Using the rounded rectangle tool

Design a Sleek, Dark Mobile App Website

In this intermediate level tutorial from Webdesign Tuts+ you will go through the process of creating a website with an impressive interface based around promoting a mobile app. Using a wide range of techniques including shapes, textures, masks, custom icons, typography and much more that can be easily adapted and applied to your own web designs.

Other important lessons learned in this tutorial:

• Using custom Photoshop grids for layout precision
• Using layer masks, gradients and opacity to create image reflections
• Using the brush tool to replicate a realistic light source
• Using gaussian blur for a diffused light effect
• Using layer styles
• Using the rounded rectangle tool
• Using the ellipse tool

How to create a vintage Photoshop file

This tutorial from PSD-files.com teaches you how to create a clean, simple vintage website layout in Photoshop. Using some pre-made vintage PSD’s to help complete the look and style of the design this tutorial is easy to follow.

Important lessons learned in this tutorial:

• Using filter textures for subtle background effects
• Using the rectangle tool
• Using the pen tool
• Using the ellipse tool
• Using gaussian blur for shading and depth
• Using layer styles

Create a Professional Web 2.0 Layout

In this intermediate tutorial from PSD Tuts+ you will go through the extremely detailed step-by-step process to create a web 2.0 layouts using a variety of Photoshop techniques. With the level of detail paid to making this layout shine, this tutorial is fairly long, but entirely worthwhile.

Important lessons learned in this tutorial:

• Using the 960 grid system
• Using rulers and guides for alignment
• Using gradient overlay
• Using layer masks and gradients to create image reflections
• Using the free transform tool
• Using various marquee tool styles for detail
• Using the custom shape tool
• Using the rounded rectangle tool
• Using clipping masks
• Using the color overlay

More on Page Two

We are halfway down through the tuts, so don’t quit now, there is still so much more knowledge being dropped on page two of the post!

After several grueling days I had finally finished the proposal. I sent it off and waited for a response. Nothing. After a few weeks, I discovered that they were “just looking�. Despite the urgency and aggressive timeline for the RFP (Request For Proposal) plus the fact that we had done business with this organization before, the project was a no-go. My days of effort were wasted. Not entirely, though, because the pain of that loss was enough to drive me to decide that it wouldn’t happen again.

I work at a Web development company and we’ve experimented with proposal writing a lot over the years. We’ve seen the good and the bad, and we have found something better. In this article I will share the pains that we have experienced in the proposal writing process, the solution we adopted, and our process for carrying out that solution. I’ll also give you guidelines to help you know when this solution is and isn’t appropriate.

Proposal Writing Causes Pain

After several years of writing proposals, we began to notice that something wasn’t right. As we considered the problem we noticed varying levels of pain associated with the proposal writing process. We categorized those pains as follows:

• The Rush
  Getting a proposal done was usually about speed. We were racing against the clock and working hard to deliver the proposal as efficiently and as effectively as possible. However, sometimes corners would get cut. We’d reuse bits and pieces from older proposals, checking and double-checking for any references to the previous project. While the adrenaline helped, the rush gets old because you know that, deep down, it’s not your best work. Besides, you don’t even know if you’re going to close the deal, which leads to the next pain.

• The Risk
  Our proposal close ratio with clients that came directly to us was high. We’d work hard on the proposals and more often than not, we’d close the deal. The risk was still there, however, and I can think of several proposals that we had spent a lot of time and effort on for a deal that we didn’t get. Not getting the deal isn’t the problem — the problem is going in and investing time and energy in a thorough proposal without knowing if there is even the likelihood that you’re going to close the deal.
• The Details
  The difference between a project’s success and its failure is in the details. In proposal writing, the details are in the scope. What work is included, what is not, and how tight is the scope? Now, this is where the “rush� and the “risk� play their part. The rush typically causes us to spend less time on details and the “risk� says: “Why spell it all out and do the diligence when you might not even get the project?� A self-fulfilling prophecy, perhaps, but a legitimate concern nonetheless. Selling a project without making the details clear is asking for scope creep, and turns what started out as a great project into a learning experience that can last for years.

Now, writing is an important part of the project and I’m not about to say you shouldn’t write. Having a written document ensures that all parties involved are on the same page and completely clear on exactly what will be delivered and how it will be delivered. What I’m saying, though, is that you should stop writing proposals.

Write Evaluations, Not Proposals — And Charge For Them

A few years back, we decided to try something new. A potential client approached us and rather than preparing another project proposal, we offered the client what we now call a “Project Evaluation.” We charged them a fixed price for which we promised to evaluate the project, in all of our areas of expertise, and give them our recommendations.

They agreed, paid the price, and we set out to deliver. We put a lot of effort into that evaluation. We were in new territory and we wanted to make sure that we delivered it well. So we finished the report and sent it to them. The client liked it, agreed with our recommendations, and started a contract with us to do the work.

That project became a game changer for us, starting an on-going relationship that opened doors into a new market. It was the process of the evaluation itself that brought the new market potential to our attention, and gave us the opportunity to develop this business model. It was a definite win, and one that a project proposal couldn’t have delivered.

What Is A Project Evaluation?

A “Project Evaluation�, as we’ve defined it, is a detailed plan for the work that is to be done on a project, and explains how we do it. We eliminate the guess work, and detail the project out at such a level that the document becomes a living part of the development process, being referred back to and acting as the guide towards the project’s successful completion.

The Benefits Of (Paid) Project Evaluations

As we put our proposal writing past behind us and embraced the evaluation process, we noticed a strong number of benefits. The most prominent of those benefits are the following.

• Qualification

  If a client is unwilling or unable to pay for a project evaluation, it can be an indicator that the project isn’t a match. Now, we may not always charge for evaluations (more on that later). We also recognize a deep responsibility on our part to make sure that we have intelligently and carefully explained the process and value of the evaluation. After all that is done, though, you may run into potential clients who just don’t want to pay what you’re charging, and it’s better to find this out right away then after writing a long proposal.

• Attention to Details

  Having the time available to do the research and carefully prepare the recommendations means that we are able to eliminate surprises. While the end result may be a rather large document, the details are well organized and thorough. Those details are valuable to both the client (in making sure they know exactly what they’re getting) and to the development team (in making sure that they know exactly what they’re delivering).

• No Pricing Surprises

  Figuring out all the details and ironing out a complete scope means that we’re able to give a fixed price, without surprises. This gives the client the assurance up front that the price we gave them is the price they’ll pay. In more than a few cases, the time we’ve spent working out the details has eliminated areas of concern and kept our margins focused on profit, not on covering us “just in case.”

• Testing the Waters

  When a potential client says “Yes” to an evaluation, they are making a relatively small commitment — a first step, if you will. Rather than a proposal that prompts them for the down payment to get started on the complete project, the evaluation process gives us time and opportunity to establish a working relationship. In most cases, the process involves a lot of communication which helps the client learn more about how we work, as we learn more about how they work. All this is able to take place without the pressure of a high-budget development project. And by the end of the evaluation, a relationship is formed that plays a major factor in the decision process to move forward.

• Freedom to Dream

  Occasionally, we spend more time on an evaluation than we had initially expected. But knowing how our time is valued has given us the freedom to explore options and make recommendations that we might not have made otherwise. In our experience, the extra time and energy that the context of a paid evaluation provides for a project has consistently brought added value to the project, and contributed to its ultimate success.

The Evaluation Writing Process

Over the years we have refined (and continue to refine) a process that works well for us. As you consider the process, look for the principles behind each step, and if you decide to bring this into your business, look for ways to adapt this process and make it your own.

#1 — Do the Research

The heart of the evaluation process is the research. If it’s a website redesign project, we read through each and every page on the website. We take notes and thoroughly absorb as much content as possible. Our objective is to get to the heart of the project and gain as much of the organization’s perspective as possible.

If it’s a custom programming project, we try to get inside the project’s concept, challenge it, look for flaws in the logic, research relevant technologies, and work to make recommendations that keep the goals of the project in mind.

We spend time with the client by phone, over Skype, via email, and sometimes even in person. As our research uncovers problems or finds solutions, we run them by the client and gather their feedback.

The research process allows us to go deep, and in our experience it has always paid off, giving us a thorough grasp of the project and providing a foundation to make intelligent, expertise-driven recommendations.

#2 — Offer Recommendations

Each project evaluation is different. Depending on the nature of the project we may make recommendations regarding technology, content organization, marketing strategies, or even business processes. The types of recommendations we make have varied greatly from project to project, and are always driven by the context and goals of the project.

When it comes to areas of uncertainty for the client, we work hard to achieve a balance between an absolute recommendation and other options. If the answer is clear to us, we’ll say so and make a single, authoritative recommendation. However, when an answer is less clear, we give the client options to consider (along with our thoughts) on why or why not an option might be a match.

We share our recommendations with the client throughout the evaluation process, and when the final report is given, there are rarely any surprises.

#3 — Prepare the Scope

After we’ve worked through our recommendations, we put together a technical scope. This is typically the longest part of the document. In the case of a Web design project, we go through each page of the website, explaining details for the corresponding elements of that page. The level of detail will vary based on the importance of a particular page.

The scope document is detailed in such a way that the client could take it in-house, or even to another developer, and be able to implement our recommendations.

As the project commences, the scope document will often be referred to, and can function as a checklist for how the project is progressing.

#4 — Prepare the Timeline & Estimate

With the scope complete, calculating the cost and preparing an estimate becomes a relatively straightforward process. While how one calculates the price may vary, all the information is now available to see the project through from start to finish, identifying the challenges, and determining the amount of resources required to meet the project’s objectives.

Note: Prior to the start of the evaluation process, we nearly always give the potential client a “ball park� estimate. So far, that estimate typically ends up being about ten times the cost of the evaluation.

We take the estimating process very seriously, both in the ball park stage and especially here within the context of an evaluation. Once we set a price down we don’t leave room for “oops!� and “gotchas!�, and that means we are extra careful to calculate as accurately as possible, both for our sake and for the sake of the client.

Now, because of the nature of the evaluation, we are often able to research and explore options above and beyond what the client originally brought to our attention. In the case of a Web application, this might be an added feature or a further enhancement added onto a requested feature. Within the scope of the evaluation we carefully research these extras, and when appropriate, present them as optional “add-ons� within the timeline and estimate.

They are truly optional, and while always recommended by us, we leave the decision up to the client (there’s no use wasting research energy on an add-on you wouldn’t fully recommend). In cases where the budget allows for them, they are nearly always accepted. In cases where a tighter budget is involved, the add-ons are typically set aside for future consideration.

When Evaluations Are Appropriate

A project evaluation functions like the blueprints for a new office building. Imagine that I own a successful construction company, and I have a number of world-class office construction projects to my credit. A new client comes to me after seeing some of my work and tells me “I want a building just like that!”. Assuming, of course, that I own the rights to the building, I can say “Sure!” and tell them how much it will cost. Why? The blueprints have already been drawn.

Now, there will be variable factors, such as where they choose to have the building built, and any customizations they may request matter. But in most cases no new blueprints will be needed, and I can proceed with construction without charging them for the plans.

Suppose another client comes to me after seeing one of my buildings and asks me to build an entirely new design for them. A new design calls for new blueprints all of their own, and these must be developed before the project begins. Can you imagine a large-scale construction project without any blueprints?

Web development is the same way. In our experience, evaluations are appropriate when a client comes to us and asks us to take on a project outside of our existing set of “blueprints”. Examples where we’ve found a project evaluation necessary include:

• A redesign of an existing website.
• Developing a new Web application.
• Bringing new technology into an existing project.

Without an evaluation you’re either left to go ahead and do the research on your own (with the weight of the rush, and the risk on your shoulders) or you’re stuck making as educated a guess as possible for the scope of the project. This dangerous guessing in a situation where an evaluation is appropriate can leave you with an estimate that is too high (which can mean losing the project) or even worse, an estimate that is too low.

When Evaluations Are Not Appropriate

When a project is familiar, and doesn’t require an evaluation (or fits within the scope of an existing type of evaluation), we give an informal, direct estimate along with a scope of the work. Small to mid-sized Web design projects typically fall into this category. While the content and design are new, the process isn’t. The key here is the experience and confidence in your abilities (and the abilities of your team) that the work will get done within budget to the expected delight of all parties involved.

Conclusion

Project evaluations up until now haven’t been given much attention. I would suggest it is a simple concept that has been overlooked and passed by amidst the rush of a booming Web development industry. I invite you to implement the process, experience the benefits, and stop the pain of proposal writing.

I thank you, dear reader, for your time in considering this concept. And I thank you in advance for your feedback.

(jvb) (il)

© Jonathan Wold for Smashing Magazine, 2012.

The Web has entered an era of user-centricity. If businesses are to attract new customers and retain existing ones, they must create websites and apps that deliver intuitive and tailored experiences. Whether you run an online retailer or a not-for-profit community website, the user experience is mission critical.

As a consequence, we have seen a real surge in the need for talented user experience (UX) designers who can help turn vision into reality. How do you attract, recruit and retain UX talent in your business?

(Image credit: openwourceway)

If you are anything like us, you’ll be keen to learn from leaders and innovators in our industry, which is why we’ve assembled some luminaries from the UX community to share their insight and experience especially with the Smashing Magazine community.

We’d like to say a big thank you to the experts who made this guide possible. They all have a unique perspective on UX, and their work intersects with it in very different ways.

• Kara Pernice, Nielsen Norman Group
• Peter Merholz, Adaptive Path
• Martin Belam, The Guardian
• Stu Collett and Odette Colyer, Super User Studio and UX Jobs Board
• Tom Wood, Foolproof
• Justin Cooke (@justincooke), Fortune Cookie and chair of BIMA

We asked each of our experts 10 questions. Their perspectives give you a 360° view of how they tackle UX recruitment in their organizations. Jump to the section that grabs your attention, or read through the complete guide for all of their insights.

The Questions

1. How did you learn to hire?
2. Do you hire with your head or your heart?
3. In a sentence, what makes for a great UX designer?
4. How do you advertise UX positions in your company?
5. What one question do you ask every candidate?
6. Do you have a particular method of assessing candidates?
7. Do you hire based on years of experience or achievements and portfolio?
8. How do you retain talent?
9. What kind of culture do you try to create?
10. What skills would you like to see in more UX designers?

1. How Did You Learn To Hire?

Very few people would say they’ve “learned� how to hire, because this would imply that they’ve stopped learning, and of course we all continue to learn every day.

Many of the experts I spoke with continually develop and hone their hiring skills, but their advice hinges on three principles.

Find a Role Model

Tom Wood of Foolproof: “My role model is David Ogilvy. He had a really clear and public view about the qualities he looked for in the people he hired. His quote, ‘If we each hire people smaller than us, we will become a company of dwarfs, but if we each hire those larger than ourselves, we will become a company of giants,’ is a call for everyone in a position to make a point to step up and challenge themselves through the quality of people they hire.�

Martin Belam of The Guardian: “I’ve been on a lot of interview panels through the years and picked up techniques from people such as Mags Hanley, Lorna Leddon and Karen Loasby.�

Learn From the Experiences and Mistakes of Others

Justin Cooke of Fortune Cookie: “Like everything we do at Fortune Cookie, we have never stopped trying to improve our recruitment process. This was achieved by learning from mistakes, through experience and from others particularly asking recruitment agencies and candidates for feedback on how we could be better.�

Find Your Feet

Ultimately, you need to blaze your own hiring trail and go with your instinct. As Kara Pernice of the Nielsen Norman Group emphasizes, “Asking advice from other people who have successfully hired behooves you, but there is nothing like experience.�

Peter Merholz of Adaptive Path says, “I rely a lot on intuition, which has proven mostly successful.�

2. Do You Hire With Your Head Or Your Heart?

Logic and instinct both have their place in the hiring process, and the decision will nearly always be made partly with your head and partly with your heart.

You will likely use your head to determine whether the candidate has the requisite skills, experience and attributes. And then to a certain extent you need to follow your heart and your instinct in deciding whether a candidate is a good fit for your culture.

The experts I spoke with validated this idea, explaining that they initially look at hiring from a rational point of view.

Justin Cooke: “At the first stage we look for the rational, but the ultimate decision has to be based on an emotional connection.�

Peter Merholz sums this up perfectly: “I would say the head is the initial barrier — if I can’t rationalize the hiring decision, then it won’t go anywhere. But after the head makes a decision, the heart plays a part, particularly in thinking about ‘softer’ matters, like personality and cultural fit.â€�

Stu and Odette: “It’s a balance of finding a person with the right attitude and personality, twinned with skills needed to do the actual job.�

Kara Pernice: “Both, but you have to know you can deal well with each other. And I usually get that feeling from my gut rather than my brain.�

Ultimately, the final decision comes from your head because, as Tom Wood explains, “If you make a mistake with hiring in a small or medium-sized business, you can cause real problems for yourself.�

3. In A Sentence, What Makes For A Great UX Designer?

If you don’t know what you are looking for, you will never know when you’ve found it. Nowhere is this philosophy truer than with hiring.

A real appreciation not only of what makes a superb UX designer but of what kind of person you are looking for is essential if you are to recruit successfully.

What makes a great UX designer is, of course, a matter of opinion, but there is a consensus that a UX designer must, in the words of Martin Belam, “make good stuff and make stuff good.� They must have an ability to interpret and empathize with the user, to simplify the process and to execute a design solution.

Peter Merholz: “An ability to take an empathetic view of the user, and to interpret that into a systematic design solution.�

Justin Cooke: “Someone who can make the complex simple, beautiful and ever so slightly fun.�

Stu and Odette: “Someone with the passion and curiosity to constantly learn more about how people interact with digital products.�

Kara Pernice: “Great UX designers have a desire to innovate and gather knowledge about potential users and customers, and the humility to know that their first design iterations will rarely be great.�

Tom Wood: “The willingness to collaborate with both the end user and the business client during the design process.�

4. How Do You Advertise UX Positions In Your Company?

There is a clear shift in the way UX roles are being advertised, in line with the increasingly social nature of the Web. Interestingly, Stu and Odette still succeed in finding candidates through specialist recruitment agencies, despite the perceived decrease in their popularity.

Here’s how our panelists fill their UX vacancies.

Tom Wood: “Our site, amplified by Twitter and LinkedIn activity.�

Kara Pernice: “We have the luxury of having our boss write a newsletter that reaches many UX professionals, so that is our biggest marketing tool when hiring. It works for us because people who read the newsletter have a sense of what we are about.�

Peter Merholz: “We have our ‘Work with us’ page on adaptivepath.com, and then we reach out through various channels to spread the word: Twitter, our blog, LinkedIn, UX industry mailing lists.�

Martin Belam: “We have our own recruitment portal site, and I usually tweet and blog in a personal capacity to help drum up candidates.�

Justin Cooke: “On the Fortune Cookie website, on LinkedIn, on totaljobs.com, on industry websites like Econsultancy and BIMA, at events and conferences, and through our employees, who receive a bounty to anyone they recommend who we hire.�

Stu and Odette: “UX Jobs Board and specialist recruitment consultancies.�

5. What One Question Do You Ask Every Candidate?

One thing that is universally agreed on is that there is no “right� way to interview someone, so I asked this question of our experts to see if we could at least draw out common themes.

Martin Belam asks of candidates, “Can you describe to me a project that when badly wrong. Why did it go wrong, and what did you personally learn from it?�

Failure is a topic that is all too often avoided in interviews, but a question like this helps the interviewer understand how a candidate copes with failure — failure being inevitable in any career. It helps you determine whether they are capable of humility and also to see how they have professionally developed as a result of failure. This seemingly innocent question can tell the interviewer a great deal about the candidate.

Justin Cooke: “What is the most amazing thing you have seen on the Internet this month?�

Justin’s is a great question to ask because it helps you understand if the candidate is as passionate as they say they are. (Do they keep up with the latest trends, or do they just say they do?) It also helps you to see the kinds of things that they get excited about; the question might just reveal whether the individual is a good cultural fit for your team and the kinds of projects you do.

Peter Merholz: “What is the thing that gets you out of bed every day and wanting to do this kind of work?�

As an interviewer, you undoubtedly want to understand the motivations of the person you are speaking with. After all, motivation is the key to a happy, productive workforce.

That being said, if you flat out ask a person what motivates them, they’ll probably lie to you with the usual interview spiel about their satisfaction in doing a good job.

Asking someone what gets them out of bed every morning is a roundabout way of asking the same thing, but you’ll catch the individual on the hop, and they’ll probably give you a more honest answer than had you asked what motivates them.

Finally, Tom Wood always asks people about their ambitions, “to see if they will push themselves — and us.â€� This is a superb question and allows you to determine whether the person has planned their professional life in the near and long term or are just plodding.

6. Do You Have A Particular Method Of Assessing Candidates?

Assessing a candidate’s suitability for a job is certainly one of the most, if not the most, challenging aspects of hiring, so understanding how the best in the business do it is helpful.

Some clearly like to go the practical route and judge a candidate by assigning them a task during or following the interview. Justin Cooke says, “Nothing beats setting a task. The output is always fascinating.�

Kara Pernice allows candidates to do most of the talking and gives them simulations to perform, “such as, give a short presentation and send us the video. This can’t truly demonstrate how they would do, but it’s a start. Sometimes we agree with a candidate to first test the waters by hiring them on a contract basis or as an intern. If we are all happy and still interested in the end, we hire them.�

Peter Merholz, Martin Belam and Stu and Odette feel that the process is fairly simple and that a candidate can be assessed based on their credentials and personality. Peter Merholz says, “It’s pretty straightforward: do they have the practitioner chops (across strategy, research and design), and do they have the right personality and cultural fit?�

Martin Belam adds, “I expect anyone in UX to have a significant online presence, and I’m always surprised if they don’t.�

To anyone reading this who is seeking a career in UX, a strong online presence is definitely a prerequisite.

7. Do You Hire Based On Years Of Experience Or Achievements And Portfolio?

I was surprised by the responses to this question. I assumed the quality of the portfolio would weigh more heavily every time, but that wasn’t the case.

Tom Wood responds, “Of the two, experience is probably the one I favor most, simply because anyone can catch a break on the projects they work on and the results they get (success has a thousand fathers, after all). Because of the emphasis we place on working directly with clients and end users, there’s often no substitute for the life experience that makes you comfortable in the company of these groups.�

However, Stu and Odette says, “The latter. You can get people who have been in the industry 10+ years and still haven’t produced good design work.�

Peter Merholz adds that his company generally favors the portfolio, but “if we’re hiring for a more senior role, where things like client-management skills are crucial (and perhaps even more crucial than super-awesome design chops), then experience definitely is a factor.�

Martin Belam supports this by saying, “I think in any team you need a mix of skills and experience. I enjoy mentoring people and bringing younger people into the profession, so I look more at what I think people will be capable of achieving and how they will go about it, rather than years of experience and qualifications.�

Justin Cooke adopts a completely different approach, saying “Years of experience and portfolios are useful inputs and metrics, but we are more interested in a candidate’s answers to our questions and their response to the task that we set.�

8. How Do You Retain Talent?

To someone outside of the UX community, talent retention might not seem like a critical issue, given the state of the economy and how many people are looking for work. But UX is a fiercely competitive market, with agencies and consultancies vying for the attention of the right UX folks.

The level of attention given to talent retention by the people I spoke with is fascinating. Here are what seem to be the key factors in retaining the best UX designers.

Opportunity

Kara Pernice: “We try to give people opportunities they are interested in.�

Self-Actualization

Tom Wood does it “by thinking every day about what motivates our people and making sure we do everything we can to help them realize their personal goals and ambitions. Beer also helps.�

Autonomy

Peter Merholz: “There is no UX consulting firm that allows the autonomy and freedom that Adaptive Path provides. Also, our commitment to sharing ideas, through writing, speaking and teaching, is unparalleled and attractive to our team.�

Professional Development and World-Class Training

Justin Cooke swears by “never saying no to a training request; employing brilliant leaders; listening to everyone’s ideas and auctioning them to make us a better agency; continually communicating how we are doing; starting at 10:00 am; tracking the market to ensure that our salary and benefits packages are among the best in the industry; and ensuring that we understand everyone’s career goal and mapping out a plan to make it a reality.�

Breathing Room

Stu and Odette: “We’re a pleasure to work with, and we only focus on a set number of projects, so as not to stretch people too far. The quality goes down if you do.�

9. What Kind Of Culture Do You Try To Create?

This question follows on the last one, because culture is obviously central to talent retention, and there are clear crossovers between the answers to the previous question and how this filters down through the culture that these leaders are trying to promote.

“Constellations are more interesting than individual stars.� This is the eloquent way in which Tom Wood describes the team culture he is trying to foster.

Justin Cooke supports the notion of a team culture by adding, “We are aiming to create a passionate team that cares for each other and is 100% committed to improving the digital world to make the real world a better place.�

Kara Pernice focuses more on the individual, describing the culture that she is trying to foster as being more autonomous, with “professionals producing high-quality, rigorous work that improves design for clients and UX professionals.�

10. What Skills Would You Like To See In More UX Designers?

I was most looking forward to hearing the responses to this question, not only for the insight, but also because they will help job seekers hone their skills in the most sought after areas.

The thing many of the experts seem to be looking for is holistic in nature — a well-roundedness more than particular design skills.

Client-Facing Skills

Tom Wood describes the need for more charming UX designers, who are “comfortable thinking in the same room as clients.�

Strategic Thinking

Justin Cooke looks for “a stronger understanding and awareness of the entire customer journey; a desire to improve the entire service rather than just the experience, and brilliant good storytelling.�

Stu and Odette add, “The ability to pragmatically design for digital products, rather than being able to talk solely about UX in general. Our industry is suffering from too many talkers and not enough walkers.�

Research Ability

Martin Belam says, “I wish people would read more widely, and more about some of the traditional design skills.�

Facilitation

According to Peter Merholz (and I tend to agree here), “Facilitation skills are becoming increasingly crucial in our work; being able to coordinate cross-functional teams and get the most and best out of them.�

Summary

UX is a hard skill to teach; no formal credentials are required, and no two career paths or job descriptions are the same. In fact, pinning down exactly what UX is can be difficult. It can mean different things to different people. Some UX design positions require only graphic design skills, others mainly planning and wireframing. Most, however, require a combination of design, planning, negotiation, conflict management, objectivity, leadership and openness. Above all, a good UX professional must have a natural appreciation of the human mind and be open to new attitudes and approaches and to exploring the impact of real people on the commercial environment around them.

Recruiting and hiring great UX professionals can be both challenging and fun. Quite often, the “right� person will be wildly different from the person you initially expected, and skill, judgement and intuition are required to pick them out.

One thing is for sure, though: UX skills are in high demand and short supply. It’s a candidate’s market, and companies need to try now more than ever to attract and retain the best minds in the field if they are to succeed online.

(al)

© Matthew Ogston for Smashing Magazine, 2012.

Over the last 100 years or so advertising has been integrated into every walk of life. Whether you are working on the internet, relaxing at home watching TV or getting the bus or train to the cinema; you cannot avoid being bombarded with advertisements from all angles.

The sheer volume of advertisements that people see can make it tough for advertisers to get their message across. To penetrate this ad blindness companies have come up with lots of interesting ways to make their advertisements funny, entertaining and interactive. At the very least they want to grab your attention so that you remember their brand.

Today we would like to share with you 30 creative advertisements that made people stop and take notice using inventive and entertaining ways.

Hitting the Mark

1. Gillette Fusion Power Zamboni

Gillette promoted the launch of their Fusion razor by converting a Zamboni into a ‘Fusion Ice Machine’. Zambonis are commonly used during breaks in Ice Hockey matches so this creative advertisement would have gotten a lot of exposure.

2. Ikea Home Delivery

A simple idea that creates the illusion of a showroom in the back of a delivery truck. The ad was launched to promote the introduction of free home delivery by Ikea (though fans of the ad turned customer may have been disappointed when the Ikea delivery van arrived and they realised they had to build everything themselves!).

3. Bare Wetsuits

“Stay down longer”. A somewhat freaky advertisement that exaggerates the seal and protective nature of their wet-suits. It’s a good idea that was implemented well.

4. Australian Surfer Sunblock

A cheeky ad from down under that emphasises that the sunblock only protects you from the sun. The pregnant woman ad is part of a fairly tongue-in-cheek campaign, with similar ads showing a drunk man who has been written on while sleeping on the beach and a truck that has been torched.

5. Google Streetview

Google made use of the fact that most bus shelters in the UK are see through by giving passers by a live preview of what their Street View service would look like. They also placed directional arrows on foot paths and cycle lanes.

6. WWF Wildlife Campaign

To promote their ‘Give a hand to wildlife’ campaign, the WWF used body painters to paint hands into endangered species. Beautifully implemented.

7. Shopping Bag Designs

A series of innovative shopping bags that are sure to grab peoples attention. It’s frightening how realistic the ‘Nail Biter’ shopping bag is!

8. Nikon D700

An interactive billboard that people can’t argue is creatively implemented. A red carpet was placed next to the advertisement that led all the way to the Nikon shop. As a person walked by, the cameras in the ad flash to give the impression that they are a celebrity being photographed by the paparazzi.

9. Panasonic Nose Hair Trimmer

In many countries worldwide, electrical wires are connected to buildings via street poles. Panasonic made use of these wires by building their advertisement for nose hair trimmers around them to comic effects.

10. Ballet Classes

A cool ad that shows you don’t have to have a huge budget to be creative with your advertisements. The ballet studio spread the contact information pull tabs out at the bottom of the ad to give the impression of a ballerina dress.

11. iPod Shuffle Campaign

An Apple campaign that showed off the random nature of the iPod shuffle. The series of ads placed the iPod earphones on popular destinations to give the impression of the route the runner had taken.

12. Ford Trees

Ford promoted their dedication to eco-friendliness by stating that ‘The trees blocking this billboard are a problem we don’t want to solve’. A cool way of making the most of an advertisement area most companies wouldn’t want.

13. Oldtimer Restaurant

An Austrian chain of motorway restaurants surrounded tunnels with huge advertisements to promote their ‘all you can eat’ rest stops. I doubt there were any drivers who didn’t take notice of this massive in your face ad campaign.

14. Duracell

For a long time Duracell showed robots, rabbits and other objects being powered by their batteries and outlasting rivals who are using alternatives. This idea transferred well to buses and trucks and no doubt grabbed the attention of a lot of fellow motorists.

15. McDonald’s Coffee

McDonald’s advertised their 2 week free coffee promotion by filling up a bus shelter window full of coffee beans. As the promotion progressed, an appropriate percentage of coffee beans were removed to reflect how much was left in the promotion.

16. Lose Your License And You Are Screwed

Using humor to tackle the subject of facing the consequences of losing your driver’s license, the ad reflects the embarrassment and frustration of taking your date to a high school dance on your bike.

17. Nikon Face Detect

Nikon showed their new face detect feature, which detects up to 52 faces, with a happy go lucky traveller who is unknowingly about to be captured in the wild.

18. Mercedes Blur

Using a motion blurred wall, sidewalk and billboard with 3D models of a fire hydrant, parking sign and mail box; Mercedes emphasised the speed of their 450hp 2012 C-Class Coupe with their ‘Looks fast. Even in park’ campaign.

19. Law & Order

Integrated into the building behind, this advertisement for the TV show Law & Order brings the street light into the ad itself in an eye catching way.

20. Hotwheels Loops

Used in Bogota Colombia, the famous toy car maker Hot Wheels added a ‘loop the loop’ to a bridge above a busy motorway. Another great example of integrating the environment with the advertisement.

21. BMW M3

Using a 50 X 2 light wall in the middle of Hamburg airport, BMW used a headline out of half letters to promote their M3 car. The reflective floor completed the bottom half of the headline.

22. Skydive Elevator

Fitted to the bottom of elevators in multi-storey buildings to give the impression of free falling, this Swiss skydiving company gained a huge amount of media exposure with a limited budget due to the popularity of the advertisement.

23. Tetris Returns

Falling from the heavens, a Tetris block prepares to fit into the city landscape. A creative advertisement that fans of the popular game will surely love.

24. Yellow Pages

Winner of the Cannes Lion advertising award, the dart campaign for Yellow Pages Canada apparently gave their website an 18% increase over the previous year. Talk about hitting the mark.

25. DHL Online Tracking

A digitised cursor was placed on DHL couriers and vans across Beijing to promote their online website. The ad was so successful that it led to a reduction in telephone inquiries and an increase in online tracking counters.

26. Playstation PSP & Renault

A joint advertisement for the Sony Playstation Portable and Renault Scenic. The ad cleverly shows one eye on the road and one eye on the Sony PSP. Drive or Play? This ad seems to comically suggest some can do both.

27. Restaurant Mirador del Alto

An elegant advertisement that promotes a piano restaurant by placing the cutlery to mimic the arrangement of black piano keys.

28. Lays

It would be hard not to notice this advertisement from Lays. All the train passengers who walked through this underground tunnel looked up to see potatoes growing from the roof.

29. Folgers Coffee

Folgers turned a common eyesore in New York into one of the most creative advertisements seen in years. The drain cover was replaced by an image of a coffee cup, giving the impression that the rising steam was heat rising from the coffee.

30. Post It

How do you advertise a product that everyone takes for granted? Easy. By showing you what you would have to do if you didn’t have it.

We hope you’ve enjoyed this list of fun, creative and entertaining print and outside advertisements. Which one was your favourite? Or if you have a favourite that wasn’t featured in this post, use the comments to leave a link to it.

(rb)

Yes, the brand new Smashing Book #3 is coming. The printing press is warming up, the illustrations are finished, and the chapters are being proofread. This third book is the best printed book we’ve produced so far: it is a valuable, cutting-edge, high-quality printed book that any Web designer should have on their bookshelf. This time, we’ve also prepared an extra book 3⅓ that offers even more exclusive content.

We’re releasing two new printed books: the main Smashing Book 3 and Smashing Book 3⅓. Both are available as a print bundle, as eBooks and as a complete print + eBooks Bundle.

Pre-order now and add your name into the printed book: a double-page spread has been reserved to print out all of the names of the pre-sale buyers. We will contact you in March 2012 and ask you for the name you would like to have published within the book. Space is limited, so you’d better hurry up!

What’s In The Smashing Book 3?

Unlike its predecessors, the new Smashing Book #3 has a theme: Redesign. It is a professional guide on how to redesign websites and it also introduces a whole new mindset for progressive Web design. In this ever-changing Web design industry, the book challenges you to think differently about your work and will change the way you design websites forever.

A detailed look at the business and technical side of redesign is followed by a comprehensive overview of advanced HTML5, CSS3 and JavaScript techniques that you can use today. You will get useful advice on innovative UX techniques, learn about the peculiarities of mobile context in Web design and discover appropriate Photoshop techniques. You’ll study a practical hands-on guide to a bulletproof workflow for responsive Web design. Finally, you will also dive deep into emotional design, content strategy and storytelling.

Table of Contents

Gallery of the authors of the Smashing Book #3.

Well-respected professionals have poured their heart and expertise into these contributions. To ensure the quality of the book, every chapter of the book has been thoroughly reviewed by experts including Jon Hicks, Tab Atkins, Paul Irish, Russ Weakley, Peter-Paul Koch, Bryan Rieger, Joshua Porter, Ryan Carson and Elliot Jay Stocks. Please notice that some details (e.g. titles of the chapters, the number of pages, etc.) may slightly change until release date.

A detail of a chapter illustration, designed by Kate McLelland.

Extra Book: Smashing Book #3â…“ — The Extension

Our authors have turned out to be much more productive than we anticipated and have produced more exciting chapters than one book could handle. Adding these chapters to the book would have increased its size and weight — and, hence, shipping cost — substantially.

Not wanting to withhold these chapters, we have decided to release them separately. We are proud to present an extra book, Smashing Book #3â…“ — The Extension, filled with four additional chapters of quick quality reading!

Gallery of the authors of the Smashing Book #3â…“.

About Smashing Book #3â…“

With Web design, we can do much more than inform the audience. The power of storytelling and content strategy is in creating engaging, emotional connections that transcend their platforms. In this book, we will review emerging navigation design patterns and understand how to employ a content strategy — which is an important process, often underestimated and dependent on many factors. A case study of Smashing Magazine’s responsive redesign beautifully illustrates what this approach could look like in practice.

Features Of The Smashing Books 3 + 3â…“

• Two separate printed books.
• 11 + 4 chapters, written by Web design experts.
• Quality flexibound cover (lighter than hardcover, heavier than softcover), with stitched binding and a ribbon page marker.
• Smashing Book #3: approx. 320 pages, 165 × 240 mm (6.5 × 9.5 inches).
• Delivery from Berlin, Germany, via air mail only (3 to 15 working days).
• $5 shipping per delivery (even if you buy both books!).
• Also available as eBooks (PDF, EPUB, Kindle).
• Release scheduled in the last weeks of April 2012.
• Pre-ordering starts today, with up to 30% off!

We’ll soon be releasing two new printed books: the main Smashing Book #3 and Smashing Book #3⅓. Both are available as a print bundle, as eBooks and as a complete print + eBooks Bundle.

Why The Theme Of Redesign?

The reason is simple. In recent years, the Web has changed a lot. The Web designer’s tools now are advanced, and browsers are highly capable. Designers have established clever coding and design techniques, and they are facing new challenges and embracing new technologies. These changes are fundamental and require us to reconsider how we approach Web design. It’s time to rethink and reinvent: it is time to redesign the Web.

But are we all prepared for this? How does responsive design fit into your workflow? What UX and mobile techniques do you follow when designing websites? And if you have a redesign project on the horizon, how do you approach it and work your way through it? This is what the Smashing Book #3 is all about: it explains what you need to know to create effective websites today, and what you need to know to be prepared for the future.

Exclusive Artwork and Design

The Smashing Book series has gotten a rather eye-catching facelift. The well-respected Belgian artist Veerle Pieters has taken on the significant task of putting together an innovative, bold cover design. And the result is bold indeed. Veerle’s styling of Smashing Magazine’s “S� reflects the many aspects that make up a Web designer’s workflow today.

Veerle’s recent sketches for the cover of the Smashing Book #3.

Veerle’s recent sketches for the cover of the Smashing Book #3.

If you have Smashing Books 1 and 2, you’ll know that animals play a distinct role — forming almost a tradition for the series. This time, we have asked the talented young illustrator Kate McLelland to illustrate the introductory pages for all of the chapters. Kate has been impressively creative in her designs; the theme of redesign has obviously shaped the tone of her artwork. Each chapter begins with an elaborate drop cap.

A detail of a chapter illustration, designed by Kate McLelland.

Each illustration employs a different metaphor that relates to the accompanying chapter. Try to see what they all are once you get your hands on the book. Appropriately enough, when strung together, the drop caps spell out “Redesign the Web.� The composite style of the illustrations reflects how so many components have to come together for a successful redesign.

Pre-Order Now And Get Your Name In The Book!

As with the Smashing Book #2, we’ve decided to print the names of our readers right in the pages of the Smashing Book #3. A double-page spread has been reserved to print out all of the names of the pre-sale buyers. We will contact you in March 2012 and ask you for the name you would like to have published within the book. The names will make up the Smashing Magazine logo: ASCII art at its best! Space is limited, so you’d better hurry up!

Please note: the sooner you order your copy, the higher the discount. With a pre-sale purchase, you can save up to 30%:

• Pre-order Smashing Book #3 printed book for $27.90,
• Pre-order Smashing Books #3 and #3â…“ bundle (both printed books) for $37.80,
• Pre-order Smashing Books #3 and #3â…“ eBook bundle (both eBooks) for $13.90,
• Pre-order full Smashing Book #3 and #3â…“ bundle (both printed books + both eBooks) for $49.90.

The books will be sent via air mail, and delivery should take no longer than 3 to 15 working days. Shipping starts in Berlin, Germany, and ends at your front door. If you run into trouble or have questions about your order, please don’t hesitate to contact our customer service or send us a tweet @SmashingSupport — we’d love to help out!

We’re releasing two new printed books: the main Smashing Book 3 and Smashing Book 3⅓. Both are available as a print bundle, as eBooks and as a complete print + eBooks Bundle.

FAQ

Here are answers to some frequently asked questions about the Smashing Books #3 and #3â…“:

Content-Related Questions

• What’s the difference between Smashing Books 1, 2 and 3?
  The first two books covered best practices in modern Web design; although they had similarities, the two books covered different areas of Web design. Smashing Book #3 has a particular theme: redesign. It covers both the redesign process per se as well as cutting-edge approaches to Web design on a broader scale. It focuses on the most recent developments and the current demands of today’s rapidly changing environment. Smashing Book #3 gives professional advice on the what, when and how of responsive and bulletproof Web design, according to the requirements of today’s Web.
• Is Smashing Book #3 a completely new book?
  Yes, all of the content has been written from scratch, and all of the chapters have been written exclusively for this book.
• What’s this extra Smashing Book #3â…“?
  Our authors have turned out to be much more productive than we anticipated, coming up with more exciting chapters than one book could handle. Adding these chapters to the book would have increased the size and weight — and, hence, shipping cost — substantially. Not wanting to withhold these chapters, we have decided to release them separately. We are proud to present the Smashing Book #3â…“ — The Extension, four extra chapters of quick quality reading. Buy it as part of a bundle and save!
• Will the book be available in other languages?
  Maybe, but we have no plans for that yet, so don’t hold your breath.
• Will Smashing Books #3 and #3â…“ be available as eBooks?
  Yes, the books will be available in PDF, EPUB and MobiPocket, and you can pre-order an eBook bundle today.

You can find detailed shipping costs and delivery times in the Smashing Shop.

Purchasing-Related Questions

• What are the costs for shipping to my country?
  The shipping cost for one book or a bundle is $5 — wherever you are in the world. We are paying a share of the shipping costs ourselves to make it possible for anyone to purchase the book. Our prices are transparent: we don’t have any hidden costs, and we won’t confuse you with tricky calculations. What you see is what you pay!
• How long will delivery take to my country?
  All books will be shipped via air mail to keep delivery times as short as possible. You can find the anticipated delivery time for your country in the delivery times overview.
• What payment methods are accepted?
  We accept PayPal, VISA, MasterCard and American Express. We use a secure connection, with 256-bit AES encryption and a green GeoTrust Extended Validation SSL CA certificate.
• Is there a money-back guarantee?
  Yes, absolutely! No risk is involved. Our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back — no ifs, ands or buts about it.
• I can’t pre-order now. Will you inform me when the book is available?
  No problem. Just subscribe to our email newsletter, and we will let you know when the book is published (probably mid to late April 2012)!
• I have a question that is not covered here.
  Please leave a comment below, or get in touch with us via the contact form or @SmashingSupport on Twitter. We would love to help you in any way we can!

We’re releasing two new printed books: the main Smashing Book 3 and Smashing Book 3⅓. Both are available as a print bundle, as eBooks and as a complete print + eBooks Bundle.

© Smashing Editorial Team for Smashing Magazine, 2012.