Handy Web Design Resources For The Non-Designer

In: Online Marketing

Buffer this pageTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone

Web Design Resources for Non-Designers
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

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?

header image courtesy: http://www.flickr.com/photos/songallery/4592139716/

 

Buffer this pageTweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInEmail this to someone
Weekly WordPress Tips To Your Inbox
+ Get 50% Off The Beginner's Guide to SEO Ebook!

Lucy Beer - WebTrainingWheels WordPress TrainingDo you need a personal WordPress teacher to help you learn what you need to know without wasting time? I provide customized WordPress tutoring in-person or remotely via phone/screensharing.


2 Responses to Handy Web Design Resources For The Non-Designer

Avatar

Julie

February 2nd, 2012 at 11:16 am

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!)

Avatar

LucyBeer

February 3rd, 2012 at 10:13 am

Lol! Glad to be of use!!!

Comment Form

Weekly WordPress Tips

+ Get 50% Off The Beginner's Guide To SEO Ebook!

How I Can Help You

Hi! I'm Lucy Beer. I know that WordPress is liberating when you know how to use it, and bewildering when you don’t. I help individuals and businesses learn WordPress for their specific needs. I will accelerate your knowledge and cut your learning curve in half (at least!). Generic tutorials and videos only go so far - when you need specialized knowledge, or a real person to answer your questions, that's where I come in. I help non-techies understand and use the web to empower their personal or business mission.

Learn How To Get Targeted Traffic To Your Site >> $20

Socialize

Services I Use & Recommend

Siteground Hosting
Sucuri
WP Engine
Gravity Forms