*I realized after writing this article that you might not be totally sold on the idea of In-Browser Design so here’s a list of Pros & Cons.
There have been many industry leaders talking about their ideas for how web design is changing. Most of the talks center around the idea of getting out of Photoshop and designing in the browser. Over the last year, I’ve made a considerable effort to put this into practice. As of right now, I’ve designed 8 websites fully in browser. There’s been lots of problems, but there’s been even more rewards. Hopefully, I can share with you some experiences where I’ve had great results and places where it didn’t work so well.
Make big decisions first then move to small decisions
The biggest difference I see between using Photoshop and the browser is that one makes it easy to change your mind and the other is not. If something isn’t working in Photoshop you just move it around until it makes sense. In the browser, it’s not that easy. To deal with that, you have to take things one step at a time. Don’t worry about what color your links are when you don’t even know what’s in your navigation. The first thing you need to do is make a list of everything on the page. I start with the logo at the top and end with everything in the footer. Once you have a full list, put it in order of the most important thing to the least important thing. That would generally be the logo and navigation listed at the top with the content in the middle and the everything in the footer at the end. This isn’t necessarily the order it all has to be on the site.
Once you have it all listed out, it’s easier for your to make sure you have everything accounted for. You should also be able to link everything on that list back to the main goal of the site.
You’re going to need a pencil and some paper
In my opinion, sketching is an essential part of the design process. It doesn’t matter what you’re designing, but it’s especially true for in-browser design. There’s nothing simpler than drawing 10 boxes on paper and arranging them in a layout. By sketching out your ideas first, it takes away the need to move everything around later. Make your layout decisions on paper. Sketch everything until you’re more than comfortable with it.
I would actually start by sketching small parts first. For example if you need a cart widget for your eCommerce store, start with that. Your navigation is by far the most important part of your site, maybe start there. See if a horizontal nav bar or a vertical sidebar nav will work. Once you’re happy with that start drawing it in relation to the rest of the site. You’ll know you’re ready when you can see it all coming together in your head.
HTML goes before CSS
To some it might seem obvious, but for me it wasn’t. On my first project designed in browser, I stumbled through trying to organize my CSS and HTML at the same time. It ended up as a big mess and it took me much longer. So, I suggest pulling out that list from before and opening up your HTML. Write out your HTML to follow that list. You might look at your sketch too for guidance on what goes in the sidebar and where that sidebar shows up in the document. In any case, make sure that HTML document has everything in it before going into CSS. Yes, once you start on the CSS, you will probably have to move, change, or add to the syntax of your HTML but it’ll be less than if you’re trying to do them both at the same it.
Don’t start with your CMS
We use WordPress and I absolutely love it for many reasons. But when designing in browser I don’t want to have to worry about PHP. I just want simple static HTML and CSS documents that I can have full control over. So don’t try to make your comp in your chosen CMS, all you’re trying to do with your comp is communicate an idea as quickly and efficiently as possible. If fact sometimes I even show my sketches to the client to communicate the idea before I even move it into the browser.
Make a template for yourself
Since we use WordPress, we also have a base parent theme from which we build everything. So I’ve copied and pasted the actual mark-up from that theme into static HTML and CSS documents. That way I’m working with the same wrap, container, header, body, footer tags as the theme which it will be developed in later. This helps the developer get a little closer to the final product.
Don’t make your first comp responsive
Although designing in the browser is super easy to make your comps responsive, I suggest you hold off. Just make your comp with a regular width of 960px and leave it there until you’re pretty comfortable with it. My first project, I tried doing it responsive as well in browser and I ended up wasting a lot of time and, we’ll just say, things didn’t turn out great. When you’re ready to start making your in-broswer comps responsive, I would do them mobile first. Since this is just a comp, you don’t really need to worry to much about browser support. Currently IE8 doesn’t support media queries so your site will look terrible for those older browsers. But as long as your client doesn’t use IE8 you will be fine.
Use a style tile
The style of your site is very important. It’s what the client will use make their ultimate decision. Branding a website correctly is an entirely different topic. Photoshop and other tools, help a lot in this area. Others have theorized and started using something called style tiles.
I don’t use them in depth. Maybe one day I will but I do use tools like ColourLovers to create my color palettes and to find my fonts I use Typekit. I’ve even used Typecast to see how the fonts and colors will work together. For patterns and textures, I use Subtle Patterns. When I need icons, I’ll start with The Noun Project and I usually modify them in Illustrator. Or I’ll just draw the icon myself. I’ll even use photoshop for creating custom textures, cropping images or creating a png that I need in a layout. You know, what Photoshop was created to do. All this goes into the look and feel of the site and with, some creative use of tools, can expand your creativity.
Although on the outside, it might seem more restrictive to the creative process, in-browser design has actually made me more creative. By changing my process to being more compartmentalized I’ve found great success and become a more disciplined designer for it. Designers make creative choices around a set of perimeters that solve a problem. Without the problems to solve, creativity is left to just making something look cool or different. As designers, we need to focus on making a website work for both the user and solve problems for the client. Our creativity is in solving those problems and in-browser design helps to that end.