The When, Why and How of Designing in Browser
Brooke Kao

The Drawback of in-Browser Designing

So much to do, so little time…

Designing for today’s technology is an art form. Whether it’s for a website, an app or a robust platform, it takes a lot of thought and consideration to complete your masterpiece. Unfortunately, if you’re skipping right to designing your project in a browser, you may be wasting a lot of valuable time.

Simply put, in-browser design can be distracting. There’s too much to look at and too much code to consider while you’re deciding on your website’s layout. Do you want your sidebar to span the entire height of the page? Do you want a fixed or absolute-positioned navigation? Where will the search bar go? What about the footer? Should it be blue, sea foam or charcoal?

If you’re doing all of this in your browser, you could spend hours experimenting with hexadecimal or RGBA(Red Green Blue Alpha) values alone. That’s not even considering the method you’ll eventually pick to make that sidebar stretch from the top-to-bottom of the page, or if your navigation looks better above or below the header.

On the brighter side of life, by using an image editor, such as Photoshop or Gimp, to create a complete prototype of your project beforehand, you’ll be able to do everything on the fly and in real time. Changing a colour takes two seconds or less. Extending a sidebar from top-to-bottom? Heck, that was done before you even finished reading this sentence, and those are just the simple changes. What if you wanted to see if your fixed navigation would look better absolutely nested on the bottom-right side of your header? You’d have to go through your style sheet and change everything around. Erasing and rewriting lines of code that would have taken mere seconds to do using Photoshop.

Imagine how much more productive you could be if you went into all of your projects with a fully-formed idea of what you were going to build. You know what the website will look like on different sized screens, you have all of your icons already built. Your colour scheme chosen. You know what forms will look like, buttons, headers and fonts.

Eventually you will have to take your design to the browser, but why rush right in? Take some time to have fun with what you’re doing before you even think to open that text editor. Designing a website is an art and it should be treated as such. Design first, code second.

By the time you move to the browser to start bringing your work to life, you’ll know what to do. It’s true that some ideas may change in the conversion process, but you didn't waste time rewriting, what could be, an entire style sheet 20 times over. In the end, that means you’ll get to create more masterpieces, take on more projects and unleash the creative side of your brain more often.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.