I Can’t Design in the Browser

gravatar
By Sarah
 · 
February 21, 2012
 · 
2 min read

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.

Comments
[…] is not the same thing as designing in the browser, a practice which many web designers feel stifles their creativity. You can still use your graphics program of choice to establish some visual direction and layout […]
[…] is not the same thing as designing in the browser, a practice which many web designers feel stifles their creativity. You can still use your graphics program of choice to establish some visual direction and layout […]
Stollz
offtopic: Have you tried using Fireworks instead of Photoshop? It handles a lot of the stupid headaches you get from using PS for the web πŸ˜‰
I’m a Sketch girl all the way now πŸ™‚
[…] best work utilizing this method. Sarah Parmenter recently addressed this problem in her post, β€œI can’t design in the browser” in which she reveals the β€œguilty secret” that even though Photoshop isn’t a good way to […]
I extended on this article here: https://medium.com/design-ux/4920dcfd6d33
πŸ™‚ Would love to get your thoughts on this.
dezi
Most of you may be aware of this, for those who aren’t Dreamweaver has a “Tracing Image” function that loads your bitmap image (i.e. Photoshop) into the background and allows you to adjust its transparency level. Useful for conversion to from shop to code.
@phill
I’ll ignore the archaic ‘religious curse’ … as for the sneering, nasty criticism of Brian Smith’s work…his clients are happy, the sites work as responsive sites on my mobile devices in both landscape/portrait modes. Some are fully functioning eCommerce sites. They may not have been “designers designing for designers” sites but they were designed for clients not design snobs. They may not win design awards but the clients are satisfied and they suit their functions well.
As other have echoed, a great article and some really great comments too. I’m coming to web from a 12 year hiatus (working in print). Right now I can see how some would advocate designing in the browser as every man and his dog jumps on the flat design/ metro bandwagon but in time I can see things going back to some sort of skeuomorphic slant and for that sort of design I think you’d really struggle not comping things up in a graphics package first.
Right now I tend to work on wireframes, sketchbook, then onto style tiles and some rough comps in Photoshop then its pinging between PS and the browser (using Live Reload to update my browsers on the fly as well as dealing with LESS/ SASS). I’m torn between PS and Fireworks but my issue is that if you end up being proficient in Fireworks (a dedicated UI design tool) you’re probably going to be bitten on the ass when you join a new studio and no one else uses it. Over the last few days I’ve read a lot about Sketch https://www.bohemiancoding.com/sketch/ (all vector based) and again its a similar thing; the dominance in the industry of Photoshop kinda holds me back from trying new graphical UI apps.
One ray of sunshine could be https://www.tribaloid.com/ This is a new app being developed by Alan Musselman who is formerly a developer of Fireworks. Details are sketchy at the moment but who knows..
https://blog.mengto.com/ covers a lot of comparisons between Photoshop/ Fireworks and Sketch.
[…] 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), […]
I always start in Omnigraffle for IA and wireframes then Photoshop no matter what the project, thats my sketchbook. It allows me to explore ideas fast and come up with an overall style and direction. Then I start playing in the browser. I think it’s crucial to work within a process that allows you to start with a solid foundation, be creative and solve problems, everyone is different.
One thing that has changed in my workflow however is the fact that I don’t obsess so much with the final colors and fonts in my designs as much as I used to while in Photoshop, since I know I will be taking the concept to the browser and those things are much easier to play with in code.
Designing in browser early on in the process has had its benefits for me as well, it will often reveal problems with my initial design and will help shape the final design concept and ultimately the product, which I like.
I think there is a balance between both (Photoshop and Browser) you just need to find it. Never sacrifice creativity for workflow πŸ˜‰
Great post, cheers.
Prowess Web Solutions
I perfectly agree with you Sarah. I someone the one disconnection too. For me, it is ease two tell processes, designing and coding.
Matija Marohnić
I’ve been trying to tackle this problem also, Photoshop was a good method at first, but the process started to get so damn repetitive (CS6 made it better, though). Designing directly in the browser didn’t work for me also, because when you’re writing code, you cannot write it nearly as fast to keep your continuity, which kills your creative process every time.
What currently works for me the best is to SKETCH. Sketch it on paper, the basic layout, se what works, what doesn’t, then start replicating that layout in the browser and tweaking the design where necessary. Sketching is the extremely fast and productive way to go, I suggest you give it a try πŸ™‚
da
Add some fb, tw (…) buttons please!
I’ve just read your post and loved it. Keep going!
Most of the times I have finished designing in the browser I think: “This looks too structured.”
Ryan
I completely understand and have felt the same way. I feel as though my brain goes into lazy design mode if I start in the browser and skip the design session. But, I also tend to over do it in Photoshop if I don’t stop myself. I generally switch over to HTML/CSS once I have a good grid system and solid visual element “system”, for lack of a better word/phrase, in place.
Can I ask, at what point you decide to make the leap to HTML/CSS?
I love the idea of designing in the browser… I just don’t have the coding chops to pull it off efficiently. The budgets and deadlines I work within dictate efficiency – no complaining there, they should.
I have found a happy medium that is working well in our studio of designers and developers – I’ve moved on from Photoshop as the design tool and begun creating static layout in InDesign.
The benefits of InDesign as web design tool in my experience:
– using master pages for creating each screen break when designing responsively, each with its own representative grid
– style sheets! I can design with global styles for paragraphs, characters and objects. This allows me to give my developers page layouts that I add notations calling out the specifics of each style that I see as an individual necessity. They make the final decision on what their styles are called, but that’s their territory – my territory is all the design decisions about type selection, size and how all those things change at each screen break.
– This is specific to me, but working in InDesign is a huge time-saver. InDesign has always been my favorite environment in work in. I think the fact it is built around type and the basic mechanics of layout helps make it ideal. But that’s just, I would have to guess there are plenty of web designers who have never used InDesign because they didn’t have to, and can probably blow my doors off with Photoshop.
I don’t work alone, and I have the immense luxury of being 10 feet away from smart web developers all day long. But, I suspect this process would help any designer who is collaborating with another person to actually build the design, whether remotely or in person.
Sarah, thanks for throwing down the gauntlet for all us non-coding designers. It’s frustrating because if I could code like mad I would; I want to focus on collaborating with those that do code in the best way possible.
Have you changed your mind yet? Here are fifteen reasons to design in a browser: https://www.grahamrobertsonmiller.co.uk/mockup-in-markup/n1
[…] 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. […]
[…] 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 […]
Xananax
I don’t see where the problem is.
I don’t think anyone can actually design in browser.
But you don’t have to waste time doing an actual mock-up either.
You don’t need to fire photoshop.
This is how I do it:
First do your research, probably clip things you like, colors, buttons, icons, layout, keep them in a folder for later reviewing. Or not if you don’t want to be influenced, it depends on the project.
Get away from your screen.
Use paper, and quickly (very quickly, to keep the momentum) sketch your website. Reiterate. Spend an hour or two. If you are thinking of a color scheme that can clash, then do a quick trial using a loose brush on paper or on PC to find the right combination.
Then, you are supposed to have the design in your head…Fire up the browser and your text editor and start hacking.
Xananax
This should be an edit, but it seems I can’t edit, so here goes, just a remark about what @Brian Smith was saying: using a CSS compiler such as less or stylus helps tremendously to remove most of the tedious part.
(And if there are newbies reading this, don’t attempt to use those before knowing your CSS like the back of your hand, you’ll only make things more messy…Sorry, but really, don’t).
Brian Smith
I have to say I am honestly shocked by all the creative minds posting comments here, who cannot wrap their head around working in-browser design into their workflow.
I have been using photoshop for over 10 years daily as a professional graphic artist and front end developer. However in the last year I have not developed a single design in photoshop. I do them 100% in browser with no issues and no limitations to the richness or creativity I put in the sites look and feel. I currently use a grid system for better control, sass for speed and ease of editing variables in my CSS (not to mention being able to leverage reusable styles without them looking canned or even remotely the same from on site to another, again with variables and mixins)…
I do mock up a wireframe using an online tool just to help the client invision where things will “live” on one of the breakpoints. After that I work in browser. If the client doesn’t like something (color, corners, general feel, gradient choices, etc) then I edit a few variables and show them a new version. Remember, they already approved a wireframe, so placement of item locations is not a shock for them.
I have successfully removed anywhere from 12 to 30 hours from my project budgets (depending on the project). You can think of it as removing hours converting a design or removing hours from the design portion. In the end, I show the client a final design, if they like it, it is done. Unlike comping in photoshop and the having to explain why a PS drop shadow looks different in their browser (one example). What they see is the way it will look. Why? Because it is already done.
If you haven’t given the approach a fair shake, I’d suggest thinking the workflow through a little more and try it again. Of course, there is an assumption that you have strong front end design skills so you know what you are about to do is going to look like before you do it. And that you are not a designer that’s not sure where things should be and make a bunch of elements and move them around for hours before settling on anything.
In closing, I agree 100% with everyone that says it doesn’t matter what you use or your process as long as the end results are of the best quality you can produce.
I just wanted to share my side and explain how the process, if done with a plan and a solid workflow, can actually save you a lot of hours on your projects.
(PS. I do use photoshop for elements. Sprites, textures, fallback gradients, etc. I just don’t design the layout in photoshop)
Terry
Strong words, but no link to a portfolio to see your theory in practice. Any chance of a link sir?
Brian Smith
@Terry, sorry for the late reply… Guess I’m not subscribed to the comments here. I just happened back across the article.
I don’t keep a portfolio online unless I’m looking for a new job. I also don’t keep a personal site up and running on a regular basis. However, if you are really interested to see some of my work, the following sites were designed in browser.
β€’ trenchgrader.com
β€’ themiraclebean.com
β€’ ineedbeauty.com
β€’ yourallergyreliefstore.com
All designed from wireframe, to in-browser without mocking up anything “layout related” in photoshop. Did I use photoshop? Yes, for element not done in SASS/SCSS/CSS directly. These are all Drupal sites. Two ecommerce and two desktop sites with mobile versions.
Keep in mind these are CMS sites and the clients can update their own content …and we all know how that works out sometimes.
Hope that helps show I’m not just blowing smoke.
Phill
Christ, they’re horrible. Perhaps you should stick with Photoshop.
Mike
I second that.
Sorry, but these are a perfect example of the lack of creativity that those struggling with design-in-browser are worried about.
I don’t want to be rude, but these look a lot like they were produced by a developer (I’m sure a very competent and successful one) with little understanding of design basics.
The fact they’re so similar also compounds fears that you design ‘what you can’ once you switch to design-in-browser, instead of the freedom of photoshop (or other graphics apps) an then challenging yourself to code your design.
[…] 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: https://www.sazzy.co.uk/2012/02/why-i-cant-design-in-the-browser/. […]
I too agree with your methods and opinion on the design process; from PS to the browser. I take both approaches, depending on the type of site and requirements I’m designing within. Sometimes I’m able to go for a clean and minimal design, in which case I build / design directly in the browser. Other times, most of the time, I create design mockups in PS which go through an iterative process by getting feedback from my client throughout steps of the design.
Both ways work, depending on the project, but I feel much more in control and guided when I’ve first made a design in PS.
[…] 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. […]
I tweeted something similar last night, basically I do get the whole design in the browser methodology and how it can solve problems that Photoshop can’t, etc….
For me though I enjoy designing in Photoshop. It’s a massive part of my creative process and I enjoy it.
Why would I not want to enjoy doing what I do?
I open up Espresso and then I have to consider so many other things that I don’t when I am creating in Photoshop.
I am aware of the restrictions of the web, and I consider these when I am designing.
The moment my job becomes less enjoyable is time to choose a new profession.
[…] 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 […]
[…] 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 […]
Radrad
Like you and a good number of the community, I tried designing inside the browser. But I often find myself arguing with myself. It’s left brain vs right brain. and more often than not, left brain always wins hence, the aftermath of my works tend to look somewhat similar.
I went back to the ‘ol photoshop mockup (as my guide) and the code it up on Coda.
Though showing clients an actual live website is an actual plus rather than giving them a jpeg, I still feel that creating a website is still a 2-(simplified)-step process, mock it up in your favourite bitmap editor and then churn out the code.
So don’t fret, you are not alone. πŸ™‚
Trem
Ever tried Fireworks?
It has much more powerful page/smart object and style support than Photoshop.
I’m among those that believe that the tool you use will have a mark on your design. Just as the word style is having its origin in stylus, the instrument used by Romans to write on wax and their style changed depending on their stylus, so does the style of a web designer will change depending on the tools she’s using. Some people will dive into PS, others will start out with a pencil and a paper, other will jump directly into CSS and HTML.
Personally I spend more time with HTML and CSS and less with PS, but my projects still start with a piece of paper and a pencil for the general layout, then I go to photoshop to decide on the colours, than HTML&CSS, than back to PS to work out small details of the UI and back to CSS to finish everything. What’s new for me is this going back and forth, before I would take the Photoshop version really far and than start chopping it off into pieces for the HTML.
There is nothing to feel guilty about, whatever works for you it’s the best approach you can find.
I’m pretty late to this thread but was doing research on this whole DIB thing and landed here. So I agree with the general sentiment being expressed here that there will never be one silver bullet way to do things. We do, however, have to adapt to the rapidly increasing number of form factors and some of that adaptation will mean designing in the language of that medium sooner than later.
@Adam, I was looking at your process…perhaps you could use my tool instead of PS for the general color step? You say you’re spending more time with HTML/CSS so check it out: https://www.youtube.com/watch?v=ERgFCJFpq5E
[…] 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 […]
[…] 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 […]
you really hit the bull’s eye ;)….i also have to start my design progress on a peace of paper and then go forward thru photoshop and fireworks until i reach the html/css state….
speaking of fireworks, you should really have a look on that, it’s a kind of indesign for screen projects… as you can read here https://www.reinegger.net/50_reasons_not_to_use_photoshop_for_webdesign.html
in my case it does not replace photoshop, but its quite helpful to get done some easy changes (as you mentioned with the color..) and provide a mockup/prototype to your clients.
hope this helps you getting thru new projects,
regards alex
[…] 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, […]
We’re building a tool (https://bicodr.com) that will let you code, design and deploy an app/website in the browser. It’s still in an early stage, but I believe it’s doable.
Webdesigners deserve better tools! πŸ™‚
You can’t design well in the browser. You can edit one or maybe even two attributes in a browser if you are using aids like FireBug, in which you can dynamically move an object (arrow keys, up and down inside a CSS rule). The problem is that you are constrained. You can’t move half pixels like you can in Illustrator or another layout program. I have to constantly tell myself not to pick round numbers for margins and padding. It is a much worse problem if you are starting from the browser and if you have to compute math in order to obtain values. Changing an element in code affects other elements unlike in a graphic program (it would be nice though if you could make objects affect each other–one can dream….)
As someone who is coming from development into graphic design, I have to fight the urge to develop in the browser. Much of this depends on how “perfect” and nuanced you want the site to be.
In browser design is a process that suits some designers. My concern is always the client. Building something in browser that the client can’t see or approve until it’s finished is risky business. Far safer to get a design approved and signed off before coding begins. Or am I just being a bit old school?
I don’t think it really matters if you design in browser, photoshop, fireworks or on the ironing board. As long as what you produce does what it’s intended then your designs were successful.
Designing in browser is just the latest alternative to what’s already widely used. I can’t use fireworks, there I’ve said it. But it doesn’t make me a bad designer. Creating bad designs makes you a bad designer :p, but a good one finds what they work best with and goes for it.
So if you can’t design as well in browser as you can in shop, don’t bother. Unless it’s in your spare time of course, then go nuts!
Modern web design is done in and out of the browser. It’s very common to use the console to make live changes to a design – in other words, applications like Firebug make it ridiculously easy to prototype ideas live. When you add bootstrap projects like Twitter Bootstrap, it’s possible to get rather far “in the browser”. There is no hard or fast rule, it’s whatever gets the job done. In my opinion, a combination of both techniques ultimately lead to solid user experience.
Jim
I absolutely agree with you Sarah. I have the same disconnect too. For me, it is still two separate processes, designing and coding.
People design right in the browser? That’s news to me. I don’t see how you could create very rich, colorful websites without first mocking it up visually. I wouldn’t even want to try! At the end of the end of the day, if you want to have textures or anything like that you’re going to need to piece it all together in Photoshop. My husband is a developer and he “designs” in the browser, but he’s not a designer. It’s not like what he does is terrible, but it’s definitely not as polished and well-thought like my designs.
I’m the same way. I’m not as creative when restricted to code in the design stage. I’d rather design in photoshop with no thought to how the code will work and then be challenged to make the design work in the browser. I get more interesting results that way.
As far as responsive design goes, I’ve yet to experiment with it much but I plan to on my current portfolio redesign. I have designed the layout for large desktop screens in photoshop and plan to simply code it in such a way that it can adapt to smaller sizes. I had what the smaller widths will look like in the back of my head as I did the large screen design and initial development.
I can’t design in the browser either, sorta. If I have a design comp to work with for either the desktop or mobile version, I have no problem designing in the browser for all other resolutions. I still need to start with Photoshop though, and wish i could start in the browser.
Interesting article Sarah. It certainly got me thinking.
Since web design progressed from bad WYSIWYG/table based design, writing HTML/CSS code by hand has been the de-facto way to create websites.
Whether that is a two step process, photoshop/fireworks first, or just designing directly in the browser, it’s still a laborious task.
Don’t you think that all us clever web types could collaborate and create some snazzy app that let you manipulate graphical elements, Photoshop style, and which output clean semantic CSS or Sass/Less ?
We all use browsers that support HTML5 Canvas, so that’s cross platform support sorted. Bolt on a clever interface that lets you switch between responsive design sizes.
Apps like Sumopaint show what is possible through a browser these days, we just need an API to spit out valid css. It could even keep up to date with all those pesky browser prefixes or show you progressive enhancements right there in the app.
There certainly seems to be an obvious gap in the market for a design tool like this, which is slightly embarrassing when you consider that it’s our job to design web based solutions.
You mean like macaw or webflow?
Steve Yeoman
I don’t think you should design in a browser, unless you are only laying out a bit of text. All you need to know is the constraints of the medium you are designing for, so don’t give me silly distracting images and oversized headers, understand that blends and translucency are becoming more easily available, understand user behaviour when browsing mobiles as opposed to desktop , etc etc.
You wouldn’t design a layout for a poster on a printing press would you?
Marco Campos
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.
Jt
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.
I can!. Few elements from FW and fire!
Best regards!
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.
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: https://fireworksinterviews.com/
Kiran Shinde
Photographs need to some awesome effects in photoshop. So
I preferred, Web Layout design in Photoshop, then convert in HTML/CSS as well.
Leon
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.
[…] 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 […]
Christian Lavie
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.
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.
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?:
I think the “design in the browser” movement is as much a push for a particular visual style as anything else.
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.
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.
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!
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.
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!
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.
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. πŸ™‚
I agree – but I usually start with a pencil and paper.
And does anyone else miss ImageReady?
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!
skipidybebop
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.
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?
cnwtx
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.
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.
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.
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.
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.
Nico
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)
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.
Salman Abbas
Ditto.
IMO Designing in browser is silly and you end up with fugly designs.
Ben
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.
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.
Jim B
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!!)
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.
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? πŸ™‚
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!
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.
Gav
Who cares as long as you have a good design and a good website. Design it on your etch-a-sketch if you want!
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!!… πŸ˜€
A sketch pad is my design tool of choice! Then PS, then code.
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.
I meant to write, “and separate all my text layers into CSS-inspired folders”
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.
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.
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.
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!
Chris Plowman
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.
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.
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.
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.
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 πŸ™‚
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
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
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.
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. πŸ™‚
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.
TallTony
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.
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.
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
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.

Leave a replyReply to