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.
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.
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.
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.
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.
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.
Learn
- Many of the modern Web designer resources build on Cascading Stylesheets (CSS). Browse the many articles on CSS in the developerWorks Web architecture zone. Start with "Intro to cascading style sheets" by Dave Taylor (September 2001). Bookmark the comprehensive CSS Wiki.
- Learn more about SVG in the tutorial "Introduction to Scalable Vector Graphics," which teaches you how to use the vector graphics format.
- Stay current on the latest technology with developerWorks technical events and Webcasts.
- Visit the developerWorks Web Architecture zone for more articles, tutorials, and resources that specialize in Web technologies.
Get products and technologies
- Look for work offered under Creative Commons licenses. Use the Creative Commons search engine page, which includes links to many other Web sites with repositories of CC content, including Flickr's Creative Commons pool. For more on technical aspects of the Creative Commons see the author's article "Thinking XML: The commons of creativity" (May 2003).
Discuss
- Participate in developerWorks blogs and get involved in the developerWorks community.
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.
Comments (Undergoing maintenance)
Table of contents
Next steps from IBM
Create rich Internet applications using WebSphere Portal Express Web 2.0 technologies.
- Try: WebSphere Portal Express
- Article: Get started using Ajax and WebSphere Portal Express
- Tutorial: Quickly build a an Ajax-enabled WebSphere Portal Express Web application
- Demo: Architecture, design, and construction using the IBM Rational Software Delivery Platform: AJAX
- Webcast: Rational software process automation: Real value delivered, real customer stories
- Buy: WebSphere Portal Express
My developerWorks community
Tags
Use the slider bar to see more or fewer tags.
Popular tags shows the top tags for this particular content zone (for example, Java technology, Linux, WebSphere).
My tags shows your tags for this particular content zone (for example, Java technology, Linux, WebSphere).
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
