The roles and responsibilities of designers—and
clients’ expectations of them—have evolved in parallel
with the media and industries in which they
work. Nowhere is this more evident than in website
design, where the interdependence of design and
technology has rewritten the traditional role of
print-based designers.
Since the early ’90s, many print-based designers
have augmented their skill sets to include web
design. They were pulled—either by choice or by
consequence—by the almost unstoppable momentum
and popularity of this interactive medium. But
regardless of the reason, the technological world of
interactive web design has become a necessity for
many print designers and can’t be ignored.
Clients have come to expect designers’ proficiency
with the web not as a nice-to-have asset, but
rather as a matter of fact. Nowadays, a well-rounded
marketing program is rarely print-only; it must also
include a web presence—if the business hopes to
remain competitive.
Increasingly, designers need to be multidisciplined.
Those who don’t expand their skill sets to
include, at the very least, a basic knowledge of website
design and technology will eventually find themselves
passing up too many opportunities.
The yin and yang of web design
Web design is a perfect marriage of form and function
that originates from two distinct areas of
expertise—the creativity of design, coming from the
heart, and the science of technology, coming from
the head. When the former is sparked within us, the
latter allows us to realize it in material form. In web
design you can’t separate one from the other.
With the advances in web design and technology—
from HTML to CSS to Flash to AJAX—the
line separating aesthetic design and technological
functionality has blurred and become one seamless
whole. What was once mere eye candy, meant solely
to dazzle users’ visual senses, is now a core component
of a website’s functionality.
Designers are expected to have a firm understanding
of both web aesthetics and functionality.
The antiquated approach of creating static mock-ups
in Illustrator or Photoshop for conceptual purposes
and handing them off to a web designer is almost
nonexistent today. You need to understand the whole
before building the pieces in order to deliver a site
that meets the needs of clients and their audiences.
“It’s important to see the connections between
the needs and priorities of different audiences and
how those connections relate to the content on a
website,” says former print designer
Meg Peters
, now an information architect
and web designer working for
CACI International
and the
Library of Congress Web
Services team.
Although the basic principles and foundations
of good design still apply regardless of the medium,
web design does present new challenges—and not
just in learning how to apply these principles to a
digital medium. There are issues of resolution, usability,
navigation, cross browser compatibility—the list
goes on.
“A huge difference to take into account is how
the information is being delivered,” explains Adam
Hay, a San Diego-based designer and owner of
Titan
Strides Creative who not only
transitioned from print to web design, but also operates
a podcast and vodcast on digital design (see “
You
Make Me Wanna Shout!” in the February/March
2007, V12N1, issue of Dynamic Graphics).
“Print-based designs take on a more literal representation
of content delivery,” says Hay. “Web-based
designs must compete with millions of other sites for
the attention of the intended audience.”
A New Mindset
Interactive web design moves beyond an understanding
of how audiences interpret visual content
like product packaging and printed brochures and
moves into the realm of understanding how they
interact with visual content.
“One of the biggest changes from print to web
is how you approach a project and plan the different
stages,” says Hay. “While, at first, a web-based
workflow may be similar to that of a print-based one,
there is definitely a point at which the two roads veer
in their own directions.”
Those designers new to the medium might find
the process of interactive web design a tad unnatural
at first. They not only have to learn to work with a
new medium and understand how audiences interact
with it, but also must understand the tools and software
used to create the end product.
“I remember sitting on the floor amidst stacks of
scrap paper, index cards, tape, pencils and highlighters,
and holding my head,” admits Peters of her initial
forays into designing for the web. “I spent a lot
of time getting my bearings. Not only was I trying
to understand the subject matter and apply it to the
web space, I hadn’t learned ways to diagram and represent
these concepts on paper—or ways to explain
the design of site structures to my clients.”
“Understand how you think and devise a system
for your designs,” advises Peters. “Websites are
more complicated than most printed pieces, but like
good print designs, good web designs are systematic:
There’s an organization scheme or navigation, a grid
or templates, a color palette and chosen fonts.”
Creating a fully functional website requires
designers to consider several interrelated components—
aesthetics, usability, site and content architecture
and search engine optimization (SEO).
- Aesthetics: The visual appeal of a website. Aesthetics contribute to overall user experience and play on users’ sense of imagination and creativity.
- Usability: Usability defines how users interact with a website—including user interface and navigational structure. Usability caters to users’ sense of purpose and productivity.
- Site and content architecture: The inner mechanics and organization of a website. Architecture contributes to ease of maintenance and site manageability, long-term site health and search engine optimization.
- Search engine optimization (SEO): The structuring of a website’s content to improve its ranking in popular search engines such as Google and Yahoo. SEO aids in the marketing and promotion of a website
Going back to basics
What you do, and how you do it, are reflections of
your business, your reputation and your professional
abilities. Going from print to web design doesn’t
happen overnight, so don’t feel the need to rush
into things—it’s not a race. Sometimes it’s good to
take a step back and reacquaint yourself with the
fundamentals of design before stepping into the web
design world.
“I think the biggest factor in retraining myself
for interactive design was to get back to the basic
principles of design,” explains Hay. “I have to think
of what information I am trying to convey to the
audience, what the best way to present that information is and how I can deliver the message to those
who needed to see it.”
Peters—whose first website design was for a
sign language interpreting service, presenting unique
usability issues—found that going “low-fidelity”
helped in her transition from print to web. “I’m a
very visual person, so laying things out in 3D space
helps me form a mental model of a website,” says
Peters. “I found that using lots of color-coded index
cards and Post-It notes, taped or clipped together,
helped me ‘build’ a thorough understanding of a
website and made it easier—and more fun—to keep
track of all the details. This process helps me flesh
out ideas before moving to a more finished stage—
creating diagrams using software.”
In addition to taking courses on web design, there are many things designers can do on their own to ease the transition from print to web:
- Learn by doing, not just reading
- Start small and work your way up
- Surf the web for ideas and see what other designers are doing
- Ask questions and participate in online forums
- Check your ego at the door and learn from who you can
Learn by doing
There are thousands of books, websites and discussion groups that cover both web design mechanics and web design principles. But “book learning” can only teach you so much, and books don’t expose you to those “gotchas” that come from working on a project. Retention rate is also usually significantly lower if you don’t put what you learn into practice. By applying what you learn into real life situations, you’ll get both a practical and conceptual understanding. There’s no better teacher than real world experience.
Start small
Start small and gradually work your way up. It’s perfectly fine to sit shotgun on a big project led by an experienced web designer because it serves as a great learning experience. But you shouldn’t sit around waiting to be the lead in a huge project to get started or you’ll find yourself overwhelmed. Even if you don’t have an immediate project to work on, create one for yourself. It’s better to skin your knee on a small, low profile project than to lose your leg by taking on a huge, high profile project.
Surf … a lot!
Take a look at how other, more experienced web designers, are using the technology and medium. You can even grab and make changes to their code to gain an understanding of the inner mechanics of their site. “Look for examples, good and bad,” advises Peters. “Learn from others who have done—or are trying to do—whatever you're trying to do and you can learn a great deal from their approaches and executions.”
Ask questions and participate in online forums
There will be times when you’re trying to do something that you can’t find in a book or manual. Don’t be afraid to ask more experienced colleagues or post questions on any number of online web design forums. This will allow you to tap into the knowledge of both industry experts as well as those who have gone through the process themselves.
Check your ego at the door
Learn from whom you can, when you can. Don’t think because you’re a 20-year print design veteran that you have nothing to learn from that web design hotshot who just graduated from design school. I entered the web design world from the technology side—as a software developer—and learned a lot about web design from one of my programming interns who happened to come from a web design background.
It’s all part of the job
Print designers shouldn’t view web design as something
they’re dragged into kicking and screaming,
but rather as a natural evolution of their profession.
The web is merely another medium in which to
convey a message. The industry and businesses have
already adapted; it’s important that designers do so
as well. Otherwise, they’ll eventually find themselves
left behind.
Recommended Resources
A List Apart
CoolHomepages
Cool Web Awards
CSSBeauty
CSSVault
CSS Zen Garden
designerstalk
Stylegala
W3Schools
Web Design Forums.net
Web Forumz
Webmaster Talk
