Awesome Tools for Designing in the Browser

A bad workman always blames his tools. – Proverb

One of the biggest complaints I hear about designing in the browser is that designers do not have the tools they need to create good designs. Even though I think that mindset has many flaws in it, I want to focus on only one part … the tools.

While many may might not be aware, there are so many great tools out there to help create beautiful fluid designs within the browser window. These tools have been created by other designers and developers that faced the same issue. The tools that they have created turn an ordinary browser into a grid displaying, typography pumping, color blazing machine.

gridlover

Gridlover

Gridlover gives you adjustable css for font sizes, line heights and margins. The default css output is for body, p and h1 – h4 headings, but you can of course apply your adjusted values to any element by editing the css later.

baseliner

Baseliner

Looking for an easy way to overlay a baseline grid on any webpage? Baseliner is a JavaScript tool that can do just that.

kuler

Adobe Color CC

Adobe Color CC is a fun and simple way to capture inspiring color combinations wherever you see them.

resizer

Viewport Resizer

Viewport resizer is a browser-based tool to test any website’s responsiveness. Just save the bookmarklet, go to the page you want to test, click on your created bookmarklet and check all kinds of screen resolutions of the page.

resizer

Typekit

Typekit is a subscription font service that brings thousands of fonts from foundry partners into one library for quick browsing, easy use on the web or in applications, and endless typographic inspiration.

resizer

Google Fonts

A web with web fonts is more beautiful, readable, accessible and open.

Google Fonts makes it quick and easy for everyone to use web fonts, including professional designers and developers. We believe that everyone should be able to bring quality typography to their web pages and applications.

resizer

Photoshop

When it comes to the web … this is a tool … so use it like one!

Available for both Windows and Mac, Adobe Photoshop is an extremely powerful application that’s used by many professional photographers and designers. You can use Photoshop for almost any kind of image editing, such as touching up photos, creating high-quality graphics, and much, much more.

resizer

Sketch

When it comes to the web … this is also a tool … so use it like one!

Sketch gives you the power, flexibility and speed you always wanted in a lightweight and easy-to-use package. Finally you can focus on what you do best: Design.

Designing in the Open

A few friends of mine have recently asked me why I have not taken the time to design my blog. I am a web designer after all … right? Whenever I am asked that I point them back to my original post: Get Off Your Butt (PT 1).

For years now I have been wanting to blog so that I can do my best at giving back to the community just as so many countless others have done for me. The problem was I could never find the time to design it, so I always made that my excuse for never doing it. This crushed me and so a few weeks back I did something about it. I went to WordPress.com and in the matter of 10 minutes I had a blog (Thanks to the Automattic team for being so awesome)!

Even though I have gotten into the habit of blogging, it does feel weird to be writing on a website that is not truly my own. Also, one thing that I have been applying to my workflow is designing inside the browser which is what inspired me to write Own Your Canvas: Learning to Design for the Web. The only problem with that is that it is really only big picture thinking and does nothing to really talk about how that is practically worked out. Not only that, I actually don’t think this workflow has really been fully laid out in great detail (more then a single blog post) by anyone.

With those things in mind I have decided to do something about it. I am committing myself to redesigning my blog, but even more then that, I plan to design in the open.

This means:

  1. As soon as I start I will open up a public GIT repo.
  2. I will commit my work along the way so you have access to the code.
  3. I will give everyone access to the URL i will be working with so that they can see the progress.
  4. I will be creating webcasts along the way to show my progress and show how I am going about designing in the browser.
  5. I will blog about my journey along the way.

By doing this I hope to show how one can approach designing in the browser. I don’t expect it the be all way of doing it, but my hope is that you could capture the principles and then make the workflow your own.

This should be fun! Stay tuned!

Create. Stop. Be Creative.