COGS 187B - Multimedia Design (2)

In this course, students learn the process of creating a professional website for a real client. Each of the steps that professional web designers take in the process of creating a website are learned here, such as writing the creative brief, storyboarding, and putting out the final product. Along with learning the website creation steps, students will learn the theory behind creating each of these deliverables. The lecture topics encompass the areas of Site Design, Task Analysis, Theory behind Hypertext and Interactiviy, and Usability.

At the end of this course students should have an advanced understanding of the theory behind website design. This knowledge will then be applied to the websites that each group creates for their own clients. This 10 week course will provide the students with the ability to go out and create professional websites for real world clients.

Assignments

Propose Client

• A requirements gathering meeting in which you determine the key goals and objectives of the site you are to build.


• Discussion of the creative brief you will present for approval.


• Discussion of the functional specification you will present for approval.


• Discussion of the first prototype you will present for approval.


• Evaluation of final prototype you will present for approval.

 

Requirements Gathering and Competitive Analysis
In order to write your creative brief, the first formal document you give your clients, you first need to gather requirements. This is a harder task than many people realize and requires sensitivity and client handling skills. People who are good at requirements gathering work well with their clients and deliver products that are inevitably more satisfying, since the client feels they have been properly listened to.

Creative Brief
A Creative Brief is a prose document, usually from two to five pages long, defining a potential multimedia or web project. In the business world, a Creative Brief may be created as part of a proposal to submit to a client, or it may be created after the client has contracted for the work to be done, as a basis for the project design. The guidelines below offer a template of subject headings for organizing a Creative Brief and describe the type of information you should put under each heading.

StoryBoard and Functional Spec
A StoryBoard is an image or powerpoint or visio diagram showing the primary pages in the site and their connectivity. You need not show all the links if there are many, but a reader must be able to understand the page flow. [Typically if there are many pages that are essentially the same, as in a story with 10 pages, they are shown by a sheaf of pages stating 10 pages.] There is a simple sketch of the material on each page and lines connecting the parts between the pages when there are links.

A Functional Spec is a statement of all the functional elements on your site. Rollovers, dropdowns, forms, email, database calls, and so on.

Prototype I
All pages should be present with basic navigation in place. There can be placeholders for content, and a few images but this is essentially your first more or less complete draft of the site. After feedback you then polish the site and deliver your final prototype.

More precisely what this means is that the layout of the site is essentially complete. If you don't have your client's content then you have put some bogus content in its place. But the content should have the approximate appearance of the final product. That is, there should be callouts, bullets and so on. Your pages should look like the final product, although a few of the images may be placeholders, againof the right size and positioned correctly.

Final Prototype
Your final prototype should be a working site complete in all respects. There should be no under construction elements and any features which you have not been able to implement should have been designed around so that the user has a seamless experience. Submit the entire directory of your site to My portfolio if it is not more than a megabyte. Be sure that your homepage is called index.htm or index.html . Also submit the link to your final site on my portfolio and email Perry with that link.

To be more explicit: we are looking for a polished product in the final prototype. It should have the look and feel of a true roll out site although there might be less abundant content than a fully stocked site if there is supposed to be client interaction.