85+ Free Killer Resources Every Designer Should Know

What makes a web-designer a great web-designer?
Guts and information – and bit of talent.

All designers have to defeat the same monsters.

• Inspiration blocks;
• Lack of material, like and unvectorized logo;
• Poor quality images or their non-existence;
• Low or no budget;
• Unhelpful clients;

May I continue?

Well the good news is that you just need courage to persist and the light of information to scare those monsters away.

You got the courage. I got the Info.

Here I’ll give the info that could take you ages to find by yourself or another designer to tell (maybe because of lack of time or selfishness). I tried to cover most of the aspects that will help you in your journey, in a total of 15 aspects. Let’s start with some healthy tips for images.

Images

It is 3 AM; you are pretty tired, your stomach can’t bear another dose of caffeine and you still need that Pretty Business type picture to use in your project, but you don’t have the budget to afford a stock image from gettyimage. Been there? Well, don’t panic. You can get it in HI-RES for free from some great sites – plenty of royalty photos to share, that you can use on your personal and commercial projects, depending on the type of license.

Now you will spend until 4AM trying to decide which photo to use.

• www.sxc.hu

This is my site of choice, I’ve been using it using for years, god pretty usable navigation; lots of great quality photos, many ways to sort them.

More great sites :

• www.morguefile.com
• www.imageafter.com
• www.dreamstime.com

• flickr.com/creativecommons/

The biggest photo community site where you can also find perfect pictures for your work. You just have to check if the license is suitable to your project.

• commons.wikimedia.org

Wikimedia imagesearch in 64 categories. Also under the Creative Commons license.

Metasearch (search through several free stock photo sites): pretty useful, but you will needs registering.

• picfindr.com
  

At first look this site doesn’t seem that attractive, but once you try your first
search you’ll find a neatly done flash interface with photo previews, sorted by
origin.

• yotophoto.com

The interface is better looking than picfindr’s, but lacks the convenience of a flash interface.

• vecteezy.com

HUGE index of free vector files from the best designers in the world.

• brusheezy.com

From the same guys of vecteezy. Index with daily updates of photoshop brushes.

Pixel patterns

Pixel patterns are in fashion (yes, again), but wait! Not as in annoying animated gif that clutter your page background. They have come back in the form of pixel rich textures varying from clean to Victorian flowers.

• kollermedia.at
• squidfingers.com
• k10k.net

Logotypes

You’re working on project and suddenly your client tells you that you have to add several partner logos and all that you’ve got is a Business card to take the logo from.

Frustrating uh?

Well, at least until this 2 little babies came into my life. These 2 sites host vector based company logos from all around the world. So no more unexpected and unpayed hours of logo vectorization. All you need is a bit luck and the logo you need will be in their database.

• brandsoftheworld.com

I can’t say how many times this site has saved my neck with its vector logos. God save this site.

• logotypes.ru

Fonts

Now you weren’t that lucky to find that logo on www.brandsoftheworld.com and you still need it in vectors, but you can’t recognize which font it is using. (Or you are simply wondering what fonts certain corporation or ad campaign has…)

• myfonts.com

If the logo is not using avantgarde or arial, you’ve got 2 options. Use your skills as Fontographer guru or use the whathefont tool from myfonts.com: it works great! You input the URL from the desired logo or upload the scanned image. Using OCR (optical character recognition), it gives you the font the logo is using or, if not, you’ve got several similar options. This’ going to save you hours of search or the worse, having to vectorize the font… (it gives me the creeps!)

• fontshop.com

Wanting to do a web2.0 style logo, but not sure where to start? Not even sure what makes a logo look like web 2.0? Let this article guide you through some of the current style in logos, the fonts they use and the way they sort the logos by appearance.

More about what fonts famous sites logos.

• modernlifeisrubbish.co.uk

Compare fonts on screen.

• typetester.maratz.com

Now you are going to need some fonts for that logo. You can find a wide range of hi-quality free fonts on these sites. You can even find clones of commercial logos for free!

• dafont.com
• typenow.net
• smashingmagazine.com

Icons

Icons are the way to spice things up on a design. Fortunately there are lots of very talented designers that are willing to share with us their tiny masterpieces.

• iconbase.com

My personal favourite repository of free icons.

• iconfinder.net

Finally someone got the idea. It was hard to look up icon by icon to see which set had the icon I needed.

• famfamfam.com

These little icons (especially the silk one) are almost the standard for many blogs and websites; you will amazed at how many mini icons the set has. For almost every web software.

• ndesign-studio.com

Another valuable set of mini icons.

More icon resources:

• sweetie.sublink.ca
• converticon.com
• iconfactory.com
• tango.freedesktop.org
• maxpower.ca
• websiteicons.net

Color

One of the big secrets that makes a design look great is its color scheme. You could do a great layout but if it lacks contracts and balance, it’s condemned to oblivion.

• iosart.com

I’ll present this little marvel first. Colozilla is a Firefox extension that allows you to pick colors from your browser. Saving you the hassle of taking screenshots and pick the color in photoshop.

• kuler.adobe.com

Several premade color schemes. And superb color wheel tool. You won’t believe how inspirational and useful this could be. And how this will be a excellent opportunity to try your newly added colorzilla tool

• colorschemes.org

Canonical (Huge) List of Online Color Resources for Designers

• wellstyled.com
• gmazzocato.altervista.org
• colorblender.com

Educational Material

All you need is a little discipline and patience, and you can surely achieve great results in no time. There are loads of stuff for you to learn, I am just presenting the tip of the iceberg.

• webdesignfromscratch.com
  

More than a tutorial, this’ a DIY (Do It Yourself) Guide to WEB 2.0 Style. It’s constantly updated. I personally love this site. The guide tells you step by step what makes a design looks web 2.0 and how to achieve it.

• w3schools.com

This is a must for any web-designer developer. Tons, I mean, TONS of free on-line courses offered in an intuitive way.

More Education Resources.

• developer.yahoo.com
• good-tutorials.com
• totaltutorial.com
• kirupa.com
• cameronolthuis.com
• tutorialized.com
• dailyblogtips.com
• stud.cmd.hro.nl
• webpagesthatsuck.com

Inspiration

Don’t Panic! Inspiration is not only for Davinich’s or Michelangelo’s. You just need the muses to visit you. And here are some pretty gorgeous ones. Remember, you don’t need to reinvent the wheel every time you start a design. Just the right source of inspiration study of what makes it look, good implementation and viola: a lovely design.

• fuzzyfuture.com

50+5 source for inspiration smashed into one post.

• logopond.com

Identity inspiration.

• smashingmagazine.com

These are going to make your life easier indeed. They save you a lot work by smashing humongous amounts of info. In this case, inspiration material.

More inspiration:

• flickr.com
• cssbeauty.com
• cssinsert.com
• webcreme.com
• webdesigngalleries.wordpress.com
• dynamicdrive.com
• styleboost.com

Tools

• karmatics.com

This Firefox extension is a must. It shows you how the webpage is created block by block. It shows the source code of the element from page.

• lipsum.com

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Have you ever seen this dummy text? Sure you have. It comes in handy when you have to “simulate” text because it give you a more natural feeling than the “text text text text”or “Link 1 Link 2 Link 3”.

• activecollab.com

A Basecamp clone, but opensourse. Project management tools to deal with your client, files, milestones, etc.

• tester.jonasjohn.de

CSS and HTML validators, SEO tools, Social services, Web proxies, Network tools, Text tools, Image tools in one site.

• lab.rails2u.com/bgmaker/

Online background image generator.

• cssdev.com

Tweak your CSS. Backgrounds,Borders, Lists Fonts to make it shine.

• miniajax.com

More than 50 ajax and dhmtl downloadable scripts.

• Browsershots.org

Don’t suffer bad surprises again. Like, “dude that layout is totally scrambled in IE 6!”. Been there? With this online tool you will get a screenshoot of several browsers in less than 30 minutes.

Blogs and forums

Design Blogs and forums are fantastic (as this one intends to become)! They give inspiration, freebies, how to’s, tutorials and, the best of all, the opportunity to meet other designers and be part of the community.

• deviantart.com

To know it is to love it. In my opinion, the best and the biggest design community out there.

• sitepoint.com/

Valuable design forum with many helpful people willing to share their knowledge.

• bittbox.com

One of my favorite design blogs. Constantly updated, useful articles, many design freebies and what’s more important the site that inspired my to finally launch this site. Thank you.

More Sites:

• ndesign-studio.com
• smashingmagazine.com
• earsonified.com
• designerstalk.com/forums

CSS

Don’t feel guilty if you still use tabled designs. CSS are here to stay and it’s no more an option. I know it’s pretty scary when you’ve been all your life using tables to jump to CSS – it’s a whole parallel universe. And all those compatibility problems and WYSWG. But fear no more, there are step by step’s and resources. You will be doing your CSS designs quicker that setting a row span.

• smashingmagazine.com/category/css

This is the category from the CSS Smashing Magazine (yes, listed again on this post); probably the biggest selection on CSS material on the web.

• oswd.org

No time to design yourself? Give it a try this site more 2000 Free CSS design.

Would you prefer CSS sand boxes better? Those sites offer ready made Blank CSS layouts for you to download and fill with your designs.

• blog.html.it/layoutgala
• blankcss.com
• layouts.ironmyers.com

• highdots.com/css-tab-designer

This is a free software to create more than 60 Tab navegation menus in CSS.

More CSS Resorses

• quazen.com/Computers/Programming/How-To-Create-a-Tableless-Layout-with-Dropdown-Menus.24213/1
• developer.yahoo.com/yui/grids/
• cssfly.net

Money

Business going slow? Or maybe you think you deserve more for your work. Well, Freelancing is a great option. You just need to go to the right places to offer you job.

Before you start, some tips and tricks for pricing a project.

• sitepoint.com/article/web-work-should-charge
• webdesign.about.com/cs/salaries/a/aa022403a
• blueflavor.com/blog/tips_tricks/pricing_a_project
• getcashboard.com

Now you can offer your work.

• sitepoint.com/marketplace

This is my personal favorite. It’s got many well-paid design contests in different categories from logos to complete website. And places to sell your website templates. Everything in clean and excellent design interface that really facilitates the process.

• forums.digitalpoint.com

My close second favorite. It lacks some interface functionalities Sitepoint has, but it’s also an excellent choice to offer your designs.

• book.airgid.com

Web Designer’s Success Guide Free Ebook is the definitive guide to starting your own freelance.

More sites to offer your work:

• NamePros.com
• Talkfreelance.com
• V7N .com
• elance.com
• guru.com

Productivity

Even if you consider meals as an interruption, considering to buy Shower Shock Caffeinated Soap you need to eat, take a shower, s l e e p!, make love with your girlfriend (or boyfriend) and stretch to be productive.

• webdesignfromscratch.com/ten-productivity-tips.cfm
• health24.com/dietnfood/DietDocs_articles/15-1871,27044.asp
• baptistonline.org/health/healthieryou/health/ergonomics.asp