The Design Process

Posted on by
Reply

If you were to ask me to design a bridge, I’d have a lot of questions. Is it going to span the ditch in your front yard or Lake Pontchartrain? Can I use concrete and steel, or does the entire creation need to be constructed with toothpicks? I certainly would stop short of taking your business card at a bar and promising you the Golden Gate before knowing more about who you are and why you think you need it. On the other hand, if you commissioned me to create a sculpture for your garden, I’d probably feel a lot more comfortable aiming to create a unique and artistic piece.

The process of designing a website falls somewhere between bridge building and sculpture. Yes, we want to create an individual site that’s aesthetically pleasing, but our highest priority should be to meet the needs of our client. These needs may be lofty and elaborate, or they might just be about making information available. If we fail to listen carefully, though, the entire project will come falling down, along with our reputation. The technical details of developing, hosting, and maintaining a website or application can be, well, technical. The process of creating a design comp, however, can be boiled down to just three key tasks: discovery, exploration, and implementation.

What’s a Comp? — The word comp is an abbreviation of the phrase “comprehensive dummy,” a term that comes from the print design world. It’s a complete simulation of a printed layout that’s created before the layout goes to press. In translating this term to web design, a comp is an image of a layout that’s created before we begin to prototype the design in HTML. Think of it as a mock-​​up.

Discovery

The discovery component of the design process is about meeting the clients and learning what they do. This may feel a little undesign-​​like, but gathering information about who your clients are and how they run their business is vital in coming up with an appropriate and effective design.

Before you schedule your first meeting with a client, spend some time researching their business. If they’ve asked you to design a website, they may currently be without one, but google them anyway. If you’re unable to find any information about their business specifically, try to learn as much as you can about their industry before the first meeting. Whenever possible, the first meeting with a client should be conducted in person. Sometimes, distance will dictate that the meeting has to occur over the phone; but if the client is in town, schedule a time to meet face-​​to-​​face.

Keep in mind that this meeting is less about impressing the client, selling yourself, or selling a website than about communication, and establishing just what it is the client wants. Try to listen more than you speak, and bring a pad of paper on which you can make notes. If you bring a laptop or tablet with you to talk about website examples, limit the time spent using it. Computers have screens, and people tend to stare at them; hence, if the client isn’t staring at the screen the whole time, you will be as you write your notes. If you must drag some technology into the meeting, use an app like iTalk Recorder for iPhone or Voice Recorder for Android devices to record your conversation — with the client’s permission, of course. In my experience, though, a pad of paper is less threatening and far less distracting to the often not-​​so-​​tech-​​savvy client.

Oh, and remember: client meetings don’t have to take place in an office. Even when I worked for a company in a big office, I had some of my most productive client meetings at a café or over lunch. The feasibility of this approach depends on the client. If your contact seems to be more the formal business type, don’t suggest it; in many cases, though, it’s a good way to make a business meeting more personal.

Here are a few of the questions I like to ask in initial client meetings, even if I’ve already established the answer myself via a search engine:

  • What does the company do?
  • What is your role in the company?
  • Does the company have an existing logo or brand? What is your goal in developing a website?
  • What information do you wish to provide online?
  • Who comprises your target audience? Do its members share any common demographics, like age, sex, or a physical location?
  • Who are your competitors and do they have websites?
  • Do you have examples of websites you like or dislike?
  • What kind of timeline do you have for the project and what is the budget?

If the project is to redesign an existing website, I also like to ask:

  • What are your visitors usually looking for when they come to your site?
  • What are the problems with your current design?
  • What do you hope to achieve with a redesign?
  • Are there any elements of the current site that you want to keep?
  • How do you think your visitors will react to a new site design?

Sometimes I start off with more questions than those listed here. Use your imagination and try to come up with some creative queries that will really give you more insight into the client’s organization. If you’re a programmer, avoid the tech jargon. If you’re a designer, avoid talking specifically about design. Sure, that may be all you’re thinking about, but semantic markup, fluid and fixed layouts, and color schemes will likely mean very little to the client. Worse still, these types of conversations can bring misguided design opinions your way before you have a chance to start thinking about the design yourself.

Exploration

The next stage of the design process is to take the information you’ve learned from the client back to your laboratory for analysis, dissection, and experimentation. You want to gain a grasp on all the information, products, and services they have to offer, and play around with how these should be arranged. Put yourself in the shoes of the website visitors and ask yourself what these people are looking for. If you’re thinking about buying a product, what do you need to know before you buy? If you’re signing up for a service, where would you learn about the different offerings and which level of service you need? What is the clearest title possible for page x, and how many steps does it take to reach page y?

In the world of web design, this is the beginning of a process known asinformation architecture, or IA for short. For expansive websites and complex web applications, information architecture is a career unto itself, but the guiding principles of this field can provide a solid foundation for even the smallest websites. For the exploration stage of our process, we want to focus on organizing the content and flow of the website into a structure we can design around.

Two of the most essential tools for this task are scrap paper (or a whiteboard if you have one) and a big pad of sticky notes. Make a list of all the bits and pieces of the website and start arranging them into groups and subgroups. These are likely to move around quite a bit, and that’s where the sticky notes come in handy. If you make a note for every section, subsection, and page of the site, you can arrange them on a wall in the order they’ll appear in your site’s navigation. You’ll want to avoid overwhelming the visitors with too many options, but you also don’t want to bury information too deeply within the site; that is, too many clicks away from the home page. There are no hard-​​and-​​fast rules for this activity; just make the information as obvious and as easy to reach as possible.

Implementation

Now that we’ve thought through how we want to organize the information we’re working with, the implementation step of our design process begins with creating a layout. Regardless of the project, try to avoid being caught up in the technology associated with building websites — at least at first. At this point, it’s unimportant whether the site is going to comprise straight HTML, a template for a content management system, or a Ruby on Rails application; the bottom line is that we have an interface to design and a blank sheet of paper. “Paper?” That’s right, paper. Did you really think I was going to let you go back to your precious computer already? No way. Here’s why: it’s easy to lose focus on the design if you start thinking about the layout in front of a computer. If you start out on paper, you can ignore the technical limitations of browsers and CSS, and focus on how you want the final product to look. Now you might think that all good designers carry around fancy hard-​​bound sketchbooks in which they use expensive markers and paintbrushes to design Da Vinci-​​esque renderings of potential web page layouts. For my part, I use a 79-​​cent spiral-​​bound notebook and any writing instrument I can find on my desk that still works.

A photo of a set of web design layout sketches from webdesign-sketchbook.com.
Fig. 1, One of many sketchbooks available for layout sketching (this one is from webdesign​-sketchbook​.com). Plain paper works perfectly fine too.

I start out by sketching a few possible layouts. After I’ve produced a few, I decide on one I like, jump into Photoshop, and use the rectangle tool to block out the areas I’ve marked down on my paper. Once I’ve defined my layout, I experiment with foreground and background colors until I have a solid color scheme. I continue twiddling the Photoshop knobs and pushing around pixels until, finally, magically, I have a comp to show the client.

Simple, right? Okay, perhaps I skipped a few steps in that brief description. Honestly, though, when people ask me how I do what I do, they usually receive a similar explanation. The truth is that there are bundles of now-​​subconscious information from my past experience and those old college design and art classes that have helped me to define my own design process.

Learning how to design is like learning how to program. Some people have a bit of a knack for it, but anyone can learn. Just as there’s good code and ugly code, there is good design and ugly design. Learning some of the principles and conventions associated with design will help you to understand the difference between the good, the bad, and the ugly, moving you towards establishing your own design process.

The Principles of Beautiful Web Design

This article is from Jason Beaird’s The Principles of Beautiful Web Design book(the second edition of which is out now). This is in fact the start of the first chapter, which we’ll continue shortly as it examines layout and composition.

If color is your thing be sure to check out the existing digitization of the color chapter here on Design Festival.

By 

Creating a Personal Brand: Too Late! You Already Have One

Posted on by
Reply

By  | August 2, 2011 | Web Pro Business

There was a particular manager at the company whose name I’d heard several times, but I had yet to meet. Despite that, I felt like I knew him well, because, whenever his name came up in conversation, the typical reaction I heard was, “He’s a real a$$*#%! h@#!.” After about the fifth time hearing that description, I had begun to develop a very distinct impression about him. Like it or not, he had been branded.

When we think about commercial brands, we tend to think of a name, logo, or slogan … anything that is used to identify and distinguish a specific product, service, or business. But on a more basic level, a brand is an identification mark … like when a rancher or farmer uses a branding iron to mark an animal to indicate ownership. A mark can also be a symbol of disgrace or infamy, as in the Old Testament when “… the Lord set a mark upon Cain” after he killed his brother, Abel. This type of mark is used to stigmatize, condemn, or brand as disgraceful, as in the case of the a$$*#%! h@#! manager.

So a brand is a distinctive identity associated with the product, service, or organization … or in the case of the freelancer—with you. Most companies think their brand is centered around their product or service. But brands are more about the promises you deliver than the products you sell. The promise of value (and the delivery on that promise) is at the heart of it. So true branding is about selling a promise of value.

Making a promise is serious business, and, as in personal life, making too many promises, or changing them frequently, raises uncertainty in the people to whom the promises are made. Making and keeping a promise, and keeping it consistently, can be a powerful source of competitive advantage.¹

Companies can say whatever they want the buying public to believe about their organization, but it’s what they do that will be broadcast, announced, discussed, and judged in the forum of public opinion known as the Internet. Today, consumers are empowered to gather their own information and to form their ownopinions and beliefs about your company and its products or services. Yet, many larger organizations remain in denial—unaware that what they think the buying public believes about them isn’t at all what the buying public actually believes.

Want to know what your real brand is? It’s whatever word your client uses to complete the following sentence:

“Oh, [INSERT YOUR NAME HERE] … that’s the person/company who _____________________.”

What would your clients say?

I once sold for a company with an over-zealous telemarketing team. A common response I heard from homeowners after I identified myself was, “Oh … you’re the company who’s constantly calling me and won’t leave me alone.”

Remember how I said that a brand can also be a symbol of disgrace or infamy?

They say marketing is a lot like trying to read the label from inside of the bottle. It’s difficult to know what our clients truly find valuable about doing business with us, and most companies seem afraid to do the one thing it takes to find out. The owners of a small restaurant in Cherryvale, Kansas, always thought their restaurant was unique because it was “the nicest restaurant in town.” But, by surveying their customers, they discovered otherwise:

We were surprised to learn that, instead of being the “nicest” restaurant in our small town, it was known as the “birthday” and “anniversary” place. Why? Because it was the nicest place in town. So now we market it that way, always collecting data from our customers as to when their birthdays and anniversaries are, and sending them cards for a free piece of pie or box of candy when they dine here for their occasion.

As I said earlier, your brand is closely associated with the value you provide to your customers. By simplyasking their customers, the owners of this small-town restaurant discovered where their value truly lie—and were able to adjust their marketing message to match it. Determining what your customer values and then delivering on that value is what true branding is all about … regardless of whether it’s a professional or a personal brand.

Self-promotion: Do You Need a New Approach?

Posted on by
Reply

By  | August 2, 2011 | Web Pro Business

Recently, a freelancing friend of mine found himself out of work. He’d been working on contract with one major client, and that contract was cut off. When I spoke to him, he wasn’t sure where to look for work.

He’d spent months out of work, trying online freelance marketplaces, and mailing lists for projects. He didn’t want to get a full-time job, and wasn’t sure where else to look. I told him he should update his website and contact his past clients, but he wasn’t keen. His past clients had moved on, he said. He was really bad at email.

I said I’d help him, and we started work on his site. Days after he published it, he had a call from a multinational tech company to ask about the kinds of project he was interested in. Last week, we finally emailed his past clients. Within 12 hours, he had a string of jobs lined up.

I’m not exaggerating here. It really was that easy.

How much sooner could he have landed work if he’d been willing to try what were, to him, less appealing promotional avenues?

And what about you? Are you missing out on great projects because certain types of promotion don’t appeal to you?

Beyond your comfort zone

Many freelancers go out on their own because they want more varied work, more experimental projects, and more thrills.

But when it comes to promotion, the lower the risk of embarrassment or discomfort, the better. Or so it seems for many of us.

There will always be promotional methods that you loathe the thought of. But what about those that are just a bit difficult? Find a way to overcome your discomfort and, like my friend, you might tap into a whole new pool of opportunities.

To start, make a list of all the promotional methods you don’t hate — but don’t use. Then choose one or two, and do what it takes to make them happen.

Put some time aside in your calendar to work out how you’ll put that method into practice. If you’re not sure where to start, do what my friend did and ask friends or contacts in the industry for their advice. Once you have a plan, again schedule some time to implement it.

The power of experimentation

Call this an experiment if you like. You don’t have to commit yourself to the idea, or its success. You can simply test it out and see how it works.

That may sound silly, but many freelancers I know avoid certain promotions because they don’t want to be “the kind of freelancer who…” The kind of freelancer who’s good at networking, for example. The kind of freelancer who does public speaking. The kind of freelancer who beats their own drum through social media. The kind of freelancer who hassles past clients with spammy emails.

Fine, don’t be that kind of freelancer. Just run a small experiment and see what happens. If it doesn’t work, you can forget about it. If it does, great. That doesn’t mean you have to repeat it in future if you don’t want to. Although I have the feeling that if it does work, you’ll be more willing to use it again the next time you need work.

Have you ever stepped outside your promotional comfort zone? Did it work for you? Let us know in the comments.