I’ve been thinking every now and then about how much my work relies on using Photoshop for starting a design. In the past, I was used to a workflow of:

Photoshop design > Revise/Edit > Markup/CSS > Browser bugs > Revise/Edit Photoshop design after more client requests > Change Markup/CSS > Browser bugs > Finished (maybe)

This process is not uncommon in the web and freelance design world. Those last three steps could potentially cycle into what may seem like an infinite revision hell. Revisions that mean returning to Photoshop and perhaps adding something like rounded corners or applying a font change. Both of which, if several layers have been created, can be very time consuming.

What I’ve discovered is that designing in Photoshop is not at all that different than designing with Markup and CSS. You’re still going to use Photoshop for graphic touches and polished png’s, but you’re skipping all the monotonous layer changing and crappy text rendering that doesn’t translate to what the web browsers will look like.

After reading this years’ “24 ways: Make Your Mockup in Markup” article, I am completely convinced ditching Photoshop from the start of the design process is the best (and painless) way to approach modern web design. What I think is the most convincing point made early in the article is a quote by web design guru Jeffrey Zeldman:

Content precedes design. Design in the absence of content is not design, it’s decoration. – Jeffrey Zeldman

If you think about anytime you’ve started a project with little direction from a client and had no content other than the name of the url, what did you end up doing? If you worked the “old” way you probably opened up your sketch pad or Photoshop and started mocking up ideas using dummy content. But what’s going to happen? You’re going to bust out a kickass design that you feel great about, but, we can find from past experience that there exists no “perfect client(s)” who are happy with that first draft mockup. They’ll start asking questions like, “What are these tab rollovers going to look like? How will video posts work? I want to add a cool lightbox window for all image previews, can you mock that up for me? I don’t like your color scheme, do it in lemon chiffon.”

So you revise and fumble with your layers.

Then, the content the client didn’t realize they wanted at the start creeps out. All of a sudden…that first draft you created has turned into a burden of layer changing and pixel pushing. Also, any questions about dynamic content or user interactions are a royal time zapper to mock up as a static .psd. There are always more changes after that first mockup if you haven’t learned your lesson about setting a feature limit, but that’s another topic of discussion.

Really the two points I got out of this article that I find a lot of value in are, this will save you oodles of time, and that by approaching web design in this manner we can help push the newer advancements in xhtml and css forward into the standard that they should be.

In summary, what you have to gain from using the web browser as your design tool:

1. Standards compliant markup for clean accessible code from the start
2. CSS3 properties for those design touches (rounded corners, border colors, text-shadows, @font-face)
3. A client that can see results in their vision and be apart of the design process
4. Less time spent making small revisions in a static environment!

If you’re on the fence about this approach here are a few other juicy articles on this topic that help solidify this approach to web design.

Time to stop showing clients static visuals

Walls come tumbling down presentation by Andy Clarke

How you can use the internet to communicate your brand and designs in one page. Or, just look really ridiculously good looking in html.

As a designer, a web portfolio or a personal blog are two beacons that we can use to showcase the best of what we’ve worked on to stand out in the “Great Sea of Html”. How we construct them can lead to great feelings of personal achievement, or after a week or two of seeing other sites that visually own, you may go back to the drawing board to try to one up yourself and the competition for the umpteenth time.

So then, how as a designer/developer/blogger have you approached the design of your personal inter-space? While browsing my google reader feeds I came across this interesting post about single page sites and their use of the page to showcase the content.

I’m currently in the 12th or 13th stage of re branding my self for freelance work. Every time I see cool posts and sites like this, I reach a new stage of design denial and garbage canning current designs…which leaves me questioning my own design and coding abilities. Being stuck in “design purgatory” has it’s advantages though. Quite often I’ll learn a new skill from a re work or become more aware of the faults I had in previous versions.

Here are some of the highlights of the aforementioned post I picked out. What do you find effective in these designs, and how do you think you could use the same techniques applied to the design work at your own company?

visualelixir.com

legworkstudio.com

webleeddesign.com

sursly.com

I haven’t kept up with a professional looking website or blog for myself in almost 2 years time. Why? I don’t know really. WordPress however, has grown and changed so much since the last time I used it (May ’08?). The result of the changes and the ease of use within the admin portion is so easy there is no reason for me to be lazy anymore with experimenting and building  my skills in using it as a design tool.

I’ve grown so accustomed to agile web development and building quickly that the design of this site doesn’t represent me personally or as a designer. I like the grunge elements this template uses a lot, but I don’t want to remain a copycat for too long. Keep an eye out for a new design to this site sometime (hopefully) soon.