Menu Search
Jump to the content X X
SmashingConf London Avatar

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf London, dedicated to all things web performance.

Educational Resources For Web Designers

Web design community is strong and hard-working. We have plenty of useful resources, tools and services created, developed and released every single day: apart from goodies such as free fonts or icons, there are also many educational resources and little time-savers that can significantly improve designer’s workflow. We permanently look out for the new projects and support them by presenting them on Twitter1, Facebook2, in our e-mail newsletter3 and, evidently, in Smashing Magazine’s posts.

Today we are glad to present one of such posts: an overview of handy new resources for web designers; most of them were released recently, but some of them are a bit older. Still, they were included to supplement the overview, making the post more comprehensive and complete. Please feel free to discuss the featured resources in the comments to this post. And, of course, thank you guys for creating and maintaining all these useful resources. Your efforts are deeply appreciated.

Further Reading on SmashingMag: Link

Fonts in Use8
This site presents a catalogue for real-world typography samples and innovations in branding, advertising, signage and publishing. The regularly updated collection of trends and case studies is commented on by typography experts and gurus from around the world. The sharp, interesting comments and discussions will keep you engaged, all backed up by real examples.


Note and Point: Keynote and PowerPoint Gallery10
Note and Point highlights the most beautiful Keynote, PDF and PowerPoint work on the Web, which happens to be mostly Web design-related, although various topics are covered. No doubt these presentations — which really do look that much better — might surprise you by the attention given to color, illustrations and typography.


Free High-Quality HTML Email Templates12
The page presents 38 free HTML email templates (including PSD and HTML files), created by talented professional designers. Every template has been tested in more that 20 popular email clients, including Outlook 2010, Gmail, Lotus Notes, Apple Mail and the iPhone. All of the Photoshop documents are layered and ready to be tweaked. You can download all of the templates for free (320 MB) and use them for any private or commercial project. In case you use Campaign Monitor to send out newsletters, you’ll also get Campaign Monitor’s templates as an extra goodie. Mailchimp users can choose from the professional templates for Mailchimp13.

HTML Email Newsletter14

The Grammar Cheat Sheet15
Never mix up your dashes again, learn how to set quotations marks and remind yourself to keep paragraphs short and topical. Overall, this article is a nice little overview of suggestions that would help you improve the quailty of your copy. For a closer examination of what else might go wrong, check out “The Trouble With EM ‘n EN (and Other Shady Characters)16” by Peter K Sheerin.

The Grammar cheat sheet17

FPO: For Print Only18
For Print Only is a blog that is dedicated to everything related to print design. FPO celebrates that print is not dead by showcasing the most compelling printed projects. Print is alive and well as witnessed by this well organized and inspirational resource.

FPO: For Print Only19

Graphic Atlas: History of Printing20
The site is a virtual study collection that showcases printing processes from early woodcuts to modern digital print. The print-identification tool guides you through a number of explorations that replicate the experience of identifying prints using common tools. Among other things, you’ll learn about such printing techniques as relief, letterpress, gravure, silver-dye bleach, dye sublimation and direct thermal. The object explorer allows you to view two images side by side to compare traits across processes. Characteristics such as size, format, color, texture, sheen and layer structure are explained as well.


Smarthistory is a free and open, not-for-profit art history textbook. The website covers a wide variety of the artwork usually found in art history classes, ranging from ancient cultures to post-colonialism. In addition to the audio and video, Smarthistory contains articles and images organized by style and chronology. As a bonus, the user interface itself is worth looking at. The appealing design and intuitive navigation (which allows you to browse by era, style, artist and theme) makes this experience not only educational but enjoyable. A comprehensive overview of the seeds that helped sew the graphic design field.


The Photoshop Etiquette Manifesto for Web Designers22
This site lays out a number of guidelines for creating Photoshop files and workflows that are conducive to productivity and team collaboration. By following these guidelines, you make it easier for others to work with your files, and more likely that your project will go smoothly. Some of the things included are common-sense (proofread before exporting), but others aren’t necessarily something you’d think of if you’re not used to collaborating or working on big projects (use folders, keep logos as vector smart objects). It also includes helpful illustrations for each example, so there’s no confusion.


Desks Near Me24
This site features places all over the world that designers and developers might like to work in, be they offices or cafés. The website provides detailed information, including hours of operation and reviews. Some places charge a small fee for use, and many throw in a few goodies like food, drink and access to equipment.


Dark Design Patterns26
Dark Design Patterns aims to expose these black-hat designs whose sole aim is to misdirect and deceive visitors. Anti-usability design patterns that are currently identified on the website include the “Roach Motel,” “Bait and Switch,” “Privacy Zuckering” and “Forced Information Disclosure,” among others. Examples of each are included, and visitors can add their own in the comments on each page. It’s a great website to show clients when they ask you to implement a questionable “feature” on their website.


The Anatomy of a Perfect Landing Page28
Formstack explains how design translates to users and ten key landing page features that draw them in. A useful breakdown of elements to include in your designs and things to keep in mind during your design-work.

The Anatomy of a Perfect Landing Page29

100 Principles for Designing Logos and Building Brands30
Inspiration can come from anywhere, but sometimes the simpler the better. From Brand Identity Essentials, here are some principals for designing logos and building brands. These cover example shapes, consistency, voice, meaning and flexibility.

100 Principles for Designing Logos and Building Brands31

Design Is History32
A wonderful reference site for all designers and provides brief overviews of a wide range of topics — for us, designers, it is improtant to understand where design originates from.

Design Is History33

NounProject provides a huge collection of highly recognizable symbols, available for free download and use. The designers are committed to quality in what they do, and so the icons are indeed designed very well.


Ethics for Web Designers36
Robot Regime is dedicated to ethics and Web design, and it discusses what our ethical obligations are — to ourselves, our colleagues and our clients. The site already features some nice pieces, including posts about fair pricing, misrepresenting yourself as a designer and giving clients what they want.


The website brings together lectures, screencasts and conferences from around the world. Both expert and novice developers and designers should be able to find topics of interest, whether it’s CSS and HTML5 or start-ups and creativity. Ontwik is free, and anyone can suggest content for the website; you can even submit your own lectures.


Design Moo40
“Join together and share valuable free Web design resources.” This could be the slogan of this design community, created and curated by front-end developer Chris Wallace. The project is a network of designers and a high-quality collection of free design resources: fonts, icons, illustrations, patterns, textures and Web layouts. All goodies are tagged for easy navigation, and you can follow new releases on Twitter. You might want to check Boxtuffs41 and Premium Pixels42 as well, another websites featuring free high-quality resources.


Design Kindle: Free High-Quality Design Files44
This site offers a ton of free high-quality design files that you might actually want to use, all without restrictions on personal or commercial use. Everything from design elements to images to full themes is included. Design Kindle doesn’t have a big library of files just yet, but more are sure to be added soon.


365psd: A Free PSD Every Day46
Every day, this site offers a free PSD file for you to download. These files are almost all design elements that you can use in Web and application designs, including buttons, progress bars, navigation elements and more, and they are well designed. Currently, there are more than 300 days worth of freebies, all tagged, browsable and searchable.


Guidelines for Mobile Web App Design48
This article presents a comprehensive list of links to official user interface and user experience guidelines from various manufacturers. The guidelines include samples, tips and descriptions of common weaknesses for mobile platforms such as iPhone, iPad, Android, BlackBerry, Symbian, webOS and Mee Go. Many of the guidelines focus on native application development, but they can be applied to design of mobile applications in general, too.


Secure Password Generator50
The tool lets you enter parameters, including the length of the password, whether to include uppercase and/or lowercase letters or numbers or punctuation and whether to eliminate characters that resemble each other (such as i and l, 1 and I, and o and 0). Then, just select the number of passwords to generate, and it returns a list. It even includes phonetics for each password to make it easier to read out loud (in case you’re giving a password to someone over the phone, for example).


This tool is a nice little application for finding shortcuts in Mac OS X, Photoshop and so on. Currently, more than 300 Photoshop shortcuts are available. Simply type the name of application in the search box, and it spits out a long shortcut list.


Let’s Swap52
A place where artists and designers can swap art for free. The site is an experiment: if you are an artist or designer, you probably have something hanging around and you’ll be willing to swap it for something else. The site gives you the opportunity to do exactly that; just put out an open invitation and see what happens. Very interesting idea.

Let's Swap53

Starting with Git: Cheat Sheet54
After freshening up her git skills, Loma Jane Mitchell shares her ‘cheat sheet’ — the commands that she uses on a day-to-day basis when working with git. Also note that GUI tools and IDE plugins are available for Git, so it is worth taking a look at what is available for the development environment you use.

Starting with Git: Cheat Sheet55

Rails 3 Cheat Sheets56
The site provides Rails 3 Cheat Sheets for Activemodel, Actionmailer and Actioncontroller, XSS protection and UJS, Activerelation, Bundler and Routing API.

Midday Latte57

Bounce Rate Demystified58
If you are doing business on the web and have Google Analytics set up for your website, it’s very likely that you know the bounce rate for your website. But, do you know anything about how it’s calculated, what your industry’s average bounce rate is or even what factors affect your bounce rate? Inspired by common questions, KissMetrics created this infographic to give you answers and some tips to help you improve your bounce rate.

Bounce Rate Demystified59

User Experience quotes and articles to inspire and connect the UX community.

Defecting by Accident - A Flaw Common to Analytical People61

Quotes on Design62
A growing collection of useful quotes by designers for designers and developers.


Information Architecture Television features a collection of videos from around the Web that all focus on information architecture. Hundreds of videos dating back to 2008 offer a great wealth of information on everything from design thinking to usability.


The Bazaar66
On this site you can create galleries, upload your artworks and specify your products which you would like to sell. Once the buyer has checked out and has made the payment, your artwork is printed, wrapped and delivered.

The Bazaar is a marketplace to buy and sell creative objects.67

A Collection of Materials Related to Interaction Design68
This IxD library provides you with an ultimate collection of posts, articles, PDFs as well as videos related to interaction design for you to read and gain more knowledge and inspiration.

A collection of materials related to Interaction Design69

Pinterest — Catalog the Things You Love70
Pinterest is a social catalog service. Think of it as a virtual pinboard — a place where you can post collections of things you love, and “follow” collections created by people with great taste.

Pinterest / Home71

WordPress Snippets72
WP-Snippets can come in handy when you’re designing a WordPress theme. Rather than start from scratch when building some functionality or another, why not grab a snippet of code that has already been tested? The website includes many useful snippets, from highlighting author comments to listing random posts to filtering the loop. Make sure to read the comments for each snippet because they could contain helpful information on whether the code works in certain WordPress versions.


CSS Terms and Definitions74
This article discusses the consistency in the use of terms with reagrds to CSS.

CSS Terms and Definitions75

CSS Vocabulary76
“I realized quite late that to say something meaningful about CSS, I would have to know exactly what the terms used means. Often, I have asked for help in forums, and have got stuck wondering how exactly to describe my problem. So I thought it would be a good idea to describe all the common terms of CSS.” A nice overview of common CSS terms and definitions and a good addition to the article “CSS Terms and Definitions” described above..

CSS Vocabulary77

BagCheck lets you share your personal collections and also lets you browse through other ‘bags’ to find out common hobbies or activities that helps you connect with people and their interests.

Bagcheck | What are you using for your favorite activities?

ManyBooks: Repository of Free E-Books78
This site offers a huge collection of public domain e-books, as well as other newer books that have been released in the public domain or under Creative Commons licenses, in a variety of formats. You can download classics such as Pride and Prejudice79, as well as newer books such as The Gospel of the Knife80, in formats such as ePub, Mobi, PDB and even PDF and plain text. Books are also browsable by genre, author and title. And of course, there is a search function.


Last Click Link

Should I Work for Free?82
Who’s ready to stop working for free? Hopefully you are! If you have any doubts, consult this handy chart below. Start in the middle and work your way to your answer.

Should I Work for Free?83

Email Etiquette for the Super-Busy84
In a recent blog post, venture capitalist Fred Wilson talked about his ongoing struggle with email management and the various solutions he’s tried, concluding: “Every time I make a productivity gain, the volume eventually overwhelms me.” It’s a familiar problem. We’re all extremely busy, and we all get too much email. So what to do?

Email Etiquette for the Super-Busy85

The Future of Advertising86
An article on advertising; stating that advertising is on the cusp of its first creative revolution since the 1960s brings us to a new prespective. This involves the ad industry that just might get left behind. Click here to read and find out more. Very interesting read.

The Future of Advertising87

Why Your Form Buttons Should Never Say ‘Submit’88
When you see a ‘Submit’-button on a form, what comes to your mind? One could easily reason that clicking the button submits the user’s information into the system for processing. A ‘Submit’-button describes what the system does well, but it doesn’t describe what the user does at all. The article suggests to stop using the wording ‘Submit’ on buttons and provide more meaningful, task-specific names instead.

Why Your Form Buttons Should Never Say Submit89

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61
  62. 62
  63. 63
  64. 64
  65. 65
  66. 66
  67. 67
  68. 68
  69. 69
  70. 70
  71. 71
  72. 72
  73. 73
  74. 74
  75. 75
  76. 76
  77. 77
  78. 78
  79. 79
  80. 80
  81. 81
  82. 82
  83. 83
  84. 84
  85. 85
  86. 86
  87. 87
  88. 88
  89. 89

↑ Back to top Tweet itShare on Facebook

The Smashing team loves high-quality content and cares about the little details. Through our online articles, Smashing Books, eBooks as well as Smashing Conferences, we are committed to stimulating creativity and strengthening the web design community’s creative forces.

  1. 1

    Woow, nice bunch of stuff!

  2. 2

    …and this why I ♥ SM! Thanks for sharing. Really useful post.

  3. 3

    Thank you!

  4. 4

    Great article! I’m currently in a Design History class and I can’t tell you how resourceful was to follow things chronologically – the chapters are broken up into design movements, and many design movements occurred at the same time. Thanks!

  5. 5

    Excellent post –Bookmarked!

  6. 6

    Nicely presented and very useful

  7. 7

    Thanks Smashing for mention about Ontwik
    Be Curious, Be Dangerous & Geek!

  8. 8

    One time-saving application that helps you stay on top of managing projects and invoices is Project Bubble, a great resource for freelancers. They have a free for students plan too.

  9. 9

    awesome post! after a really long time.

  10. 10

    “help you improve the quailty of your copy.”

    You should have read it…

  11. 11

    ¡¡Gracias, gracias, gracias!! Amazing post.

  12. 12

    Thanks for adding Designmoo to the list! I do want to mention that our community manager is Rich Hemsley, a totally rad guy from Temecula, CA. I mainly design and develop all the rad features. :)

  13. 13

    I found the Dark Patterns to be pretty interesting

  14. 14

    If you’re in the Chicago area and looking for a co-working space, check out as well!

  15. 15

    This is awesome. I have about 15 new tabs ready to be read. =]

  16. 16

    Man, I love a good Web Design resource. Designmoo is amazing. Thankyou for bringing it to my life.

  17. 17

    Incredible list! Wow. I am especially loving The Photoshop Etiquette Manifesto. Really nicely done there.

  18. 18

    I’m in design heaven right now.

  19. 19

    Could someone tell me how you organize all these resources from Smashing Magazine. I’m following it on a daily basis but there is so much stuffs for remember. My bookmarks are full of links that becomes completely useless. Any ideas?

    • 20

      I was having the same problem. Have been using Evernote for now. Pretty awesome so far. You can save a page as a pdf or just a bookmark, or save just an image.

    • 21

      prince bazawule

      January 18, 2011 7:14 pm

      Another option is ‘Feedly’. I use it to organise my online reading and it’s pretty amazing. Explore it and see how it goes.

  20. 22

    Lukasz Waszczuk

    January 18, 2011 1:24 pm

    Great resources definitely bookmarking a few for future use. Thank you.

  21. 23

    This might be the best post on smashing magazine ever!

    Really useful stuff.

    Thank you!

  22. 24

    Beautiful as always. Thanks guys!

  23. 25

    Great article. Very helpful!

  24. 26

    Oxana Kostromina

    January 18, 2011 2:19 pm

    Wow! Thank you a lot for this article!

  25. 27

    Fantastic list and well written article. Thanks for sharing it!

  26. 28

    Some great stuff I’ve not seen before in this article.
    Bookmarked as a fantastic resource. Thanks

  27. 29

    Awesome article :)

  28. 30


    January 18, 2011 5:44 pm

    thanks a lot for sharing, I mean do a lot of great stuff! Smashing Magazine! very informative.

  29. 31

    Vincent Le Moign

    January 18, 2011 6:48 pm

    Oh no !
    Another excellent list of inspiring and useful websites.
    Now, I will have to procrastinate hours to browse all of it .
    Nice article, thanks :-)

  30. 32

    prince bazawule

    January 18, 2011 7:00 pm

    Another amazing resource list. will be bookmarking and exploring away.
    Thanks for sharing.

  31. 33

    I’ll take a pint of design any day! (@FPO)

  32. 34

    Great list! Thanks.

  33. 35

    Brayden Styles

    January 18, 2011 9:11 pm

    Great list of very very good resources ! Thanks!!

  34. 36

    Hi. Great list. I would add to it if you’re looking for Pricing Grids or Price Tables.

  35. 37

    nice list collection…. like the one on should i work for free , never new about FPO… insightful. thanks…

  36. 38

    WOW !! What a start of the year, amazing article. Hats off to Vitaly and the team.

    Thanks a lot !

  37. 39

    great list …great resources thks……

  38. 40

    Thanks guys!
    Useful. Very useful.

    The “should I work for free” is funny (but true)!

  39. 41

    What an article. I’ve got about 15 new tabs to go read now… Thanks! :D

  40. 42

    One of the best design resources I’ve ever seen at one place. Very useful!

  41. 43

    Thanks for this stuff! Awesome

  42. 44

    Fraser Mackenzie

    January 19, 2011 9:29 am

    Wow! Lots of useful links here. Thanks!

  43. 45

    This stuff is going to keep me from doing any real work for a looooong time….

  44. 46

    Ridiculously rich post. I will never get through all of this bounty!! Smashing rules.

  45. 47

    Totally enjoyed this post, helpful links :)

  46. 48

    Amazing list! I’m always glad to be turned on to some great resources. Did I mention I racked up nearly two hours of Note & Point surfing? Nothing beats presentations that are worthy of the human gaze.

    Thanks again for the great post!

  47. 50

    Feeling well Smashed !
    Thanks SM.

  48. 51

    Awesome stuff.

    Just for an info, there is a spelling error in the below line:

    FPO: For Print Only11
    For Print Only is a blog that is dedicated to everything related to pint design. (print design)

  49. 52

    Really useful! Thanks a bunch!!

  50. 53

    Tons of awesome useful things in this stuff!
    Thanks a lot!

  51. 54

    Nice one guys!
    Interesting, Useful, and Refreshing!

  52. 55

    Really useful, thanks!

  53. 56

    That’s a lot of useful information!! Thank you so much

  54. 57

    Michiel Ebberink

    January 20, 2011 9:21 am

    WOW! I’m speechless.

  55. 58

    Andy Feliciotti

    January 20, 2011 9:31 am

    Great list, thanks!

  56. 59

    John McDuffie

    January 20, 2011 2:10 pm

    This may very well be the best collection of resources to date. Thanks!

  57. 60

    Thank you SO MUCH for all those resources.
    Smashinmagazine is my safari homepage. I check it every morning from France, Bordeaux.
    This is a gold mine for every creative people working in design, webdesign….

    Good job guys really.

  58. 61

    Alessandro Guimarães

    January 21, 2011 2:58 am

    Excelente postagem! Obrigado por compartilhar esta informação!
    Estou divulgando o site Smashing Magazine aqui no Brasil!
    Parabéns a todos da equipe!

  59. 62

    Patrick Ortman

    January 21, 2011 10:34 am

    Wow, this article will keep me occupied for untold hours. Thanks. I think.

  60. 63

    Amazing collection of resources, thanks!!!

  61. 64

    Jeremy Bryant

    January 21, 2011 3:10 pm

    Wow what a great list. Thanks for taking the time to put it together. Delicious here I come.

  62. 65

    Just what I wanted!!! I’ve been looking for stuff like this for months!!!!

  63. 66

    By going through this article one can simply realize the amount of research done by SM Team, not a typical resourcing article with PSD links. This is a very helpful and informative article. I like it :-)

  64. 67

    What an amazing collection of resources, well done! I must say, Smashing Magazine continues to amaze me, day by day. Keep it up!

  65. 68

    Great stuff! I’ll share it with my internet marketing and SEO team.

  66. 69

    Enjoyed this alot. Bookmarked!!

  67. 70

    Thanks for nounproject – very useful.

  68. 71

    wow this is fantastic

  69. 72

    Nils Rasmusson

    January 24, 2011 11:39 am

    Fantastic collection of resources. I found bunches of sites/resources that were new and useful to me. Thank you! Keep these a comin’!

  70. 73

    Abdullah Bin Laique

    January 25, 2011 12:28 am

    amazing collection of resource….! I definitely using these stuff…. Thanks

  71. 74

    Very nice and useful resources…..thanks…

  72. 75

    Awesome collection of resources! I’ve definitely bookmarked this post and will be going back to it often. Great job SM!

  73. 76

    Great collection of resources here!


    “It is not what we sell, its what we stand for.” Webvanta- websites worth building

  74. 77

    shiver me timbers, what a great article! Lots of usefull info.
    thanxs for all the effort.

  75. 78

    WOW! One of the best Smashing articles ever. Really – thanks a million!

  76. 79

    Good collection of resources, thank you for sharing

  77. 80

    Only 3 words to say:

    Awesome!…… Thank You.

    Net Friend From:

  78. 81

    Amazing article. Awesome resources. I’ve bookmarked a bunch of them and will be sending on to other designers I know. Thanks for putting this amazing list together.

  79. 82

    i’m not even a designer (i’m a photographer), and i love these. thank you very much!

  80. 83

    Finally…Found the one I’ve been long waiting for. Thanks for the very useful links. Been saving it to my bookmarks already.

  81. 84

    Great list. The Design Grid is Also an amazing resource.


  82. 85

    Sunil Manandhar

    March 3, 2011 3:29 am

    Great list of resources.Thanks

  83. 86

    found this list really useful.

    would like to also recommend creattica

  84. 87

    The Grammar Cheat Sheet contains grammatical errors which were pointed out in comments to the author dated 2008. They haven’t been corrected. More recent comments include a lot of spam, so I think this article may have been orphaned. I certainly wouldn’t recommend it, given the glaring errors.

  85. 88

    Gabriel Dibble

    October 9, 2011 11:01 am

    Thank you for posting this incredibly extensive list of useful resources and free services
    You guys rock XD

  86. 89

    I do not even know how I ended up right here, however I assumed this publish was once great. I don’t realize who you are but definitely you are going to a well-known blogger if you are not already. Cheers!


↑ Back to top