5 tools to analyze a website’s design

In design school, a teacher once told us about a great way to progress as a designer. He explained us that we should always try to understand other designers work, whether it’s a poster in the street or a spammy flyer in your mailbox. When looking at design with a critical eye, you build up your understanding of what makes good and bad designs, but you also learn how to become better by seeing new techniques and ideas.

With web design, this is even easier to do because there are technicalities that can be analyzed with tools. In this post we take a look at the online tools that allow you to better understand other web designers work by checking out layouts, colors, type, and much more.

1. Stylify Me

Stylify Me will let you take out data from any website and let you download it. In an orderly fashion, it will give you the background and text colors HEX information, the typographic data and some information about images.

2. Web Colour Data

This online tool is the coolest color extractor you will find. It takes any website and extracts its colors, then displays it with very cool infographics to get a good visual representation. A nifty little feature is that you’ll discover some websites with the same color hue as the one you’ve been analyzing.

3. Type-o-matic

Type-o-matic is a useful Firefox extension that will audit a website’s CSS to extract all the typographic data. If you like a website’s fonts, this is the easiest way to identify it, unless they use images for their titles, which has become quite rare nowadays.

4. Style Stats

Style Stats is an impressive tool that will even be useful to better understand the CSS of your own bloated website. It takes all your CSS information and organizes it in an easier to read manner. Even better, it gives you some statistics that allow you to better evaluate the quality of your CSS.

5. Snappy Snippet

SnappySnippet is a Chrome extension that allows you to extract CSS and HTML from selected elements on any website. With just one click, you can send selected code to CodePen, jsFiddle or JS Bin. If needed, it can do even more like fix identation or clean up HTML.