The Smashing Book – Learning from Experts: Interviews and Insights (part 2 of 4)

• By The Smashing Editorial
• October 5th, 2011
• 0 Comments

← Learning from Experts (1/4)TOCLearning from Experts (3/4) →

Part II: The Design Process

What are your first steps when beginning a project for a client?

Darren Hoyt: In the project kick-off meeting, I try to set the tone by explaining why audience should be the #1 consideration. This immediately reduces the odds that the client will let personal aesthetic whims derail the design process. It also assures the client that I as a designer won’t just be creating a portfolio piece for my own benefit. We’ll both be working together to create an optimal experience for the user.

If the client hasn’t considered his audience, we budget some hours for an “R&D” (Research and Development) phase in which we study the competition, make notes and wireframes and get an overall clearer profile of the type of users we’re designing for.

Some other things to get consensus on during that kick-off meeting:

1. Ideally, the client should provide one point of contact, maximum. That person will understandably want to gather design feedback from co-workers and superiors, but allowing multiple people to call, email feedback and give conflicting opinions should be discouraged.
2. If a system like Basecamp will be used to track milestones, it’s good to do an overview of the project schedule. Even if the dates change, it’s a visual reminder to the client that we’ll be working together to follow a formal schedule.
3. On that note, if there are going to be any vacations or gaps in the design schedule, they should be mentioned early on. I remind the client that building a website is a two-way street that requires both of our ongoing availabilities. Sometimes this will scare a client off, but it’s good to know up front if the client won’t be holding down his end of the bargain.
4. To stay on budget, the mock-up process should be defined. Some clients will want to see three unique versions of the home page, while some will request a single home page mock-up and multiple internal mock-ups. Some projects depend on an estimated price, while some are a fixed price. It all depends on the project, but there shouldn’t be any surprises.
5. Above all, content materials should be delivered before the mock-up phase. Remind the client that the website they are paying top dollar for will suffer greatly if the designer begins the mock-ups without all the right information. Design can quickly become mere decoration.

Jason Santa Maria: I always start by talking to the client about what they’re trying to achieve and, if possible, talking to their customers or users. Every project starts out with research and discovery so that I can make informed decisions.

Chris Coyier: Defining goals is the ideal way to start. It’s so tempting to jump right in and start designing stuff and laying stuff out. You can build a beautiful website jumping right in, but beautiful doesn’t necessarily sell products or inform visitors or build community or accomplish whatever goals the client really wants to achieve.

Mockups for a Smashing Magazine redesign.

The challenge is that clients may not be able to articulate what those goals are very well. As designers, as people with experience in building websites, we need to help them along in figuring out those goals. If you do this and then accomplish and exceed those goals, you will have some seriously happy clients.

What are some of the common challenges you encounter when transforming a rough sketch or prototype into an effective website, and how do you overcome them?

Liam McKay: For me, the biggest challenge is limiting what I do and focusing on what is needed. I don’t struggle with having a lack of ideas; quite the opposite. Sometimes when I’m in the process of prototyping, my mind goes into overdrive, and I think of so many things to include that the design is in danger of being too overpowering. The hard part for me is working out which ideas are actually worthwhile and which ones are me just getting over-excited. The more projects I work on, the more obvious it becomes that working out what is really needed in the sketching process can help keep you focused and allow you to hold back a little on the things that might not be as necessary. That’s not to say you can’t try something new or different from the norm; it’s more a case of building a solid foundation of essential elements and building on top of that.

Jason Santa Maria: The biggest thing I always struggle with is finding ways to bring the spontaneous and fluid nature of my sketches into the polished digital world. The best method I’ve found to combat this is to stay off the computer as long as possible. I keep sketching and honing my ideas, working in progressively more detailed stages and adding in new elements at each step, like color or more refined typography.

Nathan Smith: By far the most challenging aspect of a project is planning the information architecture. It is tempting to jump right in and start doing visual design or cranking out code, but if you do not have a good idea of what you are trying to build, then you will just be engaging in an exercise in futility.

To mitigate problems with ambiguity, I try to first approach the website layout by doing high-level wireframes. I like using OmniGraffle for wireframing. For larger projects, I will also do a taxonomy or mind map of all the categories of information that will go into the website. For mind maps, I like using a free tool called FreeMind. It allows me to quickly connect various nodes with other related topics. After a few minutes of shuffling things around, I usually have a solid grasp of the scope of the IA.

Once I know what I will be building and have a general page layout defined, then I delve into the actual interface design. For that, I have found no application that can rival Adobe Fireworks. It is by far the most versatile visual design tool in my arsenal. While others may prefer Photoshop, I am convinced that Fireworks is far better suited to the task of Web design.

I generally tend to design on a grid. It is for this purpose that I have packaged my most commonly used templates and made them available for download at www.960.gs. Typically, I will begin throwing things around on either a 12- or 16-column grid, to see which ratios work for the content I am presenting. That is not to say that all designs should use a 960 grid, or even a grid at all; it simply gives me a starting point. It is easier to design with a few constraints than to be faced with a scary blank slate.

Chris Spooner: I find the main challenge of converting a sketch into a visual website design is creating and positioning elements with accuracy. The rough sketch does make the job of bringing together a full layout much quicker, but the lines and page elements aren’t in proportion and therefore need to be recreated with accuracy and precision.

The main solution I use to overcome this problem is to base designs on an underlying grid, along with a bunch of margins and rulers in the software application. This helps me align the page elements to pixel perfection, which really brings the rough sketch to life as a solid and structured website design.

Nick La: The most common challenge I experience is making a website cross-browser compatible (especially making it work in Internet Explorer 6). To overcome this problem, I avoid using CSS properties that are not supported by IE6, or I use JavaScript.

Jay Hilgert: When designing a website, even in the earliest stages (in Photoshop), the number one thing I focus on is functionality; specifically, the user interface. I ask myself a series of questions like, “What is the most important information that needs to be readily available to the user?” This way, I don’t get distracted by jumping right into the aesthetics, or the “faceplate” as I like to call it.

I establish an outline of content first, in order of importance, which helps me determine how and where to construct the navigation. (My goal is to have anyone who views the home page be able to know exactly what the website is all about less than a second after landing on the page.)

Once that’s done, I start playing with the look and feel, doing my best to keep in line with the content, purpose and audience of the website. The challenges at this point are making it look good with as little load time as possible, optimizing the images, validating the markup, and getting rock-solid CSS. Testing and debugging are the final challenges, IE being the worst, as usual.

How do I overcome these challenges? Lots of coffee, and music full blast.

How do you ensure that a website truly captures the essence of a business?

Jonathan Snook: This is hard because it’s also about what a business wants its essence to be. Too often, it wants to be just like its competitors. It’s important to understand the company. What are its core values? What market is it trying to attract? What is its current market? Take that information, combine it with any existing branding it may already have established and try to pull it all together. Remember that it’s not about drop-shadows or the latest gimmicks. It’s about creating something that is seamless and invites the user to complete whatever task they’ve set out to complete.

An exemplary business website.

Larissa Meek: Know your objectives before you begin to design.

For example:

• What does the website need to do for the client?
• What does it need to do for the user?
• What does the client want to push most?
• What will the user most likely do?

By having a good handle on both business objectives and user objectives, everything else should fall into place. The hardest part about design is that it is subjective, and everyone likes something different. So create something that you believe in, and be able to back up your design decisions with legitimate reasons. If you know the objectives and work towards meeting them, you will capture the essence of the business.

Nathan Smith: Before I even begin designing anything for a client, I always try to understand the two most important factors. First, who will be the users of the website? Secondly, what tone does the client wish to convey? It is my firm belief that by considering the target audience first and foremost, one can tailor the approach and even help guide the “voice” of the client as they formulate their approach.

As far as what tone to communicate, this depends largely on what makes the client unique. When working with ministries, I try to get a feel for the nuances of their theology and adapt my approach accordingly. For instance, some churches are purposefully edgy, while others are conservative.

Similarly, when working with non-profits, it is important to understand the purpose and vision behind the organization. You will probably want to feature case studies of the people whom they are helping.

When working with businesses, it is good to know who the competitors are and what their core products or services are, in order to highlight what differentiates your client from them.

Dave Shea: Understand the business. Some of my most successful work has been the result of talking to someone who plays a major role at the company and trying to understand their perspective of what the company does and who it serves. Once I get inside their head, it’s easier for me to accept or reject design ideas that I think will or won’t match that understanding.

Paul Boag: At Headscape, we have an entire methodology dedicated to capturing the essence of a business. This process sometimes involves mood boards and reference websites. Other times, it involves more abstract techniques. Two of my favorites are “design objectives” and “website personas.”

Design objectives are similar to business objectives. With business objectives, you normally create a bulleted list of things that you want the website to achieve. With design objectives, your list includes messages and emotions you want to communicate.

Website personas have a lot in common with user personas. A user persona is essentially a fictional biography of a theoretical user that includes details about their lifestyle, job, education and other demographic information. A website persona follows a similar model but asks the question, “If your website was a person, what would that person be like?” Is your website a hip young teenager or a balding middle-aged businessman? These personas help define the essence of a website and give it a voice.

How do you determine which content management system is right for a particular project?

Darren Hoyt: Collaborating closely with the client during the initial project kick-off meeting and conducting a serious audit of their needs make the CMS decision a lot easier. I usually spend the first half of those meetings helping the client focus on big-picture issues like audience and message. In the second half, we work together to nail down a set of features that support the message. With a loose website structure in mind, we begin distinguishing between sections that need static page content and sections that require custom data types, like calendars, news archives and real estate listings.

Inside the WordPress engine.

When the meeting is over, we have a “recipe” of solutions to consider. For small and medium-sized businesses, WordPress plus a few key plug-ins can actually accomplish plenty. Especially in the last couple of years, the documentation has grown, the quantity and quality of the plug-ins have improved and clients love the control panel. Some open-source software takes a while to prove its staying power. At this point, WordPress has enough mainstream traction that clients actually ask for it by name.

If the client is very particular about the input and output of their data but is not comfortable touching any code, ExpressionEngine and Django are also great solutions that are endorsed by top developers. The learning curve can be steep compared to WordPress’, but the level of control is much higher. Developers are able to create an admin environment tailored to the client’s needs, which is invaluable if the client is especially high-maintenance. It’s key to have a flexible control panel that can support any major changes the client may want a year or two down the line.

I also think it’s good practice for developers to occasionally take the pulse of the community that surrounds a CMS. Are top developers endorsing it? Are the forums active? Is the documentation evolving? Are the plug-ins and extensions useful? Are upgrades happening regularly? Do the creators engage the public with status reports and plans for the future? Is public interest in the CMS growing or waning? Obviously, no one can predict the future, but if a CMS rapidly loses popularity and the support and documentation dwindle, it reflects better on you to have done your research and assured the client that he’s getting another, more forward-thinking solution. Just as financial advisers get paid to follow public stocks, Web developers should be in the loop about software they recommend.

Paul Boag: There are two things I look at when selecting a CMS for a client: functionality and support. Most clients require the same core functionality (page creation and management). However, beyond that can be significant differences. You need to look at areas like search, permissions, workflow, asset management and customization. I also pay a lot of attention to the editor included in the CMS. This is what the client spends most of their time with, and many of them are terrible!

The second area you need to look at is support. You need to be sure that the CMS will be supported in the long term, so that the client can get the help they will require. Things to look at here are security (Are patches released regularly?), the development team, documentation, training and community.

Chris Coyier: The ideal answer to this question would be: I first evaluate the exact needs of the project, then test the strongest features of each major CMS against those needs and choose accordingly. Of course, it never works out that cleanly. Sometimes it’s hard to know what the exact needs of a project are until you get further along. Sometimes the client already has ideas about what CMS they want to use. Sometimes legacy stuff is in place that affects your choice.

But most importantly, choosing a CMS isn’t like choosing a new car. With a car, even if you’ve never been in it before, you still know how to drive it. You put the key in, turn it, shift into gear, press the gas, etc. CMS’, perhaps unfortunately, are far more complex and share no such common bonds. So you can’t just pick the “perfect” CMS off the lot and drive it home. There are significant learning curves with CMS’ in learning how to use the back end, designing the front end and doing custom development.

What I actually do first is reach for WordPress. WordPress is the CMS I know best and has worked just fine for 80% of the client websites I’ve worked on. If I can make a website work with WordPress, I will; otherwise I’ll look for something else. And I should say that this is not due to laziness. I’ve built websites in Drupal, ExpressionEngine, Sweetcron, Pinncale Cart, Magento and Cube Cart, and I’ve written a few CMS’ myself. Reaching for what you know best saves time and sanity.

What is your approach to choosing a color scheme?

Collis Ta’eed: When selecting a color scheme for a design, my first stop is the logo and branding that I need to work with. I also like to look through any particular photos or other materials that I must use on the website, because it sometimes makes sense to match the color scheme to these items if they are going to be featured prominently.If nothing external dictates the color scheme, then I often stop by COLOURlovers ² for palette inspiration because it gets me away from falling back on the same old color schemes.

Larissa Meek: Normally, I base a color scheme on a client’s branding guidelines. However, if it is a new project, I find inspiration from books, magazines, illustrations and existing websites. Sometimes this is an organic process in which colors are discovered through design exploration, because textures and usability play a big part in interaction design.

I start with the home page and select a few primary and secondary accent colors that allow for contrast, which is one aspect of making a usable website. Once the overall look and feel is approved, I apply the color scheme to the rest of the website.

Elliot Jay Stocks: I’m not sure I really have a specific approach to choosing a color scheme. It depends on whether it has to tie into an existing brand, whether the client has identified a taste for a particular color or not and whether a certain atmosphere has to be evoked. If I’m stuck, I look around or visit color scheme websites like Kuler from Adobe.

Veerle Pieters: First I see if there is a style guide that defines the colors of the company. If not, I usually start with three colors if it is for a Web design: a dark and a light color and a bright color that contrasts well with the first two. The trick is to keep everything together in a harmonious way. Most of my color schemes, however, are chosen by intuition. They could be from an online source like Adobe Kuler or from a random picture that I extract colors from. In the past, I have also used colors from paint samples for interior design. There isn’t a secret that I can share that works all the time, because I sometimes come up with a color scheme that seems like a good match when seen in little square swatches, but when I apply it to the bigger canvas it really doesn’t work. Experimentation is a big part of the process.

Adobe’s Kuler requires Flash.

Jon Hicks: Being color-blind, I tend to rely on tried and tested schemes that I know work, or I take schemes from anywhere around me: posters, leaflets, photos, nature. Each scheme has a feeling and meaning, and the right one depends on the intended audience. For instance, for ReallyWorried.com’s branding, calm and feminine colors were used (pinks and purples), whereas stimulating colors would have given an entirely wrong feel.

What universal principles of setting type do you follow in every project?

Jason Santa Maria: I just try to focus on the small stuff that’s easy to overlook: legible type sizes, harmonious typeface pairings and proper punctuation.

Khoi Vinh: Only these: make it look good and readable.

Jeff Croft: Every project is different, so it’s hard to say that I do any one thing for every project, but these certainly apply to 95% of the work that I do:

• Establish a baseline grid
• Choose a “scale” of type sizes and stick to it
• Limit myself to one, two or (very rarely) three typefaces
• Establish appropriate leading and measure lengths
• Use appropriate characters, such as proper quote marks and apostrophes
• Be as subtle as possible while still being effective

How do you know when a design is complete?

Wolfgang Bartelme: Ideally, a design is finished when you can’t add or remove elements without making the design less usable or appealing. However, in real life, time and/or budget constraints tend to define when a design is done. And even if you declare a design as being “finished”, new requirements will come up shortly and you will have to adjust or even rethink your design.

Collis Ta’eed: It’s very difficult to know when to stop designing. Ideally I try to take a day or two off after I first have the feeling of being finished. Some time away from a design helps clear my mind so that I can look at it more objectively. More often than not, when I come back and look again I will see many, many flaws and start polishing the design by moving things around slightly, touching up details or even occasionally just starting all over again. The design is complete when I find that making changes actually makes things look worse rather than better.

Jon Hicks: You always reach a point with a design when you know you’re just “tickling it.” With one project, I took a step back for a day or so and then went back to it and started removing all the extra fluff, the tickles, reducing it to only the elements it needed. At that point, I knew it was ready: it had everything it needed to communicate, and no more. However, a design is never complete for me. I always look back on projects and see where they could have been more finished “if only I’d …”

Nick La: To me, a design is never complete. Even after the website is launched, I often find ways to enhance it based on feedback.

Close attention to typography on a portfolio website.

Khoi Vinh: That’s a great question. It’s very hard to know when it’s done. Of course, you look for a state when everything is balanced, in harmony, when every element has its place and behaves in a logical, consistent and yet still somewhat surprising manner. In another sense, too, a design solution for the Web is never really complete. It’s just like a photograph, a snapshot in time, in which most of the elements are in place and orderly, but really what you’re looking at is a moment in time, one state before the next state.

Keith Robinson: Is that a trick question? When it comes to the Web, a design is never really complete. It’s pretty hard to tell when something is ready for the public eye, and I don’t really try to dwell on it too much. I always say that there is no such thing as “perfect” when it comes to design, and that’s especially true on the Web. Go with your gut, launch your designs when you feel good about them and don’t be afraid to make small changes once you’re live.

An (almost) perfect Korean website for kids.

—

1. Colourlovers.com

← Learning from Experts (1/4)TOCLearning from Experts (3/4) →