 | Level: Intermediate Uche Ogbuji (uche@ogbuji.net), Principal Consultant, Fourthought, Inc.
13 Jul 2006 Web developers can find many free resources, although some are freer than others. If you design a Web site or Web application, whether static or with all the dynamic Ajax goodness you can conjure up, you might find resources to lighten your load and spice up your content. From free icons to Web layouts and templates to on-line Web page tools, this article demonstrates that a Web architect can also get help these days at little or no cost.
Web designers with large budgets to back themselves up can command whatever resources they need to bring a Web experience from their mind's eye onto the page. They can hire professional photographers and models to create compelling photographic images. They can put the best HTML and CSS experts to work creating sophisticated layouts that work with a variety of browsers. They can instruct graphic artists to create gorgeous highlights and flourishes based on the corporate dress. They can hire professional copy writers to draft hypnotic prose. Best of all, they can hire armies of test users and focus groups to make sure the Web site is attractive, easy to use, and works as expected.
Not all Web designers are so lucky! Unfortunately, some have to create Web sites on a shoe-string, and that doesn't always come with lower expectations for a dazzling Web experience. In that case, you need all the help you can get. For the most part, Web developers and designers are very generous in sharing their knowledge and efforts with colleagues. When you do share, colleagues are often diligent in correcting and enhancing your work, so that it becomes more polished and less buggy -- and provide your own focus groups and quality assurance. What this means is, you can find plenty of material that is free. You can patch up many of the holes in your low-budget Web development operation if you know where to look. In this article I'll introduce you to all sorts of free Web resources, as well as warnings against Web resources that might seem free, but aren't so.
Commons of creativity
My first stop will be the Creative Commons (CC), which is not in itself a source of free stuff, but is rather a source of licenses used by people who offer free stuff. In their own words CC is "a nonprofit organization that offers flexible copyright licenses for creative works." You can pick a CC license to allow owners to require that you give them credit when you use their work or derive from it (attribution clause); you can restrict the use of your work to non-commercial parties; you can mandate that any derivation from your work be shared on the same terms as the original (share-alike clause). There are other clauses, and you can combine clauses. For example, one popular CC license is the Attribution Share Alike license.
CC has been a great success -- the body of work available from CC licenses is enormous, and growing by the day. Literature, graphics, music, and more can be offered under CC licenses, and you're free to use any of these for your Web site, as long as you can meet the restrictions. A great first step in learning how to find free products for Web design is learning how to search for materials offered under CC licenses. You can go right to the source by using the CC search engine page, which allows you to take advantage of specialized searching features in search engines such as Google and Flickr, and in free content collections such as Flickr and DMusic.
Style elements
Great stylesheets are the backbone of great Web sites -- Cascading Stylesheets (CSS) in particular. Unfortunately, checkered support in browsers means that great stylesheets can be hard to develop. You can save a lot of effort and testing by relying on free stylesheets, or at least free modules of style elements. Many sites offer CSS instruction and examples, but my focus is on sites that I've found to most often have CSS material that you can quickly assemble into your own site. One such site that runs as a journal by top Web professionals is A List Apart, especially the "Code" and "Design" topics. CSS Intensivstation Templates focuses on a few key layout patterns for structuring your site.
The most famous CSS clearinghouse is CSS Zen Garden, but you must take care when using this one. CSS Zen Garden is meant as a demonstration of the power of CSS. CSS is a great way to separate content from presentation, but a lot of Web developers initially shunned CSS because they didn't believe they could create the same impressive effects as they could with old-fashioned HTML tricks such as layout tables and invisible images. CSS Zen Garden proves this perception wrong with beautiful style. There is a single, shared content piece, and Web designers create pages that present that content in some unique way. They use clever layouts, and lovely images and color, usually working around a theme such as "Like the sea" or "Museum". CSS Zen Garden cannot be used as a collection of templates; you can see this in the warning that appears in most of the CSS contributions:
This design is not a template. You may not reproduce it elsewhere without the
designer's written permission. However, feel free to study the CSS and use techniques you learn from it elsewhere.
In addition, many of the contributors use images that are not free. The site maintainers request that contributors make their CSS available under a non-commercial Creative Commons license (see Resources), so copying CSS is usually safe, but make sure by checking the top of the contributor's CSS file.
Graphics
Professional Web sites use all variety of images, from photography to artist drawings to icons and bullets. Several sites offer royalty-free graphics. One project that you should pay attention to is the Open Clip Art Library, a collection of contributed, downloadable clip art. The graphics range from the small and simple to the large and complex. Most of it is in the Scalable Vector Graphics format (SVG), which is an open, XML-based format. SVG has increasing support in Web browsers, but is not yet universal, so the Open Clip Art Library includes PNG versions of each image. You can browse or search the images on the Web site, but you probably just want to download one of the releases, so you can browse off-line. The quality of the graphics is similar to what you find in many clip art collections that you can buy in stores. When I need bullets, icons, and other such highlights, I usually browse the Open Clip Art Library, but MaxPower Free Icons is a nice set of links to free collections of icons. Speaking of clip art collections from stores, many of these are not free of restrictions, even after you've purchased the collection. Some require royalties for commercial use. Be sure to scrutinize the End User License Agreements if you purchase any such collection.
When I need photography I often turn to Flickr's CC photo pool, which I mentioned already, but usually my conduit is Yotophoto, a search aggregator for photographs in free licenses from CC variants to Public Domain. One of my favorite source sites is stock.xchng. This site has an impressive number of photos of very high quality, and a very good search engine. Not all the photos are royalty-free, but most of them are! You can even see whether there is a model release for the photos, which can be an important consideration in deciding to use photos containing people. A smaller and less polished, but still useful, site is Open Photo, which only includes CC licensed photos. I also use MorgueFile, a site similar to stock.xchng with similar advantages for searching and rich metadata. All images on MorgueFile are subject to a a specialized license that is not based on CC, but omit royalties for personal or commercial work. I like the answer in MorgueFile's FAQ to inquiry as to why they provide free images:
This web site follows in the tradition of the world wide web. It is dedicated in the proposition of free thought and exchange.
Design tools
Some Web designers and firms offer tools on-line to help others, and to increase their community profile. The most common is a color scheme tool, which allows you to choose an aesthetically pleasing group of colors for your site. I'm certainly not the best eye in the world for matching colors, so I appreciate sites such as Wellstyled.com's Color Scheme Generator. Another site that provides more options in how the schemes are assembled is SiteProCentral.com's HTML Color Code Combination Chooser.
One of the most popular Web browsers is also one of the quirkiest. Web designers have long had to wrestle with Microsoft Internet Explorer 5 and 6, including the differences between Macintosh and Windows versions. Microsoft is working on version 7 of their browser, which promises to be more standards-compliant, but until then Dean Edwards has developed a JavaScript solution. To quote the Web site:
[Dean Edwards'] IE7 is a JavaScript library to make IE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6.
When you design a Web site, it's important to remember the Macintosh audience. If purchasing a Mac for testing is not an option, then you can be grateful to Daniel Vine for building iCapture. This is a site where you can specify a URL, and retrieve a PNG image of what it looks like on the Safari Web browser on the Mac. Edwards also offers ieCapture, which lets you see what your site looks like on the Macintosh IE7 beta.
Full Web layouts and templates
Sometimes even with all the above help, I am defeated in putting together a compelling Web page. I might just want it all, and luckily there are a few places where I can find free, full-page layouts with HTML (and often XHTML) templates, graphics, stylesheets, highlights, and more. Open Web Design has almost two thousand complete templates of varying quality. There is a rating system, and sometimes there are contests for designers to augment the collection. Open Source Web Design is a similar site on a similar scale.
Wrap up
In this article you've learned of many resources from which you can obtain free materials and tools to help improve your Web site. Even if you do have the budget for top professional help, it's useful to be familiar with the state of the art in Web design. Luckily the state of the art is rarely hidden or inaccessible, and is often free. If you have the opportunity, I also encourage you to share what you can, perhaps by contributing to the sites I've mentioned. After all, the rising tide of Web aesthetics lifts all ships.
Resources Learn
Get products and technologies
Discuss
About the author | 
| | Uche Ogbuji is a consultant and co-founder of Fourthought Inc., a software vendor and consultancy specializing in XML solutions for enterprise knowledge management. Fourthought develops 4Suite, an open source platform for XML, RDF, and knowledge-management applications. Mr. Ogbuji is also a lead developer of the Versa RDF query language. He is a computer engineer and writer born in Nigeria, living and working in Boulder, Colorado, USA. You can find more about Mr. Ogbuji at his Weblog Copia or contact him at uche@ogbuji.net. |
Rate this page
| |
