Sarah Parmenter

I can’t design in the browser

It’s a guilty secret I’ve been harbouring for about a year, I cannot design directly into the browser. My creative brain switches at the point when I open my html/css editor (Espresso), and starts thinking in terms of structure and how to achieve the look of my design using as much native CSS as possible. If I don’t have my design to follow, the whole process breaks down for me. I’ve tried, goodness knows I’ve tried, but my designs end up suffering, looking boxy, bland and uninspiring.

Once upon a time this would not have been a problem, as much as it is today. With the rise of responsive/adaptive design (I still prefer adaptive but hey, tomato tomatoe) but it’s just not doable to produce endless Photoshop comps for every breakpoint. Photoshop comps have been a pain in the bottom at the best of times. A client saying “Can I just change that blue, to a slightly different shade” invoking fear amongst Photoshoppers, whilst designers-in-the-browser laugh at our stone-age tools. Aside- Why Adobe have never implemented global changes a’la InDesign, I’ll never know. Seconds later, they have a new blue, across an entire site while we sit changing manually. It’s a labor intensive process at times.

So what’s the answer? I’m still trying to find it. For some projects, a hybrid method of producing a type of scratch file, with a general overview of the style and colours of the app/website, then going straight into HTML/CSS has worked, in others, I still need to produce full-scale visuals. Visuals that are slowly becoming less and less useful as they adhere to a fixed canvas size.

Designing straight into the browser isn’t an option for me though, I still need to go through that creative process in my graphics editor away from the structure of div’s and presentational code, but after getting some initial designs down on paper. Thankfully, I know I’m not alone, I’ve spoken to various others in the industry who all feel the same. Frustrated creatives with no real answers.

This article was posted in Work Life. Bookmark the permalink. Follow comments with the RSS feed for this post.Post a Comment or leave a trackback: Trackback URL.

96 Comments

  1. Posted February 21, 2012 at 10:25 am | Permalink

    re: the global change issue – fireworks, a much more useful tool for web, has in-design style global elements as well as a fantastic way of managing the best of vector and bitmap assets

    you should take a look when you have some free time – i’m sure you won’t be disappointed.

    • Posted February 21, 2012 at 10:52 am | Permalink

      I have to agree with Manik, global elements and also, you can find and replace colours in the document! I could never get my head round Photoshop for web design so I’ve been using Fireworks since the Macromedia days.

      Photoshop is great for print work, but it’s just not what you want for web design… you’ll get those comps done in half the time in Fireworks.

      • Posted February 21, 2012 at 11:09 am | Permalink

        I’m with Manik and AndyW on that… Fireworks is my tool of choice for web design. It’s the nice balance of vector and pixel that does it for me, and it’s not like you can’t lean on Photoshop or Illustrator when Fireworks doesn’t cut it (hardly ever).

        • Lars Karup Nielsen
          Posted February 23, 2012 at 8:55 am | Permalink

          I agree with all of you. Photoshop just wasn’t intended for webdesign as Fireworks is. The biggest issue with Fireworks though, is the annoying perfomance problems. On a 2.8 Ghz i7 iMac it’s almost unusable if the page count turns 10+ in a single file. You have a constant fear of loosing all of your work due to random crashes. When I used Photoshop, I had 3 crashes a year – with Fireworks it’s more likely 3 crashes a day!

          But despite of these issues, the value of having a masterpage, symbols, box sizes, etc. makes it my favorite tool for webdesign.

    • TallTony
      Posted February 23, 2012 at 3:54 pm | Permalink

      I was just about to comment on here that you should give Fireworks a go, but it looks like you all beat me to the punch!

      Although Fireworks has got some annoying features, overall it’s a much better tool for producing web mockups. Fingers crossed that Adobe will put as much focus on it as Photoshop in the future and iron out all the bugs.

  2. Posted February 21, 2012 at 10:33 am | Permalink

    Yup, I am with you. I have tried but the design is never as polished, I like to look at my design in photoshop and code it up from that, it makes me feel calmer doing it that way. I hate starting a design at the best of times, let alone starting straight from code. :)

  3. Posted February 21, 2012 at 10:36 am | Permalink

    This definitely resonates with me. God knows I have tried so many times to design entirely in browser, but like Robbie Manson said at NAConf, front-end languages don’t allow for creativity and those little design ‘accidents’ that occur when you change something and it gives you an unexpectedly good result.

    HTML and CSS are great tools for _building websites_, but I really envy people who can use them for design, as I’m certainly not one of them. Even after a really detailed research stage and tons of sketches and wireframes, when I know in my head what I want the design to look like – whenever I design entirely in browser – I just end up producing a boxy, uninspired mess. And I am so jealous of people who can actually pull it.

    Good post, Sarah, it solidified a lot of my thoughts around this.

    • Jt
      Posted February 23, 2012 at 7:20 pm | Permalink

      I beg to differ, your first statement is absurd. They most certainly do allow for those types of things, in a much bigger way than Photoshop/Fireworks. With code you’re liable to get a result you could never have even visualized.

      • J
        Posted February 23, 2012 at 9:22 pm | Permalink

        Actually, that was the statement he said that resonated with me the most. I’ve been designing websites for 15 years and have used everything from raw html/css to css frameworks to photoshop and fireworks. It’s true that you might have a certain amount of spontaneous inspiration while coding, but everything takes 20x longer. With design software being drag and drop and much more effortless, they don’t even compare. The place where code does shine of course, is in responsive design as the author says. IMO, design software (including Fireworks) is way behind the times needs to interact more like code.

  4. Posted February 21, 2012 at 10:39 am | Permalink

    Design is messy.
    Design is unpredictable.
    Design is beautiful.

    Designing in the browser is not a “prerequisite” to good design, it uses the other half of your brain making things more ordered.

    Modern websites need both sets of skills to work, but everyone is different some people are at home switching between their left and right brains frequently, some people prefer to focus on one task, then the other.

    Neither is wrong or incorrect, both arrive at the same answer in the end.

    Keep doing what works for you and don’t be ashamed of it :-)

  5. Posted February 21, 2012 at 10:39 am | Permalink

    Couldn’t have said it better myself. A good 70% of the design is done in Photoshop but when it comes to the interactions and responsive states, it truly takes tweaking in the editor & browser to get the effects I want.

    I’ve actually started creating a style guide in the browser first before designing in Photoshop. I’ve found it helps keep my typography consistent.

  6. Posted February 21, 2012 at 10:42 am | Permalink

    I made the switch to at least designing the majority in the browser, but like you I found if I started there, it all ended up looking, like you said, bland and boxy.

    Now I start in Photoshop, do a pretty rough design draft, fire that over to the client to get a no frills gut reaction. If it ticks the boxes and I know I’m on the right path *then* I switch to the browser and start working on the details.

    An aside, but I’ve also found starting in the browser too early leads to messy CSS as I start getting a bit hackish with the screensizes media queries patching over previously set values 1000+ lines up in a stylesheet.

  7. Posted February 21, 2012 at 10:44 am | Permalink

    I’m pretty much the same. I need that initial scratch file to start with before I even contemplate the build. Like you say, it does create issues. Especially when client amendments are done directly on the working version of the site, meaning the scratch file(s) get left behind somewhat.

    The way I see it is that designing direct in the browser is only possible where a single person is designing/developing everything. Or am I missing something?

    I think I’ll be continuing to use the hybrid method until someone shows me a better way of doing it, that doesn’t melt my brain.

  8. Chris Plowman
    Posted February 21, 2012 at 10:48 am | Permalink

    The answer is that someone needs to create a design program that is made solely for web design.

    We (generally) use Photoshop because it has the most tools but it was never intended to be a web design tool and still isn’t made with that in mind.

    Designing in the browser isn’t an ideal situation either in my opinion, like you my brain just doesn’t function in that way.

    We need a dedicated design program that can handle css like changes to colours and fonts but that uses tools and layer styles like Photoshop.

  9. Posted February 21, 2012 at 10:50 am | Permalink

    Great post Sarah, and it’s definitely something I think will become easier over time as tools adapt to the new wave of thinking. I imagine it was much the same with the advent of CSS where Wired paved the way, forcing people to break away from using images for nigh on everything.

    It’s slightly easier for me being more of a developer than a designer (although I do dabble). During my 9-5 I get handed visuals, but at home i’ve been trying to adopt the browser as my design canvas with some reasonable results. I find that speed is the biggest plus point.

    I guess it comes down to personal preference at this point. Tools like Bootstrap definitely help.

    PS. Love the gigs!

  10. Posted February 21, 2012 at 11:02 am | Permalink

    Don’t feel guilty Sarah! I’m exactly the same and I don’t think Photoshop or Fireworks are going anywhere for a while. At least not until someone makes the perfect design tool for web folk!

    You raise a good point about sites being designed in the browser having the potential to look bland and ‘boxy’. They generally do.

    There’s still massive value in playing with ideas and designing certain key elements/styles/composition/pages in your graphics editor of choice. It can obviously set the tone of everything you do going forward with design or code.

    With the adaptive approach, I think we are at a point now where our mindset is shifting. It’s helpful to do a lot more thinking up front with regards to code and really have a strong vision and strategy for moving design ideas forward. I think it’s this thinking that’s the real challenge now and where a lot of the creativity in our jobs lies going forward.

  11. Posted February 21, 2012 at 11:03 am | Permalink

    Surely the “right” way to do things is the way that’s best for you and your clients? Try not to worry about what’s being espoused as Best Practice, and do whatever works to solve your particular problem.

  12. Posted February 21, 2012 at 11:04 am | Permalink

    A topic that’s certainly (or should be) on the minds of every web designer today. I think the answer is to use the tools we know only for our own benefit, whether it’s a sketch, Photoshop, InDesign, Keynote, or in my case Illustrator. Clients can approve a few mockups for design direction at the very start, sure, but then they should never again see a Photoshop version, which prevents the painstaking busy work of updating static files or small tweaks to a design that take 2 seconds on the browser.

    My justification is this: why show a client a website design created with a piece of software that no one other than designers even use? Clients (and their customers) experience a website in a browser, not Photoshop. Show it to them in the browser.

  13. Posted February 21, 2012 at 11:39 am | Permalink

    I’ve been developing first in order to get used to the switch but I find it helps to do a lot of sketching for the other breakpoints and do the first draft of the desktop view in Photoshop so I’m not going in completely blind.

    I may be suggesting something everyone already knows but to work faster in Photoshop I use Vector Smart Objects for any visual objects and separate all my text files into CSS-like folders. This allows for global changes.

    • Posted February 21, 2012 at 11:40 am | Permalink

      I meant to write, “and separate all my text layers into CSS-inspired folders”

  14. Posted February 21, 2012 at 11:43 am | Permalink

    A sketch pad is my design tool of choice! Then PS, then code.

  15. Posted February 21, 2012 at 11:56 am | Permalink

    Completely agree Sarah. I can’t design in the browser. I tried some many techniques, HTML wireframing with Bootstrap and another frameworks, wireframing in paper, etc.
    I need think in visual design in visual editor like Photoshop or Fireworks. I hope one day someone make an application like this and export to HTML and CSS in decent code.
    So great article. We are Legion!!… :D

  16. Posted February 21, 2012 at 12:02 pm | Permalink

    Who cares as long as you have a good design and a good website. Design it on your etch-a-sketch if you want!

  17. Posted February 21, 2012 at 12:45 pm | Permalink

    In all honesty, matey, I wouldn’t sweat it. I don’t think it’s about designing-in or not-designing-in the browser; it just comes down to context.

    For instance, I designed Smashing Magazine almost entirely in the browser because a) the main content is heavy blocks of type and there’s just no point working with type in PS, and b) the responsive / adaptive nature of the site meant that there were several different designs to deal with, and had to be tested live in the browser to see which worked. Contrast that with the Belong site, which I designed mostly in PS before heading into the browser to tweak the last 10% or so.

    Ultimately, designing in the browser works for some scenarios, some aesthetic styles, some kinds of content… and not others. Ultimately I think it comes down to a case-by-case situation. I wouldn’t worry too much about always having one approach.

  18. Posted February 21, 2012 at 1:11 pm | Permalink

    I strongly believe in building your mock up in mark up, there are so many benefits; I can design the responsiveness, hover effects, javascript effects, etc.

    But look and feel for me is always in photoshop. I start with a 800 x 600 style tile every time where I play with button styles, navigation, colours, type, textures, watermarks, and more. Once I’m happy with that then I move to the mock up.

    As much as photoshop isn’t set up to be a web design tool, neither is the browser – or no browser I’ve found anyway!

  19. Posted February 21, 2012 at 2:10 pm | Permalink

    I personally think that you shouldn’t try to push it if you’re not comfortable with it. Maybe trying some alternatives to photoshop as Manik suggested could help you out but go with whatever is working fro you. I myself like to have some sort of “guide” with colors, logos etc that photoshop can probably offer more efficiency with and take it to the browser from there. Past experiences tell me that the final results are usually a mix of the 2 and as long as that method works, i dont feel like i should change that. And trust me, its not about being in the comfort zone.. its about not changing tactics when you’re wining.. catch the drift? :)

  20. Posted February 21, 2012 at 3:10 pm | Permalink

    I know designers who use Indesign to create visuals for websites. Never done it myself. But it might work for you, especially as the new InDesign CS6 will have Liquid Layouts, where you can choose which elements are fixed (position/width) and which can stretch and which can move, depending on the viewport size.

  21. Jim B
    Posted February 21, 2012 at 3:17 pm | Permalink

    I find mostly designing in the browser does take away creativity, but there are some things that are definitely easier just to write CSS for (I’m looking at YOU simple dashed border lines in Photoshop that are a pain to draw!!)

  22. Posted February 21, 2012 at 4:15 pm | Permalink

    I’m with Gary – I don’t believe there’s a right way to do anything. You’re more productive and not to mention creative if you’ve got your own process and stick with that process.

    It’s great that there are people who can design in the browser, I don’t mind doing it on occasion, but it’s not for everyone.

  23. Posted February 22, 2012 at 12:12 pm | Permalink

    Good, I was worried I was alone on this for a moment. Sometimes, in this web ‘community’ it feels as though you have to work in a certain way or your ‘doing it wrong’, which just isn’t the case. Results matter. How you get to those results is up to you.

  24. Salman Abbas
    Posted February 22, 2012 at 1:52 pm | Permalink

    Ditto.

    IMO Designing in browser is silly and you end up with fugly designs.

  25. Posted February 22, 2012 at 2:29 pm | Permalink

    The only thing to worry about if we’re talking about webdesign is the typography. You should do most typography in the browser, because how many times did you hear: It looked better in Photoshop after you coded everything in HTML.

  26. Nico
    Posted February 22, 2012 at 2:39 pm | Permalink

    Actually i love to design in-browser-style.

    When you know that the layout is very minimalistic i think its easier to create the semantic html and just play with margins, paddings and a few colours.

    I think, a site like this is much more fun to design in the browser then in photoshop. (ofcourse you have to scribble the idea on a papaer or may arrange some colours in photoshop)

  27. Posted February 22, 2012 at 2:52 pm | Permalink

    Nice article. I think exactly like you and was thinking about making an article on it too when I found yours. I can’t think straight if I have to think about the markup of my page. And “light blue” speaks a lot more to me than “#78c1ff”.

    On another hand, font, are a mess in Photoshop and trying them in the browser is probably a must do in many cases. We have to think our design through, whatever the tool we choose.

    We all have different approaches when designing something but one thing should be on top of everything: the tool must never stay in the way.
    It should stay a tool and not become an obstacle.

  28. Posted February 22, 2012 at 2:54 pm | Permalink

    I think I read somewhere that designing in the browser is intended to get the main structures in place, and THEN the design gets amped up with elements from a graphic design tool (PhotoShop or Fireworks or whatever it is.) Designs in the browser will be inherently boxy, that’s when you switch back to your design software and bring it to life. The idea is to start in the browser, not stay in the browser from start to finish.

  29. Posted February 22, 2012 at 3:02 pm | Permalink

    Thank you for sharing that confession! I’m glad I’m not the only one who suffers from this. My Photoshop files tend to be meticulously organized so that I can mimic some global styling changes. Folders upon folders, layers upon layers. Each named and labeled. Header/footer separated.

    And I agree with some of the other comments, we need a properly designed program that is specifically for web design. Until then I too am stuck with the inefficiencies of Photoshop.

  30. Posted February 22, 2012 at 3:03 pm | Permalink

    A while ago I read something about using Indesign instead of Photoshop for webdesigns because of it’s very CSS-like styles and workflow. I haven’t tried it yet but it did sound logical to me.

  31. cnwtx
    Posted February 22, 2012 at 3:08 pm | Permalink

    I seem to be just the opposite. I can design just fine in the browser, but if I try to do anything in photoshop, it ends up looking horrid.

  32. Posted February 22, 2012 at 3:31 pm | Permalink

    I know exactly how you feel, although by creativity is very little in photoshop as well, I’m coming to a problem here…

    Also, whats the difference between responsive web design and adaptive web design?

  33. skipidybebop
    Posted February 22, 2012 at 3:39 pm | Permalink

    I downloaded the Adobe Configurator and have a coding editor, a browser, an iphone simulator, and an ftp client, all on separate pannels inside Photoshop. Cant imagine using anything else.

  34. Posted February 22, 2012 at 4:12 pm | Permalink

    I agree with you, I had a lot of issues trying to design in a browser. It works of course for minimal sites with few art directed elements beyond a logo and maybe a few colors in a header but not for all cases.

    The one thing I started to rely on were very crudely drawn sections in a notebook and then planning out structure from there, once I have the basic “bones” there I would be able to fire up Photoshop (or occasionally Fireworks) to fill in the blanks.

    Great article btw!

  35. Posted February 22, 2012 at 4:26 pm | Permalink

    I agree – but I usually start with a pencil and paper.
    And does anyone else miss ImageReady?

  36. Posted February 22, 2012 at 4:50 pm | Permalink

    My preferred workflow is to create wireframes for hand-held, tablet & desktop. Next up (or concurrently in my flow, but next up for client) is to create moodboards. The moodboards (Photoshop) are where I work with color, design elements, type treatments, etc. I purposely make them unstructured and collage-like so client can react to look and feel only. I let client know that type in the moodboard is approximate and will appear much crisper in browser. For web fonts, I’ll screen grab some key words and lorem ipsum generated from testers (I like Typekit) to show font selections.

    Once the wireframes & moodboards are approved, it’s time to code. I use a LESS framework and first thing is to set up type and color variables. This makes it easy peasy to code gradients, shadows and all sorts of reusable elements. Change a color just a little bit? background: lighten(@blue, 10%); Bam! Add a subtle radial gradient to highlight a section? Switch to a CSS gradient generator, design it, copy it and place it. Done!

    I make my code changes (Coda), upload to dev site, and hit refresh on multiple devices. The next thing the client sees is a working prototype–on whatever browser*/device the client selects.

    The prototype then evolves into the finished site or theme.

    *Note: I make it clear that the prototype is created for modern browsers and will not be adjusted for IE until AFTER approval. No point in working out the IE fixes until we know where we’re going. HTML5 Boilerplate makes this pretty simple. :)

  37. Posted February 22, 2012 at 5:48 pm | Permalink

    Glad one of the Rockstars of the industry admitted this! Personally I love to challenge myself by coming up with something awesome in Photoshop, then figuring out how it’s going to work in the browser. 90% of the time the design becomes stronger as a result of that process.

    Imposing constraints at the beginning of the design process only serves to further limit what you can/will do. You won’t challenge yourself, and you’ll tend to take the easy way out.

  38. Posted February 22, 2012 at 6:54 pm | Permalink

    I’ve had the same issue for a while. I tried to start a responsive design in code and got the HTML fine but couldn’t get the look right. Spent hours tweaking and not getting it. Spent 30 minutes in photoshop making the 320px wide version sketch and was able to then apply it and move forward.

    With any tool set, it’s about them working in concert. Some people work better in code. Some people work better in PSD. To say “you must work in this toolset only or you are [wrong|suck|a horrible person|hate babies|etc]” is really just silly. Preferences are great, but I prefer to ship something.

    Thanks for posting this!

  39. Posted February 22, 2012 at 7:20 pm | Permalink

    I never could design a website in Ps and then cut it into HTML+CSS. It’s just to much work for me. I prefer to draw bits and pieces on a sheet of paper and then eventually start filling HTML with graphics.

  40. Posted February 22, 2012 at 9:04 pm | Permalink

    I’ve tried using Photoshop as a design aid, but I found the time it takes to produce realistic mockups to be stifling. It takes so long getting the details right I become disconnected with how I wanted the site to look/feel.

    My design process starts in a Moleskine or a sketchpad (or a napkin or an envelope), then moves into Balsamiq, and then straight into code—skipping Photoshop entirely. One big benefit of this ‘pincer move’ on PS is that I don’t need to fork out a ton of money on Adobe licenses!

  41. Posted February 22, 2012 at 9:05 pm | Permalink

    It seems to me that this “design in the browser” trend only works for designers whose sites are on the minimalist side as opposed to graphic-based.

    Sure, I can see designing clearleft.com in the browser, but how would you do it with any of these sites?:

    http://www.quazarwebdesign.com
    http://www.sanchurro.com
    http://www.mcmillerssweetsemporium.co.uk
    http://navidad2011.talentocorporativo.com

    I think the “design in the browser” movement is as much a push for a particular visual style as anything else.

    • Posted February 23, 2012 at 8:34 pm | Permalink

      So taking McMillerssweetsemporium.co.uk as an example… it all depends on what you mean by “design in the browser”.

      We know that unless you’re intentionally trying to be clever with transforms, every element container is basically going to be an invisible box. I know that the call to action in the upper right is going to have a transparent PNG to make that triangle; and I know that it’s going to be an absolutely positioned div.

      What I can’t do is make that texture. Ditto for the gorgeous background. I know it’s going to be either the body element’s or a container div’s background, but I need a graphic editing package to create it.

      Off to my package, and I make the faded-to-dark background image, I make the call to action triangle, and I even layer them over each other to make sure they complement each other well. But I don’t put the text in place. I move the graphic assets to my project, render it in the browser, and continue from there.

      If your site is graphically rich, the absolute best you can hope for is a marriage of the two. But to my real point: I think that people CAN visualize all these overlapping boxes in their pages (I certainly do), and can understand that the actual contents of those boxes don’t need to be box shaped, they can contain graphics. Designing in the browser doesn’t mean creating all assets with markup and styles, it can mean populating the layout with assets created elsewhere.

      Fair enough that some people need to see “the whole picture” in Photoshop, but to me it’s an extra step that’s unecessary. You’d have to build these layers in Photoshop anyhow, so why not move each “layer” to its corresponding element as you go? By the time you’re working on typography and exact measurements, you can do it in the browser and be assured that your design is working.

      • Posted February 24, 2012 at 5:23 pm | Permalink

        I would argue that exporting every graphic element for use in the browser even before the layout is finalized constitutes that many extra steps.

        That’s my point about graphically rich sites: If you’re spending so much time in Photoshop anyway, why not determine the layout by simply resizing and dragging elements around in there, and move to the code once you know what it will look like? If you’re a graphics-driven designer, it just makes sense.

  42. Posted February 22, 2012 at 11:23 pm | Permalink

    the only useful thing I’ve ever gotten from designing a website in a graphics program is …graphics.

    My initial design process is usually on paper, and I go straight to html/css from there.

  43. Christian Lavie
    Posted February 22, 2012 at 11:41 pm | Permalink

    100% agreement ! “Designing” in the browser is the way hardcore developers do it – and they always do it in a very technical, cold and non-usable way. I think design needs pen&paper and photoshop, everything else is killing the process.

  44. Leon
    Posted February 23, 2012 at 4:43 am | Permalink

    excuse my spelling

    I design in illustrator I like the pixel view and the ability to use the art board as a sought of scrap book for different elements I want to try. I find the confined nature of the canvas in FW and PS to restrictive for quick changes and prototyping.

    I’ve been doing it the way now for near 8 years.

    One thing I started on early that help me get around the left and right side of my brain was multiple monitors.

    I always design on the left monitor, and I always code on the right (vim). this relay helps keep both my creative mind and my coding mind working at there best simultaneously.

    As for coding/slicing – I’m still exporting each element one at a time form the illustrator file I’m sure there are better ways now but there is something to be said for slow and deliberate creation of media and markup.

  45. Kiran Shinde
    Posted February 23, 2012 at 10:06 am | Permalink

    Photographs need to some awesome effects in photoshop. So
    I preferred, Web Layout design in Photoshop, then convert in HTML/CSS as well.

  46. Posted February 23, 2012 at 10:30 am | Permalink

    Well, Photoshop to me is abused and overrated. I have switched to Fireworks 6 years ago and never looked back.
    You have styles, which allows you to quickly change color scheme.
    And rounded angles are not stretched when you resize an object.
    What else do you need? :)
    If that helps, I am not the only one to think like that: http://fireworksinterviews.com/

  47. Posted February 23, 2012 at 11:49 am | Permalink

    If you’re designing in the browser, starting with wireframing / usability, factoring responsive outomes, then adding brand elements and pictures; at what point do you do you admit it looks awful and open Photoshop?

    It seems to me if you design in the browser, you either need to know instinctively in your minds eye how you want it to end up looking, or you hope to get lucky.

  48. Posted February 23, 2012 at 5:17 pm | Permalink

    I can!. Few elements from FW and fire!
    Best regards!

  49. Jt
    Posted February 23, 2012 at 7:23 pm | Permalink

    I find Photoshop extremely limiting after working with CSS. Of course I do comps there, even if for no other reason than client communication, but I feel much more empowered behind a text editor.

    It somewhat surprises me as well, I have always considered myself a visual person, and I’m definitely no code guru. I just feel like I can do a lot more, a lot easier, with CSS, HTML, and Javascript.

    Photoshop is an ancient relic. It hasn’t changed in decades and it absolutely sucks for the job.

  50. Marco Campos
    Posted February 23, 2012 at 9:28 pm | Permalink

    i know that feel.
    in the last few days i saw a post, don’t remember where, i think it was webdesigner depot or smashing magazine saying that we should use InDesign instead of Photoshop for the reasons of been able to do this global changes. i have to test it yet, but looked promising when i tought about it.

17 Trackbacks

  1. By I can’t design in the browser | Transition Timing on February 22, 2012 at 3:42 pm

    [...] Direct Link to Article — Permalink [...]

  2. [...] a more …I can’t design in the browser is a post from CSS-TricksOriginally posted from I can’t design in the browser 23. Feb, 20120 CommentsTWEET THISpostNo comments yet. Leave a comment Leave a Reply Click here to [...]

  3. By I can’t design in the browser | StevenCodes on February 24, 2012 at 7:04 am

    [...] Direct Link to Article — Permalink [...]

  4. [...] Check them out for some seriously useful resources like icon fonts, UI kits, vectors and themes.I Can’t Design in the BrowserDesign Centric And Layered CSS FilesAre Graphic Designers Ruining the Web?Responsive Layouts, [...]

  5. [...] I Can’t Design in the Browser [...]

  6. [...] I Can’t Design in the Browser [...]

  7. By Do You Design In The Browser? | Van SEO Design on March 1, 2012 at 2:31 pm

    [...] Depends who you ask. Last week Sarah Parmenter published some interesting thoughts about how she can’t design in a browser. The gist of her post is that once she opens a code editor her focus shifts away from the creative [...]

  8. [...] Depends who you ask. Last week Sarah Parmenter published some interesting thoughts about how she can’t design in a browser. The gist of her post is that once she opens a code editor her focus shifts away from the creative [...]

  9. [...] in the browser has it’s downsides and Sarah Parmenter (@sazzy) recently blogged “I can’t design in the browser” on why it doesn’t work well for [...]

  10. By Designing *with* the Browser | tony.is/thinking on March 20, 2012 at 3:55 pm

    [...] little while ago, Sarah Parmenter (@sazzy) shared some of her thoughts on designing in-browser. Since I find myself struggling with the same things, I thought I’d share a [...]

  11. [...] I Can’t Design in the Browser [...]

  12. By Style Tiles and Responsive Web Design on March 30, 2012 at 2:10 pm

    [...] Design­ing in the browser Some would argue that you should start your designs directly in the browser. A ratio­nal approach, which also does a bet­ter job of elim­i­nat­ing the trou­ble with explain­ing, why your pixel-perfect design does not look the same in every browser. How­ever, design­ing in the browser is also an approach that may some­what limit cre­ativ­ity. [...]

  13. [...] At this point I know that some of you might be saying things like: Why aren’t you using Fireworks or why aren’t you designing directly into the browser? Both good questions, in answer to the first – because I personally prefer working in Photoshop and to answer the second question, I’ll point you towards this article by Sarah Parmenter: http://www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser/. [...]

  14. [...] et au Smashing Magazine Meetup Basel. Mais les divers retours que j’ai pu avoir, et surtout cet article de Sarah Parmenter, ainsi que mon expérience personnelle, m’ont fait réaliser que bien que la conception dans [...]

  15. [...] Sarah Parmenter posted about how she can’t design in the browser and it seems to be a “problem” (It’s not a problem) many others experience. I’ve revised my own workflow a great deal over the last year and I do a huge amount of work in the browser and on any scraps of paper I can find but do you know what? For the most part, Fireworks (insert Photoshop if that’s your tool of choice) is still open all day for me and the last freelance project I did included me sending a full set of jpg visuals to the client among other resources. [...]

  16. [...] Sarah Parmenter, spreker, user interface designer en eigenaar van You Know Who wijdde hier een artikelaan. Zij zegt: My creative brain switches at the point when I open my HTML/CSS editor (Espresso), [...]

  17. […] Sarah Parmenter – I can’t design in the browser […]

Post a Comment

Your email is kept private. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>