General Web Design Inspiration and Useful Design Examples

CSS Beauty is not only an active database for well-designed CSS sites but it is also a way to connect designers with potential clients and a source for web design and general aesthetic inspiration.

Web Design Inspiration is a collection of screenshots showing excellent web designs. It is well worth browsing simply for graphic and web design inspiration.

Web Creme is a very simple site and easy to follow on RSS: screenshots are posted, often more than once per day, of truly impressive web designs.

Unmatched Style is a source for businesses and designers who seek inspiration from particularly attractive, interesting and progressive web designs.

Design Firms is one of many sites on which you can find designers directly but your best bet might be a simple Google search or simply contacting the author of a design found through one of the above-listed design inspiration sites.

25 Beautiful Minimalist Web Designs shows the awesome power of simplicity when it comes to web design – more isn’t necessarily better.

24 Great Niche Galleries has screenshots with descriptions and links to various galleries that you might want to see for more web design inspiration.

10 Great Web [Re]Designs of 2007 features mostly popular and mainstream sites you may already be familiar with but also provides some useful analysis.

Best of CSS 2007 is another great screenshot-packed eye-candy collection of cool web designs from last year – worth bookmarking for future inspiration.

CSS Web Design Examples, Tutorials and Other Resources

CSS Zen Garden allows you to see the full visual potential of CSS designs. You can pick a style sheet and load it onto the page to view the remarkable differences. The goal of the site is to engender new ideas about and discussions around the possibilities inherent in CSS-based design. While underlying code remains the same throughout the visual differences are readily apparent when you switch between views.

CSS2 Specifications is the place to start with CSS (or go back to when you are stuck). Yes, it isn’t trivial, but it is helpful and (despite the ironic lack of good design on the site itself) is something that everyone should have bookmarked if they are still learning CSS.

The CSS Panic Guide is a resource list which, as you might have guessed, is designed for those moments of utter despair and deparation where you are simply stuck. It is fairly well organized and contains links you’ll likely know as well as ones you won’t. This web design link list features everything from validation and text size to accessibility and media types.

The CSS Shark answers some frequently asked questions, explains some of the basics of CSS offers you a tutorial about Positioning with CSS (CSS-P, web design without tables). There is also a page with interesting links to other on- and off-site resources.

CSS Vault is a highly respected (PageRank resource for sharing beautiful CSS designs and layouts that involves (moderated) community communication regarding designs. If you want to get into active CSS discussions this is one place to do that. The content is frequently updated and the user feedback is generally positive. Overall, this is a great place to browse for interesting and well-done CSS web designs and even find designers.

101 more CSS Tips, Tutorials and Examples is what it sounds like: another great resource list if the aforementioned ones don’t fully handle your needs. Unfortunately, the resources aren’t fully described though some descriptive terms are used as part of the link text.

Web Design Guides and Readings on Contemporary Design and Style

Web Design from Scratch is a great resource for a web designer or aspiring designer of websites either just getting started or already experienced. It is designed to show explicit criteria for success and failure as well as step-by-step guides and instructions for improving your designs. Whether you are completely new to web design, working on new design project or simply revisiting and revising an old web design this is well worth checking out and bookmarking for future reference.

Current Style in Web Design Guide takes you through a series of successful and contemporary designs and then parses the various elements that go contribute to the success of these creative designs. From the particular designs, the author of this useful web design guide extracts general principles which can be applied to other designs. For those of us who have difficulty making the jump from principles and examples to actual design practices this is a must-read guide.

Web 2.0 How-To Design Style Guide: This design guide discusses the generally known but rarely articulated styles associated with designing for what is known as “Web 2.0″ by some and cursed as a passing fad by others. Whether or not you buy into the concept of Web 2.0 or consider it overused and outdated this will take you through the parts and pieces of such designs in a way worth at least browsing through if not bookmarking. On a related note, here are 99 Resources for Good Web 2.0 Design.

Color Tools, Ideas, History and Palette Creation Resources

COLOURlovers is probably the web’s top resource for all things color from color inspiration to palette examples, color history and inspiring uses of color. The tricks learned here can be applied to web design as well as other kinds of design work and are designed for both the color-savvy as well as the virtually color-blind designer.

ColorBlender lets you select a preferred color and then creates a palette based on that input. Blends can be saved for future use and tweaked as needed.

4096 Color Wheel is a pretty straightforward and user-friendly tool for creating color palettes and shifting color schemes.

ColorSchemer Studio suggests palette ideas based on initial and changeable inputs and is both fun to play with as well as useful for professionals.

Photo Color Matcher lets you create a color palette from an existing image of your choice. This can be helpful to people who don’t have a natural eye for color and for clients who may wish to have a designer create a color scheme from a photograph or other image.

Web 2.0 Color Palette is organized to help you develop color schemes based on certain criteria that will fit into a so-called Web 2.0-type scheme.

The Meaning of Colors explains the origins of associations we have with colors including cross-cultural analysis of the meanings of colors across ethnic and geographic groups.

Elegant, Obscure, Abstract and Other Free Fonts

Creamundo is a great place to start searching for free fonts organized in useful ways and easy to view custom samples of prior to downloading. These fonts range from simple and refined to complex and unusual with everything in between.

ShowFont has a likewise extensive collection of free fonts of different kinds

Urban Fonts aren’t all necessarily urban in any traditional sense but many of them are quite interesting and out-of-the-ordinary. Some are based on classic fonts while others are quite creative and original, much like those found at Abstract Fonts or at Better Fonts.

SimplyTheBest has a helpful series of categories that are easy to navigate and understand which, despite their somewhat limited selection, makes them worth seeing.

But, there’s a number of critical steps you need to go through after changing your blog’s design, in order to make sure it’s going to work perfectly.

1. The Sidebar Will Be Overwritten. Most people make a lot of changes to their sidebars, adding text, advertising, links, widgets, etc. If you’re using widget-enabled WordPress themes this isn’t an issue (because widgets stay in place when themes are changed) but if you made changes manually you’re going to have to redo them.Before you activate the new theme, save all of the code from your sidebar (just copy and paste it somewhere.) When you switch themes, edit the sidebar file(s) and re-apply your changes.
3. Re-apply Stat Tracking Code. Most people use a blog stat tracking tool of some kind (i.e. Google Analytics, 103bees, etc.) This is usually done with a snippet of code found in the header or footer. When you change WordPress themes, the header and footer files will be overwritten, so you’ll need to re-apply these code snippets. Otherwise your site will no longer be tracked properly, and you won’t be collecting stats. After re-applying these snippets, make sure the stat tracking tools are working properly.The same holds true if you’re using Google Webmasters Tools. Google Webmasters Tools require that you verify site ownership. This can be done by uploading a file (in which case changing WordPress themes is irrelevant) or by putting meta tag code in the header file. If you use the latter, make sure to put the code back after you change the WordPress theme or the site won’t be properly verified.
4. Check Which Plugins You Need. You may not need every plugin that you were using before. Some may no longer be suitable to the theme you’re using, some might be redundant. For example I was using the Optimal Title plugin (which I highly recommend.) It puts the post title in front of the blog name for the title of any page. This is better for SEO purposes. When I switched to this theme, I noticed that the post titles were already in front; the theme was coded that way. So the plugin was no longer necessary.There may also be some plugins you don’t want to use anymore. Now is a good time to clean things up.
5. Verify That Plugins Work. Any plugin that didn’t require you to edit the template files should be OK, but many do. These plugins won’t work anymore without re-applying the changes to the new template. A good example is the Related Entries plugin which requires a small snippet of code inside the WordPress files.Some plugins may display strangely due to new CSS code in the stylesheet file(s), and so you may have to change CSS as well.
6. Update The Design and Colors of Your Ads. If you’re running Google AdSense, Text-Link-Ads or any other form of advertising, chances are you blended those ads into the design and color scheme of your old blog. With a theme change there’s a good chance that you’ve also changed link colors, which means your advertisements won’t be as well blended and designed as before. For Google AdSense if you’re using AdSense Deluxe it’s easy to change the colors in WordPress. For Text-Link-Ads you can edit the plugin through WordPress as well.
7. Make Sure RSS Feed Subscriptions Work. Because RSS feed subscriptions are so important, just test this to make sure it’s OK. Try subscribing to your site. If you use FeedBurner, subscribe with the FeedBurner link and with the blog’s URL by itself. When you subscribe with the blog’s URL, your RSS Reader should auto-discover the available feeds. Make sure it’s pulling the one you want.
8. Test All Secondary Features. When picking a WordPress theme you probably won’t see all of its features in action, including pages, searching, categories and archives. As soon as you activate the new theme check all of these things out on your blog. You might be surprised what you find. The biggest issue will be that something isn’t formatted the way you want. For example, I tried searching here after updating the theme and noticed that the results didn’t include an excerpt of the post. So that’s something I had to change.
9. Test Using Multiple Browsers. Most people forget to test using multiple browsers, but it’s very important. If you’re using a PC it’s easy to test your blog in Firefox and Internet Explorer. On a Mac you can check it out in Firefox and Safari.
10. Make Changes Carefully. You may not have spent a lot of time experimenting with the new WordPress theme. So before you start radically changing things, take a few baby steps. Make a few small adjustments, test in multiple browsers and see how things go. It’s important to really learn the innards of the theme before you make huge changes.
11. Post About The Change On Your Blog. Make sure you tell people that you’ve changed the design of your blog. Ask people for feedback. People have all kinds of different setups; resolutions, browsers, screen sizes, etc. so they’ll be able to tell you how it looks. Remind RSS readers to come check it out too.

So we’ve put together a list of over 100 resources to help make your life as a developer easier; where to find snippets of code, sites that automate processes, cheat sheets, lessons, useful tools and a couple of silly videos to give your brain a break if you make it through to the end. Please enjoy!

Code

1. Little Boxes
CSS Templates for various page layouts

2. Snipplr
Collection of code snippets – JavaScript, HTML, PHP, CSS, Ruby, Objective C

3. AJAX, DHTML and JavaScript Libraries
An extensive list with over 60 Ajax, Javascript and DHTML Libraries – with detailed descriptions.

4. Javascript Framework
Easy Ajax and DOM manipulation for dynamic Web applications

5. AJAX Javascript Solutions for Professional Coding
Over 90 useful AJAX-based techniques you should always have ready to hand

6. DHTML and AJAX samples
Nice looking simple downloadable DHTML and AJAX code

7. AJAX Patterns
A Wiki of reusable AJAX code, and huge AJAX resource

8. Mozilla Developer Center – AJAX
Mozilla’s offering on AJAX

9. CSS Typeset
Interactive CSS generator

10. Open Source Directory
An archive of the Web’s best Open Source software, applications and references.

11. .htaccess Creator
Online tool to create .htaccess files

12. PHP Form
Create HTML Forms in seconds and get the code

13. Best Solutions for Images
30 scripts of impressive slideshows, lightboxes and galleries you can use for effective presentations of your images.

14. Lightbox
Lightbox is a simple unobtrusive script used to overlay images on a page

15. Design patterns and tips
101 Design Patterns and Tips for Developers

16. Spanky Corners
Creates CSS and GIF images for rounded corners

17. Nifty Corners Cube
Rounded corners with no images

18. How to redirect a Web page the right way
Don’t lose PageRank! Steven Hargrove gives you the code to redirect using htaccess, Mod_Rewrite, IIS, ColdFusion, ASP, Java, Perl, Ruby and PHP.

19. jQuery
jQuery is a fast, concise, JavaScript Library that simplifies how you write your web pages.

Cool Online Tools

Photo Credit: Stavros Markopoulos

20. Pipe Bytes
Send files of any size through any Web browser. No software to install, private and the recipient can start downloading while you’re still uploading

21. PHP FTP Synchronizer
Free program to update your website from local files

22. Dummy Text Generator
Generate text by number of paragraphs, words, bytes or lists

23. UTF-8 decoder
Unicode Decoder

24. CSS Tidy
Open source CSS parser and optimizer

25. HTML Tidy
Open source utility for tidying up HTML

26. FireFTP
Free, secure, cross-platform FTP client for Mozilla Firefox

27. FileZilla
Free FTP client and FTP server

28. Dust-Me Selectors
Firefox extension that finds unused CSS selectors

29. ColorZilla
Get a color reading from any point within Firefox

30. FireFox IE Tab
Run IE inside Firefox

31. Font Sizer
Let visitors change the font size on your site. XHTML, CSS, and PHP source available

32. Recaptcha
Captcha helps prevent automated abuse of your site, ensuring only humans perform certain actions; free

33. Super Screenshot
Take a full sized screenshot of any Web page

34. Web Site Thumbnails
Get thumbnails of any Web site

35. Back Orifice
A remote admin system that enables a user to control a computer over a network

36. CoPilot
Remote control another computer – free on weekends, otherwise $5 for 24 hours

Documentation and Reference

Photo Credit: Perreira

37. Ajax: A New Approach to Web Applications
The ultimate AJAX introduction

38. Cheat Sheet Round Up
Your one stop shop for all cheat sheets including: Actionscript, Ajax, Apache, ASCII, ASP, C#, CSS, CVS, C++, Django, Firefox, Google, HTML/XHTML, Java, JavaScript, LaTeX, MySQL, Perl, Photoshop, GIMP, PHP, Python, Regular Expressions, Ruby, Unix, Linux, Weblogs, Windows, XML.

39. Quick reference
Searches for references on C, C++, CSS, HTML, HTML DOM, Java, JavaScript, MySQL, Perl, PHP, Python, and Ruby

40. Got API
Easily search sites for API documentation

41. CSS Basics
Cascading Style Sheets made easy

42. The Ultimate CSS Resource

43. RSS Specifications
The authority on RSS – from Harvard

44. RSS Best Design Practices and Icons
All things RSS including free icons

45. Go To and Learn
Free video tutorials on Flash

46. Optimize Your PHP code
40 Tips to optimize your PHP code

47. Optimizing MYSQL queries
10 Tips to optimize MYSQL queries

48. How to Create a Dynamic BlogRoll
Using Feedjumbler – it takes 5 minutes

Testing

Photo Credit: Sebastian Bergmann

49. CSS Validation
At W3C

50. HTML/XHTML Validation
At W3C

51. HTML Validator
Firefox extension to validate your HTML (as used within http://validator.w3.org/)

52. Link Checker
Checks for broken links in your HTML pages

53. Firebug
Edit, debug, and monitor CSS, HTML, and JavaScript live in any Web page

54. Gray Bit
Online testing tool; convert a full color page into grayscale to visually test contrast

55. Cross Browser Compatibility Testing
Check your site with multiple browsers on a single machine

56. Screen Sizer
Check out your site in different screen sizes

57. Feed Validator
If you’ve ever noticed invalid characters or XML markup in content items, check your feed for validity problems.

Windows

Photo Credit: Marius

58. Windows Unlocker
Tells you the application that is stopping you from deleting a file

59. Windows Dependency Walker
See which DLLs are required for Windows applications

60. Pending Moves
Show files will be updated when you next restart Windows

61. Process Explorer
View active processes – Task Manager on steroids

62. Process Monitor
Monitors file system, registry and process/thread activity

63. Regulazy
Visual regular expression builder

64. WinDirStat
Display size of files and folders graphically

65. wget for Windows
Gets a HTML resource (HTML, image, document, javascript, css etc)

66. WinSnap
Takes a snap shot of your screen ($19.90)

Converters

Photo Credit: AndiH

67. Convert HTML to RSS
Generate an RSS feed for almost any Web page.

68. Convert RSS to HTML
Creates a widget displaying a specific RSS feed in HTML.

69. Binary to Base64
Create data streams for embedding images (or any type of file) in (X)HTML, CSS and XML

70. HTML To JS/PHP/Perl Converter
This tool will convert normal HTML code to a script based language such as JavaScript, PHP or Perl

71. Text to Voice
Create an MP3 of a voice reading your text

72. Free PDF online conversion
Converts various files (DOC, PUB, RTF, XLS, PPT, HTML, JPG, PNG, BMP, TIFF, WMF, EMF, GIF etc.), to PDF online, then e-mails you the PDF

73. Web 2 PDF
Allow your visitors to create PDFs of any Web page

74. Text to Hex converter
Write your name in hex

Graphics

75. YotoPhoto
Search engine for royalty free images (over 250,000 indexed)

76. Background Image maker – http://lab.rails2u.com/bgmaker/
Create background images online with this quick and easy tool

77. Iconaholic
Lots of great free icons

78. Animated GIFs
Generate and preview animated GIFs, then download

79. 216 Color Webmasters Palette
Web Safe colors for webmasters

80. ASCII Art
The original Web Art

81. ASCII Generator

82. Image to ASCII
Convert images and text to ASCII

83. GIMP
GNU Image Manipulation Program

84. Inkscape
Open Source vector graphics editor, similar to Illustrator and CorelDraw

85. Create Web 2.0 Badges (image –png)
Ajax lessons show you how to create a shiny Web 2.0 badge in eight easy steps

86. Color Scheme Generator

87. Smashup Graphics
Smashups to create logos, backgrounds, buttons and menus.

88. IconFinder
Great looking resource with easy to identify licensing information.

89. Tabs Generator
Creates tab buttons on demand.

Site Analytics

Photo Credit: Wessex Archaeology

90. Who is the Owner?
Find out who owns a Web site quickly

91. Google Banned Tool
Quick way to find out whether your URL is in Google’s banned database

92. Crazy Egg
Variety of products to see what people are doing on your site using a heatmap or just plain hard data. Pricing plans start with free accounts that let you track up to 5000 visits per month and four pages, up to Pro an offering for $99 per month that lets you track 250,000 visits per month.

93. SiteScan
A free way to ensure that your website is configured properly for Google Analytics.

94. Reinvigorate’s Snoop
Real Time Web Analytics – free for PC and Mac. Greater flexibility than Google Analytics

95. PopURI
At-a-glance link popularity of any site based on its ranking (Google PageRank, Alexa Rank, Technorati etc.), social bookmarks (del.icio.us, etc), subscribers (Bloglines, etc) and more

96. Quantcast
Demographics for your site

97. Social Meter
Scans popular social websites to analyze your social popularity.

98. StatCounter
Highly configurable hit counter and real-time detailed web stats. Useful for European Web sites.

99. Clicky Web Analytics
Web analytics – nicely organised and oh so pretty.

WordPress

100. How to create a WordPress theme
A 16 part series on how to build a WordPress theme from whoa to go

101. Highlight Author Comments
Matt Cutts shows you how to change the color of your own comments so they stand out. For WordPress

102. 100 High Quality and Free WordPress Themes
Smashing Magazine has downloaded, installed, and tested hundreds of themes; these are their top 100 picks. Whether you are after design inspiration or coding solutions, this is the place to start

Online Storage

Photo Credit: Kevin

103. Box
Up to 1GB free storage but monthly bandwidth restricted to 10GB, file size restricted to 10MB

104. Xdrive
Up to 5GB free storage. AOL sign-up required.

105. Humyo
Up to 30 GB [25 GB media (phots/music/videos) and 5 GB non-media files]. BUT files are deleted if no login on the account within 90 days.

106. Orbitfiles.com
Up to 6GB free storage, but monthly bandwidth restricted to 20 GB, file size restricted to 100 MB.

107. GigaSize
Unlimited storage, but file size is limited to 600 MB, and files are deleted after 45 days. Unspecified download limits apply. Awful ads!

108. DropBoks
Up to 1GB free storage, but file size is limited to 50MB.

109. Get Gspace
Use Google’s GMail 2 GB storage as your own private online storage with this Firefox extension.

110. WordPress.com
Want another 3GB of free online storage? Why not make a private blog and use the space for your files!

Miscellaneous

Photo Credit: Robin Hutton

111. Map-o-net
Shows you where you lie in the structure of IP addresses

112. Domain Hacks
Helps you find domains which are the combination of unusual TLD, directories and subdomains. For instance, http://l.id can be registered (from Indonesia)

113. Scratch – programming for kids
Want your little person taking over the family web development business? Let them play with Scratch. Developed by MIT

114. Internet World Stats
Comprehensive statistics about the Internet and Web

115. Feed Journal
The next generation newspaper, FeedJournal turns your RSS feeds into a newspaper formatted PDF so you can print it out and read it anywhere – free

Useful Sites

116. Windows Guides

Website design used for visual presentation of information and ease of Web resources through prudent navigation, the optimal placement of information blocks and fast search for the necessary data (flash). Web design resource based on the specifics, scope and destination of each site, and in each case, it is a web design defines literacy organization site and its visual perception.

The most specific and demanding is the development website design corporate sites, since in addition to providing information, data web resources designed to bring real commercial profit. On the development of web design in this case affects a whole range of factors: the goals and objectives of the resource, implemented a policy the company image, advertising and brand awareness, analysis of the competitive environment, plans for future development companies, etc. Although Web design corporate sites are always subordinate to certain rules, each company strives to bring to his business card in the Network personality, so the task of web design is to maintain the corporate style site and good entry of non-design.

Before turning to the dissemination of the information provided on the site, each user, especially appreciated his graphic execution. The erection of a spectacular graphic elements, designed in a unified style, providing a site from hundreds same resources, but graphics and flash animation – a significant amount of files and, consequently, an increase of loading pages.

Attitudes towards Flash rather ambiguous, because on the one hand, multi-media facilities as a factor in the visual impact is very effective, but on the other hand, makes use of flash web resources to the presentation site, where information such as moving away to second place. In addition, Flash-designers give their spots custom controls that are not very familiar to users. Thus, the main problem is not in the flash as a way of creating multimedia objects indispensable to modern Internet space, but the inability to enjoy all their advantages, and in violation of the foundations Web.