Quick, easy and free ways to make your site look great

Eye Catching Photos

Photos can make or break a website. I’m a visual person, so the first thing I see is the photography. The best way to get great photos? Hire a photographer. Okay, so that’s not always an option. Interesting and unusual stock photography is a good alternative. Some good stock photography sites include:

Unsplash // Pros: great photos. free. Cons: hard to search.

Flickr Creative Commons // Pros: lots of stuff here, photographers have been uploading high resolution images to flickr for about a decade. Cons: It’s hit or miss on quality. Just pick advanced search when you’re in flickr and scroll all the way to the bottom and select the creative commons filter. Make sure to give proper attribution – I do this by adding a comment in the HTML right after the picture. When I have time or if I’m using the photo for something that will have a far reach, I try and give the photographer a heads up. Want more info on Creative Commons? Head over here.

Want more options? Here’s a good round up of the best stock photos out there. Downside to using stock photography? It’s a bummer when you see the same photo being reused all over the internet. Feels cheap and inauthentic. I’m a big proponent of using original photography.

 

Colour

Neil Orange Peel // Want a list of all the colours you can just write in without the hex code? You know red, white, black, but what about darkslateblue, lemonchiffon, or mediumspringgreen? Super quick and easy.

Adobe Kuler // A great site to find, save and organize colour schemes. They used to have options for print and web (CMYK, RGB, LAB and HEX) but have updated to only support web now. Still, it’s a great place to experiment with colour and save all the colour schemes for all your projects.

 

Typography

It’s hard to have knowledge and opinions about typography and make the move from print to web design only to be forced to use body {font-family: Helvetica, Arial, sans-serif;} until you figure out how to use web fonts.

Google Fonts // I’m new to web development and I was able to successfully use google fonts on my first try.

Overwhelmed by too many google fonts? Head on over to this beautiful site and see some great font pairings.

 

Icons

Flat design and icons are all the rage right now. Not to mention you probably will want to link to all your social media accounts. Using an icon font instead of images is considered best practice.

Genericons // There are a lot of icon fonts out there, but since I entered web development through messing around with WordPress child themes, I started using genericons as a WP plug-in before I knew how to code. They’ve worked great and I’ve never needed to search out another icon font. I’m loyal.

the Noun Project // Always my first stop when I’m looking for icons. Lots of choice here and lots of creative commons options. Again, I put the credit in my code as a comment.

Want more icon fonts? Here’s a list of some good ones.

Oh, and don’t forget to make a favicon! It’s all in the details.

Of course, design is a skill that requires training or, at the very least, a good eye for detail. Working with a designer is still your best bet for making great looking websites. But if you’re just learning to code and are making your first few websites, these resources will get you looking good right away.