Make Your Mockup in Markup

234 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Andy Clarke

    @Kevin Cannon “Using a technical tool for the early design process completely closes your mind to potential design solutions. This is a very good method if you just want to knock out something basic. However, if you want to innovate, it’s doing it all backwards.”

    — Where I come from, they would would call that ‘tripe’.

    Markup and CSS are not technical tools and are as much a part of a designers toolkit as bezier curves and clipping paths. Maintaining this false dichotomy of skills and tools is one of the reasons why so much money and time is wasted, even today when we should know better.

    Although it won’t suit every designer, client or project (what can?), when a great designer makes a mockup in markup (and CSS), they are never limited to “knock out something basic”.

    You are right on one thing, (“Use the right tool for the right job”). But you’re about as wrong as you could be on the rest.

  2. Stephen Caver

    Top notch article, Meagan. And then there was my two cents:

    This process may work for some, but I don’t think I’m there yet. For more complex design it is time consuming if not downright difficult to comp in good ol’ HTML and CSS. And if the client doesn’t approve of the glorious innovative design direction, precious time and money has been wasted on code when Photoshop can produce something many times more quickly.

    What I have longed for is an intermediary step between Photoshop and the browser. Something that acts and behaves like a browser, but is built for rapid composition and is much more flexible. What web designers need is their own version of InDesign or Quark, where websites can be designed quickly for clients but avoids the drawback of working in photoshop.

  3. Scott

    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.

    You say this like someone who’s never had to build a site for a corporation with 40,000+ employees working on company-owned machines standardized on IE 6, every single one of whom will assume the gorgeous-in-safari-and-chrome site you’ve just built is broken.

    This happens WAY more often than you’d maybe like to think.

  4. Scott Foley

    I have to agree with Douglas Neiner. While this is a very well written article and the point is made very clearly I still do not agree 100% and will continue to use graphic programs like PS and AI to mock up designs. I can make mockups much quicker in PS or AI than i can in CSS/html. This has nothing to do with my skill level with CSS or PS but with the fact that it’s simply easier to make graphical adjustments in the graphics program.

    To appease the other crowd, I do try to do as much mocking up as I can within CSS after the wire framing is completed in PS/AI. I will admit that on sites where there is not a lot of graphics involved I have skipped PS/AI and moved directly to css mockups.

  5. Cameron Moll

    Another great paradigm-shifting article, Meagan, much like Andy’s from yesterday.

    Without stealing any thunder, I’ll add the recommendation to use whatever tools and process suit your personal, project, and client needs best. This approach may work well for many people, if not the entire industry. For some, however, it may not, and those individuals needn’t feel ashamed, shamed by others, or called out for using an approach that suits them better. (Though at the very least, giving this approach a try, as you suggest, is certainly a wise recommendation.)

    Another solid year of 24 ways, Drew and crew. Thank you!

  6. Paul Randall

    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.

  7. Chris Emerson

    Why the Photoshop bashing? I’m not a graphic designer by trade so don’t use it as much as some, but it hasn’t ever crashed on me, I’ve never had a problem with its UI or any of those complaints. This is the first I’ve heard of it being a running joke!

  8. Ryan Seddon

    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.

  9. Neil Sweeney

    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.

  10. Luke Dorny

    Fastasticaliciousness.

    Well-documented and easy to follow goodness.
    Will attempt this with my next project.

    Thanks for collecting this all in one page. Wealthy article.

  11. Adam

    Excellent tutorial Meagan, I was always skeptical about this approach until I saw this working example. May try that out on my next project!

  12. Kevin Cannon

    I would not advise this as a general approach at all.

    Using a technical tool for the early design process completely closes your mind to potential design solutions. This is a very good method if you just want to knock out something basic. However, if you want to innovate, it’s doing it all backwards.

    Prototyping tools need to be quicker than production tools so you can change things around, be flexible and experiment quickly and easily with ease. Producing a HTML prototype this way is going to be slow and messy.

    I agree with the sentiment that creating an interactive prototype may often be a good idea, but in that case, use a prototyping tool like Axure, Omnigraffle or even Fireworks to export an clickable wireframe.

    Use the right tool for the right job.

  13. Edmundo Junior

    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).

  14. Dan Matthews

    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.

  15. Joe Casabona

    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.

  16. Philip Renich

    Meagan, great article! It’s so nice to actually see someone’s process and a real example. While it’s good to sort out your own way of things to be efficient to your personality and skills, there is a lot to take away from this.

    —-

    I may be wrong, but I’ve heard rumor that Fireworks was supposed to fill this intermediate gap? It has rollover effect capability, it’s easy to switch colors, change sizes, and move layers around. Generally I’ve just seen it used for creating streamlined PNGs and GIFs for the web, well, Photoshop can do that so are we using it correctly?

    Anyone know more about this?

  17. Jamie Fehr

    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.

  18. Ben Callahan

    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.

  19. Chris Korhonen

    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.

  20. Andy Croll

    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!

  21. Mark S

    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

  22. Paul Russo

    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.

  23. Martin

    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.

  24. ilovecomputers

    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.

  25. Bridget Stewart

    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.

  26. Alan Moore

    @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.

  27. Peter Eller

    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

  28. Vanesa

    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.

  29. Shane Guymon

    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.

  30. DRoss

    I guarantee you all the people here who are saying they don’t use Photoshop, rather they mock up in the browser are not good designers. There is no way you can detail a design straight from code. The site’s you design will look very undetailed and developerish.

  31. Douglas Neiner

    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.

  32. Will Morris

    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.

  33. HB

    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.

  34. Harper

    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.

  35. Sean

    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.

  36. Chris

    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.

  37. Lea

    This is eerie because I’ve just been independently experimenting with this kind of technique with my upcoming personal site. Not sure it will replace my PS workflow, but it is an interesting and immediate way to work with real content and test markup. Thanks for outlining your steps.

  38. J. Jeffryes

    I’m going to say this as someone that codes very quickly by hand, in a text editor, and knows CSS fluently.

    This is a terrible way to design a website.

    I’ve done it many times, when design is a low priority and speed is a high priority. What this approach does is lock you into designing based on the needs of the code you’ve written. You lay down basic structure for your page, and get locked into those arbitrary decisions. You become blinded to possibilities that are difficult to style or that you’ve never tried before.

    If you want truly cutting edge, innovative web design you do it the right way: you build wire frames, you prototype, you use a raster graphics program while keeping your code in mind, and then you code it. That keeps your mind on the needs of the user and the goals of the site, rather than what content you put in which div.

    If you’re doing something fast, cheap, simple or that doesn’t really need to look different than every other website out there, then use this approach. Just don’t use it for serious work.

  39. Jesse Gardner

    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.

  40. Christopher

    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.

  41. Dan Boland

    Designing directly in the browser is so natural and simple for me that it’s always struck me as bizarre that so few designers do it that way — for me to do otherwise would be analogous to typing with my feet! If you know what you’re doing with HTML/CSS/jQuery, you can try a lot of different variations and fix what doesn’t work very, very quickly.

    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.

    That’s exactly what I do — a sketch on graph paper, then I hit the browser.

  42. 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?

  43. Cameron

    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

  44. rmc

    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.

  45. Bruno Correia

    The graphic designers that I work with would not know how assemble a proper markup, neither understand the nuances of CSS.

    They are great designers, and that is what they do well. To expect designers to know enough HTML and CSS to make such a workflow feasible is completely unrealistic.

    I would not encourage any designer to attempt this on a real project, chances are he or she would default to Dreamweaver, and not only waste precious time, but come out with a horrendous markup.

  46. Chris

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

  47. Eric Clemmons

    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 :)

  48. August

    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.

  49. Andy Walpole

    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!

  50. Cameron

    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.

  51. Rob Knight

    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.

  52. Ben Spencer

    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!)

  53. eraevion

    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!

  54. David Goss

    @Kevin Cannon

    As Andy Clarke said, you’re comment about using the right tool for the right job is spot on.

    But of course, Photoshop is not a web design application. It’s imaging software, and whilst its uses extend far beyond just tweaking photos, that still doesn’t make it a web design application and therefore it isn’t the right tool (in my opinion).

  55. Mike Kus

    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 :)

  56. Tom

    @ 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! :)

  57. Marcus

    Really, really good read.

    I just got all excited about this. Content as an afterthought has been a bugbear of mine for years. Added to this, there’s always something wrong with whatever wire-framing tool you’re using (it won’t do this or that properly).

    This approach goes a v long way towards fixing both of these issues.

    I’m no designer so I can’t comment on the efficiency/right tool for the job debate. But, I do deal with clients a lot so I thought about one of our clients and wondered whether this approach would work with them.

    They are a 20,000 strong, public/private partnership that do cool things with aeroplanes! We work, for the most part, with their comms department who were in charge of their re-branding (Wolff Olins 06) and are a knowledgeable, up-to-speed bunch.

    Their IT department upgraded them to IE7 this year. They cannot download any other browsers.

    Therefore, even though they don’t have huge committees signing off designs, they wouldn’t be able to see what was being proposed.

    But, maybe they’re the exception? Well, sadly no. From the top 20 in my current list of clients maybe 2 would be allowed to download a non-IE browser. And then only by request.

    I don’t want to pour water on this because (as already stated) I’m very much behind anything that promotes bringing content to the table first but, until the IE elephant in the room is dealt with effectively I can’t see how this approach could be adopted for mainstream work.

    I wonder how I am going to be insulted? ;-)

    Oh… and thanks for yet another wonderful 24ways! Cheers.

  58. Jan Henrik Helmers

    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. :)

  59. Charles Roper

    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 ;-)

  60. Pete b

    if this works for your clients then more power to you, personally I couldn’t get away with this for most of the clients I’ve worked for because the decision maker is using some version of ie.

    I think we need to remember that not everybody is using a mac. There is a danger that the outlook is becoming too inward; “bad Type rendering? Not my problem, get a mac” type of attitude. The web is meant to be inclusive not elitist for the few who can afford a mac, or know how to install a decent web browser.

  61. Nick Toye

    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.

  62. Goobi

    What about mockups? Are you really ‘designing’ the whole thing without any clear way to go? Photoshop is much quicker at building a rough idea on how you want the general site to look like. Adjusting colours, placing graphics, looking at how ad banners would look like. That’s all important. Design is not the same as coding.

    I agree with you that what you send to the client should be a proper coded website, especially given the amount of javascript and css being used these days.

    That said, I start my designs on the whiteboard.

    And what is this bull about Photoshop crashing? I’ve had an FTP client crash on me midway while editing a remote CSS file, losing all my work. Jesus saves. Merry Christmas.

  63. Joris Witteman

    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.

  64. Paul Hearne

    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

  65. Christian Batchelor

    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.

  66. Marvin

    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.

  67. ViVi

    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 :-)

  68. Architela

    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.

  69. Colin Fahrion

    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.

  70. Thijs Visser

    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.

  71. uyi

    I don’t understand who is doing web mockups in Photoshop. 90% of who? Don’t they know that’s what Fireworks is for? Maybe if they did they’d realize the process is a lot easier than either of your two options!

    This process looks crazy cumbersome compared to Fireworks. I am also unclear as to how this would stay sane if you wanted to create, say ten or fifteen variations on a design at once, as designers don’t typically work on a single file in a linear way like this.

  72. Andy Mabbutt

    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.

  73. @dworni

    I say just: no.

    First: why photoshopbashing, maybe you have some crashed fonts installed. PS works for me whole the year, day by day.

    Second: 37signals posted some months ago the same idea as you. Shure, if your webdesigns finished looking like mockups, go ahead and “designing” with floating and bordering in CSS. But remember: there are different kind of designs and I think today the most of them (80%) started in photoshop.

    But: I agree, PS isn’t the perfect tool to make webdesign (and Fireworks is a ugly Macromedia child). I hope Adobe will do something for us webdesignes – quick.

  74. Keith McLaughlin

    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).

  75. Clare Beckingham

    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.

  76. STPo

    Great reading, thank you. That’s pretty exciting!
    But sadly I have to agree with what was said above: our clients still use IE6-7-8 and will continue for years. They don’t care about our problems as designers and they don’t have to.

    My opinion is that we will have to wait Microsoft browsers understand all those CSS3 features to change our way of designing websites. Sad but true!

  77. web2000

    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.

  78. Andy Hume

    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.

  79. Lucian

    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.

  80. Adrian Quevedo

    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”

  81. Jeff Chasin

    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.

  82. Rob Flaherty

    1. There’s nothing wrong with Photoshop. It may not be the ideal tool for web design, but “barely usable interface” is a bit absurd. If it’s crashing on you daily, ur doing it wrong. =)

    2. In certain cases I think this is an OK alternative to static mockups, but I don’t believe it’s faster and, except for cases where you need to demonstrate interactive elements, I don’t think it’s any better. I think designers would quickly find themselves designing entirely within the css “box”, ending up with designs that look like dressed-up mockups.

    3. As others mentioned, you don’t want to be worrying about cross-browser problems when showing your client a mockup. For example, here’s how it looks in IE7/8.

  83. Jon Buda

    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.”

  84. Owen

    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.

  85. John Quaresma

    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!

  86. Dennis Kardys

    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!

  87. Neue

    “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.)

  88. Rob

    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”.

  89. Chris Arnold

    I agree with Rob’s comment on this topic. It seems to be a perfect-world scenario where budgets and timelines aren’t an issue. The practicality is off base.

    1. What if you display 2-3 design directions to clients? Mock ‘em all up like this?
    2. What about interior pages? That would mean 5-10 coded pages. All for a mockup?
    3. Are client-driven changes made on the fly in code? To that point, is the design developed on the fly, or is there a separate Photoshop mockup for that?

    I know there’s a lot of “Hooray” for this article, and don’t get me wrong – it’s well-displayed for those that can work like this. Yet, perhaps aside from a few folks in ideal rockstar positions, this seems impractical on the whole.

  90. simon r jones

    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.

  91. Stewart McCoy

    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).

  92. Sean Delaney

    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

  93. Matt Kempster

    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!

  94. Jordan

    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.

  95. Jeff Croft

    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.

  96. Michael Llaneza

    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.

  97. Alan

    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.

  98. 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 :).

  99. Sean McArthur

    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.

  100. 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.

  101. Evan

    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.

  102. Rob Flaherty

    @ 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.

  103. Jeff Croft

    @Rob:

    I agree completely. Although I always enjoy hearing how others do things, I will never understand why certain authors and speakers in this industry feel compelled to insist that other people should subscribe to their methodologies, as well. There’s way too much “my way or the highway” in these articles, for sure.

  104. Chris Arnold

    @ 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.

  105. 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.

  106. michael albee

    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!

  107. J. Jeffryes

    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.

  108. Evren Kiefer

    Thanks for this excellent article.

    I’m on GNU/Linux and I think the Gimp is even worse than Photoshop for mock-ups which I began to see as a limiting factor of sorts.

    To me, this article showed that the quality of the result doesn’t depend on the tool and that great results can be attained either way. Details regarding your process are very welcome and will be put to good use :)

  109. bob Smith

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

    It’s like all those office secretaries designing fliers in Word.

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

    The best websites adhere to Bauhaus style of graphics—— Minimalism.
  110. Tom

    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.

  111. Cameron

    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?

  112. rafael armstrong

    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

  113. Simon Fairbairn

    Well colour me convinced.

    I thought you would have to prise Photoshop from my cold, dead fingers but on the basis of this article I reckon I’m gonna give this nutty new-fangled method a shot on my next project.

    You kids and your crazy ways!

  114. Iztok

    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.

  115. AJ Kandy

    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.

  116. Haripu

    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.

  117. Brian Holland

    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..

  118. Kristian Tasevski

    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.

  119. Mark Brown

    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 .

  120. Stewart McCoy

    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.

  121. Krzys

    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!

  122. Bram Huirne

    Designing in the browser is a great way of building your websites.

    Just be careful not to restrict yourself in creativity.

    Therefore I always my projects start using the ol’ pencil and paper. With an idea well worked out on paper, skipping photoshop in prototyping will be easier.

  123. Joseph Sims

    “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!

  124. David Arnold

    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.

  125. 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!

  126. Scott Baker

    The workflow idea is an interesting one – and I do this sometimes and start with Photoshop other times – largely depends on if the end user wants something more “structural” or more “graphical” as with most things – there is no magic single answer – it always all depends.

    The part that shocked me was the bit about Photoshop crashing… really? I can’t even remember ever having Photoshop crash on me – and I have been using it for over 15 years now – unless you’re system is underpowered or something – I was truly amazed by this concept.

  127. Joe

    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.

  128. Ben Hayes

    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.

  129. Rick Keeney

    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.)

  130. Cameron

    @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.

  131. Barry

    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.

  132. Aaron

    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.

  133. corianda rocklein

    This seems like a great approach for prototyping very basic sites like blogs and simple 5-page sites. For more complex online experiences that will incorporate motion, FLA, video, etc.; those require collaboration between teams of UX designers, developers, and interactive designers, etc. Photoshop is still the best tool for designing mock-ups for complex sites – although it could benefit greatly from some built-in simple prototyping tools to allow for better communication between teams. For now, I just rely heavily on layer comps to show interaction changes.

    And PS gives you so much more control over the subtle design elements that differentiate one experience from another, whereas relying only on CSS leaves you with a mostly templated-looking design.

    Also, I find the PS interface to be almost second-nature. I’ve been an interactive designer for several years and it’s never been a running joke that PS crashes all the time. You probably need more processing power in your machine.

  134. Andrew Mahoney

    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.

  135. Jesse

    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.

  136. Art Lawry

    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!

  137. Fred K

    First off, congrats on a well written article. The practice itself is nothing new, there are a number of good designers that have used this workflow for years now. If I recall correctly, 37signals did a piece on this about a year-and-a-half ago, for example. Which doesn’t detract from this article, the more that convey this message, the merrier. I think.

    Regarding the comment that good graphic designers have no true knowledge of html/css (and subsequently, anyone using this kind of workflow must be an inferior designer), I would personally beg to differ. This article and its author being proof enough, but there are plenty of others (and I’m not including myself, that would be a bit boldish). But, to each his own. If the described technique doesn’t suit you – don’t use it. It’s really that simple.

    As for IE 6-7, I just wish they would go away already. I know that’s not realistic, but that’s what I want. Oki-doki, happy new year and all that.

  138. Gustavo Nozella

    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.

  139. mr. tunes

    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?

  140. Marcy

    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

  141. Art Lawry

    Hi Meagan,

    Thanks for the great article. Hopefully more clients will become fans of this process because it’s smack-full of potential.

    One suggestion I’d make that wouldn’t take much additional time or effort would be to include duplicate RGB rules for each RGBA declaration. This keeps most of your color consistent even in Internet Explorer which your current example does not. Pretty big payoff for very little additional effort.

    Thanks for your part in building a better web design and development community.

  142. Christer M.L. Bendixen

    <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>

  143. Alf

    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!

  144. Eoin

    This article makes so much sense that i’m kicking myself for not thinking of it sooner. Thanks alot.
    My one and only new year’s resolution for 2010 will be to follow the advice you’ve given me.

  145. Naomi Niles

    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.

  146. Nicolas Chevallier

    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.

  147. John Faulds

    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.

  148. 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?

  149. Coderea Logo Design

    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.

  150. Stevie B

    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.

  151. Wolfknight

    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.

  152. Kris

    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

  153. Julian Tancredi

    You’re young, you like owls, you talk fast, think fast, shoot first, ask questions later, flip the script, break the rules, innovate and not decorate-I like your style-yo!

  154. Byron

    @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.

  155. sahilsk

    @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

  156. Emma Dozier

    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.

  157. Nathan B

    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?

  158. izdelava strani

    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.

  159. Chris FA Johnson

    I cannot imagine designing web pages any other way.

    Using photoshop (or other graphics program) encourages thinking of the web as paper, and leads to all the horror stories we see out there.

  160. Patrick

    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.

  161. chris

    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).

  162. David B

    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!!

  163. Nora Brown

    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!

  164. Craig McPheat

    @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.

  165. Ben Willmore

    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.

  166. Adam Link

    Great post! Really useful and good design tips, although I have to agree with others who have worried about browser implementation. Still, for mockup purposes seems like a good approach to me – you can add in hacks/workarounds to make it backwards-compatible I guess…

    Found a good simple guide for making alpha channel PNGs if anyone needs one: http://www.davidchess.com/words/pngalpha.html

  167. Theo

    An excellent article, I really enjoyed it. I start learning Webdesign last year and a teacher of mine saw me making mockups this way, he told me i should not even think of doing something like this because photoshop is the right way ha ha !

    Thanks for this article.

  168. WS

    John Nack blogged about what users might want to see come to Ps CS5 in the way of making interfaces for the iPhone. I saw past this and was hoping for more pixel perfection for Ps, not for iPhone apps, but for my mockups and general UI elements. It really fails miserably in this department. However, if it did have ready made tools that spit out pixel perfect shapes all the time, It would be a snap to whip up a good concept.

    I don’t think Ps is dead because it’s archaic, but probably not everyone’s favourite because it’s just plain cumbersome. And as for crashes, I stand alone. Ps never crashes on me. I’m starting to feel strangely disconnected. I’d say I’m a reluctant Adobe user—would switch in a heartbeat if someone came out with a decent product that could compete—but even I’m impressed with it’s stability.

    Lastly, most of the people that have commented are ridiculously myopic. Talking about clients not being able to view the markup, etc. But I’m wondering, if the design is done in Ps or a browser, how hard is it to send them a screenshot? Does anyone send an interactive file using Ps? Yeah, I don’t think so… Does it matter how the website was ultimately made in the screenshot? No, no it doesn’t.

    Man, talk about dense… There are millions of ways around any given problem. More brain games and less TV people…

  169. James B

    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.

  170. Chris VandenHeuvel

    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.)

  171. clint

    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.

  172. Elizabeth K. Barone

    <blockquote>
    <em>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.</em>

    You say this like someone who’s never had to build a site for a corporation with 40,000+ employees working on company-owned machines standardized on IE 6, every single one of whom will assume the gorgeous-in-safari-and-chrome site you’ve just built is broken.

    This happens WAY more often than you’d maybe like to think.
    </blockquote>

    I’m with Steve here. I currently have a client who still uses the old-school “box” monitors, and they want their site to look good for them and no one else.

    Meagan, I could see developing a mockup in HTML/CSS in some cases, but not when working on large projects or more complicated projects. I’ve had clients change their minds more times than I can count, and if I had to re-code an entire website every time they changed their mind, I’d never get anything done.

    I’ve found it beneficial to start with a sketch on paper, then a full-color mockup in Photoshop where things can easily be moved around. I have to say that I’m very, very comfortable with both Photoshop, so changing background colors or corners is not a big deal for me. I’ve only had Photoshop crash on me a few times, but anyone who doesn’t save their work often is just begging for a program to crash. (I’m also very proficient with code; I learned everything from scratch using just MS Notepad and still to this day code every site by hand, from the ground up.)

    I do like your points here, but I think it’s much more practical to mockup in a graphics program first.

  173. Can Berkol

    Although I agree with you, I can’t be as fanatic as you are about dropping PS. First off all we use PS or other software alike to make preliminary sketches. Our image mockups are used as starting points very much like the story-boarding in movie industry.

    You need to know visualy where you want different elements to be. First thing you do to draw boxes and move them around. Second, you go to PS and create a better looking layout to match the layout design to overall brand identity. Add some colorsi some curves … … … It’s a fast solution really.

    It’s very rare that we send images to customer to make a demo. We only use the preview images to build an agreement on layoyt not the interaction.

    Interaction comes later on. What’s going to happen when this box is checked and that button is clicked…. They are all a latter stage.

    First you need to agree with customer on generic page layout. You don’t need PS for that. But you need a complete sketch and mostly a good-looking sketch not a clumsy drawing made by hand.

    What I am trying to say is; yes I agree with you based on the given workflow examples. Whether you use PS or something else a preliminary mockup is always a good addition to your workflow. That way it becomes easier to bring the customer and the designer on a common ground before getting into details of the UI development.

  174. Danny Halarewich

    Great article.

    Let me start off my saying I feel equally comfortable in Photoshop as I do writing code. Additionally, I have used this approach on some things a couple years ago.

    That being said, it’s not for me. Perhaps an ideal project will surface and I’ll pull this technique out of the tool kit, but for now it’s gathering dust.

    And here is why: While focusing on content from the start is certainly the best approach, I find staring at unstyled content to be much more paralyzing than a blank PSD. This is because I immediately feel the need to shuffle blocks of content around and add colors. Sort of like this article.

    But that is skipping a step. After I sketch out layout ideas, I rapidly mock them up in Photoshop. I use vector shapes when I can and make use of some grid templates. At this stage I am taking into consideration design direction, branding and overall communication.

    Starting with code puts me in details mode. I focus on the wrong things. I’m fiddling with text shadows instead of thinking about if the concept itself is right for the project at hand.

    This is my personal experience and the reason why I don’t use this method any more. For me, it’s certainly not faster, or more liberating creatively. But that’s just me.

    As Cameron Moll said above, it’s a little arrogant to say there is a right or wrong way here. For some people, this method may be limiting. For others, maybe it’s not.

    “If it feels good, do it”

  175. Fletcher Moore

    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.

  176. amy

    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.

  177. Phil C.

    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

  178. Don

    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!

  179. shane

    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

  180. kelvinwebdesigner

    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

  181. Glen

    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

  182. austin

    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.

  183. Scottish Media

    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.

  184. Davis Peixoto

    @Meagan

    Thanks for the article. I can’t agree more.

    I remember defending this process about deliver the first mock-up in a HTMLized version to my old boss 4 years ago. Also I was trying to push SEO and other stuff upon that team by that time.

    Conclusion? I got out there. I am happier now. My clients too.

    Sure thing this process can give much more productivity, and brings less headaches with misleading expectations that born from a simple PS, raw raster, file. This is the future since some time ago.

    For the PS-lovers/defenders, I need to add a brief tip: use skeletons.

    I think having some ready-to-use skeletons in crystal clear HTML+CSS is a great deal. I am not talking about colorful templates with dummy text, but if you are thinking about 2 columns, a horizontal nav bar with drop-down, and so on, with a footer… well, I think a skeleton can really speed up things in the design time, just the way Meagan’s post says.

    This can be very useful and straighfoward to met your clients needings.

    Cheers.

  185. relentless

    No one should be designing websites in Photoshop. Use Fireworks.

    I’m struggling to understand any situations in which I’d want to do it this way – not to mention I’m not a fast enough coder for it to be feasible. Many designers don’t know CSS at all. Maybe I just don’t get it…

  186. Matt

    Although I think some of the article does have some merit, all the examples you purpose are very specific and can be changed with no more than a few lines of code. What happens if the client, which has happened to me more times than I care to remember, shows an example of a site that he thinks would work better and therefore requires you change the entire layout? Working within the browser at that point would be time a major time consumer. Also as many people have already mentioned CSS3 is not widely supported, so if your client isn’t using a new browser that process won’t work.

    I love the fact that Dan is pushing the envelope but
    For now I think I’ll stick to Photoshop.

  187. Gordon

    I’ve read other articles on this topic and I’m not sold. Maybe this works if you are going to crank out yet another cookie cutter column layout (like every other blog site I’ve ever seen). Or, maybe if you were going to be adding content to an already created site that has an existing css structure.

    This method of skipping on photoshop will ultimately only create more cookie cutter sites. I see way too many sites that are designed by “creatives” that look identical. The only differences are background colors and font size. Okay not literally the only differences, but pretty close.

    There are probably a few talented beings out there that can go directly to code and produce some beautiful results. But I have to believe this is a small number.

  188. Timothy

    I’m really glad I came across this. Ever since FireBug came around I’ve been designing directly in the browser. And yet I have clients request images. It is really difficult to do a mockup and then move it to web. It is much more natural to flesh out the site in its intended format.

  189. Evan OConnell

    While I enjoyed reading this article I don’t think I would call it the “future” or the “best” way to do it. Obviously its personal choice where to start and everyones going to do what they’re most comfortable with.

    My thoughts. Most of the advantages you brought up with having the design in code when showing it to your client is correct. It is much easier to quickly update a webpage than re-saving a photoshop file and emailing it. But, that same process can be done after you come up with the design. As soon as I’m satisfied with the design I try to put it to code. After it is in code I rarely go back to the photoshop file unless I need sizes or images. So, I do agree, showing a website is much better than an image but that really has less to do with the design process and where it begins.

  190. Shannon

    I think this is a fascinating approach.
    While the debate will rage between p-shop fans and markup fans, the fact is that there is an axis, and that axis includes at one end of the spectrum people whose brains work better in code and sites that lend themselves to being protoyped in code, and at the other end is people whose brains work better in p-shop and sites that lend themselves to a highly visual/image oriented design.
    Usage depends on what point of the axis your needs meet. I for one can think of many times when Meagan’s approach would save enormous amounts of time and, let’s be honest, money. But I can also think of scenarios where this would be completely unusable and the p-shop first method is a must.
    Just another tool in our great big toolbox, folks! And I’m glad of it.

  191. Cybernoxa

    The idea is good, I agree with it and even tried it and it came out (http://cybernoxa.pl/projects/ah/) but one of
    the annoying things is (resuming it’s logical, but FF doesn’t behave like that) that using rgba on borders makes corners look ‘not nice’ under webkit browsers.The semitransparent borders are overlapping and if you have ‘border: 10px solid rgba(255,255,255, 0.3)’ the corner are 0.6 opaque I think + bg color if you have one :/ – you won’t notice it on thin borders.
    Anyway i agrre with Byron some dividers, bg-patterns, bg-images – photoshop is necessary.

  192. WebdesignPro

    I do not agree at all!
    OK, this type of process may work for designs such as the mentioned one, yeah.. it’s so.. geometric.. too generic and unemotional..

    But not if you have ANY demand for professional design!

    Ever heard of “art”?
    I bet you can’t draw with pencils either, right?

    Cheers.

  193. T. Johnson

    I disagree with this approach. Creating a mockup in an organized Photoshop file is much less time-consuming, and can be easily revised. Designing from a blank slate in Photoshop (while keeping browser restrictions in mind) allows for more creativity and variety.

    Also, the advantage of a Photoshop mockup is that it is only a flat image file. If your relationship with the client ends after only a mockup image was delivered, at most you’ve lost a design idea.

    When delivering to the client what is essentially a functional website template, what is to prevent your website (code, stylesheets, graphics, etc.) from being taken without fully compensating you for your work? If you have delivered a mockup created in the browser, the client could walk away with everything and complete what you’ve started with minimal effort.

  194. Aziz Peregrino-Brimah

    As some have stated, this article shouldn’t be presented as a rule, but as an exception. This won’t apply to each client or project. As a matter of fact, this kind of approach only works with clients not so caught up on the design aspect of things. Most sites will appear bland, boring and lack visual potency. At least that has been my experience with websites created by most CSS purists.

    Design is also content. It can communicate emotions, feelings and more.

  195. Georgi

    Working that way since my 16, cause then I don’t even know how to use the PageMaker :) Notepad was my hero.
    But later discover EditPlus and till now its the only editor I use. And always the code is first and then comes the design.

    Impressed by this article! Continue that way.

  196. Nathan

    Interesting angle on the ‘design’ side of things. I agree fundamentally on the ‘design in the browser’ approach, but… well… my Photoshop never crashes like yours does… your computer sounds nervy.

    Also, I’ve been making design/websites so long, I don’t need to mess around ‘blind’ with the CSS until I’m fine tuning. It isn’t a very creative way to experiment. I never decided to design on a computer so I could just type the word ‘float’ or ‘500px’ etc. I did it because I wanted to be visually inventive and use a great tool for that.

    However, the best tool I’ve ever discovered for beginning the design process is called a pencil and paper.

    BTW, this comment box goes over the submit button. I had to lift up the corner to find it… :-0

  197. Teddy Westside

    In my experience, Photoshop mainly crashes when using Mac. I barely ever have any problems when using a PC. I have the same issues using Flex and a few other programs on Mac. I think Mac is the problem, not Photoshop!

  198. Mark

    This envolves two distinct areas that depend on each other and each of them have their own peculiarities, which are best understood by professionals that focus their strengths into one of these segments. There are professionals that can do both, but in most cases, graphic designers work better alongside html developers.

  199. Sharon

    Thank you for an excellent article.

    I thought maybe I was doing something wrong creating my designs in the browser from the get-go instead of PS mock-ups. However, it did seem silly though to use PS and then try and re-create my design for a browser – making more work for myself.

  200. Anthony J

    Photoshop was made for high end image editing at 300 dpi. Why people insist on using it for web design is beyond me. Illustrator? Illustrator is a desktop publishing tool. What. They have both been around for a hundred years and they still can’t do a multi-page document. I’m a Fireworks devotee. And why not. It was specifically designed for web development.

    I like your ideas, but I get the overwhelming sense that you want CSS to tell design what to do, instead of th’other way around.

  201. Mars

    Well written article but this 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.” is an example of what happens when designers get too caught up in their own little design bubble. You, me and everyone else posting here knows IE6 is crap but the fact is that more than half of users have it as their default browser. My client wont be interested in teaching people about the wonders of modern browsers, they’ll just want their company’s website to look snazzy for as many people possible. The example website, while pretty in Firefox, looks like crap in IE6. Im pretty sure no client would approve this from me, I’d have to go back to Photoshop or Fireworks and re-do the whole thing.

  202. simurai

    I tried out this process in a past project and loved how simple and straightforward it is. See the design process in this video.

    But if you show an early undesigned state to a client, the big challenge will be getting him to understand how the process works and that it’s about content/layout first. A lot of clients have a hard time imagining the meat if they just see the skeleton.

  203. Yisrael Clorfene

    The argument wasn’t about the pros and cons of designing mockups in PS, it was simply a baseless Photoshop-bashing session. Essentially, the message was: “Photoshop doesn’t function and cannot be used”, and this simply isn’t true.

    The argument is emotional and unreasonable; there is no question that a healthy fusion between the two is the best way to create good webpages with brilliant graphics.

  204. Dan Knight

    Great Article I really enjoyed reading it and all the witty remarks throughout. I am bias as I loathe photoshop, but tangible mock ups are a must for me :-)

  205. Avangelist

    I also dropped photoshop for site mock ups about a year ago and there has been a single instance in recent months where I have had to use PS and Axure RP and it has just created more work.

    But that said, it does depend how your team is formed. If you are a one man band, do whatever you like, but if you have a complete dev team. Not so simple

  206. Tommie Hansen

    Someone already said this but there are coders and there are designers. Some “designers” can’t create any type of actual creative designs and are more of the copy+paste kind or the “let’s do a crappy Wordpress-template” -kind. These are also the people that would appreciate this sort of uncreative fluff that this article suggests.

    Sure, it’ll work great for simple markups (like the example) and the sort of template/css-framework madness we’ve seen the last couple of years that is just mindblowingly crazy and is more often abused then made something good out of.

    And CSS3? Sure … since IE6-IE8 only has about 65% it’s a great idea to make mockups with a lot of unsupported code that can’t be used anyway later on. Talk about actually creating the largest elephant in the room ever.

    Paper > Photoshop > HTML+CSS+JS

  207. Ricardo Zea

    Awesome article, hands down*.

    This article confirms to me that I’ve been doing the right thing for many years now: Start my designs in Fireworks (I don’t use Photoshop for web design).

    I create my designs in an image editor because I already know how the majority of the details in my design will look in IE6/IE7, IE8, Firefox 3.x, Google Chrome, Safari 3.x (at least) and Opera 9/10. By knowing all this, I know, off the bat, how I will be coding every single piece before even opening Dreamweaver.

    Photoshop, or in my case, Fireworks, barely crashes… and because I’m a hard-core gamer, I’m VERY used to saving, so when Fireworks/Photoshop does crash, I don’t care, I either have my work already saved, and if I didn’t save my last changes, I would take 1/3 of the time to do them again.

    No big deal, at all.

    Now, did you know that your coding software may crash as well? In the middle of your mockup building process? Regardless of which method we use to mockup, we’re all in the same boat when it comes to software crashing.

    So the above aspect, N/A in favor of mocking up in markup.

    As far as text goes, just create your design without anti-aliasing on the text, the majority of users have their computers to display text like that anyway. Besides, you usually don’t design, or even code, with real, finalized text from the client. Uh… no.

    Now, the example shown is too ideal:

    1. You know right away where the content is going to go.
    2. You have been provided the content.

    #1. There’s no way to know off the bat which content should be wrapped in a DIV that’s going to be floated to the right… unless you design it first. The implications of modifying a page layout are horrendous if you have to make the change in the HTML+CSS+images.

    And #2, probabilities of a client providing 100% of the content BEFORE designing… heck, before wireframing! are VERY slim.

    I would LOVE to see someone start a mockup in markup so I can learn from him/her, I’m totally open minded to that. The only way for me to believe if this method is really SO MUCH BETTER than designing in Photoshop/Fireworks is to see someone go through the entire project management and design process.

    *Awesome article, hands down… well, not all the way down though :)

  208. Micah Blu

    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

  209. Kenny

    I see why atleast I don’t create websites directly in browsers. They end up being pretty boring actually.. I rather use a variety of png’s and just preload them as much as I can.

    The main reason I atleast use Photoshop to begin with is because it’s so quick to use. I can throw up a mockup in no time at all and for me, colors and fonts are crucial to the whole design. In fact, I may end up not getting inspired enough if the design looks like markup for the main period of the designing part.

    Actually, the best thing would be to design the thing and do the markup at the same time. I know that the biggest culprit for me atleast is the fact that I end up not getting all of the design elements from Photoshop into the actual site. Mostly because I use too much color gradients, shadows, tints etc etc. By doing the markup at the same time I atleast avoid this, or, see quick enough that this element might be a problem.

  210. Giancarlo

    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!

  211. Berthold Barth

    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.

  212. David

    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.

Impress us

Be friendly / use Textile