The 50 Most Popular Web Design Blog Posts, Resources & Cheat Sheets of 2007

he past year has been an amazing period for those wishing to learn the ropes of design, whether you're a noob just getting into the game or a seasoned designer or programmer. As we enter 2008, let's take a look back at some of the most popular articles, resources, and tutorials that helped those who toiled away on the web everyday.

Basics & Principles

9 Essential Design Principles - PSDtuts, known for its Photoshop tutorials, gives us a nice list of basic design principles that can be applied to many different media types, but are often lost in amateur web design.

The Importance of White space - One of the oldest principals of design is white space, and knowing how to use it properly could mean wonders for your design. Popular site A List Apart tackles the subject.

8 Design Tactics to Help You When You're Stuck -Every designer goes through hard times of "designer's block"; Matt Inman (also known as "Oatmeal") gives us 8 tactics to help you get back to work.

10 Great Website Redesigns of 2007 - How better to enhance your design abilities then to learn from the mistakes of those in the past? Webware discusses re-designs that caught their attention in '07.

The Open Source Web Design Toolbox: 100 Web Design Template Sources, Tools and Resources - If you're not utilizing the plethora of open source design materials out there, then you're either really hardcore or just been living in a cave! Take advantage of the work others have done before with these open source tools.

Top 100 Online Generators for Web 2.0 - From mirrored logos to rounded corners, the web 2.0 look has been often imitated, and much can be attributed to posts like this from Ajaxflakes. Jump on the bandwagon today!

19 Things NOT to do When Building a Website - Many of us looking to tweak our design abilities can easily do so with the zillions of articles available online; however, we sometimes forget about learning things we shouldn't be doing. Josiah Cole teaches us just that.

Ultimate Web Development Cheat Sheet - like the title says, this post at realsoftwaredevelopment.com is a comprehensive list of guides to html, xhtml, css, javascript, xml, ajax and more.

Color

Color Theory Visualizer - Color is often overlooked in amateur web design (have you seen some of the older sites on the web!?). Color Jack shares an awesome visual tool to help you pick out the right colors for your project.

10 Tools to Help You Create a Web 2.0 Color Palette - As mentioned before, the Web2.0 trend is a little worn out, but all year long designers were chasing the look to grab the attention of everyone interested in the next big thing.

Rule 3: Contrast, Contrast, Contrast - Much like white space, contrast is a very basic lesson you'll first learn about in traditional design, but can be overlooked or forgotten about by self-taught web designers.

Graphics & Icons

The Top 50 Logo Design Tutorials - For any designer looking to turn their design project into a legitimate business, or just looking for some serious credibility, then you'll want a professional looking logo. 50 tutorials should get you on the right path.

300 Free Icons - Many designers spend countless hours designing icons for their projects. Many amateur web artists don't even know the first thing about icon design. Everaldo Coheldo gives ya 300 for free!

Ultimate Web 2.0 Layer Styles - Deznierfolio assists designers in completing their 2.0 style design with an awesome Photoshop download, with layer styles including headers, bars, buttons, and backgrounds.

Iconfinder - Icon Search Engine - If the 300 icons by Everaldo didn't suffice, then you can always use Iconfinder for that specific icon. All icons are free under the GNU and Creative Commons licenses.

99 Useful Resources for Graphic Designers - Youthedesigner.com is a great resource for those learning graphic design, and their list of 99 sites to check out is a must-see for anyone looking to sharpen their technical graphic skills.

Free Fading Corner Images - Who can turn down free corner images? Bittbox hooks it up once again by giving designers some trendy fading corners for our web2.0-ified site.

50 Remarkable Favicons - Oh the lonely favicon, forgotten about by the even-more-lonely amateur designer. Check out this list of 50 favicons to give you a jolt of creativity to design your own. Who knew that so much could be put into something so small?

Photos

How to Turn Your Photo Into a Movie-Like Effect Using Photoshop - There are many effects you can use to spruce up your images in Photoshop, and adding a dramatic, movie-like flair is just one example. Use this tutorial to add mood adjustments and depth of field effects to your photos.

11 Super Awesome Photoshop Movie Effects - If the method above just doesn't cut it for you, don't fret. Photojojo has 11 effects that replicate many successful movie poster effects, such as the simple contrast of films like Scarface and Sin City, or the stylized methods used in A Scanner Darkly and 300.

Free Photoshop Plugins - Like many of the software programs used by designers, Photoshop can be greatly enhanced by the numerous plug-ins that have been created for it, expanding its already extensive capabilities. Use these effects and filters to widen your abilities as well.

Advanced Glow Effects - Lighting is obviously a very important effect that can be used to manipulate your photos; the amount of control that Photoshop gives you is massive. PSDTuts makes the list again with some more advanced "glow" effects.

Beginner's Guide to Photography for Computer Geek's Who Want to be Digital Artists - If some of the tutorials above seem a little too advanced for the budding amateur designer, you may need to start with the basics involved with actually taking the pics first, and this tutorial by Bernie does just that.

CSS

55 CSS Techniques You Can't Live Without - Smashing Magazine is a fantastic resource for web design tips and tricks, and they hit the nail on the head with some great CSS tips in this list. It's really amazing all of the things your site can display using these advanced techniques.

How to Make Sexy Buttons With CSS - Many people in the real world wouldn't consider anything on the web to be sexy per se, but then, what do they know? Make sure your website eschews sexiness with this sexy button tutorial by Oscar Alexander.

6 Keys to Understanding Modern CSS-Based Design - much like web design in general, CSS has expanded and evolved over the years, and many designers still need to catch up. Snook explores modern navigation and floating techniques to bring you up to speed.

CSS Slicing Guide - Many professional designers begin building their website layouts and themes in graphics programs first before actually creating the code. Sometimes, the process of transferring these ideas over to code can be daunting; use this CSS slicing guide to make such transitions smooth.

71 Free CSS Menus - If you're not using CSS to enhance your site's navigational menus, you either have really boring text navigation or are just living in the stone age. No worries, though, as you're sure to find at least 1 styled menu to use out of the 71 on this list.

Advanced CSS Menu - After digging through the list provided above, you might get bitten by the CSS-driven-menu bug, and might be looking to shovel deeper. Web Designer Wall has the tool you need to find what you're looking for.

15 CSS Properties You Probably Never Use (but perhaps should) - Leave it to Oatmeal to give us yet another great design tutorial! With so many CSS properties to utilize, it's easy to forget some that are mentioned on his list of what you SHOULD be using.

70 Expert Ideas For Better CSS Coding - As you further your CSS knowledge, you may find yourself lost in a sea of style code. Keep yourself organized and make life a little less hectic with these 70 ideas for better coding from the CSS experts at Smashing Magazine.

Blueprint CSS - If 70 ideas weren't enough for you (or too much to handle), then you might want to check out Blueprint CSS. It's a CSS framework for you to help jump start your style sheets using advanced CSS organization.

Designing on a Dime: 100 Freebie CSS Resources - One of the misconceptions of web design is that, in order to achieve a really good look, you got to have the financial resources (i.e. billable design hours) to churn out good design. This list of free resources proves otherwise.

Fonts & Text

Color and Typography in Good Design - As mentioned before, color can often be underestimated in certain aspects of design, and perhaps the place it is most often overlooked in is when styling text. Use this color and typography tutorial to learn the basics of what and what not to use when picking font colors.

51 Text Effect Tutorials - On the web, everything can have an "effect" placed on it, and fonts can be styled as well to add some extra flair to your pages. Design Vitality looks at 51 text effects to help get you started.

10,000 Free Fonts - SO many designers feel stuck using the same old default fonts available in many of the programs we use everyday. Liberate yourself with over 10,000 free fonts available over at Shofont.net.

Top 500 Fonts on the Web - Just in case you're not so confident in what font you should be using, it's never wrong to look at what everyone else is doing (heck, that's what the web is all about!). Take a peak at the top 500 fonts being used right now all over the web.

Web Page Readability - This insightful article covers some of the common mistakes still being made today in regards to text readability on the web, and delivers the secret color combination you may be surprised to hear about.

Layouts

30 Dark Designs You Should've Seen - On most of the web, the default and most commonly used layouts have white as their background; that doesn't mean a black or dark background can't be utilized. Check out these 30 dark designs that do the darker shades of the web justice.

83 Beautiful Wordpress Themes You (Probably) Haven't Seen - Over the past few years, Wordpress, the open-source blogging and content management software, has exploded. Many themes exist, but these 83 are truly a remarkable showcase of what can be done with the software.

30 Stunning One-Page Websites - Who needs multiple pages? Simplicity is a very significant principle of the web, and it doesn't get any more simple than a one page design. While not for everyone, let these examples show you that sometimes, less is more.

Web Design-isms: 7 Surefire Styles that Work - Sexy Larissa Meek discusses 7 "isms" to consider using in design. Some include "retroism", "wordism", and the "collagist" approach to design. Whichever you use, it's sure to add an artsy spin to a boring layout.

Elements of Great Design: The Polish - There is just so much detail that can be used and implemented in the design process that it can be really easy to forget "the polish". Make sure your design is clean and user friendly while still retaining its artistic accomplishments to achieve the ultimate design.

Other

Cool Business Card Designs - Now, there's more to this game then just dealing with the web; every good designer is going to need a snazzy business card to showcase their contact information. Check out these designs to get some inspiration.

25 Code Snippets for Web Designers - Simple yet very effective code snippets that add some dynamic extras to your web pages. Why build a form or ratings system from scratch when you can just have it for free?

The Web Designers Toolbox - The title of the article pretty much sums it up. The TLBox hooks it up with even more in depth tutorials, tools, widgets, and plugins to fill your design cravings.

35 Designers x 5 Questions - What better way to learn technique then to speak to those who know it best? 35 of some of the brightest minds in web design get put on the spot and share some insightful expert advice.

Secrets of Self Taught Web Developers - A shameless plug, I know, but here is quite an exhaustive list of resources and "secrets" of web designers and developers to help you if you happen to be driving down the self-learning road of the web.

34 Places to Get Design Inspiration - Much of what happens around us in our everyday lives has a huge impact on our design (believe it or not). The next time you're struggling to find that inspiration, you might just have to look in the right place to find it.

30+ Firefox Add-Ons for Web Designers - Back in the early days, there was little your Internet Explorer browser could do for you when it came to analyzing web pages. Now, the browser is your friend with these must have add-ons to Firefox.

25 Reasons You Might Be A Hard-Core Graphic Designer - Finally, a humorous look at the life of being a hard core designer. If you happen to not meet some of the criteria found on this list, it's a good bet you didn't study the resources listed here in this article!