Designing a website is no easy task. It’s tough to find design inspiration and the right resources. That’s why it’s best to be prepared with a list of go-to websites & resources.
There are plenty of free or inexpensive resources available for budding web designers, but not all of them are worth your time. That’s why I’ve put this article together to help save you time and frustration.
The following 12 websites will help you get more out of your design skills or help you level up your designs with everything from inspiration to code ideas and more.
Coolors
If you suck on colour combinations or simply need a little inspiration, Coolors is a fantastic starting point. In fact, it’s one of my favourite sites for colour inspiration. Not only is it a great source of inspiration, but it has a wealth of tools and options – probably more than most of us will ever need.
For example, let’s say you have a logo or a photograph you want to use as inspiration, you can simply upload it and let Coolors work its magic. Want to make sure your colour combinations have enough contrast for anyone with any form of colour blindness. No problem, Coolors can handle that for you too.
This is just scratching the surface of what Coolors can do for you for zero cost.
CodePen
Building websites should be fun, but it’s easy to get stuck building the same old designs with the same old features. Well, maybe it’s time to investigate what CodePen offers. It’s a code playground and then some.
CodePen is a great place to find and test new coding techniques directly inside your browser and if you like what you see, you can easily integrate it into your designs in a few seconds.
CodePen is like a coder’s sweet shop; chock full of interesting and shiny new experiments. I’ll warn you now, you can spend a lot of time just playing around and experimenting with all the cool code snippets that are available and created by some very talented people.
Generate WP
If you’re looking to expand a basic WordPress website with custom post types, meta fields and more but don’t want or need to use a collection of plugins, Generate WP is a great way of avoiding that.
All you need to do is choose the relevant options that you want to include in your custom content and then take the generated code and pop that into your WordPress website and Roberts your mother’s brother – custom post types, custom meta fields and much more.
Take a look at Generate WP and see just how far you can take your WordPress websites and cut back on those plugin update blues.
PhotoPea
Let’s be honest, Photoshop is expensive and not everyone wants or needs to sign up for a monthly subscription. This is where PhotoPea comes into the picture. If you’re looking for a free alternative that can handle all the common tasks of photo editing and image creation, PhotoPea could be the answer.
On top of those basic functions, it can also handle a lot more advanced image creation & editing techniques, like using Smart Images and Smart Objects to handle your more advanced creative needs.
Check out PhotoPea – it’s free, so there’s nothing stopping you from playing around to see if it’s a good addition to your toolbox.
Framer
Jumping straight into designing your next project isn’t always the best course of action. Spending a little time building out your wireframe designs, adding interactions and testing the UI/UX before building can lead to a much better final result.
Enter Framer – an alternative tool to the popular Figma or Sketch. Framer offers you all the main tools you need to rapidly prototype your next design.
Framer is a great tool to learn more about the user experience and improve your design skills, ensuring that your final design exceeds your expectations.
You can easily get started with a free account and if you need more, you can upgrade to a paid account. For most freelancers and solo designers, the free plan should prove more than enough.
Google Web Designer
Google Web Designer is a powerful tool that gives the user the ability to create beautiful HTML5 content. Use animation and interactive elements to make your creative vision come alive and enjoy seamless integration with other Google products, like Display & Video 360, Google Drive, and Google Ads.
Set up events in order to make your creations react according to what happens on-screen or off-screen through touch gestures as well as rotation or shaking on mobile devices. With preset events, you can quickly add functionality like image galleries, video players, maps etc. Moreover, each component automatically reports metrics so there’s no need for coding!
Create multiple pages within one project so that there are different scenes while still viewing the same ad material: this will allow your audience to switch from scene A to scene B without having an interruption of advertisements.
All in all, Google Web Designer is an interesting project that may be worth taking the time to investigate.
BrandMark
BrandMark helps remove the barrier of expensive branding by providing a really simple service you can use as a company or provide to your clients. Open up their website, add the name and slogan (or strapline), add some keywords that represent the brand and finally pick a starting colour scheme.
Then wait just seconds for BrandMark to work its magic! You’ll now have starter designs that are customisable- giving them an extra unique element! Once you’re happy, download the result as either a png file or with an expansive collection of mockups and design elements. Or get in touch with one of their human designers for an extra level of customisation.
All of the options are relatively inexpensive and BrandMark may be a great starting point for those projects that don’t have the budget for a custom logo design or branding exercise.
Designspiration
The technical side of building websites is relatively easy to learn, but building a great looking design is a totally different skill set. So, it’s always good to have a collection of inspirational websites to help spark your creativity.
This is where a site like Designspiration really becomes invaluable. It’s full of great looking website designs to give you a solid starting point and help get your creative juices flowing.
Grab yourself a drink, put your feet up and start browsing the designs and get inspired.
MixFont
Fed up of Montserrat and Open Sans but stuck for new ideas? Well, let’s take a look at MixFont and what it can do to give you some font inspiration.
It couldn’t be an easier site to use – hit the Start the Generator button and let MixFont go to work creating font pairs you may have never heard of. What makes it even better is that it shows you the new combinations on a custom web page design.
Click the generator button a second time and you’ll have a new font pairing and a new design aesthetic to view them in. Pretty cool huh?
Wait though, there’s more. It will also show you the variations and size differences of both fonts along with some app designs in case you want to make a mobile app and include your newfound font combinations.
Fluid Font Calculator
Fluid Font Calculator is a pretty niche tool, but if you want to ensure your font scaling is spot on, this handy little web app makes it way too easy.
Choose what unit of measurement you want to use, the selector, viewport size and more and ‘boom’, your font size is calculated for you ready to be used in your design.
Now you can click to test your settings out or just grab the CSS and drop it into your design ready for some pixel-perfect perfect scaling.
Duotone
If you’ve never heard of a duotone, it’s simply an effect where you apply 2 opposing or 2 complementary colours to your image and those colours get applied to the shadows and highlights with a gradual transition between the colours.
This effect is very popular right now, and while it’s not difficult to achieve, using the DuoTone website makes it as easy as picking a suitable image from the library of Unsplash images included, choosing your 2 colours and downloading the final result.
These duotone images are perfect for prototype designs or being used as they are in a final design. The only caveat is that you can’t upload your own images to apply the effect to. Still, for a 100% free service, you can’t really complain and the images do look great.
LogoCrunch
LogoCrunch is a nifty little website tool that lets you upload your logos and resize them. Sounds simple, and it is. Where LogoCrunch becomes more useful is when you need to make your logo look good in small sizes for the likes of your favicon or as an app icon.
You can use the various sliders to modify the complexity of your logo, thicken or thin the lines in your logo, adjust the holes in the logo and so much more. You can modify any of these simple settings visually for a range of sizes from 256px to 16px and a selection of sizes in between.
The next time you need to simplify a logo for a client, give LogoCrunch a try. I think you’ll find it more useful than you may first believe.
Conclusion
And there we go, 12 amazingly useful online tools that you can use on your next project. From image manipulation and simplification to design inspiration, font scaling and more.