Free resources to use on your website

From icons, to background textures, fonts and code snippets there are plenty of free resources available to get your website started. You can even use text generated to suit your development site.

Code

Boilerplate and frameworks are great ways to kickstart your website project. Many include options to make your pages responsive, work with older browsers and look great out of the box.

http://getbootstrap.com/

http://www.initializr.com/

http://html5boilerplate.com/

http://h5bp.net/

Backgrounds

You can make tiling backgrounds with Photoshop. But once they start getting a bit complex you need to work out how one till works seamlessly with the next. Or you could just go and find one that someone’s already made. For free.

https://www.toptal.com/designers/subtlepatterns/

http://inspiredm.com/50-must-free-backgrounds-next-web-design-project/

Icons

Icons help to inform us about what content we may be viewing. They’re also helpful in adding the right image for credit card and social network services. And flags. Oh and the calendar section, sending email, rss feeds and dozens of things you hadn’t thought you could make an icon for. Used sparingly they can be effective. Used liberally these badges can cheapen your website’s design.

http://designinstruct.com/articles/resources/25-free-high-quality-minimalist-icon-sets/

http://fortawesome.github.io/Font-Awesome/

http://www.creativebloq.com/web-design/free-icon-sets-10134829

http://work.scannerlicker.net/free/iconia-free-icon-font/

Text

These days it’s not all about Lorem Ipsum. Though you may still need to explain that it’s not real text as the client goes on to start correcting your Latin (yes, it does happen)

http://meettheipsums.com/

http://hipsum.co/

http://idsgn.dropmark.com/107

Fonts

A common question from clients is about how we can achieve a certain look if we’re restricted to web-friendly fonts. Well, once upon a time we may have used Times, Georgia, Arial or Verdana, but these days we use literally thousands of fonts, easily, and many times for free. That’s not to say you won’t have to pay for more popular fonts but even those are available served from the provider and on a subscription plan.

Here’s some free ones to get you started:

http://html.adobe.com/edge/webfonts/

https://www.google.com/fonts

https://typekit.com/ – (sort of free if you subscribe to Adobe Creative Cloud)

Got any free resources to add to the list? Leave a comment.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.