The five projects required for this course are described below. They will require at least four hours of independent computer work per week in the Lab or at home. Tutorials and educational materials provided by the software packages used during the course will help you to learn the software and should be followed individually by all students. The software tutorials are required for the basic knowledge that will be built upon during class-time.
The World Wide Web has already undergone many transformations. From a publishing medium it has expanded to a far-reaching communication device, both immediate and global. Individuals and commercial organizations all over the world are establishing their presence on the Web.
Project #1 consists of using visual prototyping for a Web site for a commercial establishment. This simple business site will be a promotional site advertising the business, not an online store (i.e. no ordering forms or shopping carts). The difference in this exercise is that you will use a visual design tool, in this case Photoshop, to create full visual design of the site. You will then use Dreamweaver to build the interface incorporating "rollovers" and "image maps".
The design process starts with the analysis of the goals of your Web site. You have to consider your audience and how your audience will access your pages.
For example: If you decide to work on a Web site for a small store you will have to present your content clearly with a simple interface design. Important information can include the products for sale, location of the store and a promotional sales section that can be updated frequently.
On the other hand, if you build a Web site for a Design Studio that works with printed media, video production and web design, the people interested in the services of this Design Studio will be looking for sophisticated design and creative ways of presenting the content. You will have to include examples of the work, a client list and relevant information about the company.
The deliverable on this project will be a working visual prototype of a site that uses exported image designs, sitting inside a page layout with image map links to simulate a finished site. This method allows you to be creative and explore web design without technical restrictions of HTML and CSS. We will dive deeper into their vagaries in project #2.
Steps to Complete this Project:
Screen recroding of creating a site definition and visual prototype in Dreamweaver >>.
Due Date: 02/27
The Internet was created as a device-independent process of exchanging information. The method chosen to accomplish this task is the HyperText Markup Language (HTML). Most of the pages in the beginning of the Internet were text-only pages. Today, with the World Wide Web full of images, sound and video. Some well-known Web publishers still defend the primacy of text only web sites. For example, Jakob Nielsen's Website: http://www.useit.com/ and specifically the link "About This Site - Why this site has almost no graphics"
In this project you will create a Web site presenting the content of an essay that you have previously written for one of your academic classes. The subject matter is up to you.
The text that you decided to use should allow you to explore HTML basic features to structure your content: Title, Headlines, Rules, Alignment, Lists, Colors and Hyper Links.
The main page of your Web site should present at least three links to individual pages with additional information about specific topics of your paper. Don't forget to link each one of these pages back to your main page.
Steps to complete this project:
Due Date: 03/13
First, choose a band to present. The band can be one you like or one you made up, or best of all... a friend's band. Designing their website will guarantee you guest list access to their next gig.
Then, create a simple Web site using the Bootstrap framework in Dreamweaver with a navigation system. Plan the design of your navigation in a way that enhances some aspect of the band's story. Determine an area that will stay throughout the site to contain all your navigation and make that the "fixed" part of the template. Then make 4-5 other pages that will load depending on which button you click in the navigation and make that the body or "variable" part of your template.
At the same time, try to use the framework to help you finish, while using your creativity to do something original. I ask this because I'd like you to be experimental with this project and break free from any "mind-forged manacles" or limitations you might be feeling relative to the design possibilities of the Web.
Due Date: 04/17
Option1
You will design and develop a short Flash-based segment for this project.
The goal of this project is to create a Web animation that incorporates audio and interactivity. Using Flash to make the animation, create a series of short sequences that illustratesa particular message. The animation can be of text itself or images or hand drawings. You should also incorporate audio elements that relate back to your concept if possible. Good luck.
Note that you are not limited to using Flash to achieve this project. Students are welcoming to delve into using HTML 5, JavaScript and CSS3 technologies to achieve the same effect if they are so inclined.
Option 2
You will develop a piece of artwork using the P5.js library for JavaScript.
Due Date: 05/01
Build a Web Site presenting all the projects that you have made in the class. Include an interface with links to your e-mail address, to your resume, and to any other information relevant to your portfolio.
For some portfolio examples: check out Tutsplus.
Due Date: 05/15 - This is the due date for all projects in final form.