Home >
Web
Development > Web Design
Web Design
Section editor
Ann Tothill, APC: AATothill@apc.org
Introduction
If you have used the Internet for even a short time, you will be aware of the advantages that it offers over traditional media such as print, radio or television in terms of economy, breadth, reach and even social impact. This is exactly why individuals and organisations the world over are rushing to develop what is called an "online presence".
The most common method of developing an online presence is by building a web site; "Web Design" is the catch-all term that spans the entire range of processes associated with developing such a web site.
The resources listed here will take you through the entire cycle of developing basic, but useful web sites. Additional resources can be found in the Web Site Management and Web Programming sections.
HTML Learning Resources
Developed by: The HTML Writers Guild
Type of resource: Web site
Target audience: General
Cost: Free access
This is a "list of lists" kind of page on the popular web site of the HTML Writers Guild, an international association for web designers. If you are looking for anything to do with HTML, it is more than likely you will find it here. The page hasn't been updated for quite some time, but almost all the resources and links remain current.
Dhttp://www.hwg.org/resources/?cid=14
Beginner's Guide to HTML
Developed by: NCSA, University of Illinois
Type of resource: Web Site
Target audience: General
Cost: Free access
This NCSA introductory guide is considered one of the best tutorials on HTML on the Internet. The guide is no longer updated, but remains a popular and valid resource for learning HTML, and NCSA continues to keep it available for public use.
Dhttp://archive.ncsa.uiuc.edu/General/Internet/WWW/
HTMLPrimer.html
HTML Design Guide
Developed by: Network Communication Design
Type of resource: Web site
Target audience: General
Cost: Free access
Don't waste your time wondering which tag is supported by which browser instead of building your site. Just use this HTML tag reference guide. Even authoritative sites such as Webmonkey.com refer to this popular resource. Those with essential HTML skills can also benefit from a similar guide on Stylesheets.
Dhttp://www.ncdesign.org/html/index.htm
HTML for Beginners
Developed by: DevStart.com Network
Type of resource: Web Site
Target audience: General
Cost: Free access
A highly useful resource for learning the very basics of HTML, with a warm, personal tone that encourages beginners. The site includes a useful feature called Test Lab, which allows a learner to practice online the HTML code just learned in a lesson, and see the results immediately. The many advertisements on the site still don't detract from its overall value for novices in HTML.
Dhttp://www.htmlprimer.com/
Primers on HTML
Developed by: EarthWeb, a service of INT Media Group
Type of resource: Web Site
Target audience: General
Cost: Free access
A set of introductory primers on HTML on the popular HTML Goodies web site. Excellent for learning HTML basics.
Dhttp://www.htmlgoodies.com/primers/basics.html
NYPL Online Style Guide
Developed by: New York Public Library
Type of resource: Web guide
Target audience: General
Cost: Free access
"All developers are familiar with HTML, the web’s original markup language. But the W3C currently recommends using XHTML instead. This hybrid language looks and works much like HTML but is based on XML, the web’s “super” markup language." This style guide from the New York Public Library explains the basics and benefits of XHTML, and helps you make the transition painlessly. The guide also includes guidelines on using Cascading Style Sheets (CSS).
Dhttp://www.nypl.org/styleguide/
Tutorials on HTML
Developed by: W3schools
Type of resource: Web site
Target audience: General
Cost: Free access
The W3Schools web site is an easy-to-use and well maintained online resource on Web Building. Its tutorial driven style is great especially for beginners, but there is a lot for advanced users as well.
Dhttp://www.w3schools.com/html/default.asp
Web Page Design and Authoring
Developed by: INASP
Type of resource: Word, Powerpoint and HTML formats
Target audience: General, Trainers
Cost: Free access
Materials to support a 5-10 day workshop on introductory HTML, Web site design, images for the Web, CSS and associated Web site development processes. The materials are aimed at librarians and other information professionals but can easily be adapted to meet other user's requirements.
The learning objectives of the workshop and materials are:
- To train librarians and other information professionals in Web page authoring
- To provide participants with a working knowledge of the technical skills required for Web page authoring; HTML and Cascading Stylesheets
- To provide participants with the skills needed to prepare and use images in Web pages
- To highlight the importance of designing and building scalable, accessible and usable Web sites
Registration required.
Dhttp://www.inasp.info/training/web-authoring/
Web Site Designing Course
Developed by: TechKnow (part of the KnowNet Initative)
Type of resource: Website course
Target audience: General
Cost: Free access
Part of the KnowNet Initiative, the site gives access to four (4) modules for a Web site Designing Course.
The simple-to-use modules have been created to enable even a layperson to design and host a web site. Remote help is also provided by KnowNet volunteers through emails to enable organisations and individuals to design their web sites absolutely free-of-cost.
Module 1 – Getting Started
Module 2 – Ten Commandments of HTML
Module 3 – Creating Tables
Module 4 – Linking Web Pages
Dhttp://www.techknownet.org/
Introduction to Dreamweaver
Developed by: University of Durham
Type of resource: PDF file
Target audience: General
Cost: Free access
Introduction to creating web pages/sites using Dreamweaver MX.
Dhttp://www.dur.ac.uk/its/info/guides/171dreamweave
r.pdf
Pegaweb Web Design & Photoshop Tutorials
Developed by: Daniel Piechnick
Type of resource: Online tutorials
Target audience: General
Cost: Free access
Web design and Photoshop tutorials written by a professional designer. Features beginner tutorials, as well as more advanced information.
Dhttp://www.pegaweb.com/
What is the difference between a GIF and a JPG?
Developed by: BBC Webwise
Type of resource: Web site
Target audience: General
Cost: Free access
Simple explanation of the difference between the GIF and JPEG image formats, and what they are good for.
Dhttp://www.bbc.co.uk/webwise/askbruce/articles/sca
ncam/gifjpg_1.shtml
Adobe Photoshop Basics
Developed by: UN
Type of resource: website
Target audience: General
Cost: Free access
In this lesson you will get familiar with Photoshop, an image editing, photo retouching and color painting software. You will learn basic concepts of Photoshop's interface, as well as basic tools that will help you alter, retouch and prepare your images for your Web site. The lesson also provides practical tips and information basic to any graphics work, although within the Adobe Photoshop context.
This lesson is one of many on website development documented for a face-to-face event held by the UN, helping their missions create their own websites.
Dhttp://www.un.org/events/workshop/dpi-unitar/2003/
photoshop/newdocument.html
Adobe Photoshop Tips and Tricks
Developed by: Adobe Evangelists
Type of resource: PDF files
Target audience: General
Cost: Free access
Tips, tricks, and tutorials for using Adobe Photoshop 6.0 and 7.0.
Dhttp://www.adobeevangelists.com/photoshop/
Borrowing Images from the Web: An FAQ
Developed by: TechSoup
Type of resource: Web article
Target audience: General
Cost: Free access
"If you take pictures from other Web sites without permission, you may be violating copyright law, putting your organization at
risk for fines or even a lawsuit. We'll show you when it's acceptable to borrow an image and when you need to get an OK
from the copyright holder first." Although directed at users in the United States this article will be more generally useful.
Dhttp://www.techsoup.org/learningcenter/internet/pa
ge5970.cfm
Creating transparent GIFs
Developed by: Wise-Women
Type of resource: Web tutorial
Target audience: General
Cost: Free access
Part 1 of a 2-part article about creating and using transparent GIFs. Intermediate-level.
Dhttp://www.wise-women.org/tutorials/ps1/
Editing Images with Adobe Photoshop
Developed by: Academic Technology Centre, Cornell University
Type of resource: Web-based instructional course
Target audience: General
Cost: Free access
This online course enables the learner to become familiar with the Photoshop toolbar and how to use some most commonly-needed tools, learn to correct and alter scanned images, and to find answers to some common questions beginning Photoshop users often have.
Dhttp://www.cit.cornell.edu/atc/materials/FLEX/phot
oshop/ps.shtml
Graphic Forums
Developed by: Graphic Forums
Type of resource: Web site
Target audience: General
Cost: Free access
Web-based discussion boards on tools such as Adobe Photoshop and Jasc Paint Shop Pro.
Dhttp://graphic-forums.com/
Open Clip Art Library
Developed by: Open Clip Art Library
Type of resource: Web site
Target audience: General
Cost: Free access
Large bank of clip art in the public domain.
Dhttp://www.openclipart.org/
Preparing Images for the World Wide Web
Developed by: University of Durham Information Technology Service
Type of resource: PDF
Target audience: General
Cost: Free access
This guide from the University of Durham will help you understand different types of graphics formats such as GIF, TIFF and PNG and introduce you to ways of manipulating graphics for the web. While some of the references are specific to the University of Durham, the guide will be useful to a wider audience.
Dhttp://www.dur.ac.uk/resources/its/info/guides/135
GraphicsWWW.pdf
Understanding Images: A Guide to Color Formats
Developed by: TechSoup
Type of resource: Web article
Target audience: General
Cost: Free access
"Why does the color of your nonprofit's logo never look the same on the Web as it does in print? Is there a difference between CMYK and RGB? What does your printer mean when she talks about two-color versus four-color printing? And why on earth is your designer discussing "PMS" with you?" Brian Satterfield looks at common colour formats and best uses.
Dhttp://www.techsoup.org/learningcenter/software/pa
ge6124.cfm
Understanding Images: A Guide to File Formats
Developed by: TechSoup
Type of resource: Web article
Target audience: General
Cost: Free access
"If you've ever worked on an image for your nonprofit's Web site, blog, or printed materials, you've probably found yourself confronted with multiple acronyms when it came time to save the file." TechSoup helps you understand common image formats and when to use them.
Dhttp://www.techsoup.org/learningcenter/software/pa
ge6041.cfm
Understanding Images: A Guide to Resolution and Size
Developed by: TechSoup
Type of resource: Web article
Target audience: General
Cost: Free access
"Is more resolution always better? How do megapixels relate to megabytes? And can you reuse printed graphics on your nonprofit's Web site?" TechSoup looks at the basics.
Dhttp://www.techsoup.org/learningcenter/software/pa
ge6045.cfm
Where to Find Free Images and Visuals
Developed by: TechSoup
Type of resource: Webb article
Target audience: General
Cost: Free access
"Sites and search engines for finding high-quality free pictures".
Dhttp://www.techsoup.org/learningcenter/internet/pa
ge5977.cfm
Counterspace
Developed by: Brett Yancy Collins, Ed Stull
Type of resource: Flash animated web site
Target audience: General
Cost: Free access
Counterspace is a perfect resource dedicated to type and its history with easily digested sections on the anatomy and classification of typography. They also showcase typefaces that can be successfully used in multimedia design.
Dhttp://counterspace.motivo.com/
Web Typography Tutorial
Developed by: Webmonkey Developer's resources
Type of resource: Web site
Target audience: General
Cost: Free access
Webmonkey's tutorial offers two sections with essential information on web typography. Lesson one gives a brief overview of typography while lesson two gives an introduction to using type on web pages.
Dhttp://hotwired.lycos.com/webmonkey/design/fonts/t
utorials/tutorial3.html
Navigation Schemes: Issues and Concerns
Developed by: IISD
Type of resource: Web article
Target audience: General
Cost: Free access
A well-designed web site should anticipate the needs of its users and provide information in a way that requires a minimum of effort by the user. The key to success is in the implementation of good navigation, which should flow from well-planned information architecture.
Dhttp://www.sdcn.org/webworks/ia/nav.htm
Quick Reference Guide: Setting Up Folders and Naming Files for Multimedia and Web Page Projects
Developed by: The Challenge 2000 Multmedia Project
Type of resource: website
Target audience: General
Cost: Free access
"All too often we have wonderful projects that run perfectly on the
machine on which they were created, but when we try to play them on
another computer or upload them to the web, we find that files or
pictures are missing, and/or the project will not will not run
properly." This guide shows you how to organize and name files in
ways that avoid these problems, and which help you to have quick and
organized access to your files in general.
Dhttp://pblmm.k12.ca.us/TechHelp/MediaGuidelines/fo
lders.htm
Speed Bumps and Stop Signs: Improving the Navigation of FARN´s Web Site
Developed by: FARN
Type of resource: Web case study
Target audience: General
Cost: Free access
In restructuring their web site, FARN considered the needs of its users. Why were people visiting FARN´s web site and how could the information they needed be accessed easily?
Dhttp://www.sdcn.org/webworks/cases/navigation_farn
1.htm
The Conceptual Structure of ENDA's Website
Developed by: ENDA
Type of resource: Web case study
Target audience: General
Cost: Free access
This case study from the SD Webworks examines how a Senegalese organization developed its site's information architecture. The structure was chosen as a reflection of how information is gathered within ENDA.
Dhttp://www.sdcn.org/webworks/cases/conceptual_enda
1.htm
Wise-Women
Developed by: Wise-Women
Type of resource: Web site and mailing lists
Target audience: General, Women
Cost: Free access
Wise-Women is "an international community and network dedicated to supporting women who work as, or aspire to becoming, Web designers, developers, and programmers." Membership is open to all, men as well as women. The Wise-Women Web site includes tutorials, articles and discussion lists on topics such as writing for the Web, promoting your site, Web programming and graphics.
Dhttp://www.wise-women.org/
Building a Web Site Together: A Curriculum for a Team Web Site Building Workshop
Developed by: SA Women'sNet / SANGONeT / APC WNSP
Type of resource: Curriculum for facilitators
Target audience: Trainers, Women
Cost: Free access
"Building a Web Site Together - How the Women'sNet Site was Born" is a guide that presents how to develop a small site collectively, from start to finish. The workshop curriculum is organized into the following main sections: site planning, WWW (HTML) skills training and site structure concepts, building the site, site evaluation, and planning ongoing site development and maintenance.
Dhttp://www.womensnet.org.za/about/curric.htm
ITrain Web Site Construction
Developed by: Bellanet / SANGONeT
Type of resource: Students' and instructors' manual in PDF and zipped MS Word format
Target audience: Trainers
Cost: Free access
This training module was developed by SANGONeT and is a two-day module focused on the basics of developing a website.
Dhttp://www.bellanet.org/itrain/materials.cfm
Editor's choice: Web Style Guide
Developed by: Patrick Lynch and Sarah Horton
Type of resource: Web site
Target audience: General
Cost: Free access
This excellent guide details the full process of web site development and design. Packed with recommendations, it covers interface, site and page design, sifting and exploring specific aspects of each such as information architecture and navigation, site diagrams and consistency, and page layout. One particularly useful section that sets this guide apart from other web style manuals is the chapter dedicated to Typography, comparing print and web typography, with illustrative samples regarding white space, line height, alignment, case and emphasis considerations. The guide's Graphics chapter gives a clear understanding, supported by illustrations, of how the different color schemes and web-safe images work and display. Throughout the guide, issues of accessibility are consistently raised.
Dhttp://www.webstyleguide.com/
An Overview of Blogging
Developed by: elearnspace
Type of resource: Web site
Target audience: General
Cost: Free access
Blogs, a short term for web logs, are personal journals that use a date log format and are usually updated on a frequent basis. Blogging software allows blogs to be set up and maintained easily, without knowledge of HTML.
The elearnspace web site has a useful list of resources including The Art of Blogging.
Dhttp://www.elearnspace.org/enabling/blogs.htm
Around the Web in 80 Minutes
Developed by: Pacific Bell Knowledge Network Explorer
Type of resource: Annotated list
Target audience: General
Cost: Free access
Links to web development resources, from basics to graphics and usability.
Dhttp://www.kn.pacbell.com/wired/RoundWeb/publish.h
tm
Creative Commons
Developed by: Creative Commons
Type of resource: Web site
Target audience: General
Cost: Free access
"Creative Commons licenses provide a flexible range of protections and freedoms for authors, artists, and educators." Choose one of the Creative Commons licenses to publish your own work so that it can be freely used and adapted by others, or let a Creative Commons search help you to find images, text or audio to use on your own site.
Dhttp://creativecommons.org/
Empowering Web Developers since 1988
Developed by: Sitepoint
Type of resource: web site
Target audience: General
Cost: Free access
Sitepoint has a variety of sources for web developers ranging from site planning and design to marketing and promotion. The site offers step-by-step feature articles from its developer community, as well as online learning opportunities , and developer blogs focussing on a broad range of subjects.
Dhttp://sitepoint.com
Helping Voluntary Groups Plan Websites
Developed by: ICTHUB KnowledgeBase
Type of resource: Web article
Target audience: General, Trainers
Cost: Free access
"You may be a circuit rider, ICT consultant or website designer, working within a voluntary organisation, a freelancer or volunteer. Whatever your role, here are some ways you could help a voluntary organisation to plan and develop their website."
Dhttp://www.icthubknowledgebase.org.uk/helpgroupspl
anwebsites
Seven Web Development Pitfalls
Developed by: TechSoup
Type of resource: Web article
Target audience: General
Cost: Free access
"Many organizations design and develop their own Web sites; others rely on consultants and vendors to help with this process. However you approach your own site, there are a few common Web development pitfalls you should be aware of. Avoiding these mistakes during the development stages can help save you time and money down the road, and will lay the foundation for a successful Web site that grows with your organization."
Dhttp://www.techsoup.org/learningcenter/webbuilding
/page6596.cfm
The Web Standards Project
Developed by: The Web Standards Project
Type of resource: Web site
Target audience: General
Cost: Free access
The Web Standards Project is a grassroots coalition fighting for standards that ensure simple, affordable access to web technologies for all. Designing and building with web standards simplifies and lowers the cost of production, while delivering sites that are accessible to more people and more types of Internet devices.
Dhttp://www.webstandards.org
Web Page Concept and Design - Getting a Web Site Up and Running
Developed by: Lourdes T. David
Type of resource: Website with downloadable resources
Target audience: General, Trainers
Cost: Free access
Intended for library and information personnel, this module covers the concepts and principles in web page creation and design and introduces the basic steps in setting up and maintaining a web site. By the end of the course students should be able to create a simple web site. The course also covers aspects of web site hosting, promotion and related legal issues.
Dhttp://www.unesco.org/webworld/publications/ictlip
6/index.htm
Web Style Guide
Developed by: Web Style Guide, 2nd Edition
Type of resource: Web site
Target audience: General
Cost: Free access
The Yale University Center for Advanced Instructional Media's excellent site design guide. The guide covers the fundamentals of web site design including planning, site structure, page layout, typography and use of graphics and multimedia.
Dhttp://www.webstyleguide.com/
Writing a Brief for a Website
Developed by: Peter Mason & Marcus Pennell
Type of resource: Web article
Target audience: General
Cost: Free access
"Advice to help you think about the real purpose of your website, and prepare a simple plan before talking to a web designer."
Dhttp://www.icthubknowledgebase.org.uk/websitebrief
|
