75 Helpful Web Design Resources
Here’s a bunch of my favorite web design resources that I use everyday. The following resources have been a huge help to me and I highly recommend them. Whether you’re already a professional web developer or you’re just getting your feet wet there’s plenty of information that can help you.
What resources have you found helpful? I’m always looking to add to my resources so please share your favorites in the comments below.
Design Inspiration
If you’re anything like me creativity doesn’t come easily. The truth is we could all use some design inspiration from time to time. Thankfully there’s plenty of resources for us to find inspiration in. Here’s a list of sites that haveuseful for me when I need to get the creative juices flowing.
CSS Vault
Favourite Website Awards
CSS Reboot
CSS Zen Garden - The beauty of CSS design. The Zen Garden shows what’s possible with a CSS based design. This site is responsible for turning me on to CSS based designs. Very inspirational.
HOW Magazine
Web Standards Awards
35 Sexiest Designed Websites You’ve Forgotten About
Web Pages That Suck - Good examples of what not to do.
Screenspire - This my favorite site for design inspiration. Not only do they have thousands of inspirational designs, you can view the screenshot of each site which makes it very easy to browse through the huge collection.
Design Shack
CSS Beauty
CSS Import
W3C Compliant Sites
Liquid Designs
Web Creme
Stylegala - Stylegala is an online resource and inspiration guide for web agencies, designers and developers who take interest in websites that combine the powers of design, web standards and CSS.
Web Standards
I can’t express the importance of using web standards enough, hopefully the following articles and resources can.
10 Reasons to Learn and Use Web Standards - If you’re a web developer or designer new to the concept of web standards and are undecided on whether you should spend the time to learn all about them or not, here are some of the most important reasons for doing so. For web professionals who are already using web standards, this list may come in handy when you need good arguments.
Developing With Web Standards - This document explains how and why using web standards will let you build websites in a way that saves time and money for the developer and provides a better experience for the visitor. Also discussed are other methods, guidelines and best practices that will help produce high-quality websites that are accessible to as many as possible.
10 Reason for Web Standards - 10 more reasons to develop with web standards.
Roadmap to Standards
Web Standards Primer - What Every Web Site Owner Should Know About Standards.
Don’t Meet Your Heroes - Web standards compliation site.
The Web Standards Project - The Web Standards Project is a grassroots coalition fighting for standards that ensure simple, affordable access to web technologies for all.
Web Standards Workshop
The Guild of Accessible Web Designers - GAWDS is a world-wide association of organisations and accessible web designers and developers - designed to both promote and protect standards - not technical standards - but accessible design standards.
Validators
Now that you’re all caught up on standards make sure you always validate your code to make sure it’s compliant. These tools from W3C will also help you find any errors so you know what needs to be fixed.
HTML & XHTML Validator
CSS Validator
Typography
Typography articles. Compare typefaces and downloand fonts.
The Anatomy of Web Fonts - Very good article on understand typography and the role it plays in web design.
Typetester - “The Typetester is an online application for comparison of the fonts for the screen. Its’ primary role is to make web designer’s life easier.” It’s certainly made my life a lot easier. Compare up to three different typefaces, sizes, spacing, and more all on one screen.
Typography for Headlines - Nice collection of typography headlines. Great for inspiration.
25 Best License-Free Quality Fonts - Great collection, thank Vitaly Friedman.
DaFont - More fonts than you can shake a stick at.
Photoshop Tutorials
Pixel2life.com
Photoshop Tutorials Blog
Tutorial Select
deviantART -
Good-Tutorials
Fadedpixel
Planet Photoshop
Free Photoshop - Thousands of Photoshop downloads.
BrushFind.com - Thousands of Photoshop brushes.
Stock Photography
Stock Exchange - Huge collection of high quality, free stock photography. Some images require photographers permission but most photos don’t.
Morguefile - Another highly recommended free stock photography resource site.
Veer - Visual elements in ways that work.
iStockphoto - Royalty free images. Prices are very reasonable.
Fotosearch Stock Photos -
Features millions of images and royalty free photos from more than 150 publishers.
Blogs & Other Resources
Some of my favorite blogs. Make sure you subscribe to these.
StopDesign
Digital Web Magazine - Digital Web Magazine is an online magazine intended for professional web designers, web developers and information architects. Digital Web Magazine is a non-profit publication created by a world-wide network of volunteers dedicated to producing quality educational and informative material free-of-charge, to foster the development of the web for the benefit of all.
Particletree - Weblog about CSS, XHTML, and JavaScript.
A List Apart - A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on techniques and benefits of designing with web standards. Tons of great articles, a must for any serious web designer.
Authentic Boredom - Cameron Moll’s Blog. Cameron is an awesome freelance web designer with a great writing style.
456 Berea Street - Roger Johansson’s Blog. One of my favorites.
Molly.com - Molly E. Holzschlag’s Blog. You will learn a lot from Molly.
Box of Chocolates - Derek Featherstone’s Blog.
Stylegala - Stylegala is an online resource and inspiration guide for web agencies, designers and developers who take interest in websites that combine the powers of design, web standards and CSS.
Jonathan Snook
Mezzoblue - a semi–daily expository and exploratory on all things web, design, and typographic.
Forums & Help
Search for tutorials, articles, or get help in forums.
W3Schools Online Web Tutorials
HTML Help
HTML Dog
SitePoint - Lots of great articles and the forums are very helpful.
Character Reference
CSS Templates
Color Tools
Search for colors, color schemes, and color inspiration.
Colourlovers - I’ve found some great color inspiration and color schemes from Colourlovers. Currently more than 39,000 colors and 16,000 palettes.
Colour Contrast Check - From Jonathan Snook, the Colour Contrast Check Tool allows to specify a foreground and a background colour and determine if they provide enough of a contrast “when viewed by someone having color deficits or when viewed on a black and white screen”. The tool will indicate that the colours pass the test if both the colour difference and the brightness difference exceed their threshold. It will indicate that it sort of passes if only one of the two values exceed their threshold. And finally, it’ll fail to pass if neither value exceeds its threshold.
The Color Wizard - This is my favorite color tool on the web. I wrote about The Color Wizard a couple weeks ago. The Colour Wizard lets you type in the value of your colour and get an automatic return of that colour’s complementary colour, split complementary colours, analogous colours, chromatic variations, shade and tint variantion and saturation variation.
ColorCombos.com - Color Combos allows you to test color combinations, see how the different combinations work together on screen, and gives color combination ideas. You can also pull colors from other websites by simply entering in the URI.
ColourMod
Firefox Extensions
Firefox extensions make life a lot simpler.
Web Developer - So many features & tools I don’t even know where to begin.
ColorZilla - Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
IE Tab - Open Internet Explorer in a Firefox tab. Very wasy way to check compatibility.
Measureit - Draw out a ruler to get the pixel width and height of any elements on a webpage.
View Rendered Source Chart - Easy way to visually navigate source code.
HTML Validator - Validate your HTML inside Firefox.
Screen Grab - Save an entire webpage as an image.
Other
Background Image Maker - Makes some basic backgrounds for your site, much easier than using photoshop.
FamFamFam Icons - Free Icons. Awesome.
IconBuffet - One of the best sites for royalty free icons and digital artwork. These icons are awesome!
Browsershots - browsershots gives you screenshots of your projects in all major browsers so you can make sure your design looks the same across the board.
Remember you can use cheap web hosting as a great web design resource by using an account for staging new sites and development sites waiting to go live.
So what am I missing? What are some of your favorites?
Cameron Olthuis is the Founder of
I would add snook.ca to the blog list.
Very good resource.
Thanks, i can tell that took effort.
Bookmarked for sure.
Take Care,
Ryan.
Rex - You’re right, Jonathan Snooks blog is one of my daily reads.
Ryan - Thanks.
A great compilation, thanks. Saved in my reference list.
Yep definitely Jonathan Snook to place in the list also mezzoblue and stylegala under Design Inspirations.
Updated the list. Thanks for the suggestions, keep them coming. Funny thing is these are all blogs that I keep on my RSS reader, can’t believe I left them out.
wow wicked list! Already found a bunch of cool stuff from it! Your blog is officially in my rss subscription list.
Thanks for the effort!
Thanks for including me in such a great list! Are you going to keep it updated?
Welcome JF & Christian!
Yes, I would like to keep the list updated. I probably need to lay it out a little better to keep it organized.
I’ll figure something out. Feel free to give me some recommendations on what to add.
[…] Cameron Olthuis has posted a list of helpful web design resources. Any beginner that works through this list will greatly expand their web design and development world. Great list! 02.20.2006 @ 11:17 AM by Paul Flyer — Filed under: […]
[…] Cameron has put together a good list of web development resources and links - pretty useful if this is your bag. Thanks Cameron! […]
very nice! thx for putting all this together. very helpful..
Great list!
Consider adding:
http://www.htmlfixit.com/
get ready for the digg effect, Cameron
[…] I also noticed that I don’t have a lot of images on the website yet, so I’m going to take time and see what kind of designs I can come up with. My past websites usually have the regular blue/white, black/white theme, I plan on going crazy since I’m starting to learn a little bit more about CSS everyday. Speaking of which, check out this site for some quick references to some great webdev tools. […]
It’s my own site, but I think it’s worth including:
http://www.webdevout.net/browser_support.php - Web browser standards support tables
[…] 75 Helpful Web Design Resources - Cameron Olthuis ALOT of GREAT SITES!! […]
[…] 75 Helpful Web Design Resources - Cameron OlthuisTags: lists, webdev […]
“Web Standards
I can’t express the importance of using web standards enough,”
How can you express the importance of web standards while you clearly are talking about web *recommendations*? No, you’re not talking about ISO HTML. Minus 10 clue points.
Very nice start point! I will give it definitely a place in my bookmarks.
In Design Inspiration:
http://www.unmatchedstyle.com/
http://netdiver.net/
[…] http://www.cameronolthuis.com/2006/01/75-helpful-web-design-resources/ […]
I’d add http://www.addtoany.com/webmasters/ for RSS.
yay! your recource collection is great, i’m diggin it for some time now
congratulations!
another nice site not seen in the list :
http://www.webdesignfromscratch.com/
75 enlaces sobre diseño Web
Listado muy completo de 75 enlaces relacionados con el diseño Web. Están clasificados en diferentes categorÃÂas como: tutoriales photoshop, seo, validación, extensiones firefox, colores, foros, blogs, etc…
Great list. But this site is a good on http://www.cssplay.com
Hey Everyone,
Thanks for the feedback and the suggestions. I’ve found a few more gems thanks to these links. Keep them coming. I’ll definitely be adding some of these.
John Bokma - I’m not sure I quite understand what you’re trying to say. Can you explain.
yea, is realy usefull
Great list.
Bokma is just being a jerk. It’s safe to ignore him. His point is that the W3C standards are officially “recommendations”. Never mind that they are the most important piece of collective definition available to web designers (and web browser designers!).
As far as I can tell, the troglodytes who can’t get their minds around doctypes, semantics, an the box model like to trot out that meaningless piece of trivia to justify their 1995-ness.
The W3C itself uses the terms interchangeably. I look forward to the day when ISO or IEEE anoints the W3C documents as “Standard”, but really only so that people like this joker can feel stupid about a decade or two of masturbatory self-righteousness.
Again, excellent list.
[…] http://www.cameronolthuis.com/2006/01/75-helpful-web-design-resources/ […]
@ John. I suppose you’re technically correct, but your point comes across a bit like petty quibbling. From W3C:
“A W3C Recommendation is a specification or set of guidelines that, after extensive consensus-building, has received the endorsement of W3C Members and the Director. W3C recommends the wide deployment of its Recommendations. Note: W3C Recommendations are similar to the standards published by other organizations.”
The W3C calls ‘em Recommendations, the IETF calls ‘em Internet Standards or Request for Comments, and ISO just plain Standards. In the end, they’re all complementary. Judicial and intellegent use of appropriate open specifications is definitely A Good Thing.
A rose by any other name, and all that?
http://www.myfreelanceauction.com is a great web design resource I’ve found, I sell all my items that aren’t used in projects, for some extra cash!
Etre’s colour blind simulator at http://www.etre.com/tools/colourblindsimulator/ is really useful for making sure colour-blind users aren’t disadvantaged by your colour choices.
[…] 75 Helpful Web Design Resources - Cameron Olthuis (tags: web design) […]
[…] 75 Helpful Web Design Resources Personal faves are CSS Zen Garden DaFont Pixel2Life deviantArt Good-Tutorials Stock Exchange A List Apart W3Schools Web Developer (Firefox extension)xx ColorZilla (Firefox extension) FamFamFam Icons […]
I think Jacob Nielsen’s AlertBox should be on the list:
http://www.useit.com/alertbox/
He doesn’t offer a feed, but one is avaialable using mySiteFeed.com’s automatic RSS Feed creator / generator:
http://www.mysitefeed.com/feed/111/
You’ve remember the best resource in the Net - The Web-Developer’s Handbook. Yyyyao!
[…] A bunch of web design resources with descriptions.read more | digg story […]
What a great list! Thank you!:)
I didn’t see this one so I thought I would suggest it; I have found it to be a great resource for tons of CSS examples: http://www.cssplay.co.uk/
take care
[…] A bunch of web design resources with descriptions.read more | digg story […]
[…] of my favorite web design resources that I use everyday. RSS feed for comments on this post. TrackBack URI jaradesign.com is © David Jara. Benevolence theme by Theron Parlin. Syndicateentries using RSS and Comments (RSS). This theme contains valid XHTML and CSS. Powered by WordPress 2.0.2. […]
[…] 75 Helpful Web Design Resources Here’s a bunch of my favorite web design resources that I use everyday. The following resources have been a huge help to me and I highly recommend them. Whether you’re already a professional web developer or you’re just getting your feet wet there’s plenty of information that can help you. http://www.cameronolthuis.com/2006/01/75-helpful-web-design-resources/ Posted by: mondfish on Apr 02, 06 | 12:57 am [0] comments (0 views) | [0] Trackbacks [0] Pingbacks top […]
[…] 75 Helpful Web Design Resources […]
[…] 75 Helpful Web Design Resources - Cameron Olthuis (tags: webdesign resources howto) […]
[…] A great site with 75 links towards helpful website design resources. Link. […]
I found this in the late 90’s, Great Site!
http://www.blooberry.com/indexdot/html/
[…] 75 Helpful Web Design Resources - Cameron Olthuis (tags: webdev lists) […]
[…] 75 Helpful Web Design Resources - Cameron Olthuis (tags: webdesign resources tools) […]
[…] 75 Helpful Web Design Resources - Cameron Olthuis 75 Helpful Web Design Resources […]
[…] 75 Helpful Web Design Resources - Cameron Olthuis (tags: css design) […]
Current link collection
These are the links that have been siting in my browser tabs for the past couple of days. I’m too tired and worn out to add additional comments at the moment so they are pretty much raw.
75 Web Design Resources
DosBOX for running old MSDOS games
…
good,i like it very much.
75 Helpful Web Design Resources
ive found http://www.badasswebdesigners.com to be pretty useful
–johnny
[…] Nice list Cameron! […]
[…] 75 Helpful Web Design Resources - Cameron Olthuis (tags: CSS) […]
[…] 75 Helpful Web Design Resources - Cameron Olthuis Here’s a bunch of my favorite web design resources that I use everyday. The following resources have been a huge help to me and I highly recommend them. Whether you’re already a professional web developer or you’re just getting your feet wet there’s plenty of information that can help you. […]
75 Helpful Web Design Resources
75 helpful web design resources sorted into categories such as web standards, CSS, typography, colour tools and stock photography.
[…] read more | digg story […]
A helpful list with a lot of good sites.
[…] Cameron Olthuis has a very helpful list of web design resources that’s definitely worthy of bookmarking. He lists a bunch of the standards, but also includes some lesser known resources. Good stuff. […]
Found a good resource of free web design video tutorials here. http://www.video-tutes.com
Thanks, Cameron! Great resource.
I’d like to share with you one of my favorites:
DesignEducation.ca: Thousands of Design Resources
http://www.designeducation.ca
It contains useful links about job seeking, branding, graphic design, photography, illustration, web design, et cetera.
All the best.
Joe
[…] Cameron Olthuis, nach eigener Aussage “online marketing professional who dabbles in marketing, branding, design, and the user experience” hat sich die Mühe gemacht, in seinem Weblog 75 nette Links für alle Webdesigner (Und solche die es werden wollen) zu sammeln. Die Spanne reicht von Blogs über Tutorials bis hin zu Downloadarchiven. Empfehlenswert! […]
[…] Cameron Olthius posted “75 Helpful Web Design Resources” on his site. Great resource reminds me of a project I’ve had in mind for sometime now. Anyway, here’s the link. here’s the link. […]
Cameron, great list and gooood work! a “must-have” for everyone who is interested in webdesign! Keep on rocking! =)
Greetings from Bavaria, Flo
[…] Cameron Olthuis, online marketing professional , has compiled a list of 75 links to various web design resources. Some of the various links include web design inspiration, validation tools, and Photoshop tutorials. Many of the links will be familiar to veteran web designers, but if you are just getting started in the industry or just want to make your own website, this page is a definite bookmark. You can check it out at CameronOlthuis.com. […]
[…] 75 Helpful Web Design Resources. ÃÂõÿûþхþù ÑÂÿøÑÂþú ÿþûõ÷ýых ôûѠòõñ-ôø÷ðùýõрð ÑÂðùтþò. Úðú ÑÂтþ þñычýþ ñыòðõт, þÑÂþñую цõýýþÑÂÑ‚ÑŒ ÑÂÿøÑÂúу ÿрøôðют úþüüõýтðрøø, ò úþтþрых чøтðтõûø ÿрõôûðóðют ÑÂòþø ôþÿþûýõýøÑÂ. Here’s a bunch of my favorite web design resources that I use everyday. The following resources have been a huge help to me and I highly recommend them. Whether you’re already a professional web developer or you’re just getting your feet wet there’s plenty of information that can help you. […]
[…] Cameron Olthuis hat in seinem Blog die “Top 10 CSS Tutorials” aufgelistet - eine äusserst nützliche Kollektion! Darunter sind wohl so ziemlich alle CSS Hacks, Tricks und Kniffe, die es gibt: Roll-over images, bar graphs, vertikale Menüs, formatierte Listen, floating elements, runde Ecken (eine weitere pure CSS Technik für runde Ecken findest Du hier), Schatten, Photo-Gallerien, sowie ein Stylesheet-Switcher und eine Sammlung von 40 fertigen CSS Layouts. Thank you Cameron für diese Zusammenstellung - da gibt’s für mich noch viel zu lernen Im Januar hat Cameron übrigens eine umfangreiche Liste von “75 Helpful Web Design Resources” aufgelistet, die Lektüre seines Blogs ist für Webdesigner und Online Marketeers generell empfehlenswert. […]
[…] 75 Helpful Web Design Resources - Cameron OlthuisTags: webdev […]
[…] And if you are interested in learning more about color schemes, then this is one of the best articles on web design color combinations. Also check out Your complete guide to web design. And here for a CSS generator. Or go here for CSS and HTML templates. Or you can now create a webpage with Google’s webpage creator. Remember that you can also startup a blog with Typepad or Wordpress, or create a fairly cheap looking blog at MySpace. Also remember to checkout the open source free web templates and information at Open Source Web Design and Open Web Design. And here for 75 helpful design resources. […]
[…] 75 Helpful Web Design Resources - Cameron Olthuis (tags: webdev) […]
[…] 75 Helpful Web Design Resources - Pretty much what it says on the tin. Links for design, typography, stock images and other stuff. […]
if you need even more stock icons, may I recommend http://www.orangeicons.com - not exactly free but really really cheap(you can buy icons one by one there not sets)
[…] 75 Helpful Web Design Resources Another web design link list. (tags: bookmarks design reference) […]
logiciel
so think, to in da?
Lavoro eccellente! ..ringraziamenti per le informazioni..realmente lo apprezzo: D
Molto molto impressionato sono! Lavoro grande, yeah! [URL]http://www.ligabue.jeunespourleoui.org[/URL]
Very nice site. Thanks.
yeah,a great site!Much appreciated.
[…] Cameron Ollthuis (no idea who this person is) offers 75 helpful design resources, some of which I’ve listed above. ) […]
Very interesting website. Keep up the outstanding work and thank you…
[url=http://sas.juztalk.com/amaro-crimen-del-el-padre.html] amaro crimen del el padre[/url]
Maybe you will take a look to http://www.spider-trap.de
This tool will help to catch bad bots and denied the access to the website.
Great resources, thanks for taking the time to post this!
Great Collection! Very interesting links. Good work!
If you need handle many databases but don’t want to program it, please check Nenest (http://www.nenest.com).
Great work you done!
Hi,
It’s really useful
Regards
Kamaldeep
There are so many interesting stuff and its looks cool especially all the links are trully fascinating. It’s very useful and the best part for me is photoshop tutorial is a much needed info for me, thanks man!
I think these blog is really useful for new comers! great article, thanks
Thanks, Despite the title of my original post, I think I agree with your post. Of course a great compilation.No one denies the importance of using web standards and flash tutorial is awwsome,very cool and simple writing-up of flash tutorial.
http://www.websites-design.com.au/
Cameron,
I wonder - What are a few of the most obvious updates you’d make to this list after 2 years from the original post?
Dear Cameron,
Thank you for the great resources, which I shall continue to peruse. I would like to suggest FotoSearch Stock Photography for the “Stock Photography” section as well. FSP is a portal that lets users search many publishers from one spot - quite handy considering the time you can save.
Thank you again!
try Photoservice Electa if you are looking for hi-res photos of italian art, architecture, sculpture.
[…] 75 Helpful Web Design Resources […]
A site I’ve found useful is http://www.websitegrader.com
Their simple website grading tool allows you to find some elements of your site that needs more work.
[…] 75 Helpful Design Resources […]