4 Free Tools for Website Inspiration

by Diana Ecker on March 10, 2014

4 Free Tools for Website Inspiration

You don’t have to be a designer to care about design. If you’re planning a new website, go behind the scenes of your favorite sites for inspiration.

Whether you’re planning your own website or just looking for design ideas, it’s helpful to keep track of sites you like — you can bookmark them, pin them to Pinterest (on secret boards if you’re in stealth mode), or capture them with Evernote.

But what if you want to deconstruct your favorite sites so you can understand how they’re put together…and find out what makes them so attractive to you? If that sounds intriguing, you might enjoy discovering the structural and styling aspects that that serve as the building blocks for their design.

Discover style choices with Stylify Me

Stylify Me shows you the facts behind a web page’s style at a glance. Just paste a URL in the box on Stylify Me’s home page — and see the colors that are being used on the site, including their six-digit hex codes so you or your designer can identify them. You’ll also receive information about the fonts that are being used and the dimensions of images on the page.

Creators Annabelle Yoon and Michael Mrowetz explain on their About page that Stylify Me “allows the designer to research sites efficiently without the need to inspect each element, in order to be aware of current design trends and inform their own design decisions.” And of course, you don’t have to be a designer to enjoy seeing all of that information at a glance.

Although the site is free, if you find that it’s turning out to be especially useful to you, they include an option to “buy us a beer,” which allows you to make a donation of your choosing to them through Paypal.

Get a website’s layout with Wirify

If Stylify Me is like getting a helpful list of a house’s interior design elements (purple carpets, beige walls), Wirify is like getting a set of its blueprints.

Those of us who don’t design websites rarely step back and think structurally about how a page is laid out. Wirify lets you do that in a snap.

To use Wirify, you need to drag their bookmarklet into your toolbar (a big turquoise arrow on the home page shows you how to do that). When you find yourself on a website you want to understand better, just click the bookmarklet and watch the page turn into a wireframe (or basic layout).

For users who want to continue to work with those wireframes in programs like Balsamiq, Wirify Pro is a paid service that makes it possible to do that. Each credit is good for one download, and prices range from $4 to $7, depending on how many you buy at once.

However, just using Wirify by itself can be very useful to help you get your mind around how a page is set up, without the distractions of content and styling.

Name that font with Fount

For anyone who gets a real kick out of seeing how fonts are used, Fount is a lot of fun. Like Wirify, you install its bookmarklet in your toolbar.

When you’re on a website that’s appealing to you, just click on the Fount button in your toolbar. You’ll see your cursor turn into a “plus sign” (+).

Then click on the text that you’re curious about — unless that text is a link, in which case you can simply click nearby. A small, translucent, light-gray box will appear on the screen with the name of the font, the size, the weight, and the style (bold, etc.).

When you’re done and you’d like your cursor to turn back into its original form, just click again on the Fount button in your toolbar.

This handy, lightweight resource was developed by Nathan Ford of Art=Work.

Gather inspiration with Fonts in Use

The final tool, Fonts in Use, is for discovering new inspiration rather than analyzing what you’ve already discovered.

On Fonts in Use, you can browse a curated selection of images that use fonts in an appealing way, and the selection is definitely not limited to online sources. Explore vintage and contemporary book covers, film and video references (including the Jeopardy logo!), and even photographs of real-life signs on buildings.

When you arrive at Fonts in Use, don’t be fooled by the deceptively simple home page — it barely hints at the depth of what’s there. I like to click on any of the three menu headers (Industries, Formats, Typefaces) to see the categories for all three and then browse from there.

A trip to the “Kids” category, for instance, reveals a range of choices from quirky to accessible to nostalgic — yes, I’m looking at you, Trapper Keeper (who knew their logo was in Motter Tektura and Helvetica?).

Whether you’re a designer yourself, getting ready to work with a professional web designer, or simply seeking to better understand what goes into creating a website that’s visually pleasing, enjoy exploring with these online resources.

Do you use a helpful free resource that’s accessible to non-designers and that wasn’t listed here? Add it in the comments!

Subscribe to our mailing list

* indicates required First Name Email Address *

{ 0 comments… add one now }

Leave a Comment

Previous post:

Next post: