Web Site Designers: HTML Auteurs

Posted on
Share on Google+Share on LinkedInShare on FacebookShare on RedditTweet about this on TwitterEmail this to someone

Web site design, as careers go, is relatively young. The market for Web design skills is roughly 10 to 15 years old. So a traditional path for learning how to do it can be difficult to identify.

 

“The Web field just got out of the Model T stage,” said James Stanger, Prosoft Learning chief certification architect. “I think we might be out of that now and into the Model A stage.”

 

Today’s Web site designers tend to be self-taught. More often than not, they’re people who graduated from college with a degree not directly related to Web design, and then built Web design skills to become involved in an explosive growth market.

 

“I call them ‘retreads,’” Stanger said. “They got out of college and asked, ‘What do I do?’”

 

Chris Eichenseer found himself in such a situation in the mid-1990s after graduating from the University of Illinois at Urbana-Champaign with a degree in fine art photography.

 

“It led me initially to a lot of crappy jobs as a commercial assistant for professional photographers,” Eichenseer said. “That was about all I could do professionally.”

 

So Eichenseer bought a Mac.

 

“I had never really used a computer before. I didn’t know what I was doing,” he said. “But I had this mission to do something else with my fine art degree, learn something creative and be respected on the job.”

 

What Needs to be Learned
Eichenseer taught himself to use HTML and Photoshop, using reference books. Before long, he was hired at Design Kitchen, a Chicago-based Web, print and consumer packaging graphic design firm. After two years there, Eichenseer and a friend quit their jobs to found their own Web design firm, Some Odd Pilot, in 1999, during the height of the dot-com boom.

 

The firm has been enormously successful, taking on projects through advertising agencies for big-name companies such as British Petroleum (BP) and Coca-Cola, as well as designing Web sites for a long and growing list of clients.

 

“The work comes from every discipline — everything from financial companies to consumer product companies to music companies to magazines,” Eichenseer said. “Every pocket has an essential Web need.”

 

The skills to meet that need are many, with some proving more essential than others. Eichenseer points to mastery of Photoshop, along with an understanding of how typography is exercisable within Photoshop, as the top technical skill for a Web site designer.

 

“I lay out Web sites precisely in Photoshop — from top to bottom, every single section and all the main templates — with font sizes, line heights, widths all exact. That’s crucial,” Eichenseer said. “I’ve seen people try to circumvent that and make a couple nice graphics, then hop in Dreamweaver and type some stuff in and try to style it as they go. That’s just not going to work out. I did it myself when I was first starting out. It leaves all your aesthetic choices to be decided in an environment that’s completely inappropriate.”

 

It’s an opinion shared by John Drauss, a freelance Web site developer and staff Web designer for a Michigan-based news site. Drauss is another one of what Stanger terms “retreads” — he graduated from Eastern Michigan University in 2001 with a bachelor’s degree in English and a minor in philosophy.

 

From there he moved into hourly, low-paying jobs in retail. In 2004, he began downloading and learning programs such as Photoshop and Adobe Illustrator, as well as developing strong HTML skills. Five months later, he was working professionally in Web site design.

 

Drauss agrees that site design should start in Photoshop.

 

“You could do the design work in Illustrator, but it would be a detriment because it’s a vector-based drawing program,” he said.

 

Drauss explained there are two kinds of graphics: raster (or bitmap) and vector. Raster graphics are produced in files such as JPEG and GIF and are made up of pixels. Vector graphics are produced in programs such as Adobe Illustrator or Flash, where the art is created using mathematically defined curves.

 

“The biggest difference that a layman would notice is that, if you zoom in on a raster graphic, say a JPEG, it will get more and more distorted. If you zoom in on a vector graphic, the edges will stay crisp because they’re not determined by pixels,” he said. “But the end result is 99 percent identical.”

 

Meanwhile, Drauss pointed out, the process of laying out graphics and exporting them for Web use is much easier in Photoshop.

 

“In Photoshop, you’re there to make a pretty picture, and it sinks in a lot more because the program is more patient for changes,” Eichenseer said. “You can move everything around, and you’re not locked into an HTML layout. That’s essential, and that’s one of the biggest differences I see between good work and mediocre work.”

 

Another pitfall of Web design that Eichenseer identified is overuse of Flash.

 

“Flash really can help. But for most people, it hurts more because they do too much in it, or they rely on it too much, unnecessarily so,” he said.

 

Where the Degree Comes In
Going beyond the technical skills needed for Web design, there are nontechnical skills that can strongly determine the degree of success for Web designers. For many Web people, this might be where their formal training finally comes into play.

 

“You generally need a good design sense, like color theory, composition,” Drauss said. “It’s important to let things breathe. You have to realize the value of simplicity.”

 

He admitted, for him, this understanding came from trial and error.

 

“I do have an artistic background, but when I first started making Web pages, I’d make common errors that I didn’t recognize, like putting things too close together or just general design errors that had to be learned by looking at other Web sites, reading books about things like grid systems and familiarizing myself with general theory,” he said.

 

Coming from a background in fine art photography, Eichenseer naturally places heavy emphasis on composition, as well.

 

“When you have a good eye for composition, you can really set up a Web site to look good,” he said.

 

Eichenseer also said a good Web page should include a variety of elements.

 

“Large objects, medium objects, teeny objects, use of color, making a zigzag across the page,” he said. “All these types of things come into play.”

 

This understanding of composition significantly assisted Eichenseer in what’s been one of Some Odd Pilot’s greatest success stories — the redesign of popular music-based Web site Pitchfork Media.

 

In late 2004, Pitchfork contacted Some Odd Pilot to commission a site redesign. Eichenseer worked up a design in about a week.

 

“I hammered out one design, and they really liked it, which happens about half the time,” he said. “They were easy to please, but I also hit the nail right on the head.”

 

The design Eichenseer came up with makes the Pitchfork site aesthetically appealing and eminently readable — no easy feat, considering many people complain they hate to read online.

 

“I attribute that mostly to the painstaking layout in Photoshop, where there’s a lot of time spent on the details of font sizes and choices,” he said. “There are ways to lay out type that you do not want to read, and there are ways to lay out type that invites you to read it. It’s a couple of different things. What font you use, the size of the font, the height of the line spacing, the width of the text box that the content is flowing into. If a page is too wide, your eye can’t follow across and then travel down to the next one.”

 

Eichenseer’s basic design was implemented quickly at Pitchfork. Then, later in 2005, he moved onto redesigning the site’s information architecture. The company wanted to archive all its content in a way that made

Share on Google+Share on LinkedInShare on FacebookShare on RedditTweet about this on TwitterEmail this to someone
cmadmin

ABOUT THE AUTHOR

Posted in Archive|

Comment:

Leave a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>