Webvanta Blog: Creating Effective Websites

From PSD to Website: Top 6 Things to Know

From PSD to Website: Top 6 Things to Know Image

If you’re a graphic designer whose background has been mostly in print, there’s a few things we can guess about you:

  • You are much more comfortable and productive in Photoshop than in Dreaweaver or other web tools.
  • You feel overwhelmed by all the technology details that assault you when you need to turn your designs into web sites.
  • More and more, web sites are what your clients are asking for.

If this sounds like you, then finding an effective path to turn your designs into quality web sites could significantly advance your career.

The Good News

The first bit of good news is that you already have the skill that is, arguably, the hardest to develop: great design sense. There’s lots of people who can code up web pages, but relatively few who can make a site look good and function well.

The second bit of good news is that you don’t need to become a technical expert; you just need a good partner, and enough understanding of the technology that you can 1) see the possibilities, and 2) tweak it once it is done.

The ideal web designer is both a great visual designer, and also a crack HTML, CSS, and JavaScript coder. There’s no doubt that such folks can be highly effective. But for most of us, it’s just not who we are, and it’s not the only path.

What You Need to Know

This is not to say that you should live in a Photoshop world, make paintings of web sites in your tool of choice, and toss them over the wall to someone else to turn them into a web sites. This might work, but it won’t generally produce a high-quality site.

If you’re a designer who wants to partner effectively with someone else to construct sites you’ve designed, here are six things that you may need to add to your design skills. You’re probably already strong in some of these areas, and weak in others.

  1. The web design vocabulary. If you want to make sites that are as creative as possible, you can ignore all of the web’s interaction and visual conventions. But if usability and broad appeal are your concerns, you’ll want things to work more or less as people expect, at least in terms of navigation, headers, footers, etc.
  2. How to structure your Photoshop File to facilitate coding. You can make life a lot easier for your coder, and impose some design discipline at the same time, if you base your design on a consistent visual grid. Also, make each visual element a separate layer, and add layers to illustrate hover states and any other dynamic behavior.
  3. The fluid nature of the web. You don’t control the type size, or the screen size, or much of anything else — the user does. All you can do is make suggestions, and try to build the site so it adapts reasonably as these things change. This is a different way of thinking than print design.
  4. What is easily done with JavaScript. You don’t need to know how to code it, but you should add the common interaction techniques to your design vocabulary. Tabs, accordions, carousels, sliders, and faders will take you a long ways.
  5. The importance of information architecture. For sites that extend beyond a few pages, the bulk of the content should be organized in a database, so it is easily maintained, searchable, and reusable. Think of the site as a body of information, with many possible presentations — not as a set of pages. It’s essential to think through how the information should be organized, and how users can access it.
  6. How the site is going to be constructed and maintained. You don’t need to be a technical expert, but you need to know what a content management system is, and what a database can do, so you can choose an effective approach for the site. And you should be comfortable enough with HTML and CSS that you can modify your site, once it is built, you can evolve your design independently.

In the following series of articles, I’ll dive into each of these areas in detail.

Topics: Web Design

Add Your Comments

(not published)