Free resources to amp up your website

I put this together to help students on the Code First: Girls Beginners’ Web course in Sheffield (we’re #shefcodefirst on Twitter, since you ask). This could help anyone who’s new to web development or isn’t too confident about the design side.

Free photos from Unsplash

Stunning shots on Unsplash for free!

Chances are if you’re new to web development, you have no budget for decent stock photography. Unsplash has a huge collection of high quality photos and they’re all free. You can browse or search, and if you sign up, you can make collections (where you can save photos in folders named by you) - great if you need a few for a site, or if you want to compare some to choose the most suitable one later. You can also browse other people’s collections.

You can find pretty much anything on Unsplash!

Free fonts from Google

A good font, or pairing of fonts, can make all the difference between a flat-looking site and one that is inviting, dynamic and engaging. I wouldn’t recommend using more than two fonts unless you really know what you’re doing.

For beginners, I would say Google Fonts is the easiest way to add fonts to your site. It’s easy to compare fonts and filter them.

Font categories

Category Filters

Google helpfully splits its fonts into categories so you can filter easily. For your main header, you can use a Display font, these are eye-catching and bold. For the rest of the text, I’d recommend sticking to a Sans Serif font. These are easiest to read quickly at smaller sizes.

Serif fonts have the little flicks on the end of letters and are becoming more popular - you are reading one now, here on Medium, but it’s quite subtle! Use with caution as they can be hard to read on screen, especially the more exaggerated ones. Usage is often reserved for headers.

Handwriting fonts are difficult to make look professional and my advice would be to avoid them, particularly for body text. Monospace is generally just reserved for code snippets.

Font Pairings

If you click on a font name, you can see common pairings. Usually the matches are quite good, but just because they are commonly used doesn’t always make them well-matched! Just use it as a quick means to check for yourself:

You can select fonts on the left to compare

Adding fonts to your site

Use the plus button to add a font to your collection. Once you have selected all the fonts you want, click on the black window bar at the bottom of the page and follow the instructions to add to your website.

For more info on font choices, colour contrast and text on images, check out my blog entitled: Effective Text Design to Engage your Readers

Icons

Material Design Icons is a fabulous place to get clean, simple icons. Once you have found the icon you want (the search is good), select it to open a pop-up with options.

The Advanced Export option is really powerful, you can change the size, colour, background, corners, and even the transparency of both icon and background independently.

Then select Icon to download the image as a .png

Colour Palette

Palette generators are plentiful on Google but I like this Material Design Color Tool for its simplicity and colour coordination. Big bonus is that it shows you how your colours work on sample layouts - you just choose two main colours (enough for most projects, especially if you’re a beginner to colour theory) and it provides coordinating light and dark versions, and it will show you which are accessible (i.e. acceptable for dyslexic or partially-sighted users) with text in black and white and your chosen text colours.

These resources should save you quite a bit of time, and make your website look nicer and more professional. If you’ve got any other tools that you can’t do without when designing websites, I’d love to hear from you!