I consider myself creatively impaired when it comes to visual design. I know generally what I like and what I think works, but I’m not good at actually creating it from scratch. I leave that type of stuff to the pros and absolutely think that just because you can use Photoshop, or make a website, that does NOT qualify you as a designer!
But once in a while, I need to sort of cheat and pull off some design-y type things and I have found several online tools that help me do this in a competent way. Plus, most of these tools are just super-fun to play with!
Web-based Color Palette Tools
Need to pick a font color for a website that will match the overall look and feel? Or maybe you need to introduce an additional color that will match. These handy tools will let you upload a logo or any image and generate a color palette of complementary colors.
Color Palette Generator
This is very simple to use – just paste in the url of a logo or image and it will generate some colors.
Adobe’s “Kuler”
tool does a few more things. It has some preset color schemes which can be useful if you’re starting from scratch, or you can create your own based on a color you select, or an image. It also presents versions of the color schemes based on mood or other criteria.
For Chrome you have a couple of good options.
The Palette for Chrome extension creates a color palette based on an image on a website. As you’re browsing, you just right-click (CTRL+Click on a Mac) an image and select Palette For Chrome, and it will whip up a color palette in seconds.
The Colorzilla extension (by the makers of the useful CSS Gradient Generator ) does a few different things, but the feature I like the most is the ability, much like Rainbow Colors, to generate the color palette from any website you are browsing, without having to identify a specific image.
Fonts and Typography
In addition to being creatively impaired, I’m also a bit of a design snob. This is a really unfortunate combination! I want to come up with really elegant and cool font combinations (because of course I look down upon poor typography as if I were a pro) but it’s really hard for me to do that when left to my own devices. But once again, there are some really nice tools available that can help the common-a-garden snob such as myself.
Ever see a nice font and want to know what it is? What The Font lets you identify a font based on an image that you upload. Or if you see it on a website, you can just paste in the exact url for the image.
My personal holy grail and what lead to this list of resources was a search for a free online tool into which you could select a font and it would suggest complementary fonts that would look good with it. I was not able to find exactly this, so if someone out there knows of its existence, please leave a comment!
All the tools I’ve listed in this post are free, but if you are really into fonts, you should look into Type DNA which is a paid application.It not only helps manage the fonts on your computer but will actually help you choose fonts and find complementary fonts.
In my hunting I did find several articles showcasing various examples of font combinations that work really well. So you can use these as inspiration and examples:
40 Best Typeface Combinations in Web Design
10 Great Google Font Combinations You Can Copy
Top 19 Font Combinations
40 Font Pairings
25 Examples of Beautiful Typeface Combinations
Font Combinator is a really cool way to test out how different fonts from the Google Fonts directory will look together.
TypeTester.org – this is similar to Font Combinator, although it gives you 3 columns of text side by side to play with. Type Tester has a broader range of fonts than Font Combinator and you can also play with things like word spacing, alignment, and both font and background color.
Esperfonto is the closest I could find to the holy grail I was looking for – a tool that would suggest font pairings. It works pretty well but seemed a tad limited. It’s connected with the MyFonts.com directory of fonts, but when I tried typing in something like Museo, which you can find on MyFonts, Esperfonto couldn’t find it. But it will let you specify certain characteristics you are looking for (e.g. Modern, Traditional, Cool etc) and then make suggestions based on that.
How To Make a Landing Page
Ever need to put together a one-pager for a specific product or project? It always seems like it should be simple, but there’s an art to creating a good landing page. Let these smart people guide you:
Formstack’s ‘Anatomy of a Perfect Landing Page’
50 Effective Landing Page Templates
Examples of Effective Landing Pages
Call To Action Graphics
Another apparently simple task which is tricky to do well for the non-designer, is making buttons or graphics for things like “calls to action” – you know the kind – Click Here, Download This, Subscribe Now etc.
Hongkiat.com has a really great resource that includes many free PSD templates that you can easily customize to make your own buttons.
In WordPress, there is a really handy button maker plugin called: Max Buttons which generates pure CSS buttons for your site.
You can also create CSS buttons using this awesome tool from CSS-Tricks.com
And for a general resource for all things free and design-related, keep your eye on this freebies page from SmashingMagazine – they offer all kinds of free resources for icons, fonts, images, etc.
What resources have you found that should be on this list? Or what are you currently looking for that should be included here?
Similar Posts
Intro To Podcasting With WordPress
This a guest post by my friend and multimedia WordPress wizard, Jason Tucker. He streams live and archives the OC WordPress meetup group, and has recently launched a new Google Hangout and podcast show called WP Watercooler which you can…
I Don’t Want To Blog – Is There Still Hope?!
I find that many people have heard that they ‘should’ have a blog, but worry that they are just not the blogging type, or don’t think they will have anything to say. Is there still hope without a blog? I…
Troubleshooting WordPress Issues
Learn how to handle unexpected WordPress problems, find the source and get your site back online.
When something goes wrong on your WordPress site, how do you react? Do you freak out, or have a mini panic attack? Don’t worry, that’s a fairly typical reaction from the normal WordPress user 😉 With this post I’d like to change the way you look at and react to WordPress problems 🙂
With WordPress, as with many things in life, we learn a lot when things aren’t going smoothly; learning to deal with technical problems pushes us out of our comfort zone and forces us to develop new skills and a deeper understanding.
Much of what I’ve learned in WordPress over the years has happened through things going wrong and me having to figure out how to fix it. Every time you face a problem and learn how to deal with it, your confidence is boosted and your problem-solving toolkit, and resilience, expands. The next time an issue crops up you are better equipped to handle it and you feel less panic.