HOT TIP in web design comps

MAKE YOUR MOCK UP IN MARK UP!

3d digital art resource

old habit in designing a web site

I used to think the best place to design a website was in an image editor. I’d create a pixel-perfect PSD filled with generic content, send it off to the client, go through several rounds of revisions, and eventually create the markup.

Does this process sound familiar? You’re not alone. In a non official survey I conducted, close to 90% of respondents said they design in Photoshop before the browser.

abstract markup inspiration

this process is whacked, “dog”

After designing first in photoshop, I tested designing first in the browser using dreamweaver. I’ve come to the conclusion that a website’s design should begin where it’s going to live: in the browser.

Photoshop in conjunction with dreamweaver side by side

Some of you may be wondering, “what’s so bad about using Photoshop for the bulk of my design?” Well, any seasoned designer will tell you that working in Photoshop is akin to working in a minefield: you never know when it’s going to blow up in your face and how it will work with the powerful but whacked out nested divs.

The real issue with using Photoshop for mockups is the expectations you’re setting for a client. When you send the client a static image of the design, you’re not giving them the whole picture — they can’t see how a an elastic grid would function, how the design will look in a variety of browsers, basic interactions like hover effects and/or JavaScript behaviors.

In the past we’ve put up with Photoshop because it was vital to achieving our beloved rounded corners, drop shadows, outer glows, and gradients. However, with the recent adaptation of CSS3 in major browsers, and the slow, joyous death of IE6 and IE7, browsers can render mockups that are just as beautiful as those created in an image editor. With the power of dreamweaver designing both in code and design view you can create a prototype that radiates shiny awesomeness right in the browser.

It is a little bit harder to start, but with practice, the slow start will yield dynamic mockups in already tested browsers.

I started doing the MOMA nav revision by doing the following:

  • first doing quick wireframe sketches
  • quick photoshop mockup
  • finalized all structure in dreamweaver in code and design view simultaneously
  • tested dynamic sites in Safari, Firefox and IE

What I learned today:

Make your mockup using mostly markup.

hot tip of the day



Advertisements
%d bloggers like this: