This article really sells the advantages of designing in the browser. You could probably hear my sighs of changing things multiple times in a Photoshop mockup!

It feels like creating sites would be so much faster (and rewarding, after all revisions are so easy). I would take this approach all the time on personal projects, but I may choose the clients carefully when attempting this method in the real world.

Feels like a great conclusion to another fab year of 24 ways. Thanks for a hoot of an article Meagan!

Well said. I think we are finally seeing the majority mindset shift to this thinking and for the better I say.

It might be a little extra work up front doing a html mockup, but the benefits from there on outway the initial work.

This really is the way forward.

Look how the 24ways articles all seem to lead off each other.

I’m glad I’m not the only one who goes straight to markup. I thought I’ve may of been foolish to do it that way seeming as so many people work straight on Photoshop, but after trying it I found it a huge pain in the ass.

The advantage I find with using an image editor first is prototyping the design past something of a wireframe to show the client/boss what is going to be achieved. But really all my sites will start in code.

I must say that a long time since I read an article so good!

The last two sites I’ve developed from the markup, and really ended up liking to do that anyway, but still had to go back to Photoshop to “enhance” the layout, which ended up slowing me down a little.

About the mockups, I rarely show something to the client before it has finished, and always the changes that had to do were few, nothing that gave me a headache (yeah, I think I’m a lucky boy).

Brilliant article Meagan.

Maybe it’s because i’m one of the younger generation of web designers, or maybe it’s because i’m not a graphic designer by nature, but i’ve always produced mockups for clients and assignments in the browser. However, i was quickly taught by my tutors that this was wrong, and too basic.

It’s good to see someone bringing the focus back to the markup and the fact that we’re designing for an interactive medium rather than a still image format. In my experience, designs that are produced in photoshop breed complicated and non-semantic markup in order to maintain the visuals. But why should we sacrifice accessibility when we can have effects like drop shadow and rounded corners with a few lines of CSS rather than silly extra divs.

An excellent top off to this years 24 ways, I will no doubt be spending the next 24 weeks trying to absorb all the information from this year though.

I agree whole heartedly. Especially with the CSS frameworks that exist (or ones we may have crafted ourselves), this is the way to go. You’re designing for the web, mock up using a tool that renders for the web.

@Kevin Cannon- you’re comment makes it sound like you think advanced imaging is the only way to innovate with design, but There is a lot you can do with CSS, Javascript, and supplementary images. I strongly suggest you read Handcrafted CSS- it’s showing me a lot of cool CSS3 tricks I didn’t know about or haven’t really seen applied.

I can’t think of any situation where accomplishing the project this way would be a bad idea. I don’t spend more then a percentage point of my time invested in a project in photoshop, especially with the current browsers render things. I just want to echo an amen.

Fantastic – this answers so many of the questions posed in @malarkey’s article from yesterday. Will be testing this in our web process at my studio immediately.

An excellent, well-written and very forward thinking article.

With the major browsers starting to offer support for all the design niceties in CSS3 I feel that the visual design and HTML prototyping elements of projects are starting to converge. The tools exist to quickly and easily produce design elements such as transparency, custom fonts, shading using code.

For most of our projects, I agree that thinking about content, then moving to HTML as quickly as possible tends to streamline the process. You have your content in front of you and can quickly and easily tweak, change and experiment with the visual aspects.

I’d perhaps steer away from this process if I were developing a more app-centric piece – where you really need to think about user interaction and complex UI elements. In this case, I think that producing wireframes or comps in traditional graphics packages tends to help – allowing you to visualize the flow without investing too much up-front time coding/designing.

The other thing that worries me a bit is as you pointed out, the Internet Explorer factor. Its all too easy to forget that IE users often comprise around two thirds of your site traffic. I tend to use a combination of JavaScript/CSS workarounds for things like transparency and borders to at least provide a somewhat pretty experience for those users. Its worth considering your userbase and how much of the original design is preserved in older browsers – especially if those users make up a good chunk of your revenue/conversions.

Excellent Article. I came to this workflow about 7 or 8 years ago and haven’t looked back since.

I think a lot of the reason for the inevitable “this is mad”, “Photoshop is faster” comments is the required combination of skills.

Some designers aren’t comfortable with code but like to design for the web, and some front-end developers wouldn’t know a ampersand from their elbow. And then you have all those in between.

If you fall at either end of the spectrum you use PSDs as your communication tool between the ‘designer’ and the ‘code monkey’. And neither of you have to learn the full part of your job.

I’m inclined to say (slightly flippantly) that fear of code could be the reason people cling to Photoshop? Or the inertia of using a tool that feels comfortable and ‘fast’? Mouse as opposed to keyboard? An aversion to learning something new?

I could even suggest that to be a good web designer you do have to know both the pretty and the gritty side of building sites.

If you are good at both, It simply is faster because you don’t need to recode your content, it’s a quantum leap in speed once you’re already working on the final product.

Of course the step Andy Clarke and Meagan have both left out is the fastest prototyping step: sketching on paper, I work out layouts/concepts roughly on paper after establishing the base HTML content then go straight to code.

One thing that can’t be disputed is that if you’re designing in the browser, the need for a crazy expensive image editor disappears, as you can use Pixelmator or Acorn: meaning a much cheaper development environment!

Thanks for this awesome article, on the train (where all great thoughts are really had) I was churning out some work where I laid out from basic to final design a progressive enhancement layout, without the need for any photoshop. And then get home to find this beauty sat here.

Thanks :D

This is a great article. I just recently migrated into photoshop from illustrator so I could get more precision with my design. I cannot count the number of sites I have designed and stopped about half way to finish it up via code. I generally will design out the majority of the site in PS or AI but it always becomes so painful to mock up a whole site in either program. I was originally drawn to Illustrator purely for the fact that I could easily duplicate my art boards and do faster mock ups.

I would love to see someone do a survey on when web designers will begin to code out their site and stop working within PS / AI. I am in the middle of a new project and was dreading doing a page by page design for the rest of the site. I cannot wait to just move straight into code. Again, great article.

Interesting that there’s so much focus on Photoshop as I swapped it out for Illustrator for mockup ages and ages ago. Among other things, Illustrator actually deals semi-rationally with text, and being much more object based makes it a lot easier to deal with moving bits about on the layout, adding and hiding layers and parts of layers.

Anyone frustrated with Photoshop that doesn’t feel comfortable going all the way to markup (as I usually do now) should consider Illustrator a reasonable intermediate.

I stick with Pixelmator especially now that they came out with their web features. Sure they don’t have the features that you pro’s may use, but as a dilettante and pupil of web design, it’s good enough for me.

Despite that, you make a good argument to stay in the browser now that CSS3 is being implemented in modern browsers. CSS3 seems like an equivalent to rapid prototyping and I’m content that it is a much better workflow than painstakingly cutting up your image mockup.

Prototyping tools need to be quicker than production tools so you can change things around, be flexible and experiment quickly and easily with ease.

The idea behind prototyping in the browser is so that you can do the mockup quickly, and as Meagan illustrated, make tweaks to that design on the fly. At this stage, it isn’t about making every browser look exactly the same. That’s where the real time sink is in the front end development process. Making it work in a standards compliant CSS3 capable browser doesn’t take long at all in the grand scheme of things.

We know that all the CSS3 bells and whistles available in modern browsers won’t be available to older ones. But, as Andy explained yesterday by Andy Clarke, not every browser will display it in the exact same manner, allowing the client to become accustomed to how it looks in their favorite browser whatever that may be. If they want to see all the bells and whistles, they either see it on your machine, or add a browser to their machine that allows the full design niceties to be displayed.

If the client and you are in a room together reviewing a design mocked up in the browser — let’s say Firefox — as they make their design tweak requests, you can often show them the transformation in a matter of moments using a tool like Firebug or Web Developer Toolbar to apply it instantly. Copying those changes into the permanent stylesheet is practically a no-brainer. Depending on the page design, it is even possible to show them entirely different layouts, or even apply different stylesheets for that “more than one version of a comp” happy client.

For the life of me, I cannot imagine why you would think that mocking up in the browser is more time consuming than mocking up in Photoshop. I’m not against using Photoshop. That’s not my point. I’m just trying to explain that the browser does not slow down the process in any real way.

If I really had to make 2 or 3 comps to show a client for a design in Photoshop, I could just as easily (if not more easily) do it in the browser. Do the markup once. Apply 2 or 3 different style sheets for different look and feel, as needed.

@STEPHEN CAVER: There is a piece of layout software that sits firmly between pixel perfect HTML/CSS and the freedom of a blank page in Photoshop. It’s called Fireworks. I wouldn’t want to create a site layout without it.

I don’t start in Photoshop I start in illustrator way faster, way more flexible and more accurate
CSS is horribly cumbersome to design in visually, it reminds me of doing mockups its Quark its fine if you already know what you want it to look like but if you want to just play around with elements until you get the look you want its very limiting

you will find going right to html that your designs will start to look very similar because you’ll want reuse code

I remember working for large ad agency and they insisted that a photoshop specialist do all the photoshop work for my designs i could do it myself but they didn’t want the tool to limit my creativity this took me a long time to accept but now I understand

I guess not having Photoshop gave me an advantage – I usually coded everything, aligned it right, and THEN added images. When I heard that some people actually designed in their graphics program and then coded it, I thought it was crazy.

Very nice article, and I totally agree, and have been subscribing to this method for quite some time now. I really love the mock-up site you designed as well.

Well done.

This is how I’ve always designed websites. I don’t even know how to work photoshop.

I am torn between the amazing quality of the article (examples, flow, etc) and my thoughts on the subject. So first off, congrats on stating your position clearly and very persuasively.

I have gone both ways on past projects, but I still prefer to start in Photoshop or Illustrator. You could call it the sketch prior the actual work. What’s funny, is that developing websites in Illustrator is years easier than Photoshop (until you get to the export stage where splitting pixel nightmares occur). However, it seems most people don’t work in Illustrator but use Photoshop.

The method I follow for personal projects is this “Work in Photoshop or Illustrator as long as it takes to see a clear direction and/or until certain styling items takes way longer to do in either program than in straight code.”

On client projects it really depends on the client, I still find it much easier to show direction (or multiple directions) in a program like PS or AI than in code…. and I can code really fast :)

That having been said, I also combine the wire-framing with the design (which I recently have come to see is wrong) so perhaps my position will change to the one presented here after I adopt a rigorous wire-framing process.

Thanks for the amazing article and the stimulating thought.

I agree with your main point, but I think this article would be stronger without the “Die Photoshop, die” section. Photoshop is a powerful, high-quality tool for what it was designed to do. Stuff like “Well, any seasoned designer will tell you that working in Photoshop is akin to working in a minefield” makes me want to tune out.

I’m a “seasoned designer” and I’ve got no complaints about its stability and have seen many people do amazing work with it. There are gripes about the UI here and there, but overall it works well and experienced users can make it fly. Is their process more laborious than using CSS3? Sure. But the end results are still fantastic.

Getting sidetracked about your problems with Photoshop distracts from your argument — that good HTML structure with CSS3 can be a useful design tool. It can replace much of what we do in graphical editors, can help us get more useful feedback from our clients, and hopefully allow us to create better designs.

Whether you use Photoshop, Fireworks, Illustrator, GIMP, or some other graphic design tool isn’t really the point.

I know you mentioned IE in your article, but the problem with these mockups is IE is exactly what most clients are going to see your mockup in. Maybe you can ask your client to only view her site at your office, or install a new browser at home, but that’s not a luxury everyone can afford. So you might be showing your client fancy rounded borders and orange backgrounds as requested, but she sees only drab white squares, no baskerville ampersand, nothing.

That’s one benefit of a JPG/PNG mockup – platform independence. It doesn’t matter what OS or browser your client uses, if they’re asking you for a website they can open a JPG.

I have to say I come down on the side of using a dedicated design tool for design.

One of the keys to producing good design is making your feedback loop as small as possible. That means that you shorten the amount of time from when you have an idea to when you create a visual realization of it. This is one of the reasons that so many of the greatest designers will sketch out ideas on pencil and paper before ever sitting down in front of a computer.

Writing HTML and CSS is inherently a slower process than designing in a dedicated design tool. Designing IN these languages forces you to get caught up in the details far to early in the design process.

I’m not saying that Photoshop is the best tool for designing anything. It started out primarily as a photo retouching tool and has become bloated into something else entirely. It was never intended as a web design tool. There are certainly better alternatives out there.

My biggest concern with this design process is that it seems to encouraged a lot of the same basic shapes and layouts in websites. You can always tell when a designer has pulled out the old pencil and paper for their rough ideas because the website they produce is generally so much more visually dynamic.

Having a thorough understanding of html, css and all the other technologies involved in the web is essential to being a good web designer. But having a full time designer who can pass their design off to a full time developer generally produces better results. There’s just far too much to keep up with to be world class at either. There are of course exceptions to every rule.

This is how I have always designed website’s & personally I think it is more flexible now with CSS3 and modern browsers.

It’s nice to know I’m not alone.

Great article — I’d just add that there’s a load of jQuery plugins out there that can help add some zip to your designs without cracking open Photoshop. I’ve used them to create everything from gradients to corner effects.

I’m going to take your message with moderation. You argue a well-articulated approach, but I’m not sure I’m on board with your thinking.

As much as I like the concept of showing off all the fancy things CSS3 can do, I don’t want my design constrained solely by that limited feature set (also: which browser implementation?). Three cheers for rounded corners and hip-hip-hooray for RGBA; but what about jagged edges, radial gradients, alpha transparency knockouts and all sorts of other amazing design techniques waiting to be invented?

If you start with the tool that has the narrowest visual feature set (I think everyone here would admit Photoshop beats CSS3 any day when it comes to visuals), you’ll end up with a lackluster site that while probably functional doesn’t do much to stand out.

While yes, I think it’s important to understand how printing is done to be a good print designer. And it’s good to be able to write to be able to typeset text. And yes, it’s important to know at least a base of code and understanding of interactive technologies: I’m not entirely excited about to see these roles overlap. What makes design fascinating is that it’s a collaborative process built with teams of craftspeople. So combining processes feels like a cheap move. And debasing of the roles of all involved.

But I would like to see something that bridged the gap between paper and code better. Photoshop is too close to paper for sure. We need better tools. Perhaps CSSedit and the like are that in between step. But the promise of the standards-based web should be better bridges. Better tools in the middle.

Actually; been there, done that

I agree with Andy Croll on this one and I believe, these questions are to be answered first: who is a “designer” and who is a “front end developer”. Which set of skills is required to be called as either one of them?

Latest articles about this subject, mostly assume that, both the designer and the front end developer (and even the back end developer in some cases) are the same person. This perspective has its pros and cons (subject of a different debate) but from my little experience in the field, I see most companies follow the (somewhat) “traditional” approach: the “designer” does the mockup on photoshop, the “front end developer” turns it into markup and css, and the “back end developer” does the server-side coding.

Traditional approach includes three different roles that have borders (although they are grey in some cases). Considering these roles are filled with people qualified in their “own” field and they have proper communication between them, I don’t see a problem with this approach.

On the other hand, the company I work for embraces the approach presented in this article. I am the designer and the front end developer. However, “we don’t skip photoshop”. When I start to design a project in photoshop, I always have the markup, css and javascript functionality in my mind. Maybe this doesn’t help me being faster on css but it surely helped me being faster on photoshop. And I believe “be faster and tidier on photoshop” suggestion is the other side of this coin.

As of now, mocking up in markup as suggested in this article is related to the audience. What is the use of css3 goodness if 90% of your visitors are supposed to be ie users in a developing country?

The idea is not new either, there was 37signals old “Why we skip Photoshop” article from 2008:

http://37signals.com/svn/posts/1061-why-we-skip-photoshop

Interesting, I have always found Photoshop Cs3 to be a very stable build. It’s crashed on me once or twice over two years of daily use.

There may be opportunities where designing in code is appropriate, but it’s my experience that there are times when it does not work as well — like for a page with a lot of images or multi level concepts. Web apps are definitely a great place to implement this.

There is no perfect tool for designing websites, but it is great to know what options are available.

Great follow-up to Andy’s piece. unfortunately, box-shadow is no longer part of the spec. hopefully that’s only temporary though.

In the end, it all comes down to “What workflow is best for you“?

I’ve started designs off in Photoshop & HTML (similar to this article) and found a nice balance for me:

1. Using Markup/Textile, create the home page content. (This lets you easily learn the structure of your new site and what elements will become the most/least important)

2. Hop into Photoshop with your BlueprintCSS/960gs .PSD template and draw out your layout on the grid.

3. Create your titles & headlines (you already know what they are from step 1) & adjust layout accordingly.

4. Toss in your copy (again, step 1) and prune as necessary.

5. Head back to your document from step 1 & put in the grid markup to match your PSD.

6. Export images & adjust CSS to match.

Granted, there’s a bit of back & forth but let’s remember what Photoshop is great for: quickly creating several mockups using duplicate components for testing things out. You lose this flexibility once you’re in the markup world because, with grids, you essentially end up with <tables> again.

Layer Effects == CSS3, so if you add a shadow, emboss, or something similar, it should translate nicely to CSS.

If you’re relying on browser-equivalent typography on Photoshop, you’re doing it wrong. In this realm, it’s for testing out site designs & layouts. Your typography (outside of headings, of course) is just for filler. Your content boxes should be stretching vertically (and horizontally) anyway.

In the end, find what works best for you and your clients will be happy :)

I’m not a professional designer, but I’ve been a web-design ‘hobbyist’ for more than a decade, and I have always designed ‘in the browser’ rather than doing Photoshop mock-ups. It’s easier now than it was in 1998, but it’s the method that’s always made the most sense to me. I always chalked it up to simply not having a graphic designer’s Photoshop skills and therefore not understanding ‘the process’, but I’m glad to see that I’m not the only one who thinks this is a good way to work.

That’s an interesting argument and one that will always generate a debate!

In the new year I’m try some different wireframe software to see if there is a faster alternative to Photoshop.

However, I have to disagree with the following statement:

“I believe we shouldn’t have to design for the lowest common denominator (cough, IE6 users, cough); instead we should create designs that are beautiful in modern browsers, but still degrade nicely for the other guy.”

I create the design for my client – not my clients friends. More than likely the client will be using Internet Explorer – remember, IE stills covers over two thirds of the market. The “other guy” is my client and will most probably not be using one of those beautiful, modern browsers.

Merry Christmas to all the 24 crew – another great month guys and girls!

2 articles with similar themes in 2 days.

This approach is like asking an architect to build a building before the plans have been approved. Similar to the old “measure twice, cut once” saying. Get your design sorted out in pencil and paper, then Photoshop before you start building the “real thing”. Are you going to create all your javascript functionality before the client has signed off the design, I don’t think so. This approach may work for small home web shops but it’s not going to work in a studio on big sites with big budgets.

Plus, don’t blame the browsers for not rendering your designs right. If you want it to look like your PSD then do it.

I’m so excited to read these last two articles!

Markup as mockup definitely feels like the way to go. On my last project, I did some analog mocking on a whiteboard, took a photo and then coded it up in HTML/CSS. The process took less time than usual and after a couple of iterations, I had the finished product.

My main difficulty with Photoshop is the subtle differences (like the font-rendering shown in this article) that don’t translate to the browser as elegantly as the client expects.

I’m looking forward to using this workflow permanently. The challenge is to educate everyone about the differences across browsers: the why, and the why it’s ok.

This is something I have started doing this year.

Most of the advantages have already been covered, but for me one of the biggest is usability. In a flat Photoshop mockup, you simply don’t get a ‘feel’ for the website you are designing and important usability decisions are often missed.

These issues will almost always crop up during the PSD > markup phase and in some cases will mean you having to completely re-think a layout (I’m sure we’ve all been there at some point!)

I’m floored – great closing article for this year’s tips, game-changing point of views and all that awesomeness.

And hell yes, for basic mockups Photoshop is a time waster – CSS goodness works it out just well, and it will only get better.

Good times for us, web designers!

just when you thought it couldn’t get any better (sorry Andy!).

Excellent article and a perfect way to end a great series!

Great read Meagan :)

Personally I love Photoshop but I do leave it for HTML and CSS at the soonest opportunity.

The thing with the Photoshop V HTML CSS debate is that it’s seems clear to me that they both have different strengths in the design process at different times. For me it’s not so much a question of either or but one of when and how. When is it most appropriate to use a certain tool?…and How do I get the most out of that tool?

I think the most important question a designer should be asking themselves at the end of a project is: Did I design a great website and was the client happy? If the answer is yes and you’re were happy with your design process, whatever that may be, well that’s cool.

I think Cameron Moll hit the nail on the head.

Thanks for a great article :)

@ Cameron

I agree completely.

Whilst Photoshop may have its flaws, there’s no denying its power. The work flow that this article suggests to me seems rather limited creatively.

You, as a designer, are already starting to think about the boundaries presented by the browser – rather than the concept your are trying to convey.

As others have said this approach is fine for smaller websites, but in my opinion taking this approach will lead to a deluge of identikit ‘rounded corner’ ‘drop shadow’ websites – something I thought were had progressed away from?!

One notable exception to my argument however, 24ways.org

Merry Christmas! :)

Even with border-radius, box-shadow and text-shadow I think you lose too much with this approach. Since you will end up creating a set of boxes, your mind will be thinking in terms of those boxes.

And Merry Christmas you guys. :)

I’m with the whole mockup in markup idea, and my head tells me that designing in the browser is a legitimate and useful method of design for certain jobs. It seems appropriate for the web.

And yet my heart asks me, what about creativity and experimentation? What about themes and moods and graphic design? Not that designing in the browser stifles creativity as such (it may enhance it, for some), or that you can’t play with themes, ideas and moods; it’s just that, throwing layers around in Photoshop, blending, tweaking, pushing, pulling, enlarging, blurring and so on, just isn’t as fast in CSS. I find designing in CSS tends to engage my logical left-brain while not involving my intuitive right-brain nearly enough. That’s probably just a failing on my part and I need more practice.

Mike Kus said web design is a journey. I wonder if his style of rapid iteration and evolving themes could be achieved using an in-browser workflow? It would be interesting to see a web design showdown. One generic brief that would be appropriate for either methodology, two master-designers, one with a PSD process, the other a browser process. Both designers screens would be recorded. Each could use whatever tools they have at their disposal. It would not only be very interesting to see how the designs turn out, but it would also be interesting to see how fast the designs happen; how fast iterations and direction changes are handled.

Ultimately I’d echo what others have already said: you’re just going to have to choose what works best for you and/or is most appropriate for the job at hand, as trite as that may sound.

One further thought: it occurred to me that the design in browser approach would be excellent when taught in a formal academic environment, like university. Web design students would be required to initially build sites using only HTML and CSS – no graphics allowed. Once they have that nailed and can effectively communicate using those primary tools, then they would be taught how to enhance their message with judicious use of Photoshop.

[BTW, I’ve never had any problems with Photoshop on my PC. Sounds like you have one of those dodgy fangled Mac things. You need a PC instead.] j/k ;-)

Two issues really for me and where I have to work to bring home the bacon.

1. Photoshop has maybe crashed once twice in the whole of 2009.

2. My bosses don’t see designing in a browser the way to go because it’s not how they do things.

I can try and show them this article, some of Andy’s articles, and it will always come down to the same old thing – Internet Explorer.

Now in my personal business I would quite happily take this route I really would, but then I am in touch with the client face to face, in my day job I’m 2 or 3 people away – and these people don’t understand.

Now I also know it’s my job to educate them on such matters – but that’s not always possible.

It’s a great idea for forward thinking companies, and a real time saver – but I have no doubt it will be dismissed out of hand in an instant.

And that makes me feel sad. Maybe 2010 will be different.

I agree 100%. I do my mockups in markup too. It not only saves time, but you restrict yourself to whats possible in HTML/CSS from the get-go.

No figuring out how the hell I’m going to implement this design.

Interesting and challenging article, thanks.

Whilst I think there a great deal to be said for this approach when it come to showing a design concept to a client (setting realistic expectations of what to expect in different browsers being a huge benefit), I’m not yet convinced that for the intial design it isn’t quicker and more conducive to creativity to design outside the browser.

My own tool of choice for web work is Fireworks rather that Photoshop, I find it much better suited to the job and is so much faster for initial prototyping than CSS.

Of course in some ways it helps to be using Fireworks (or Photoshop) from the perspective of someone who is eventually going to have to create the code for all the supported browsers. That way you’re unlikely to design something that won’t work well in the various browsers or will require far too much markup.

On the other hand, some of the design concepts that have been handed to me by colleagues who are pure designers (typically as Illustrator files) have led to great sites too. They may just need to be passed through a few usability checks first and can often be really challenging to build – but that’s not always a bad thing.

I suppose it all depends on our relative skills with each tool and the variables of each project.

Thanks to all of you for a great 24ways 2009. Merry Christmas

While I still do a bit of designing in Photoshop, I plan on moving to this approach in 2010. Thanks Meagan, you have helped me to find my New Year’s resolution!

Great article! I will now stop feeling inferior for not using Photoshop for mockups. Since I do both coding and design, I have found it makes much more sense to work in textmate and the browsers, applying styling to live content from the database.

As a front end developer who has been using CSS3 and web-kit wherever I can, I have been very intrigued with the activity here the last couple of days.

I just want to make a few points; I want to design my sites with CSS3 – it’s quicker, it feels like the right thing to do. I believe in progressive enhancement and I build my wireframes in CSS from the get-go.

However I can’t brush over the fundamental problem we face as practitioners today which prevent me in working exactly the way I wish to – IE has ~70% of the market.

Until the tipping point is reached when IE6 is < ~5% and IE7 is < ~20%, only then we can look at focusing on the CSS3 animations etc that so few people can enjoy. I don’t believe in designing for the lowest common denominator but I believe less in designing poorer interfaces for users with IE6 and IE7 when in 2010 that is generally 70% of my audience.

The truth is, (and what I believe to be the best approach at the moment) is to build with the future in mind, but take the time to build beautiful IE6 and IE7 only stylesheets to optimise their experience and give them the best – there is no reason why they cant enjoy rounded corners, it just takes longer to implement.

For all the fuss RGBa and rounded corners is generating in the community, the truth is clients do not care. – And why should they? After all, designers were producing these designs over ten years ago. Clients are not wowed by opacity, its nothing new. It may be new how we implement it, but to the end user, they’ve seen it all before.

I also don’t find this antagonistic evil-IE6 rhetoric helpful in the slightest. Many users are unable to change their browser and they shouldn’t be made to feel guilty about it. We should cater for these people and give them a rewarding experience.

Very nice article. If you are interested in mockup tools, welcome to give ForeUI a try, we are working on this young product and wish to get some feedback from you.

Merry Christmas to you :-)

Looks like there’s a split between “native” designers and those of us who started as web tinkerers. It seems obvious to me that you need to start work within the parameters of the technologies you’re ultimately using (degrading gracefully for IE6), but the points in earlier comments about innovation are well made — sometimes you need to start with conceptualisation and visual design in order to push boundaries and come up with new solutions.

I love this approach to web design.
Great post!

I used to design several comps in Illustrator/Photoshop: homepage, subpage, etc. These days I tend to just use photoshop to design one or in rare cases two. Once the look and feel is finalized then I start kicking out the site in html/css. And then sometimes during the build I screenshot and jump back into photoshop to quickly experiment with color or layout.

So I already partially do this approach—it’s more a hybrid really—but I can’t seeing myself ever skipping photoshop completely. There are two major flaws with this approach:

1. It would lead to a lot of same looking boxy designs.

2. no obvious sign off stage for the look and feel which could lead to massive iteration-itis and scope creep.

While I agree wholeheartedly with the idealogy, I just can’t live up to it.

I believe you should pick the that gives you the most freedom in a sense that you can try out stuff. That’s why I always sketch before I dive into Photoshop, because on paper there’s nothing between my vision and what I put on my canvas. Photoshop makes the gap a little bigger. But HTML/CSS just makes that gap too wide.

The reason this workflow fits Andy Clarke or Meagan Fisher is because these people are very quick and flexible with HTML/CSS. But even then that’s not a garantee, because if Jeff Croft feels his visuals are stiffled when he codes in CSS, who then is going to step up the boundaries. I’m afraid this method will produce flat and dull looking website for most of us.

HTML/CSS workflow would cripple my inventiveness and visuals, but if it doesn’t for you than go ahead and say goodby to Photoshop.

Two great articles by Meagan and Andy, who articulate and demonstrate the benefits of designing “in the browser” and how we’ll be able to code in the future. However, as has been frequently been mentioned, we must design web sites for the real world today; how things really are not how we’d like them to be.

A quick look at the visitor statistics for half a dozen of my sites show that the majority of users browse with Internet Explorer and that IE6 accounts for just over 10% (thankfully falling). I wondered how Andy explained (and if he showed them) how his sites look to these thousands of visitors using, for whatever reason, an old browser. The answer it seems is what they don’t know can’t harm them. While Meagan’s tutorial and great design is inspirational the end product is totally unacceptable in IE6 and poor in IE8 – no business would pay to be represented in this way.

Ignoring people using old browsers or providing a substandard visual experience for them is as foolhardy as ignoring disabled users.

As a web designer I love the new things I can do with modern CSS but the time is not yet here when we can use them for commercial projects. There is no benefit in using CSS 3 if you have to create solid and gradient backgrounds, rounded corner graphics, non-semantic mark up / javascript, use image replacement and other assorted “hacks” to create a aesthetically pleasing and professional design for the majority of your audience.

I agree with Andy Mabbutt above.

It’s too early to think that mockup in markup is the way to go at this time. It probably will be in a few years.

It seems some people are getting overexcited about CSS3 being available in a ‘few’ browsers (maybe it’s because it’s nearing Christmas).

Thanks for this article, I think this is a great way to go.

I’m sure this will work for most of my projects, as I establish the exact content (copy and images), before I pick up a pencil.

Once the copy is agreed and signed, off, I then do sketches, and produce wireframes, based on the clients business goals.

It would be quicker for me to write up the html semantically as this will stay pretty standard e.g Header – Nav – Footer – Content – Secondary Content etc. The amount of time I spend producing layouts in Photoshop for approval, will probably be saved, in the reduced build time.

But then I only produce one design for each client.

Also I’d need to check that they were able to view the mockup in a non-IE browser, as the bug fixing and work arounds, I’d rather do, once they’d signed off the design.

Whereas I’d still use Photoshop but just for creating the graphics and testing elements out.

I’m going to try this out on my next project.

Thanks for a great bunch of articles… :)
Happy Christmas all.

I am impressed with the fun writing style you displayed in the article. I too believe that the use of photoshop should be limited to a very basic wireframing or prototyping tool for you only.. The client should never see this. This helps you get an idea of where the boxes need to fit.

I also like using photoshop for doing image editing, logo and icon design, and creating any gradient backgrounds I need to add to the CSS/HTML.

Well done Meagan, this is a great piece. There is loads for people to take away from this, and it’s all good.

The comments are just as valuable in many ways, as they show the massive range of approaches people take in designing and building websites. It’s not as black and white as some people will have you believe, and to think that it is shows a limited range of experience.

My opinion? I think designing in the browser is great, if you can do it, and if you can keep your mind open enough to move beyond what you believe the constraints of the browser to be. If designing in-browser starts to stop web design moving forward, if it stops designers innovating or inventing new design approaches or strategies, simply because their mind is distracted by what they believe the constraints of the browser to be, that would be a shame.

Incidentally, I don’t consider any of the people advocating in-browser design here to be the type of designer that would fall in to that trap.

I did the mockup designs straight into HTML/CSS including my portfolio website. Hower the process is slower especially when you want to check something to see how it looks “back to the code, back to the browser”. The best method to design a website still remain Photoshop and you need to include the
mockup image in a browser, so the client can still get a feel about how is gonna look like.

I have been doing this for 9 months now and I don´t need photoshop any more. Sad waste of money.

Great Article… I’ve been doing mockup in markup ocassionally and after reading this article maybe I should do it always.

The only problem I see is when the designer is not the front-end coder, in that case is almost mandatory use PNG files for the mockup.

I prefer using Fireworks PNG rather than a PSD, because is a more accurate in the final results and is easier for a coder to get properties of the elements.

Photoshop is great to create the cool images… not for an entire mockup.

Thanks Meagan, this article reminds me the 37 Signal’s philosophy on “Getting Real”

I’m not a professional designer. Not going to weigh in on any religious debates of prototyping in Axure vs. mockups in whatever tool you like best.

I subscribe to 24ways to learn, find some good resources and maybe be entertained in the process. Say what you want about the merits or pitfalls of using markup for mocking up, but I’ll speak for the not-a-design-guru and generally-interested-in-learning-more segment of your readership: Meagan’s a rockstar. You should get her to write more articles here. Before she’s too famous and busy.

An easy to read, entertaining, well written article, with a great little tutorial AND she manages to bash the ex-girlfriend, use “hot, steaming pile of crap” and “buzzkill” in a really endearing way? Love that.

You may not totally agree with the design philosophy, or the described methods of “decoration”, but IMHO this is one great piece of writing.

Great article.

The sooner you can show a client a functional website they can interact with the better. Even in an unfinished, unpolished state, showing them something real as opposed to simply a flat photoshop mockup goes a long way in helping the client provide useful feedback and not just “I don’t like the way it looks.”

Fantastic! Educational and entertaining :-) I’m a software engineer trying (albeit slowly) to expand into the world of web design and this post was perfect for me.

I’ve never been to this site before, but I will definitely be back!

Leave no web designer behind!

It is clear that this process will not work for every designer and each of their clients. I propose that as a New Year’s resolution for 2010, we collectively agree to STOP using any CSS3, and refrain from any of this absurd “designing in the browser” nonsense. We may resume innovation in design and work flow once every last browser, designer and client is on board.

Meagan Fisher, you rule!

“If I were to begin designing them in the browser, it would probably end up like just that.”

I’ve heard a lot of arguments like this, and I think they are just weak sauce.

If you are a good designer, with a great grasp of form, typography, color, hierarchy and proportion… etc, you should be able to use whatever tool is given to you and create a great solution.

It’s silly assumption to say that your designs would be less creative, because that would be declaring that without photoshop, you are an uncreative designer.

I think many people here are confusing decoration with design. If you read in Meagan’s introduction, she quotes Zeldman, who says:

“Content precedes design. Design in the absence of content is not design, it’s decoration.”

It’s a very insightful quote, because by starting a design in Photoshop, you are making two assumptions:

One, that your design is independent of content. Because no markup has been made, designing in photoshop will force you to make a lot of guesses about hierarchy, behavior and acceptable length of containers, etc.

Two, You are assuming that every browser will render exactly as you have designed. Many commenters have discussed this ad-nauseum.

The argument is not about deciding creative direction using one tool or the next, because many people have made great suggestions about white-boards, pencil & paper, Fireworks and so on.

The argument, is presenting a mockup for approval to a client, is best done in the medium which sets up the most realistic expectations. That’s the browser. Hands down.

People have made the same arguments about creativity using frameworks or a grid system. Frameworks, grids, and CSS/HTML are by no means limits on your creativity, they only guidelines on execution. Using the same argument, you could say that the screen resolution limits your creativity, or the fact that browsers are 2 dimensional planes limit your creativity.

People have made the same weak arguments in the print design world, like: “I can’t use an offset press, that’s going to limit my creativity”, “I can’t use a full bleed, that limits my creativity”, “We cant’ afford gold foil, that limits creativity.”

These are executional limitations.

Great designers can take anything they’re given, work with the content, and context they are given, and create beautifully executed solutions.

The only thing limiting creativity, is the designer alone.

(Meagan, thank you for the great article.)

This article has made me feel really good. I generally have started with markup and designed from there. I’ve always felt guilty about it, but it was a necessity for me since I do not own Photoshop at home. Furthermore, I’m more confident with CSS/HTML than I am in my graphic design abilities.

At work, the opposite occurs. I’m given a design and some image files and I code it up.

There are often changes in both workflows, but it makes me feel good that the former process isn’t necessarily “wrong”.

Great article Meagan.

The main takeaway I get from this, and other 24ways articles this year, is that browser technology is turning a corner in 2010. CSS3, HTML5 and embedded fonts are becoming a reality we can start to use. These are things we all need to be trying out to keep ahead of the game, not moaning about it.

In response to Chris Arnold (since his is the last comment before mine while I write this!):

1) I wouldn’t show 2-3 design directions to a client. We tend to work through ideas and work up one idea to show the client initially. I find if you show multiple designs it takes ages (and therefore costs more) and the client may end up wanting a jigsaw of multiple designs (not a good situation).

2) Interior pages are easy to build if you have done the initial page (i.e. the base template). Copy, paste, change text. Far easier than Photoshop, IMHO (and yes, text is easier and quicker to design with in the browser than Photoshop).

3) I wouldn’t update a design literally on the fly in front of the client. Designing (or developing) with a client over your shoulder can be a rod for your own back, but I can see how clients would like it.

Getting this sort of process to work successfully requires a good workflow, designers with solid CSS skills and an open client. I admit, we’ve not tried this approach yet at my agency (so I may change my mind once we have!) but it’s something I’m interested in since as a businessman i can really see the potential time saving of this approach and as a coder I can see the sense of designing directly in the medium.

And I wouldn’t drop Photoshop from the workflow, since it’s still a fabulous tool for designing the graphic elements.

The end of the year is usually a time to look to the future, I applaud the authors this year for exploring these topics. Great, inspirational stuff.

I think a major issue that many commentators have already pointed out is that coding a mock-up from scratch (assuming you’re not using any libraries) is time consuming and makes assumptions about how the client will respond. Making visual comps or prototypes in an imaging or diagramming software speeds up the process of getting the layout and visual appearance approved without putting in a lot of time up front.

I’ve used Photoshop, Omnigraffle, and InDesign to do visual comps, as well as interactive prototypes. PS and Omnigraffle are great for small visual comps, but aren’t very efficient if you’re doing prototypes or comps/prototypes for large sites.

EightShapes recently released an excellent framework called “Unify” for creating advanced prototypes in InDesign. Learn more about Unify here (Unify is a web design prototyping framework for InDesign). However, it comes with a steep learning curve.

I really like the functionality that Fireworks promises. For those who are already familiar with other Adobe software, it takes very little time to become familiar with. However, it just doesn’t deliver. It’s extremely slow and buggy and much of the UI functionality you would expect isn’t currently offered. It’s a very immature application, but hopefully Adobe will get their act together with CS5. If they do, Fireworks is looking to be the best tool that provides designers a way to quickly produce slick interactive prototypes. Layers Magazine offers a great 10-step tutorial overview of Fireworks (Layers Magazine Adobe Fireworks Tutorial).

This is a very nice article to end this years series of 24ways!

I stopped “designing” in Photoshop and moved to designing in the browser over 3 years ago. I haven’t looked back or do I aim to look at in the future. I now only open Photoshop or Illustrator when I need to edit photo’s / illustration’s or when work is outsourced to me and the files are .PSD or .AI format.

I’ve had a lot of clients tell me they can’t get the real experience of the webpage when their looking at an image and they much more prefer seeing the design in a browser as they can select text, fill in form fields or hover over elements… (a.k.a getting to play with their new Toy as one client put it!)

Anyways, very good article for Christmas eve over a glass of Wine. Once again thank you!

Sean

I am about to restyle my simple webapp. Your article is an eyeopener. Mindblowing. Great stuff!!

Great article. I have been doing this on my past few designs and the workflow is so much faster. Thanks for a great read.

Thank you so much Meagan for this article, you always seem to have a refreshing approach when writing about the web.

I have always pretty much gone straight to the actual build (except when presenting multiple concepts to a client) and it does work a lot better.

Fireworks is a lot better for mocking up websites anyway.

Merry Christmas!

This is my process when developing projects where I am the only one involved. I have always developed a site in a browser versus a mockup in Photoshop. Sure, it’s nice to do it in Photoshop but I felt more efficient doing a wireframe/grid in a browser, then using Photoshop for anything extra.

CSS3 has solidified that I will always be more efficient in a browser.

Too bad this approach wouldn’t really benefit companies that have employees hired specifically for graphic design, frontend developement and backend development.

With doing a mockup in a browser, who would you have perform the mockup? Make the designer learn CSS so he’d be able to get things started and finished? Or would you make the frontend developer get more heavily involved with graphic design so he’d be able to pump out this mockup? Where does that leave the graphic designer?

Concept is great but in theory it just wouldn’t work out for anyone involved within an agency where roles are already delegated to specific people.

I am so completely baffled as to why this “designing in the browser” business seems to be such a polarizing topic. It’s really very simple: some people are extremely comfortable with markup and CSS, and others are extremely comfortable with Photoshop or another image editing tool. Obviously, working with the tool you’re most comfortable with is going to be faster for you.

So please, can we cut out the “I can not believe you think CSS is faster than Photoshop!” and “How dare you suggest Photoshop is faster than code!” BS and recognize that different people are more efficient using different tools, and both methodologies are capable of producing great end results?

Meagan presented a method that works for her, and that’s awesome. If Photoshop works for you, that’s awesome, too. And if you can produce great results with Microsoft Paint, then rock on, sister.

Tools do not a web designer make.

Please stop designing in Photoshop. That encourages a pixel-perfect design thinking that is more suitable to print. The Web, if anything, is NOT print.

If your goal in coding a website is to slavishly recreate a design expressed as a bitmap, you are wasting effort on fine details and dictating to your audience how they will view the website. You also lose the advantages of working in your target environment’s native language, which translates into more work and lower profits.

When you design for the web you design for an unknown presentation environment. The two most painful examples are fixed text font and size, and designing for specific window sizes. Someone with poor vision and a netbook is going to have an entirely different viewport into your site than someone with 20/20 vision and a 24” LCD. The person with the 24” monitor might have one or many browser windows open at any time. All of these users need to be catered to.

If you design the site in the browser it is easier to let the browser do the presentation work for you. Let the text flow where it needs to, let columns and boxes shift around. Done right, everyone will get the best possible experience from your site.

Quick show of hands here, who shows page prototypes to the client in more than one format ? Everyone (I hope) tests against, and shows in, multiple browsers. Who routinely shows in 1024×600, 1024×768, 1920×1200 and 1280×1024 ? What’s it look like in Mobile Safari ? Everyone is at least designing and prototyping in sizes other than what you regularly browse in ?

Good. Keep it up.

I’m mainly a graphic designer and just started working as a full time web designer but I would never even consider trying to design a website with Photoshop unless it was a basic boxey design like this one, or I was going to do it in Flash. You can do some cool stuff with PNG’s, but still you can never tell how one browser is going to push or pull or bump or float one element just two pixels over and ruin the whole thing.

Now THATS a nice idea! I have to test it out.

In HTML/CSS it is so much easier to change colors etc. than in Photoshop.

And if you want to be sure that your client sees what you mean, you can take a screenshot and send it to him. I don’t see any negative points. The clients would also say: “Oh I want orange as the background color”.

See you next year 24ways :).

Excellent write-up.

It kills me when I receive a design in Photoshop that a client already signed off on, and then I take a look:

“Wow, that’s going to be a big pain in IE6 and 7. I’ll just let that part degrade, ya?” “Nope, they use IE7, and they looooove how its transparent and every single corner is rounded, with different sizes”.

/shoots manager.

Michael Llaenza:

If your goal in coding a website is to slavishly recreate a design expressed as a bitmap, you are wasting effort on fine details and dictating to your audience how they will view the website.

You recommend skipping the details that makes us love this craft? Let’s just make a world wide template with a unique header graphic, so every page can look the same.

Great article and examples! Ideally, it’d be great to jump straight into the markup and get going on a site design, but I think it really depends on the site. Sites that are very image heavy and require a lot of graphic based effects are designed much quicker in photoshop. If the design is more minimal and can run 90% off a css file, then designing within the browser can be much quicker.

For instance, a site I designed for a musician had to start in photoshop (michalegraves.net), but a wordpress theme was much quicker within the browser (http://honker.evaneckard.com). You can see the visual change in style depending on the start point.

@ Jeff
I think it’s polarizing because of the antagonistic way in which these posts are often written (“Die, Photoshop, die” is the name of intro heading”). In an effort to sell itself, the concept is presented as vastly superior instead of just as an under-regarded alternative.

I agree that to each his own, and the tool doesn’t make the designer, but these posts are rarely written in a way that encourages that type of response.

@ Simon Jones

1. I would not show 2-3 directions to a client, either, but many, many design firms and agencies do. It doesn’t make sense to develop this way in those arenas. It does take longer and you will get into a Frankenstein situation.

2. I realize interior templates aren’t ‘hard’ to build out, seeing as how the core design and CSS are being developed, but it’s the little things: a change in grid, a new sidebar layout style, pixel-perfecting (and browser testing) little things. You’re right, text is a pain in PS, but not a pain enough to make a major impact on me or the client (as of yet, at least).

3. You misinterpreted my comment here :) By ‘on the fly’ I am questioning how design adjustments (round 1, round 2, etc) are to be made, not making changes with the client over your shoulder. Free hand in the code itself – slice and dice? Designers need Photoshop (and sometimes a piece of paper and pencil) to think these things out; a process you do not receive while throwing code chunks around, hitting refresh, and hoping it comes out nicely.

I say work with what works best for your particular situation, but the post was presented in a way that seemed to elevate its methodology to a higher (highest?) level, which obviously isn’t true. Judging by the responses, regardless of experience or skill level, it’s a hot bed topic. Let’s all rock on the best way we can in 2010.

My first comment got moderated, so I’ll try again in a softer tone of voice…

The example in the article points in the direction of a CSS-only design process leading to template looking aesthetics. This is what most of the hardcore PS crowd fears, that it’s impossible to stress the minor details and giving the site a unique look with only CSS at hand.

I think with a different outcome of the example, more people would overcome their fear and test this out. You are preaching to the choir, when you should be converting ;-)

An insightful article nonetheless, cheers.

Okay … so I went on a little tirade the other day regarding a different article published on 24ways.org. (http://24ways.org/2009/ignorance-is-bliss) The main reason was because I was in the midst of the exact problem that was being described in the article without the “pleased” client.

But this article … YEA!

I think I want to add this snippet to every web proposal that I send out:

“Once the design is approved, you and the client have to decide if you can live with the design looking different in different browsers. Is it so bad if some users get to see drop shadows and some don’t? Or if the rounded corners are missing for a portion of your audience? The design won’t be broken for IE people, they’re just missing out on a few visual treats that other users will see.

The idea of rewarding users who choose modern browsers is not a new concept; Dan covers it thoroughly in Handcrafted CSS, and it’s been written about in the past by Aaron Gustafson and Andy Clarke on several occasions. I believe we shouldn’t have to design for the lowest common denominator (cough, IE6 users, cough); instead we should create designs that are beautiful in modern browsers, but still degrade nicely for the other guy. However, some clients just aren’t that progressive, and in that case you can always use background images for drop shadows and rounded corners, as you have in the past. “

FANTASTIC JOB!

I think part of the polarization is because web design is still in its infancy, and there are very few standards on how to actually do it.

For example, I’m shocked at the number of people that don’t seem to use wireframing as part of their process. It’s much easier to establish basic hierarchy, structure and content in your wireframes than in your design. And much easier to change those things and get client sign off without distracting the client with visual styling.

Once you adopt a process with wireframing, most of the benefits of designing directly in the browser disappear. You already know the way the HTML is going to be written from a good wireframe. But you’re not limited to it, and you can go from there into Photoshop, Illustrator or Fireworks (I heavily recommend Fireworks, unless you’re planning on using a lot of visual effects or complex graphics).

Until web design has been around long enough to develop best practices we all agree on, we’ll have debates like this. That’s how those best practices eventually get established. Young firebrands make outrageous claims and try to shake things up. If they’re right, the industry moves that way, and if they’re wrong, the industry doesn’t.

OMG…… why on earth do you think they called it photoshop and not websiteshop!

This is the World Wide information Hi-way anywho, not some graffiti or tattoo media,

Sorry Bob, but your wrong.

The best websites speak to their target audience directly by presenting relevant content in a creative way.

How you achieve this, be it in Websiteshop or Future Splash Animator, is up to you.

In my opinion those who choose to create website in a browser and not an image editing application probably more a developer than a designer.

It’s interesting that when you look at the big studios like North Kingdom, Fi, Odopod, Area 17, Group94 that they use Photoshop to design websites. Are they wrong?

Excellent article! A hard things of mockups explained simple. Bookmarked article. Good job, Meagan!

Thanks for creating such a terrific article. You’ve gotten me back into coding!

As I sit here with PS open, about to start working on ideas for refreshing the look of my site, I’ve decided (after reading this post) to instead approach it from the browser and concentrate (this time around, at least) on making the code and content do the work and fitting the design (whatever it turns out to be) to the content, rather than the other way around.

Thanks for the flash of inspiration, and best wishes for 2010.
r

Well done, Meagan Fisher!

And well done, 24ways. What a beautifully coordinated set of articles you’ve given us this year.

I half agree with this article. When working with HTML and CSS I can’t design graphics… and I can’t just apply images into HTML if “I don’t see the whole picture”.

I don’t design in photoshop because of the client, but because of my self. I like to have determine where content will end up before going into HTML.

I can move one block of content from one end to another in 2sec… with HTML It could take me an hour (if I would have to break the grid).

But I guess I is not really necessary to work either way – we should work as it works best for us.

I do agree that there isn’t a “right way” to do this, but only whatever is most comfortable / fastest for the team / project.

I think this isn’t helped by employers who are constantly looking for “unicorns” — you know, we’ve all seen those ads looking for “someone who can rock Photoshop, Illustrator, InDesign, HTML, XML, XSLT, CSS, PHP, Java, C++, MySQL, DSP assembler code, and can present Flash prototypes…” In their race to find the cheapest human resource to cover what rightly ought to be multiple positions, they’ve ended up creating divisions in the web development community.

Now there is a constant game of one-upmanship between pure visual designers and pure coders, because it’s rare to find someone who’s equally strong in both skillsets and each side is afraid of being eclipsed by the other.

Articles that say “Real web people only design in such-and-such a way” don’t help.

Personally, I stick to my own strengths and take the time to find people who complement my own skills for each project. I don’t code, but I know enough about code and standards that I don’t go designing things that can’t be achieved with HTML, CSS and JS.

Maybe it’s just because I’m a coder by nature rather than a designer, but I’ve always approached things this way. It’s when I have to get into the graphic work for IE that I start to moan – quite a bit like the graphics people here have been moaning. I’ve stopped doing most of the hacks for IE, if it looks different, it does, and that’s that. As long as it still looks good and functions, I’ve refused to go all out just for IE.

Still, they say they are improving in standards-compliance again with IE9, maybe someday..

I think this method is avoiding photoshop is only really usable if you have already produced wireframes to which you are going to base your design on. I use Axure for this, it is an excellent solution for rapid wireframing and prototyping.

The reason why I say this would only be practical with wireframes already made is because it can be time consuming drastic changes to the layout in a markup based mockup. Whereas making layout changes on your wireframe simply involves draging and/or resizing a few rectangles.

Additionally, some people may find it hard to express creativity when starring at a blank browser screen, knowing that each of their crazy ideas would require markup and css styling, whereas once again in a wireframing environment this would take a matter of seconds.

So I feel this can be usefully implemented assuming that you are not cutting corners in the planning and analysis of the project and producing wireframes as you normally would. This method also assumes that your designers are well versed in CSS and xhtml.

I do agree with the concept of designing in the browser. It’s the easiest way to make quick global changes to things like corners, colors, type and layout – and across multiple mock-up content pages with different layouts.

But, the HTML will very-nearly-almost-always have to change or get re-ordered to achieve different designs. CSS isn’t all-powerful just yet .

Let me clarify one last time about Unify. It isn’t for high fidelity prototypes, but CAN be used for low fidelity prototypes. In other words, you can make a click-through wireframe set, but Unify isn’t for making click-through visual comps.

As Unify relates to this article, it’s really about designing layouts and navigation sequences rather than the visual design.

Well said and I completely agree. I love designing websites this way and find it much more enjoyable as well. Loved the reading; great work, keep it up!

“In my opinion those who choose to create website in a browser and not an image editing application probably more a developer than a designer.”

Garbage…

“Web designers” as a designer differs from other designers in the fact that they design for a medium based in code… if a web designer doesn’t know how to code, I question whether that should be their title… just a s a print designer who doesn’t know how to prepare files for a printer should prolly be called something else as well.

To assume a position that designers use Creative Suite to make the way a website looks, and developers code the designer’s vision, is a dying idea. Why hire two people when you can easily fit both talents into one person. HTML and CSS aren’t complex programming languages, they are content and presentation languages.

2010, the year that “web designer” and “web developer” became the same thing. WOOT!

I think of this as another tool in the belt. I’m pretty sure Meagan understands that this is not going to work with every client. After sitting down with a client and discussing their needs and requests I think this could work for the majority of clients out there.

I have to correct my first comment here:
I said, you could send a picture of your website build in HTML. But why?

Just read the article “Ignorance is bliss” and your eyes will get opened!

Those two articles will chance my workflow in a very positive way so thank you!

While Photoshop isn’t perfect, especially with font rendering (compared to how browsers do…), I still feel it’s the best tool for creation of a vision or layout. Building with pure CSS, while fun & in certain scenarios faster, limits the person at the controls, bound to the proverbial box model. Being able to place anything anywhere, blending modes, masks & the quickness at which you can “generate” something you’ve got in your head or sketched on paper is partly why I love being a new media designer.

I’ve designed sites both ways, and with the deepening of CSS3, font support & wide spread alpha support, we’re closing in on a day where Photoshop will be less a designer tool, and more a photographers tool (just for image manipulation & enhancement).

However, Photoshop isn’t the end of my design process. It’s merely the beginning, and I don’t ever have a final site until I’ve done much CSS tweaking across browsers, seeing how the content really fits with the design. But so many things can be nailed down in the PSD mock up, saving much time, money & frustration over the launch of a new site.

From my cold, dead hands.

I think it depends not only on your coding ability but also on the type of design you are aiming for. If images are fairly important to your design then these need to be designed outside the browser, and moving back and forth between the two is probably slower. For example, perhaps you want a nice masthead photo image that is somehow integrated or overlaps with other elements on the page. During the design process you may want to play around with that image. You can’t do that in the browser.

Apologies for the product plug, but I think the fact that here at Microsoft we are investing in making tools along the line of thought presented in the article here tends to reinforce Megan’s point of view.

Our Silverlight and WPF platfoms are built from the ground up specifically for the purpose of interactive applications. And our tools, Expression Blend and Sketchflow are purpose-built for designing navigation, interactivity, and data-presentation applications for those platfoms. Because you are working directly in the platform medium of your final app, you can also make the visual design as real as desired/necessary at any stage of the creative process in any of the above areas of emphasis. You can also move seamlessly from “sketching”, to “mockup”, to “prototype”, to “implementation”, and even to “revision & rework” phases of your project without starting over or switching toolsets.

We would love to have people try our tools as they explore this process of mocking things up outside of Photoshop in the final run-time platform.

(And if you must stick with Photoshop comps, we also have some exciting solutions for incorporating that artwork into the Blend workflow and bringing your comps to life with interactivity and data binding.)

@Joseph Sims

“‘Web designers’ as a designer differs from other designers in the fact that they design for a medium based in code… if a web designer doesn’t know how to code, I question whether that should be their title”

I didn’t say designers should not know “how to code”. However, in my opinion, realistically a good web designer will use an image editor first because they want to achieve a level of detail and balance that would be inefficient to try and create from scratch in HTML. Again, an architect doesn’t go out and start plonking bricks around in his backyard. Just because HTML is very easy to write doesn’t mean it’s a good starting point for design.

On the “all web designers need to code” argument, should they know HTML or .net or PHP or Rails or whatever language? I think it’s better to be really good at one aspect of creating a website than average at a lot of things.

Chortle chortle. What a joke. Anyone who works in a professional environment knows that it would be a nightmare designing in the browser considering how fickle clients can be. The optimal solution which is already possible in Photoshop is to export the design for web with clickable buttons.
Also, after a couple of revisions to the site the code can become cumbersome even if you are a seasoned coder. It’s all about keeping the sites lean and this will defintely not benefit the end user.

Hey, I liked your post. Definitely unique.

However, I’m not in complete agreement with you from scratching out Photoshop and starting a website strait from coding. There are so many disadvantages from starting out like that. Sounds like more of a headache than a solution. Photoshop is awesome and not a program that crashes all the time. That rarely happens…and CTRL + S should always be something you do anyways…pretty much every time you make a change.

Well written article.

I’m on the fence with this topic. There are times when I make design decisions while coding although the vast majority of the time I and trying to replicate my Photoshop mockup in markup across multiple browsers.

Designer’s demand control and I’m not sure browsers give that control at the moment. Some people are OK with a variation in design from browser to browser. The more important visual design is the more Photoshop is required.

In order not to disappoint the discerning client and to alleviate cross-browser problems, I’ve learned to lock everything down in a PS comp and just export the whole thing as one giant image to the web page so everyone sees the same thing. You can’t click on anything, but it all looks the same. (j/k)

Thanks, Meagan. And Andy Clarke too.

For those that wish to be a little bit kinder to Internet Explorer, you can always specify two colors/background-colors, one as standard RGB and one as RGBA. I always forget the order in which to put them, but It means a lot less of a drastic difference to users with Internet Explorer.

For instance, in Meagan’s final example Internet Explorer has no color whatsoever. It’s just a white background with black text and standard blue links. Many people might agree to punishing IE6 in such a way, but IE in general is still widely used.

Either way, I fully agree with this approach when situations allow for it. I just tend to be a little more generous when it comes to broader browser support, and with something as easy as adding a second color/background-color to elements, the payoff (in my opinion) is definitely worth it.

Thanks for the great article, Meagan. Now I just need a few clients that would be open to said process!

I respect different opinions. That`s a great article, but I think it`s more productive making the mockup with Photoshop. It`s faster changing the design at photoshop instead a HTML interface. Not to mention that`s unusual to have crash problems with PS.

Cheers
Gustavo Nozella, from Brazil.

while i have found lately that skipping the static mockup process has been beneficial to getting approvals, the design in this article is too heavy on css3. load it up in IE and it’s bare. most of your typical clients are going to be using IE.

overall i think the article is great though.

was 24 ways made in textpattern?

This article completely changes the way I look at web design! It’s true that with all the new and fun css thingies, there’s not as much need to create, recreate, recreate, and recreate stupid images.

Really well constructed article. Bookmarking it right now…. Thanks

<p>Sketching up a website in markup seems like sketching up a magazine in LaTeX&#8212;a fun exercise to try once or twice for variety, but you&#8217;re ultimately limiting yourself more than you should.</p>

Thanks for this article. I really appreciate it. But PS help me to try colour combinations and to understand the elements position. I’m a little tired to “Slice and Save for the Web” and often I find myself to think:“And now? How I reach that effect?”, but for my work it’s still soon to leave.
I promise that I’ll try this method because it’s really interesting.
Sorry for my english…
Thanks a lot!

Thanks for this article. I agree about creating a prototype directly in HTML to speed up prototyping and save time skipping the transformation from proto to HTML.

I have some questions about using all these CSS3 features, specially box-shadow and rgba in terms of performance : have you ever tested performance about paint reflow? What is the cost using these? Negligible?
I wonder that if you have a background image with a rgba box over it for example.

The one main thing I’ve taken away from this article is the fact that by designing in the browser, you can actually save yourself time by combining parts of what would be two separate stages if you use PS/FW and then code, because you’re creating your HTML & CSS as you design.

There’s going to be some things that you won’t be able to discard your graphics program for, but I can see how doing bg-colours, rounded corners & shadows etc in the browser would be faster initially than in a graphics program, particularly if you need to make edits.

A lot of people and the article itself brings up the problem of what to do about clients previewing in a browser that doesn’t support all the CSS features, but you could maybe have the best of both worlds, by designing in the browser and then taking a screenshot of the design in a feature-capable browser before sending it to the client. If they sign off on all the stuff that IE doesn’t support, you’ve already got most of the code in place, and then just have to add to it to get it work in IE (if that turns out to be a requirement).

Anyway, I think I’m going to give that process a go on my next project and see how it pans out.

Awesome post!

However, I have always built websites in the browser, never in PS. I can’t imagine trying to go from PS to the browser.

Am I weird?

Opera 10.5 adds CSS3 Transitions and 2D Transforms to the long list of CSS3 properties already supported by the browser as well as increased support for CSS3 Backgrounds and Borders. We also design websites while checking compatibility with modern browsers.

First of all, a nicely written article, please do keep them coming! However, have you tried the Photoshop >Fireworks workflow as it now comes with CS4. Much easier to start in Photoshop and end up with a clean, interactive, easily changable mockup, with a lot less work to do when reaching for the final product. As a Graphic Designer, I can mock up in the browser but find it more time consuming and creatively restrictive than the Photoshop route. Previous to CS4, I did find it cumbersome, but now it is a dream.

This is awesome know how to do old school but was worried on how to mock something up with just PS and porting I hate working out kinks in between two programs this I believe should be good mantra. Plus doing it this way your not faking out clients.

Completely agreed with designing in the browser, it is just a much more efficient approach.
I’ve only ever used a program to design a page 3 times actually, Paint, Paint, Visio.

It was the reason for me making an HTML Sandbox inside the browser, one less program is always nice.
On that note, it badly needs updated, very old college project that wasn’t entirely finished.
Just simply an IFRAME with the full size of the document with a drop-down interface for editing in a TEXTAREA, written to it with JavaScript. Even had viewable Undo / Redo to both the textareas and the actual document.
Marvellous.

If i ever do finish it, it’d be nice to get it up somewhere for others to use. It saved me a lot of time

@Meagan Fisher: I totally agree that if you’re designing a web page, designing in the browser can be way faster and easier than designing in Photoshop, but PS still has a place in the world – for doing digital photo composites, complex photo-based designs or any other manipulation of raster images. If you’re site has mostly graphic elements that can be represented by vectors (lines, circles, etc.) then this approach works great, but if you want to do anything more than work with colors, fonts and basic shapes, you’ll need PS.

@Naomi Niles: You want a website design and layout tool that let’s you create designs as a designer, but that generates the web page for the developer? Ever try Expression Web? It’s actually pretty cool.
http://www.microsoft.com/expression/products/Web_Overview.aspx.

@Meagan Fisher
Thanks for a wonderful article.

But css3 elements are not well supported by all browsers.
http://www.w3schools.com/browsers/browsers_stats.asp
though few users but still USER.

so, till then Adobe Photoshop is last and the only option.
Afterall, one should fall in love with the visitors not with the technology as long as you are in web’ed. :D

@Mr. Owl
cuchiy poochie, cutie, sweetie , stupid owl.

Sorry owl !. it’s not me. It is you. O_o

Thanks for this! You present this as a newish idea for gurus, but it is quite a nice step-by-step for us n00bs who are just poking around with Web design for the first time.

Quick question on the closing point about rewarding modern browsers. I totally agree. My question is how much effort to put into accommodating the non-modern browsers. I’m not talking about IE6 — screw it. I’m talking about IE8 and CSS3. Is it worth going back and putting it JavaScript hacks to get rounded corners and text-shadow in IE8? It doesn’t take too much time, but is it worth the added clutter in the code and drain on the load speed?

I’m not sure if i agree with the Photoshop blowing up in your face, cos i use it a lot for my work. But was disqusing with a friend who is web designer and he pointed out that it’s much easier to design a website in InDesign than in Photoshop, so i guess your right.

to me it looks like building an actual house or a car, with no 3D sketches. just to hard to imagine actual shapes, colors in code.

Great, interesting article. Disagree with the PS-bashing though, I haven’t had it crash on me in over a year and I use it for hours every single day.

The problem I have with this approach is that it essentially omits a huge stage of the design process for me. Maybe you didn’t go to design school. Maybe you have to churn out a website quickly, and are more interested in front end web development than graphic design.

You are not even designing a website here. You are making one. You are just going straight into it.

Sorry but this is not design, as I know it. This kind of strategy will work for a lot of clients and for a lot of websites. They may even be good ones. I am not saying this approach is wrong entirely.

You cannot tell your clients that you offer “graphic design”, or “UX, UI design” or anything like that and then give them a “mockup” that is essentially very close to the finished product. That shows a lack of understanding of the design process to me.

I’ve been designing like this for a couple of years at least – when I realised I didn’t use photoshop enough to be good at it (except for diving into tutorials when needed: how to blend images, create web 2 buttons (thanks google!)).

It doesn’t over-hype expectations with the client, and also means you can have the website built in one go (assuming you are able to sensibly interpret the client brief).

Probably the best article I’ve read in 2010. Megan, you’re awesome! Such a great read. I’m inspired now and will give it a whirl!

Thanks!!

Pencil and paper, Illustrator, Photoshop, CSS/XHTML…each project and each designer is going to require a different combination of these tools to create mockups and prototypes. The tools you use will influence what you design, which is why I think it’s really important to start with pencil and paper…or whatever is the most free-flowing medium for you.

That said, having just sunk a couple of days of my life into learning what a heinous piece of crap Fireworks is for creating mockups (I could definitely have coded my ideas in that time) I am going to experiment with HTML/CSS mockups this year.

Thanks for the article!

@phillip I believe fireworks CS4 has built in CSS export function, although it’s no good for live use it does have it’s advantages of bringing a quick mockup / wireframe to the browser.

Hi Megan,

Thank you for another great article.

I started web designing around 4 years ago and when I started everything went through the photoshop stage of mocking up my designs. It was a slow and sometimes frustrating process.

Now however I no longer just use photoshop. I use a photoshop and illustrator mix. Illustrator allows much more control over type and over image quality so I use that to layout the page and import items from photoshop if I need photos editing or if there is something I can’t do in illustrator.

I find that most clients want 2-3 initial ideas to start with and this means that coding straight into the browser is not an option as this would waste far too valuable time for me and the company i work for, to then just chuck two pages of code and css away at the end of the design process.

However if I had a client with a specific specification and clear goals of what they want to achieve then coding straight into the browser is definately the way forward.

Nice article, makes sence. A static mockup has never sat easy with me, when I look at what I’d like as a client, I’d wnat to see what it can do as well as see what it looks like, get it working first then tweek the visuals.

So many problems with this. A lot have already been discussed but I’m going to discuss them again.

First, why is it assumed to be a good thing to fuse the web designer/developer roles? Visual creativity and coding ability are two different skill sets—I don’t see how you can deny it. Hats off to the lucky people who already possess both, but why force it on people who are only skilled at one? In my experience it is far easier to find people who are good at one or the other. It’s not hard to find good web developers, and it’s far easier to give a good designer a handful of web design guidelines, than it is to expect one person to be good at making an attractive layout AND coding it to standards using cutting-edge technique.

I’ll give you that this article’s technique may be more efficient for a designer/developer. But the bigger underlying problem is that this kind of thinking will keep web design as a whole stuck in a rut that it’s been in ever since the Web 2.0 wave started.

As others have mentioned, designing for the browser limits you. If you don’t believe me, go to the Zen Garden and tell me how many of the layouts you see there could have been created without an initial Photoshop mockup. The answer is, only the ones that stick to the same boring box-based paradigm that this article encourages.

We’re all stuck interpreting the web as web professionals and forgetting that web site creation is primarily a marketing discipline. Most web sites aren’t made for other web professionals—they’re made for the product-buying public. That public isn’t wowed by nifty CSS3 techniques, because they don’t know or care what they are. The public responds to something that is visually interesting (like, say … Hollister) just like they do in any other visual marketing medium.

So if you’re interested in sticking to one paradigm and limiting your creative range to what you can code on the fly … sure, this technique makes sense. I’m not saying you can’t make a visually interesting design this way. Just that there’s nothing you can’t do in Photoshop—not so with this technique.

(Disclaimer: I’m not a designer at all—just a coder that gets to work with them.)

In my office, there is the designer and the coder. I am the coder. I don’t know much at all about design, and the designer doesn’t have the encyclopedia of CSS, HTML, JavaScript, and PHP in his head that I have.

While this is great in theory, it’s not going to happen here I work.

Now, hear this.

Why doesn’t Adobe make a web layout editor? Like a photoshop, but uses only the rules allowed. Like no fancy dropshadows and/or fades, etc. Photoshop is overkill. Indesign is also the wrong tool. Dreamweaver is just too much code. If they bridged that gap, they would have another great piece of software to sell.

Can you imagine what it would be like if cars were designed this way? “Just fire up the ol’ assembly line and start welding metal!”

Ok, it’s virtual, but still, if you’re using css to work out your layout, well, that’s the part I think is really nuts. Why not something like Omnigraffle? Drag out a box. Drag out another box. Move ‘em, scale ‘em. It really doesn’t get any simpler than that. Unless you want to talk paper and pencil, which we probably should.

Beyond that point, yeah, I’ve designed some sites on the fly like this. It’s got its points. But one thing I love about Photoshop is that it’s possible to work in Photoshop without concern about coding techniques and browser limitations. You can do pretty much anything you can imagine in Photoshop, while if you’re doing it in css, the first thing you wind up asking yourself when you think something up is, yeah, but how do I execute it? That’s an impediment to ideation, if you ask me.

I have been having issues with cs3 also. My brother who is a commercial artsist and has done work for my sustainablity website actually works with photoshop 5. He used to work with a newslimited news paper here in brisbane and they all used photoshop 5. We have both had issues with Cs3 crashing in the past.

Wow, you folks are like the web design standards Olympic dream team! Every single entry this year is insightful, easy to follow and absolutely applicable to projects I’m working on now.

Really appreciate the open, thoughtful expression and sharing of knowledge.

Best,

Phil

I totally agree. I never got the PSD thing—slicing and dicing is like lying and cheating.
Philosophically, it’s like making a painting of a sculputure instead of just making the sculpture. The medium IS the message!

nice article, running a one man band i am always trying to achieve client happiness and increase my webdesign skills. These articles are a god send and help me add value to my business.

Thanks

Outstanding article! I do agree with photoshop innumerous problems but not with the “death”. If it is true that CSS3 brought us more freedom we still need photoshop in so many circumstances! I think CSS3 with all its tags and functionality cant replace photoshop as graphic design tool. No doubt about it!
I’m not a huge fan of photoshop and when comes to design for web i would rather prefer illustrator because its simplicity in working with path!
By the way for I.e we do have a lot of options to achieve quite the same results as “moderns browsers” just check this article http://www.catswhocode.com/blog/10-ways-to-make-internet-explorer-act-like-a-modern-browser

CG

I’ve got to say, it’s an interesting article, and a great approach.

The only problem is the client.

I’d have a hard time passing a high budget site this way. Clients are all about the end product, and how it will present them. Photoshop & Fireworks allow us to present this ideal quickly and easily – with edits also being equally as quick.

But with that said, I do think the mockups need to be presented as true to form as possible. For this, i’ll generally create a basic html page, and embed the image. If colours or lines extend from the image, a simple background tile helps get this across the line.

The benefit of the client seeing the design at the right size, in their browser and being able to scroll up and down is a great way to get real-world feedback.

The fact it’s online and easily accessible also puts an end to the heart-stopping comment i’m sure we’ve all heard…

“so we printed out the mockup and passed it around the office for people to comment on”

Jerks

First off. That was the most enjoyable web article I have ever read. Thank you for that. You should become a writer, why are you wasting away with us in the world of HTML, you have a gift. Serious.

So. As I was saying.

This article completely challenges the way I attack web design. So I kept asking myself during the reading, is this the light? and my answer is…

If I could design in HTML I would. Simply.
and even though you proved in your example to make a clean, professional page, designing in HTML is limiting.

I could continue to explain why I am not going to go to your HTML WEB DESIGN CHURCH but I will end it here and leave you with another thank you. Thats how I roll.

And I cant wait for the US vs England match. Yup, I am rooting for Donovon and the US, even though Rooney is in form and kicking ass.

Peace.

I just read this and I am doing the full degrade nicely thing for my current app I am designing.

It was highlighted to me by my senior that I should start to do my mock ups in HTML and leave Photoshop behind, thats quite difficult I have to admit but I do agree actually building and ideas seems the way forward in a lot of cases.

Thanks for posting this.

Web design is an agile process. Use the medium that makes the most sense with the client, budget, deadline, and your skill set. Personally, I love starting designs with paper & pen, and showing these to clients because you get very quick feedback on the site’s structure, and can choose to code or image edit from there. This forces me try to be as up front as I can regarding usability.

Anyways, I’ll be sure to try using coding as a secondary step, after my paper & pencil sketches :D, and see how it fits with my own abilities and work streams. After all, I’ll admit that I’m still learning but want to try as many different approaches that I can – not so that I stick with one methodology, but so that later on, I’d have gathered enough experience to be able to better foresee which process methodology offers the client the best path to success, and then move forward with that approach for that project.

Thanks for a very thought provoking article, you guys are awesome!

Admittedly, going through PS is silly. Try to use a different font for your body copy, and *fix every single iteration” and you know what I mean. The layer system is actually counterintuitive, because in CSS, we do not (usually) use layers that way.

Personally, I go from pencil sketch straight into css/html. I have the grid in my sketch already, and experimenting is indeed easier to do in CSS. I can’t ban Photoshop entirely though, I still need images and gfx. And frankly, until IE8 is as dead as IE6 is now, using CSS3 is not an option for me. Check out the mockup in this article in IE and you’ll see what I mean. I don’t mind pages looking differently, I do mind them degrading into a terrible monstrosity.

blew me away – fantastic job! brilliant mind, chase cutting concepts, acey ace f*ing ace!

I think designing with mark-up can be helpful when doing design prototype. Designs / wireframes can be quickly tested with other team members. Static JPGs, on the other hand, relies on people’s imagination. However, I’m not so sure about it as a primary design tool.

Applying inner-shadows, glow effect, gradient, rounded-corners… are great visual effects. They can be easily applied using CSS3. However, I can imagine that when people design with markups, they would rely on these effects. They would look at their design and think “mmm… how to make the text pop? ah-ha, apply glow effect – it’s easy to do with CSS3!” This kind of thinking would produce very boring kitsch design. Any effect that’s complicated / illustrative / dimensional would not come to their mind because they cannot be immediately achieved using CSS3.

Yes, I know nothing is impossible with CSS3, but many complicated things are like puzzles, which are hard to solve and disruptive to creative flow. And it’s hard to chuck things out when it’s a complete engineering triumph but a design disaster.

But anyway, some people might be interested in this technique. Nevertheless, I wasn’t convinced by your article & example.

I’d just like to say I love the site. I’m a big coffee fan too :-) Think I’ll take a walk along here more often!

Have a nice day

In the end, I think it depends on the level of design you’re planning to do, i.e. how out of the norm is your design going to be?

Personally, I don’t plan for my designs to look like every dam web page out there. If I were to begin designing them in the browser, it would probably end up like just that.

Photoshop gives a more artistic touch to web design. Sure, it’s not perfect. But I believe that future versions will have web and print variants and improve on it’s failings…. Let’s face it, Adobe isn’t stupid…They’ll make improvements and continue driving in industry forward like they always have.

Wonderful article. Useful descriptions.
However. I disagree with some points.

I have never been into designing with Photoshop. I always found it too much trouble when it came to adapting the original design to the customers wishes. Instead I usually go with Illustrator.
It gives me the freedom to design whatever I see fit, even it cannot be expressed in code right away, and then lets me easily redesign every single aspect of the design without much trouble.

Crash-prone like Photoshop? Yes. But my left hand seems to do the save command every two minutes or so without me even knowing about it, so that never turned out to be a problem.

Why do I still keep working like that?

I don’t know. Probably it’s because I am not much of a coder to begin with. But more likely it is because during the (graphic) design process I don’t want to limit myself to what can be achieved using CSS. If it can’t be done, no matter. I will find a way to work around that later.

It is a little bit like composing a song by writing the notation down on paper versus sitting down with an instrument you play really well and see what happens.

I don’t know. I don’t think there is either a right or wrong way to do it. For me, it depends on the design of the site. If it’s minimalistic with hardly any graphics, then I just code it up. But if it’s graphic intensive, I can’t imagine how I would be able to not do it in Photoshop first. Sometimes it’s not just about either boxes or rounded corners, especially if you want to have some elements breaking out of the grid and other fun things like that.

Anyhow, I think the real problem here is Photoshop. Photoshop just isn’t ideal for doing web design for many reasons. What I’d like to see, is a company come out with a real tool for doing web site layouts and design. Now, that would be awesome.

F*ing Great Article… Meagan you probably won’t see my comment since there are a million on here, but you’ve gained a new fan ;) You articulate extremely well in world of loose, superflous filled jowls