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.
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.
I’ve just read your post and loved it. Keep going!
– 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 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.
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.
(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).
β’ themiraclebean.com
β’ ineedbeauty.com
β’ yourallergyreliefstore.com
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.
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.
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.
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.
Best regards!
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/
I preferred, Web Layout design in Photoshop, then convert in HTML/CSS as well.
https://www.sanchurro.com
https://www.mcmillerssweetsemporium.co.uk
https://navidad2011.talentocorporativo.com
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!And does anyone else miss ImageReady?
It should stay a tool and not become an obstacle.
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!!… π
Design is unpredictable.
Design is beautiful.