Why I Don’t Design in the Browser First

So you’ve heard that starting your designs in the browser is the way to go. So have I. It’s what all the cool kids are doing right now. But it’s not for me, and it may not be the best for you either. Don’t get me wrong, conceptually it makes a ton of sense. Just jump right into an environment that understands responsive design, hover states, and animations, but the problem (at least for me) is that it’s stifling my creativity. There’s no substitute for the freedom of pencil and paper, or even a design program that you’re comfortable with.

CSS Frameworks Are Good, Until They’re Not

I’ve tried CSS frameworks like Foundation and Bootstrap. While I think they're awesome, they shouldn’t be a catch-all. They make for rapid prototyping, but I still need to stop and think about code instead of concerning myself with usability and aesthetics. That pause during the creative process is more costly than I think most front-enders realize. I mean how many logo designers jump right into Illustrator? Most (at least the good ones) start with a sketch… Why? Because it frees them up. It simplifies the process and offers no barriers.

Also, I can’t be the only one who gets annoyed trying to overwrite the existing CSS styles to get a nav bar to do what I want. A decent percentage of the time, that process is longer and more frustrating than just starting from scratch.

I’ve been digging on a simple SCSS grid called Jeet lately. It’s just a grid system, but it does that really well. I don’t need prefab buttons, navigation, tabs and the like… I can build those custom for each project so that they are unique and thought out. But a simple way to create columns is just enough for me. And I’m not limited by a predefined grid of 12 or 24 columns, or whatever number. Jeet allows me to use custom column mixins to specify any percentage or fraction and any gutter width for that matter. It fits perfectly in my workflow for coding up my designs.

More of the Same

An obvious and unfortunate side effect of the browser-first mentality mixed with CSS frameworks is that all websites built like that tend to look the same. Not cool. We can do better. Design patterns are fine, but not if they sacrifice creativity or don’t solve a specific problem. Don’t get me wrong, I fall into this trap on occasion, even when I design outside of the browser, but I find myself doing that less. And I’ll take that.

Wrapping This Thing Up

I’m not saying you have to design outside the browser first, but if you’re more creative starting on paper or a design program, then by all means start there!