100 Fantastic Resources For Web Designers

title4
Share!

Today Andy and I decided to produce a top list of our favorite 100 resources  for web designers that we have used and enjoyed over the past few months. These resources include icons (my personal favorite), WordPress Themes, Plugins, Software, Applications and some really cool tutorials made by us and other great websites. Let us know which ones you use and what other resources you think should be added to the list! Enjoy!

Icons

Adobe Work Folders

The adobe product collection in the form of folder icons.

Adobe Work Folders

City Icons

An awesome variety of different icons in this set.

City Icons Resources For Web Designers

Simplexity File Icons

A great set of 120 different file extension icons both in png and ico format.

 Simplexity File Icons

Web Applications

A funky set of web application icons.

Web Applications

Social Networking Icons

Some great sets listed here! High quality social networking and app icons.

Social Networking Icons

Vector Icons

A top botch set of vector icons, including the classic magnifying glass and email icon.

Vector Icons

Vista Icons

A great collection of free vista icons.

Vista Icons

Onibari

A set of leopard made folders.

Onibari

Ultimate RSS Icon Collection

The biggest set of RSS icons.

Ultimate RSS Icon Collection

Function App Icons

A quality icon collection of various different objects. Made by the famous function.

Function App Icons

Simply Bold Vector Set

A premium vector set, but well worth the money. Made by Nick La.

Simply Bold Vector Set Resources For Web Designers

Tweet Me Up

Vector twitter pack with various twitter icons.

Tweet Me Up

Circular Social Media Icons

Circular social media icon pack with many different social networks.

Circular Social Media Icons

6 Twitter Icons

A set of very sweet twitter icons, free to download.

6 Twitter Icons

40 Free GUI Icons

A collection of 40 great icon sets exclusive for web designers.

40 Free GUI Icons

eCommerce Icon Collection

A collection of eCommerce icons to use with a shopping cart.

eCommerce Icon Collection

30 High Quality eCommerce Icon Sets

Here is a compilation of 30 high quality eCommerce icon sets.

30 High Quality eCommerce Icon Sets Resources For Web Designers

* * * * *

Tutorials

Create An Orange Web Layout

One of our best tutorials on WebdesignDev. You cant miss.

Create An Orange Web Layout

How To Create a Green Grunge Web Layout

One of our recent very popular web design tutorials.

How To Create a Green Grunge Web Layout

Design a Beautiful Website

Learn how to create a beautiful website from scratch.

Design a Beautiful Website

Learn Professional Workflow

Vector Tuts teaches us how to use professional workflow for illustrating a comic-style header image.

Learn Professional Workflow

Create a Web 2.0 Business Layout

This is a clean and simple tutorial where you can create a jazzy business layout.

Create a Web 2.0 Business Layout

Create a Portfolio In 17 Steps

PSD Fan teaches us how to create a swish portfolio in 17 easy steps.

Create a Portfolio In 17 Steps Resources For Web Designers

Making a Clean Grunge Blog Design

Learn how to make this is a rough blog design.

Making a Clean Grunge Blog Design

Sleek Web Design From Scratch

PSD Tuts teaches us how to create this extremely sleek and beautiful web design from the grounds up.

Sleek Web Design From Scratch

Create a Business PSD Layout In under 10 Minutes

This is a very clean but stunning business PSD layout tutorial.

Create a Business PSD Layout In under 10 Minutes

Clean Business Layout

Another amazing tutorial from Grafpedia. This time a clean business layout that’s very eyecatching.

Clean Business Layout

Create a WordPress Portfolio Layout

Grafpedia teaches us how to create a simple yet outstanding portfolio layout.

Create a WordPress Portfolio Layout

Create Apples Navigation Bar

The Apple navigation is extremely stunning. This tutorial from three styles teaches us how to create the apple navigation menu.

Create Apples Navigation Bar Resources For Web Designers

Web App Admin User Interface

Web Appers have wrote an amazing turoail on how to create a web app admin interface.

Web App Admin User Interface

Web Layout Using Textures

Learn how to create a web layout using various different textures in Photoshop.

Web Layout Using Textures

Design a WordPress Theme using Photoshop

Grafpedia teaches us how to create a professional looking WordPress theme using Adobe Photoshop.

Design a WordPress Theme using Photoshop Resources For Web Designers

Supercharge Your CSS with PHP Under the Hood

Cascading Style Sheets is a presentational style sheet language. In that sense, it does not have a lot of the functionality that many developers want to satisfy their programmer instincts.

Supercharge Your CSS with PHP Under the Hood

Creating a Usable Contact Form

The most obvious way to receive that feedback is through a contact form. UxBooth teaches us how to create a very usable contact form.

Creating a Usable Contact Form

* * * * *

Scripts

jQuery Scrollable

Here is an awesome script that allows you to add a scrollable function to your site using the jQuery framework.

Moving Boxes

Moving boxes is a very sleek jQuery slider script.

jQuery Scrollable

Image Switch

This script built on the jQuery framework allows you to switch images easily with different transition effects.

Image Switch

Lightbox 2

Lightbox 2 is a very easy to use image lightbox that can be added to more a less any website.

Lightbox 2

Fancybox

Fancybox is an image lightbox thats a bit more fancy and features a different design compared to other image lightboxes.

Fancybox Resources For Web Designers

Facebox

Facebox is a Facebook lightbox clone. You can display images, videos, text, basically any type of content within facebox.

Pure CSS Drop Down Menu

Here is a free drop down menu that runs completely in pure CSS.

Pure CSS Drop Down Menu

Animated Drop Down Menu With jQuery

This is a bit more of a complex drop down menu. It uses jQuery and has some sleek animation.

Animated Drop Down Menu With jQuery

* * * * *

Web Applications

Iconfinder

Use iconfinder to search through thousands of free icons and icon sets easily.

Iconfinder Resources For Web Designers

Mint

Mint is the best free way to manage your finances online. It has a sleek interface, and is very nice to use.

Mint

What The Font

What the font is an amazing tool that helps you identify fonts from images or looking at each letter.

What The Font

Site Grinder 2

Although you have to pay for Site Grinder, it is an amazing piece of software that slices PSD files up into XHTML and CSS easily.

Adobe Kuler

Kuler is a web app built on Adobe Air. It is one of the best online colour apps out there, free to use aswell!

Adobe Kuler Resources For Web Designers

Dropbox

Dropbox is an easy way for anyone to share their files online. It basically puts a folder on your computer, where anything you put in that folder is available online, and across any other computer you sync your dropbox to.

Dropbox

Bit.ly

Bit.ly is the king of all url shortners. You can manage your clicks and see when people click you link all live!

Bit.ly

* * * * *

WordPress Plugins

Greet Box

This plugin lets you customize a custom message for people when they visit your blog to greet them.

Greet Box Resources For Web Designers

Flipping Book

This is a wordpress plugin that allows you to add a creative page flipping book to your blog.

Flipping Book

WordPress Super Cache

WP Super Cache is a plugin that saves you bandwidth and decreases the loading time of your blog.

50WordPress Super Cache

Sociable

Sociable is an easy way for people to submit your WordPress posts to different social networks.

Sociable

Pretty Link

Shrink, track and share any URL on the Internet from your WordPress website. Unlike other link shrinking services like tinyurl, budurl, and bit.ly, this plugin allows you to create shortlinks coming from your own domain!

Pretty Link

Slide Panel

If you’ve got a large client list and endless examples of previous work, then you might struggle to upload everything you want to your blog without it getting cluttered and confusing.

Slide Panel

Insights

Insights is a great tool for inserting images, videos, maps, Wikipedia Links and many more items into your WordPress posts.

Insights

* * * * *

Web Design Articles

Create a mobile version of your blog

Learn how to implement a mobile version of your blog in three simple steps.

Create a mobile version of your blog

Guide to About Me Pages

This is a really good guide to creating the perfect about page.

Guide to About Me Pages

40 Web Background Techniques

Forty Creative and Inspiring Website Backgrounds Techniques (quality post!).

creative joomla designs

9 WordPress Hacks to Encourage User Interactivity

Learn how to encourage user activity on your blog with these awesome WordPress hacks.

9 WordPress Hacks to Encourage User Interactivity

How to Blog Effectively

You could be blogging for a long time, but blogging effectively is what you need to be doing.

15 Resources for WordPress Designers

6 Ways To Improve Your Web Typography

Improve your web typography with this great article by Net Tuts.

6 Ways To Improve Your Web Typography

15 Resources for WordPress Designers

If your a WordPress theme designer, then this article is for you. 15 Exceptionally Useful Resources for WordPress Theme Designers.

15 Resources for WordPress Designers

HTML 5 Cheat Sheet

This cheat sheet is essentially a simple visual grid with a list of all HTML tags and of their related attributes supported by HTML versions 4.01 and/or 5.

HTML 5 Cheat Sheet

6 Vital Reasons to Comment on Other Blogs

Comments make a blog and are the life of it and its community. Provided here are 6 reasons why you should comment on other blogs.

6 Vital Reasons to Comment on Other Blogs

10 Productivity Tips for Web Designers and Developers

Productivity is something that all web designers and developers strive for. We all have too much work to do so anything that can help us along the way can make a big difference.

 10 Productivity Tips for Web Designers and Developers

* * * * *

Browser Plugins

CodeBurner

Codeburner is an extension for Firefox that allows you to see code from web pages, compatibility, and examples of it. Its a developers best friend.

CodeBurner

SEO for Firefox

SEO is a free plugin for Firefox is a toolbar that has search engine optimization information on it for whatever website you are viewing.

SEO for Firefox

Link Diagnosis

This tool can show you all the important information about your competitor’s links. The report includes PageRank, anchor texts, no-follow information and more.

Link Diagnosis

HTML Validator

HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.

HTML Validator

Rank Checker

This free firefox plugin allows you to easily check your search engine rankings for many different search engines.

Rank Checker

Smart Pagerank

Smart PageRank’s ‘Smart Toolbar’ is small, simple, and powerful. It gives you quick access to powerful SEO tools.

Smart Pagerank

* * * * *

PSD’s

Vibrant Paints

A beautiful free downloadable PSD template.

Summer of Love

Summer of love features a nice design, and can be edited and sliced up into a website that fits to your spec.

Funky Design

Big links, nice graphics, and bets of all free!

Hello – Online Portfolio

This is one of the best free psd templates I have seen. Its a must see!

Hello - Online Portfolio

GrungeFolio 2

If you like splatter, and grunge objects within a website, then you must download this psd website template.

En Construccion

A writers desk style free downloadable psd theme.

Sunsite Book Layout

Sunsite Book Layout

If your a book lover, please download this free book layout psd for a top notch design.

My Personal Blog

This is a personal styled psd blog template all ready to be sliced up.

Green Leaves

If your a nature lover, or even love some of the effects within this psd template, you have to download it.

Green Leaves

Shape + 5 PSD Themes

Smashing Magazine has provided us with 6 free beautiful psd templates.

Shape + 5 PSD Themes

Old Burned Paper

An old burned paper style PSD template to adapt into a web design.

Old Burned Paper

Toxic Green

A nice psd template that has a toxic green twist.

Ruby Red

Ruby red is a free psd design to slice up and code into a web design.

Grey Blue Template

A beautiful blue / grey themes psd design for free download.

* * * * *

Software

Coffee Cup HTML Editor

This is a great HTML editor from Coffee Cup software. Easy to use and free to download.

Coffee Cup HTML Editor

Coffee Cup FTP

If you want a free file transfer protocol to connect to your server and upload files, look no further than Coffee Cup FTP.

Coffee Cup FTP

Tweet Deck

Tweet Deck is a great free piece of software that runs on Adobe Air and is used to manage multiple twitter accounts.

62Tweet Deck

Color Schemer

Color Schemer is avaliable for Mac, Linux and Windows. Although it costs, its one of the best color applications on the market today.

Color Schemer

* * * * *

WordPress Themes

Evidens

This is a free 3 column full width WordPredd theme.

Evidens

Yoghourt

Version 2 of the Yoghourt WordPress theme is really good, and features many new things. Plus its free to download.

Yoghourt

Curved

Curved has an unusual look to it. It has many features and is free to download.

Curved

Thoughtlog

This is a three column WordPress theme, which features a Spring-themed header in shades of purple and beige.

24Thoughtlog

WP Premier Theme

The free wp premier theme which is developed by CSSace has many awesome features. Its worth downloading!

WP Premier Theme

Live Green

Livegreen is a great free WordPress theme, and comes widget ready and coded in valid XHTML and CSS.

Live Green

About the Author

Iggy Ko

Facebook Twitter Google+

I am the owner and main person behind WebDesignDev. I blog about all kinds of web design topics.

Iggy Ko100 Fantastic Resources For Web Designers
Ask a web design question.

Comments 57

  1. Robbert

    Thanks, great list. Must have taken some to gather all of these! Anyway I see several articles mentioned that were already in multiple other collections. But thumbs up, it certainly comes in handy to have all of these in once place. Well done!

  2. Carson Shold

    Wow, fantastic gathering. I was thinking of doing a similar post, but it looks like you have covered almost everything I could think of!

    Great work,

    Cheers

  3. Luke Lux

    Thanks to share it! It’s awesome.

  4. meeshelle

    Very extensive list! Might I suggest an awesome AIR app called Livebrush – http://www.livebrush.com . It’s a tool for designers that allows you to draw your own custom decorations and graphics quickly and easily. This way you don’t have to rely on templates, and you can create something awesome AND custom. I’m an illustrator and I love using Livebrush for creating background graphics for my website designs.

  5. Pavel Souemo

    Great listing.. gives the basic items required to start web deisigning. Thanks again

    great work.

  6. Sneh Roy

    Woweeee! This is one kickass resource list! Thanks for adding my “Tweet Me Up Scotty” Twitter icons!

  7. smedevelopers.com

    i love it…. it is really a good collection of resources for website designers….

    Thanks

  8. Wiltabone

    A very nice list. Well compiled. Thanks. This might be very useful.

  9. Martin Leblanc

    Thank you for putting Iconfinder in the list.

  10. halla

    it is very very good to share your work and effort with others. i hope that computer companies make courses or even the windows help pragragraphs in arabic. if we know it in our language it will be easier and the computer companies will buy more products. thank you again

  11. webmasterdubai

    what a post really really informative post ever seen ever thing is under one post.

  12. Somu

    Nice Collections of all in one. Thanks,

  13. doTemplate

    Great article ! Very useful.

  14. Noel Wiggins

    I particularly like the html cheats,
    can’t wait to try that one out…

    Meanwhile, I am looking for a solid “free” browser viewer.
    A piece of online software where you submit a test link and it shows you the design in all browsers in all platforms…

    I used one in the past but can’t find it again.

    Even a stand alone app would work too as long as its a mac

    any thoughts?

    Thanks & Regards
    Noel from nopun.com
    a professional graphic design studio

    1. Andy

      Try browsershots.org :)

  15. Three Styles - Shane Jeffers

    What a great list! Thanks for including Three Styles in your article! Much love!

  16. Shari

    By the way, this page is a mess in Chrome 3.0.195. The text portion of the post does not wrap under the image, making pairing the linked picture with the descriptive text impossible (and therefore useless). Looks fine in IE8.

  17. RK1 Web Designs

    This is an excellent resource list. Thanks and well done :D

  18. ben lang

    thanks so much for this list. its great!

  19. Susan

    A valuable list of resources here. I would like to another wordpress gallery that is great for finding free themes: New WordPress Themes

  20. Kirsty

    one happy little fledgling geek here – ta v. much x

  21. Espreson

    Thanks for adding some new resource…

  22. marbio

    A great collection! Thanks

  23. nikunj

    Internet could use more people like you Thanks for all sharing done by you

  24. Nikunjt

    Thanks for so good information i would use the same on my website

  25. Andy

    Oops, mended it. Thanks!

  26. sterndal

    wow

    i’m so happy that i registered with mister-wong.de

    i had a hard time filling up the forms because i can’t speak german

    but i am glad i did

    cuz i found your site there!

    it’s very helpful especially for a beginner blogger like me :)

    thanks!

  27. Xtence

    what a great list man, thanks for sharing !

  28. angela

    Wow – this has everything. Thanks.

  29. designer

    its really kool dud

  30. John

    Awesome list !

  31. HullDO

    An amazing collection. Good job on putting this together.

  32. Egypt Website design company

    wow , thanks so much
    A great collection !!!!!!!!!!!!!!!!

  33. Rata

    Thank you for this *very* extensive collection, awesome.
    ;)

    Kind regards
    Rata

  34. R. Shawn Williams

    Looks like a lot of time went into this! Wonderful result!

  35. web

    This is a wonderful compilation for web developers

  36. Sam Logan

    Thanks for the great resources, one of the most useful articles I have read this year!

  37. Daniel Dumas

    Hello Thanks for this great list! very very useful for me.. and other web developers and designers..

  38. Criação de Sites

    Parabéns pelos posts, estamos sempre antenados aqui no Brasil, temos como uma de nossas referências o teu site. Obrigado e tudo de bom!!

  39. Matt

    This is a great list, some excellent templates and some of those sites I’ve been looking for for ages but just couldn’t remember what they were called and couldn’t find them. Thanks for putting this together!

    Something else that may be relevant is the excellent reference section on the Sitepoint website at http://reference.sitepoint.com/

  40. Jorge

    Great as usual… Thank you very much Michael ¡¡¡

  41. Mark

    Fantastic collection you’ve put together there.

    I’m going to put an afternoon to one side to go through them all.

  42. Thomas

    Thanks, your list is great…

  43. Pingback: iPad web design | WebDesignExpert.Me

  44. Pingback: Cientos de recursos gratis Photoshop para celebrar su 20 Aniversario | Potencia Tu Economia

  45. Reinaldo Silva

    Congratulations, this is a very very useful stuff.

  46. Bryan

    Love the resources. Well delivered and from what I’ve been able to tell—worth checking into. Although, I still haven’t managed to finish the entire list… Thank You!

  47. irma

    GREAT LIST. I learned some new sites to check out. I AM SURPRISED THAT the envato marketplace was not on the list.

  48. Armine

    Thanks, for a great collection!!!

  49. angelene

    very useful :)

  50. Court

    best post EVER!

  51. Brett Widmann

    Great post. Very helpful resources! Thanks.

  52. Manuela

    Wow, there’s no much time to read it all! Great work!

  53. Edwin De la cruz

    hay de todo, muy buenos recursos!

  54. Legume

    Great work!
    Link Diagnosis is great toll…thanks for sharing

  55. IgniteWebsites

    Great list of resources. Just tried ColorSchemer. Thanks for the valuable info.

Leave a Reply

Your email address will not be published. Required fields are marked *