Skip to content
Sense made daily
Ideas. Articles. Resources.
apt lab
enewsletter

Every other month, we’ll send you original articles, new media insights, tips on buying design, and other useful resources.
Preview a sample »

Email:  
March 1, 2010

Print to web, Part 2

Print to web is a two-part series that outlines the basic concepts and skills print designers need to learn to transition into web design. Read Part 1 »

6. Learn the fundamentals of usability

We all know how frustrating and painful it is to be on a website that doesn't behave properly, asks us stupid questions, makes us fill out pointless forms, or throws up barriers to the task we're trying to accomplish. Designing for usability means understanding what people are really trying to do and creating interactions that feel quick, seamless, and that inspire confidence. The easiest way to do this is to honor existing web conventions—for example, don't put the logo at the bottom of the page when everyone expects to find it in the top left.

Good usability is a combination of common sense, empathy, and an understanding of accepted practices and patterns. The more you can leverage what people already know and expect, the smoother their web experience will be. Once again, the web is not a place to indulge your avant-garde artistic ambitions.

The pre-eminent starter text on user experience is Steve Krug's "Don't Make Me Think," which is not only an entertaining read, but will forever change how you think about web design. Also check out Jakob Nielsen's website, Useit.com.

7. Get a clue about how websites are built

Knowing how offset printing works isn't strictly necessary for print design, but it can mean the difference between success and failure when you're designing a complex job with critical requirements. The same holds true for web design. A basic understanding of the system will make design, communication, and troubleshooting a thousand times easier. So here's the whirlwind tour:

There are two sides to a website—client and server. All the files that make up a website reside on the server. When you access a web page, your browser sends a request to the server, which returns HTML code the browser can interpret. If you're visiting a dynamic or database-driven site the server needs to pull data from different sources, combine it with template files, possibly perform calculations or run scripts, then turn it into HTML for the browser. Usually you can tell if a website is making a "call" to the server because it will reload your current page or send you to a new page.

In a simple site, the pages might be built from just HTML, CSS (cascading style sheets), and javascript. This is known as "front-end" code because it determines how the website looks (and to some degree, functions) in the browser. "Back-end" code refers to the programming that handles everything behind the scenes—databases, calculations, form and credit card processing, and so on. It's important to understand the distinction because your front-end developer and your back-end developer are usually two different people. Visual designers are more likely to work directly with front-end developers.

The plethora of acronyms and terminology surrounding web software can be confusing, so here's a quick overview of terms you might have seen or heard:

  • The physical server is a computer running an operating system. Examples: Linux, Windows
  • Server software is what sends web pages to your browser. Examples: Apache, Windows 2000
  • Content management systems store their content in a database. Examples: Microsoft SQL (sometimes pronounced "sequel"), MySQL (sometimes pronounced "my sequel")
  • Content management systems are written in a programming language. Examples: PHP, ASP, ColdFusion
  • There are thousands of different CMS programs. Examples: Blogger, Wordpress, Joomla, Drupal, Expression Engine, Ektron, Sharepoint

8. Learn some basic HTML and CSS

Many people calling themselves web designers today are more properly front-end developers. As a result, print designers get the impression you have to know ten different software platforms to do web design. Untrue. What you do want to learn is some basic HTML and CSS so that you have at least seen how a website gets built and have the ability to make simple changes to the code, if necessary.

Lynda.com offers inexpensive and thorough classes in both languages. I know you hate the idea, but consider this a gesture of good faith and respect for your new métier. Who knows, you may even get to like it.

9. Find a focus

Despite job listings that ask for every technology under the sun, nobody in web design today can do everything. What you're more likely to get is someone who's strong in concepting and usability, but weak in coding. Or a great HTML/CSS/javascript programmer with absolutely no typographic sense. Or a hotshot designer who knows all the latest tricks but has no clue how to talk to clients or stay on budget. Decide what kind of web designer you want to be based on your strengths and interests.

Furthermore, not all web designers are visual designers. User experience (UX), interaction design (IxD), service design (SxD), and information architecture (IA) are overlapping disciplines that might be a more logical fit for your experience, interests, and stage of life. Because they are all new fields, almost everyone currently working in them started somewhere else, so there's high tolerance for diverse and unconventional backgrounds.

If any of this piques your interest, here's where to learn more:

I'm indebted to Bill Barbot of Threespot Media and Tim Arnold of Beaconfire Consulting for their input.

 

[ Kim Bieler wrote this article and she welcomes your comments. ]

Bookmark and Share

2 comments

March 2, 2010 - 2:19pm
Anne C. Kerns, AIGA (not verified) says:

Thanks, Kim, for an informative article that breaks it down in a way I've not seen before. I've been thinking it's time to pull out that HMTM/CSS book I shelved last year...

March 2, 2010 - 2:54pm
Mariann Seriff (not verified) says:

Kudos, Kim. Great article. Clear, concise and a very helpful piece for the design community.

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <h1> <h2> <h3> <h4> <h5> <h6> <p> <b> <span> <div> <img>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.

The web is not a place to indulge your avant-garde artistic ambitions












Many people calling themselves web designers today are more properly front-end developers