When I’m grown up I want to be a web designer

As a person who originated it’s webdesign-affection in the programmer-world and then switched over to becoming an actual graphics designer I know both sides. I know the problems and misunderstandings, and where they come from. The way of thinking is as different as it can be and probably the biggest challenge someone faces while becoming a web designer: Wrapping your mind around the approaches of design and the implifications of strict semantic structure and coding standards – at the same time.

The start – pretty much the same

All kinds of design should start the same way: Think. Make yourself a plan. What do the costumers/consumers/readers want, what does the client/author want? You are about to archive an information architecture project, so do the implied brainwork. It’s not just a webpage, it’s an important interface to your target group. What’s the target and how to archive it in a way that comforts the costumer? Have a look at this. Have a look at successful sites, similar sites, different sites. Collect ideas. Make a solid concept. Then start the dirty work.

Basics: Web thinking

First of all things depend on your experience in separation of content & design. Everyone who uses InDesign, for example, already knows about this. Basically what you do as a web designer can be compared to setting a document in InDesign only using styles (paragraph styles, character styles, etc.). You try to think as general as possible. It’s not this headline, it’s all headlines sharing this level of importance. Open up one of your multi-page InDesign documents and try to style it with as little styles as possible. Don’t use any inline-styles, only stick to your defined styles palette. That’s what you will have to do as a web designer. Furthermore as a designer you know that grids are a profound tool in information architecture, so get used to use grids. Once again you can start in InDesign: Open that document and set everything on a baseline grid, define columns and follow the grid. Think of how to handle objects that need to or should break the grid. It’s the same deal as in print design, just there’s a huge step between finishing the layout and implementing it. In print we got PDF and solid programs that do the magic of converting a layout into a production-ready file. We don’t have this for the web. WYSIWYG for the web is a lie. Period. Most designers still don’t understand the medium. Forget the old rule about making layouts for the web in photoshop. The medium has evolved over this and the layout software approach is way more appropriate by now. Think in boxes, columns, grids, micro- and macrotypography. We might don’t have single-letter-spacing, nor a library of 2.000 fonts on the web. But as a designer you know that Arial doesn’t necessarily look the same wherever it is used. Font size, rhythms, colors, letter-spacing, whitespace, leading – we got all of it. Don’t limit yourself in the first place. There’s enough variety in web type.

Implementation

Now this is the point where most designers hand over their layouts to coders, or – hopefully not – start their WYSIWYG Editor. That’s fine. But if you want to call yourself a web designer than you have to cross this line. You’ll not get away being a web designer without knowing HTML and CSS. If you don’t want to do this, don’t label yourself what you’re not. That’s as calling yourself a graphics designer whilest all you can do is make clipping paths in photoshop. WYSIWYG doesn’t give you enough control to come up with the designs you’ll want to come up with: Designs that produce reusable parts. As your finished projects increase, your further ones will be accomplished faster – if you know about your HTML & CSS. How flexible you can be is demonstrated by the CSS Zen Garden. Whatever design you see is the same HTML file, just linked with another Style Sheet.

HTML/CSS have nothing to do with programming

Never say programming a web page if what you mean is HTML/CSS coding. It’s wrong. Programmers write applications and use gibberish programming languages you’ll never have to deal with if you don’t want to. They will do all that data handling on the server and those interactive features on the client side, using JavaScript, PHP, ASP, Perl, Phyton, Ruby, whatever. HTML is no programming language. It’s (HyperText) Markup Language. It’s no complicated programming-logic-binary-thinking-stuff, it’s logical and easy to learn. Example:

Here we have a headline

This is a paragraph of text, with a stronger word and an emphasized word, followed by an unordered list:

• List item number one
• List item number two

How does this look like in HTML?

• <h1>Here we have a headline</h1>
  h = headline, 1 = top level. There’s h1 to h6, the higher the number the deeper the level.
• <p>This is a paragraph of text, with a <strong>stronger</strong> word and an <em>emphasized</em> word, followed by an unordered list:</p>
  p = paragraph, strong = a strong word (bold, by default) em = emphasize (italic, by default)
• <ul>
<li>List item number one</li>
<li>List item number two</li>
</ul>
  ul = an unordered list (not numbered, that means)
  li = list item

HTML describes the document and you basically only have to remember some abbreviations. If you are serious about becoming a web designer better start heading towards the right direction: HTML, CSS, handmade. Otherwise you should probably consider doing something else for your profession.