A Collection of Useful Sites for Designers

There are a lot of sites for inspiration, resources and tools that designers would find very useful, so today we have rounded up some of the very best, and hopefully there will be some that you haven’t yet come across that you can bookmark for future reference.

Fonts

Fonts are a very necessary part of designing for any media. You should have two or three of the most useful font sites and/or foundries bookmarked for easy access.

Google Web Fonts

Google Web Fonts was the first to offer @font typefaces, and their collection has continued to grow steadily over the past few years to the current 703 font families available.

Google Web Fonts

Dafont

It cannot be denied that Dafont is the largest and most comprehensive free font site on the internet right now. Just about any font you can find on any other free site will also be on Dafont – so for free fonts it is probably the best one to bookmark.

Dafont

My Fonts

My Fonts has a comprehensive selection of premium fonts in all styles.

My Fonts

Fontstruct

If you want to design and create your own, unique font, Fontstruct is a quick and easy way to do so online.

FontStruct

My Font – What The Font

If you want to know which font is being used on a particular site, poster, image… or anywhere online, simply take a screenshot and upload it to What The Font to be given suggestions as to which font it is.

What The Font

Color

Design relies heavily on color choices, and there are plenty of sites online to help you choose colors that go well together. Here are some of the best.

Adobe Color CC

Adobe Color CC has replaced Adobe Kuler and is a very popular site with thousands of color palettes to select from, with the option to change them around for your own requirements. You can select from 6 color rules, including monochromatic, triad and complementary, then you can move the sliders or change the colors completely using the ‘custom’ option. Resulting colors are shown in both RGB and Hex values.

Adobe Color CC

Material Palette

Another palette creator. Here you select two colors – the primary color and an accent color. You are then given suggested dark primary color, light primary color, text/icons, primary text, secondary text and divider color. Colors are given in Hex values.

Material Palette

Color Hunt

This site adds new (submitted) color palettes every day. Clicking on any palette will reveal the Hex values and some illustrations of the colors in use.

Color Hunt

Cohesive Colors

With this site you can get a random palette from ColourLovers and apply an overlay in the color of your choice and you can then adjust the opacity of the overlaid color to give you a quite different palette, but the colors are as cohesive as the original.

Cohesive Colors

ColourLovers

ColourLovers is probably the largest submission site of color palettes on the internet. There are also patterns and individual colors.

ColourLovers

Appearance

Once you have completed your design, it is always good to see how it looks across different browsers and different devices. Short of downloading every browser and purchasing every device, this is not an easy task without help – and there is plenty of help to be had!

Browsershots

On this site you can test your site on probably every browser known to man! At least, very many browsers and browser versions.

Browsershots

Google Mobile Friendly Test Tool

A test of how Googlebots see your site on mobile devices. Simply input the website address and click the Analyze button and it takes less than a minute to return the results.

Google MobileFriendly Test Tool

Inspiration

Everyone needs to be inspired from time to time. There are a lot of galleries for this purpose, and it can depend on what kind of inspiration you are looking for as to which gallery you should visit.

Awwwards

This site uses a panel of judges who decide which submitted sites will be featured, and the public choose their favorites for the awards which are Site of the Day, Site of the Month and Honorable Mentions. So here you will find under a number of categories and tags, sites that are highly appreciated, and those that are not so – making it a great source of inspiration for designs that work.

Awwwards

SiteInspire

A very nicely presented gallery of inspirational website design.

SiteInspire

The FWA

The ‘Favourite Website Awards’ features both submissions and sites they have discovered themselves. They have a Site of the Day awards, Site of the Month, People’s Choice Award (voted for from the 12 sites of the month) and a Site of the Year which is chosen from a panel of judges, also from the 12 sites of the month.

The FWA

One Page Love

As the name suggests, this site is dedicated to one page websites which are becoming more and more popular, so a great source of inspiration if this is what you’re looking to be inspired by!

One Page Love

Siiiimple

A gallery featuring minimal website designs, another style that seems to be neither in nor out of fashion, just always around.

Siiiimple

Dummy Text Generators

All designers need to use dummy text from time to time. You may be quite happy with the normal Lorem ipsum text that, being in Latin, is outside of the realms of most of our understanding, so doesn’t distract us and simply shows how the text looks. But it is possible that you would like other text… even fun stuff, so here are a few different types of generators.

Blind Text Generator

Here you can generate Lorem ipsum text and 9 other types of text. You can adjust the size of the column and the font: family, weight, style, size, letter-spacing, line-height, text-transform, text-decoration and text-align. It also generates the CSS styling for the font and styles you choose.

Blind Text Generator

Fillerati

This dummy text is taken from classic literature, and includes the works of such authors as Lewis Carroll, Jack London, Jules Verne and H.G.Wells, to name just a few. You can select the text to be in paragraphs, h1 heading text, list format or plain text, and you can choose the amount of paragraphs you require.

Fillerati

Dummy Text Generator

This generator produces lines and lines of nonsense in English words. You can also use Lorem ipsum here.

Dummy Text Generator

Image Optimization

To keep websites loading quickly, it is no secret that images have to be optimized for web. Here are some online tools that will take care of the task for you.

Optimizilla

Using a combination of the best optimization and lossy compression algorithms to shrink JPEG and PNG images to the minimum possible size while maintaining high quality, you can upload 20 images at a time to this online tool.

Optimizilla

RIOT

Radical Image Optimization Tool is a free program for Windows if you would prefer to optimize your images from your desktop.

RIOT

Free Stock Images

Stock images are a massive part of design at the current time, and sometimes you have no budget for images, so free ones are required. Here are a few sites that offer free, no attribution required, stock images.

PicJumbo

A nice collection of free high resolution stock images. Premium membership is also available at $7.50pm for a wider selection.

PicJumbo

Pixabay

This is one of the best free stock image sites around, and the majority of the images require no attribution, but there are just a few that do – so watch out for those!

Pixabay

Gratisography

A smaller collection of free stock images, but well worth bookmarking as no attribution is required for the majority of the images on this site.

Gratisography

Sites For Other Resources

There are very many great sites where you will find many useful resources, so this section is presented as a list, rather than featuring each site individually.

  • Behance – This is a kind of ‘by designers, for designers’ submission site where you will find many free resources and lots of inspiration.
  • Dribbble – Another submission site with a huge amount of both freebies and inpirational ‘Shots’.
  • DeviantArt – A very well known source for all things design related. You must be careful on this site – check that the artist is happy for you to use their resources off-site.
  • Pixeden – Both free and premium design and web resources.
  • EpicPxls – A regularly updated library of designer resources, including icons, mockups, vectors, etc.
  • Photoshop Star – A site dedicated to Photoshop – tutorials and free resources – if it’s to do with Photoshop, it can be found here!
  • Vector Cove – A huge collection of some of the best Illustrator tutorials on the internet, here you will also find many useful free Illustrator resources.
  • Vecteezy – just about every vector you could ever need is available here, and free.

Conclusion

This is by no means an exhaustive list of sites for designers, but we have listed some of the best around, as well as some of the more popular. Of course, we fully expect that designers have their own bookmarked inspirational and resourceful sites, but hopefully we have introduced you to some new ones here.

Luís Frias
Luís Frias

Luís Frias is a web developer and trainer with over 25 years of experience.

Articles: 4