Build a brochure-style web site
Objectives
Create a five-page web site using one of the client briefs listed at right. A creative brief is a description of the project to ensure the designer understands the client's needs. (Similar to the typical behavior of real clients, additional needs of the web site will become apparent as your work progresses.) Integrating content, structure, and presentation, the completed site must be informative and usable. Express your personal aesthetic through the web medium, while applying the following concepts from class.
- Apply the design principles of proximity, alignment, repetition, and contrast.
- Implement a navigation model that is intuitive and usable.
- Demonstrate beginning HTML, CSS and Dreamweaver technical skills.
- Use appropriate typography and layout that exploit CSS, where practical.
Typography should relate to subject matter in feeling and aesthetic. - Use images appropriately to support the site design.
Requirements
- Site must be a minimum of five pages (more pages will not necessarily get you a better grade). It can be five pages that are fully developed within a site that will eventually have more pages.
- Every page in the web site must be navigable from every other page in the site.
- Develop a singe set of CSS typographic styles to control heading and paragraphs text content through one external style sheet. Note that typography delivered through images does not demonstrate an understanding of CSS.
- For images, use primary, copyright-cleared, sources of sufficiently high quality that are optimized for Internet delivery. When using stock images, it is acceptable to use comp versions for this assignment. Take advantage of the numerous resources for visual materials that are designated as free for non-commercial use with attribution, such as Creative Commons licensed sources. It is illegal and unethical to use other people’s images without their knowledge or permission.
- The site must be your own creative work done for the purpose of this assignment. Web sites you have created previously can not be used. Web site templates from any source can not be used.
- This is not a logo design exercise. A logo will not garner you extra credit, although you can certainly incorporate a logo if it helps you achieve your design goals.
- The site must be online and publicly accessible within your art307 web directory at the beginning of class on the due date.
- A functional contact form is a required page within your web site.
- A self-evaluation is a crucial part of the design process. In this case, it's also a way to clarify to the instructor what you were attempting to do. Include a self-evaluation statement in e-mail to the instructor with your web site link.
Process
- Option 1: start with a paper sketch, develop a layout and design in a layered Photoshop file, and finish the sliced output in Dreamweaver.
- Option 2: start with a paper sketch, develop a layout in Dreamweaver using HTML tables, and finish the design in Dreamweaver. Bring in images prepared in Photoshop.
- Option 3: start with a paper sketch, develop a layout in Dreamweaver using CSS divisions, and finish the design in Dreamweaver. Bring in images prepared in Photoshop.
- Not an option: starting with a web site template or from another web site, although you may use templates and other sites for your own learning.
Related pages
How the web design project will be graded.
- The W3C Markup Validation Service can be used to validate HTML files.
- The W3C CSS Validation Service can be used to validate CSS files.
Here is the pre-submission checklist.
