Handy Web Design Resources For The Non-Designer
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.
Browser Add-Ons for Color Palettes
The Firefox add on Rainbow Colors lets you analyze a website and extract a color palette right from your browser, from any website. It’s slightly buggy to use, but overall does a nice job.
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
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?
header image courtesy: http://www.flickr.com/photos/songallery/4592139716/
Wow Lucy. You read my mind! Just starting to do a landing page for new site and was struggling with both font (love the google font option!) and what should be in a super simple landing page. Thank you!
(PS the Larchmont Buzz is growing daily!)
Lol! Glad to be of use!!!