The design process vs. design-as-product

Wdd Logo.
October 05, 2010
The trouble with the word “template” is that its meaning depends on one’s point of view. Templates can be tickets to instant websites. Many content management systems allow owners to change plug-and-play themes as easily as they change clothes. Inexpensive skins are a Google search away. To others, templates are learning tools. Studying samples of real-world code and style can be more practical than following examples in a book or rereading lecture notes.

design-process-mass-producedThe trouble with the word "template" is that its meaning depends on one's point of view.

To some, a template is a ticket to an instant website. Many content management systems allow owners to change plug-and-play themes as easily as they change clothes, and inexpensive skins are just a Google search away.

To others, templates are learning tools. Studying samples of real-world code and style is more practical for them than following examples in a book or reviewing lecture notes.

Templates can represent independence. Anyone, even someone without basic design or development skills, can choose from hundreds of templates without fear that a "design expert" will question their decision.

Templates can also mean efficiency. They are generic enough to fit most information, and they are reusable. Fill the space with a dash of content and you're done.

Many people I've worked with-designers, managers and clients alike-equate templates with design. To create a design is to build a chair in which the content will sit. To choose a design is to select a vehicle to carry information.

The noun "design" differs from the verb "design": one is a product, the other a process. This thought begs the question: is web design skin deep, or are designers more than purveyors of templates?

intentional design stands out

Chasing Keyboard Shortcuts

Thinking of the process of designing a website as "producing the best template" is the wrong approach. I know from experience.

Not long ago I was hired to design a law firm's website. The business' owners knew what they wanted, more or less, and provided JPG mock-ups. Aware of the tight deadline, the developer and I hammered out a database, a custom CMS and, of course, the HTML template.

Their three-column composition had pale boxes on a paler background. We measured space for ads on the right, worked to fit the search tool on the left, checked spacing in three versions of Explorer and tweaked the drop-shadows under the navigation bar. In short, we fretted over everything except the center column.

As deadline approached, we met to address last-minute problems. One person wasn't satisfied with the arrangement of certain information. Someone suggested a solution and asked me to try it out. A few HTML changes later, we saw the new page. Everyone settled for this compromise, and the website went ahead.

After the launch, the client complimented my design skills and particularly my knowledge of keyboard shortcuts. At first, I didn't recognize the unintended insult, but I'd been cast in the role of "button pusher," and the field of design was button pushing. Worse, it was my fault: by acting on the committee's whim, I put myself in this position. The job paid well, but the result was uninspired and the experience belittling.

The best way to design, and I mean the verb, is to keep on designing, to seek problems. To insist that "less is more" is the same as saying "Don't do something unless the project suffers without it."

template design vs. content design

How Does It Work?

1. Ask questions.

"What do we want to accomplish?" is just the beginning, and "To build a website" is not a sufficient answer.

  • "Who are we trying to help, inform or influence?"
  • "Why should people come to us instead of the competition?"
  • "Who is responsible for what?"
  • "What do we need in order to launch, and what can wait for later?"
  • "How will we maintain this website? Who will make changes, monitor traffic and troubleshoot problems?"
  • "Has this been done before? If so, how can we improve on it? What mistakes can we learn from?"

These don't seem like design questions; however, a thorough understanding of the project will allow you to adopt the right graphic and technological techniques. For example, the choice of CMS will depend on how often the website will need to be updated-maybe a CMS isn't even necessary.

2. Define the parameters.

People are surprised to learn that design thrives on boundaries; problem-solving is a good exercise. Here are some parameters to consider:

  • Attention: "We want to make a lasting impression on people. What is our message? How many different ways can we express that message? What might distract people?"
  • Medium: "We need this to work in desktop browsers and on handheld devices. How can we write the same HTML for both?"
  • Budget: "How much can we do with the money we have?"
  • Timeline: "The project has to launch in x number of days. How can we accomplish all of this by then?"
  • Success: "We need to sell x number of widgets, inform y number of people and acquire z number of new members in the first month. What will persuade people to act?"

Restrictions breed innovation. Writing a website to suit, say, both iPhones and Internet Explorer 6 might require designers to challenge their own understanding of what HTML can do. Restrictions create problems, and to design is to solve them.

3. Deal with the unexpected.

Rarely does reality reflect ideals, so practice problem-solving skills.

  • Technical: "This plug-in we downloaded doesn't do everything we want. Will adapting the code or adapting the goals cause more grief?"
  • Visual: "It looked better in my head than it does on screen. Why am I underwhelmed? How can we better express the attitude we want? Will visitors be unimpressed?"
  • Political: "We wrote this code to accomplish a certain task, and now we're being asked to make it do something else. Are we in a position to say -No', or are the requests feasible?"
  • Time: "This is taking longer than we allowed for."

When design is a process, then using layout, typography, color, line, form, contrast and technology solves the problems.

When Does a Designer Design?

Deciding what a blog should look like is a bad way to start. A blog is a microphone, not a voice; without words to fill its pages, the blog will languish.

No amount of WordPress/Drupal/Blogger/Joomla wizardry will fill an empty hole. Take fonts, for instance: choosing a typeface that looks good is not the same as choosing one with quirks that mimic or reinforce graphic elements of the website.

Downloading a design (the noun) is a shortcut to getting results but not necessarily to getting success. Pages become interchangeable vessels: easily reproducible but indifferent to content.

Design (the verb) is an intimate relationship between content and form. It's more work, but isn't that why people hire professional designers?

Written exclusively for Webdesigner Depot by Ben Gremillion. Ben is a freelance web designer who solves communication problems with better design.

How do you view 'templates' and 'design' after reading this article? Please share your comments below...

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there's something you think we should be talking about let us know @DesignerDepot.

Read Next

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…

The 10 Best Logos of 2023 - Ranked

From vintage aesthetics to innovative new color schemes, we’ve seen a lot of creative logo designs this year. In this…

Exciting New Tools for Designers, February 2024

2024 is well underway and shaping up to be an interesting year. So, to help you keep your focus on working hard and…

The Art of Engineering AI Prompts

In the rapidly evolving world of artificial intelligence, the ability to communicate effectively with AI tools has…

15 Best New Fonts, January 2024

In this month’s roundup of the best new fonts, we find a large number of vintage, retro, and revival typefaces. Is it…