There are various ways to build a website or web app. We all learned about the traditional waterfall which used to be “standard” in most companies. And now there’s “design in the browser” concept which makes web design workflows much simpler and leaner.
Here’s the ultimate guide to getting started with designing in the browser.
What is “Design in the Browser”?
Design in the browser is basically a concept using HTML and CSS as your primary design tools.
Basically the code is writing right from the scratch during each phase of the project. From the clients brief on to the first design draft, to an rudimentary prototype to a finished product. Everything (or nearly everything) takes place in the browser.
Rather than spending hours designing pixel-perfect design drafts in Photoshop, designing in the browser allows you to jump directly into the text editor and start shaping your code.
Why the concept of the traditional Waterfall is broken.
In the old days, designing in Photoshop, Illustrator or Fireworks was a great and probably the most efficient way to go. However, times changed and due to new – more efficient – tools like Bootstrap – prototyping and designing in the browser have become a big time saver.
Also think about the various devices we are designing for and how long that takes with a traditional waterfall model where pixel-perfect design drafts for different devices are created. With design tools – like Photoshop – only static, unclickable drafts can be crafted. There’s a lot of imagination needed to see all those interactions and effects.
Why do you design in the browser?
Designing in the browser isn’t anything new and there have been some great articles praising the great future of designing in the browser. However there might be scenarios where you simply can’t start “designing in the browser”.
To sum things up there are are many pro’s and con’s of designing in the browser. Because of this I tried to summarize the most important ones.
The greatest advantage of designing in the browser lays in it’s nature itself. Why should you use tools – like Photoshop – to create static designs which are then must be made interactive. By designing in the browser production-ready code is produced from the start.
This means: Saving money & time!
Advantages of going straight into the browser
Nowadays there are so many options, resources and tools available. By designing in the browser we clearly get better results much faster, which makes our web development workflow significantly more efficient.
Frameworks everywhere.
Frameworks are a great thing, since they will make your web projects more efficient. However, I definitely recommend to get into the basics of programming, before exploring various frameworks. Bootstrap for example is great front-end framework.
Interactive prototyping.
Designing in the browser actually means that there are clickable and interactive elements. Clients and not-so-tech-savvy people can get a much better understanding of the end result than with traditional design drafts.
Much easier testing.
Since you’re constantly working on your prototype within the browser, chances of a bug-free application are much higher. You can instantly check the design in different devices and screen sizes. Responsive design testing FTW.
From development to production environment
…within zero time. Since you started to code right at the beginning of a project, your code went through frequent code reviews. Because of that, the prototype’s code can go directly into production.
Tools for Designing in the Browser
Convinced of the “design in the browser” concept? Want to get right into it? Perfect, here are a couple of great tools which are making your life easier when designing in the browser.
Get a programming friendly editor
This might sound a bit strange. But designing in the browser basically means working a lot on the code of your site. The editor will be your friend and go-to tool in many cases. Choose your editor wisely.
Bootstrap – your front-end framework
Bootstrap is probably the best known front-end prototyping framework available. Originally designed by Twitter, it’s now available to everyone for free. Packed with some great functionalities, it supports typography, forms, buttons and some great JavaScript options.
http://getbootstrap.com/
PS: Foundation – similar to Bootstrap – is another, yet great front-end framework which is worth a try.
Style guide
Next, it’s about the style guide. It’s super important to keep your design and style elements organized. With a style guide in place, design changes are super easy as they will come. And trust me: they will come 😉
http://styletil.es/
Chrome Developer Tools
After you created your first prototype in your browser, it’s time to review, test and tweak. The best tools therefore are available for free in every Chrome browser (or Firefox if you prefer).
With a right click on your site you can start the Chrome developer tools which offer you a broad range of features. You can play around with your code, move styles, edit content and much more.
Keep track & manage tasks with Usersnap
Since designing in the browser is quite an agile approach, you might wonder how you keep track of change requests, bugs, ideas, etc. I therefore recommend Usersnap, which does a great job making collaboration on website or web app projects much easier.
By adding the Usersnap widget to your prototype, every single piece of comment and feedback will be stored in your project overview where you can discuss feedback and track bugs.
https://usersnap.com
Design skills still needed.
Designing in the browser still requires great design skills. No tool in the world will make up for your lack in design know how. However, the browser becomes more and more your design and development environment. And because most of the design process takes place in the browser, doesn’t mean you should give up Photoshop.
What are the perfect tool kit for designing in the browser?
This article was brought to you by Usersnap – a visual bug tracking and screenshot tool for every web project. Get started with Usersnap and deliver what users want. Collect your first 20 feedback items for free, upgrade to continue acting on the insights.
Resolve issues faster with visual bug reporting.
Simplify and reduce issue & bug reporting efforts with screen recordings, screenshots, and annotations.
And if you’re ready to try out a visual bug tracking and feedback solution, Usersnap offers a free trial. Sign up today or book a demo with our feedback specialists.
