Web Projects
Choose a personal hero or heroine – living or dead, famous or unrecognized, real or imaginary, human or non-human – and design a single Web page (i.e. one without links), using whatever media and software are available to you, to present your chosen figure in the best light to a worldwide audience. Make the design of your Web page ‘fit’ your hero or heroine in every possible respect, and keep the total size of the content below 250 kbytes. (If you want to make this a bit harder, keep the content down to 100 kbytes.)
This project is an exercise in effective communication in a very small space, and is about sensitivity in design. You will need to be highly selective about the material you choose, process it sufficiently to reduce its size to meet the target, and design and organize your page in an appropriate way. In asking you to make the design "fit" the figure you have chosen, we mean that you should choose and integrate all the elements of the page in a way that is sensitive to your subject. For example, if you choose a great political or religious leader, you might wish to encourage viewers in a feeling of respect and admiration for that leader's achievements or philosophy – an irreverent comic strip or a quirky font would be out of place. If you were to choose a film star, on the other hand, a touch of glamour and a showbiz aura for the whole page would be appropriate – unless, perhaps, you wanted to convey their personal strength in some aspect of life unconnected with the film industry. If you were to choose your pet dog, or Bugs Bunny, a completely different solution would be appropriate. So think hard about exactly what it is that you are trying to communicate, and then make sure that every aspect of your design works towards that end. Be aware of the difficulties in addressing a world audience effectively, and think about ways of getting your message across to as many different kinds of people as possible. Do not be discouraged if you have only limited technical resources – results can often be more effective when the means are simple. If you do have substantial resources, exercise discretion in their use, concentrating primarily on effective communication within the limits set. Don’t forget that less is quite often more.
Repeat the previous project, but this time create a media-rich site to celebrate your hero; the site should consist of between three and six pages and be suitable for viewing over a broadband connection.
You cannot assume that you have unlimited bandwidth, merely enough for some Flash and/or video and audio, and relatively large images. Remember that broadband speeds vary widely around the world, and design your site so that it's available to as many broadband users as possible. Since you are now free to incorporate rich media elements, you will need to think about a design in which these form a natural part of the site. You will also need to consider questions of control over playback of Flash, video and audio content. As in the first version of this project, your design should reflect the personality of its subject and your attitude to that.
Choose a Web site which you know quite well and identify at least five ways in which you think it could be improved. Redesign it, using its existing content, so that it is as good as you can make it.
You should be able to determine which of your suggestions for improvement are implementable, and implement them. It may be that you will have to accept that some of the site’s features which you find inadequate are unavoidable consequences of Web technology. For these, consider ways of changing the site to reduce their impact. In order to make your changes, you should either rewrite the HTML by hand, or import the site into an authoring application and change it there.
Create a Web site guide to an art college’s annual degree show. This needs to display a wide range of work in such disciplines as glass, ceramics, fashion design, theatre design, graphics, illustration, photography, video, animation, painting and drawing, sculpture, etc. It should adequately convey the scale of work, and the spaces in which it is displayed in the real show (where that is appropriate) and it should allow for each art student to include a written statement and short personal profile to accompany their display. Your site should also provide adequate navigational controls for the user to find their way around both the virtual and the real degree shows.
This might almost be called a classical problem in multimedia, so commonly is it required. Remember that, in this case, the multimedia production is subsidiary to the real show. Although it should be attractive and useful in its own right, its primary function is to advertise the degree show and serve as a guide to it. Thus you should, in some way or other, represent the physical space of the show, whether as a map or using 3-D representation. You must also respect the students’ work. Where the art work is represented on the site you should do it justice, and not subsume it to some grand design scheme of your own. Different types of work – painting, sculpture, video, and so on – need different treatments to convey their nature. Do not fall into the trap of trying to produce a solution that will work for any show. Fit your solution to the specific task in hand.
The best results will be produced if you are able to work with an actual art college or faculty, using real students’ work.
A chain of estate agents wishes to provide computers in each of their branch offices which will access a central database of pictures, video and 3-D models relating to the properties for sale. Devise such a system – using the Internet and not a local network – which allows for this centrally held material to be pulled down for display to walk-in clients.
This brief is representative of a class of multimedia applications that is being deployed in the real world. It is a large-scale, technical project, and should only really be attempted by a team that includes a high proportion of technically skilled people. Its importance lies in the need for design and computation on both the server and client sides. On the server, it will be necessary to design and implement a database that can hold (or at least point to) multimedia data. On the client side, it requires the design of an interface that can be used by office staff to display property details to potential home buyers in a suitably impressive manner. The client and server must communicate. HTTP and CGI or PHP may be adequate with a conventional Web browser interface, but you will be able to create a better solution using a modern Web application framework such as Ruby on Rails or Django on the server and AJAX for the interface in the browser.
Create for yourself a showpiece Web site which you could use to exhibit your design skills to a potential employer or client. This should be a no-budget production (except for using such equipment as is available to you) – the content should be entirely comprised of royalty-free material trawled from the Web or elsewhere.
The purpose of this project is to help you to understand and maximize your own particular Web design skills, without being concerned with the production of content. However, you should ensure that you choose and organize your found content in such a way as to create a successful and coherent Web site. Make use of the full range of Web technologies if you wish, but ensure that your page transforms gracefully on older browsers, or when viewed over a slow link. And be careful to test it on as many different platforms as you can – you won’t impress many clients if the first thing they see is a scripting error message.
This project should be done in groups. Each member of the group should obtain or make one or more pieces of text, audio, video, animation, and one or more still images – you each need a total number of media elements sufficient to send a different one to each of the other members of the group. (So if your group has ten members, for example, you each need to collect and send nine media elements.) Each group member will end up with a collection of elements, with no particular logic to their combination. The task is to create a rich media Web site out of those elements, first by working individually, and subsequently by combining your individual productions into a larger whole.
It is important for group members not to collaborate beforehand. The idea is that each of you is presented with a collection of elements over which you have had no prior control. It may be that one member ends up with nothing but pieces of text, or a large collection of sound files, or things may work out so that everybody ends up with a balanced number of elements of each type. The point is to make the best of whatever turns up. This means looking for ways of using the particular mix of media that you have been sent, looking for connections or contrasts between media originating from different people, and so on.
This project can be carried out on a small scale – within your particular class, for example – or on a much larger scale, by collaborating with other groups around the world. You can choose whether or not to focus it around a specific subject, or to leave it wide open (which is more difficult to do well).
Choose an HTML-only Web site that you find dull and create a livelier Flash version. Make sure that your new site still loads quickly.
It’s easy enough to animate everything in sight and convince yourself that the result is lively, but it will soon pall. What you need to do is look at the function and content of the original site and use animation, colour, interactivity and so on, to draw visitors in so that their experience of using the site becomes both more enjoyable and more profitable. This is not so easy.
Design a Web site with a theme that can naturally be presented in a chronological fashion, such as the history of some domestic appliance, or the career of a celebrity. Use a timeline as the fundamental organizational device for the site, and add navigational controls that fit this organization.
Here we are considering the timeline as a form of presentation, rather than as a means of constructing a time-based presentation. The user should be able to see an overview of the chronological development of the subject of your site, with important events highlighted on the timeline. You should add links to sub-pages corresponding to such events, and these sub-pages should also be linked to reflect the chronology. Each page should provide some indication of where it fits on the main timeline – one possibility is to include a graphic of the whole timeline, with the current location highlighted.
Work as a group to produce a Web site consisting of film reviews (not necessarily new films; you could use films you have recently seen on TV or rented on DVD). The group should design a standard layout for each review, with standard elements, such as a cast list, synopsis and star rating, and then individuals should create pages based on this layout.
If you are using a Web authoring package that supports the use of templates, you should create the standard layout as a template, or set of templates, that can be filled in to create the individual reviews. A review need not be restricted to a single page; you may find it better to have a summary page with links to more detailed sub-pages, for instance. Feel free to incorporate multimedia elements, such as images, video clips, and links to other sites (but be aware of copyright issues).
If your group includes people with suitable skills, and you have permission to create programs on a server, extend this idea into a Web application that allows readers to annotate the basic review with their own comments and ratings.
Choose a subject that interests you, such as your favourite band, sports team or video game; current political or environmental issues; local history, stamp collecting, and so on. There should already be plenty of sites on the Web related to almost any subject you choose. Trawl the Web and collect as many appropriate links as you can (at least 100), and then build a Web site that presents those links in an organized way.
Some sort of subject classification will help people find their way around. Classification is, of course, a long-established area of study, and you could usefully investigate the hierarchical classification schemes used in libraries when you are thinking about how to organize your links. Alternatively, you may prefer to add tags as a more flexible way of classifying your links. You might want to investigate ways of presenting the same set of links organized in different ways, by providing different routes through your site, or – if you have the knowledge and facilities – using server-side computation to generate lists dynamically. As well as classification, you also need to think about presentation. A long list of URLs is not very helpful to anybody. What text will you put in the links? How will you organize the list on the page so that it is readable? Will you break the list into several pages, or use layout to express the organization?
Create a simple Web site guide to entertainment in your local area, designing the site for maximum accessibility by people with all kinds of disabilities. Try to make the site as attractive and useful as possible for all users, whether they have a disability or not.
The latest WAI Guidelines for Accessible Content (WCAG 2.0) and associated documents can be used as criteria for the success this project, which is essentially an exercise in careful implementation within those guidelines. One of the points the WAI make is that accessible design does not have to be dull; you just have to make sure that you provide some way of reaching information and navigating the site for everyone. Additionally, adding
altattributes to all your images is not all that is needed: you must design the site so that it presents the information in a way that makes it easy to find out what is on in the area. Ideally, you should test your design on real users with different sorts of disability, and using different assistive technologies.The emphasis of the project is on accessibility, so don’t spend too much time trying to produce a definitive entertainment listing. If you live in a big city, for example, don’t try to cover every venue; just choose a small area of the city, or a few representative places of entertainment. You should research and include information on disabled access to venues, however.
Take two sets of photographs of a place. First, find a suitable vantage point and take a set of pictures that can make up a 360º panorama of the general area. Second, visit some selected locations inside that area, and take photographs at those specific locations. When you have all the pictures you need, create a Web site consisting of a draggable panorama made by stitching together your first set of photographs, with hotspots within the panorama at each location you visited for your second set of photos; clicking on a hotspot will allow the visitor to see the corresponding detailed photo. You will have to provide clear instructions, so that visitors to the site know what to do, and make sure that there are some visual indications of where the hotspots are.
Taking the first set of pictures and stitching them together may pose a challenge. Specialized tripod heads and software for creating panoramas are available, and you should use these if you can. Some digital cameras have special panorama facilities. Otherwise, you will have to improvise: careful use of an ordinary panning head should enable you to take a set of photos covering 360º in the same plane. These photos can be combined in Photoshop, but you will probably have to do some manipulation of the images to make sure that they join up seamlessly, or nearly so.
You have a choice of technologies for making the panorama draggable and adding hotspots. Flash is probably the easiest option, but JavaScript is also a good choice (use a library such as jQuery or Glow); programmers could perhaps create a Java applet.