Objective

To design and develop a web site for a client. To learn client communication and project management skills. To collaborate with clients and peers. To practice solving real-world marketing and visual communication problems.

Secondary objectives

To showcase your web design and web development skills for the purpose of obtaining employment. To learn to utilize appropriate digital tools as it relates to web development.

Description

Review your current portfolio samples with your instructor to determine its strengths and its weaknesses. Address its weaknesses by designing a new project to be added to your portfolio. Your project proposal must be approved by your instructor before you begin.

Your project must communicate a concept creatively and show an understanding of design principles.

Note: High resolution stock photos and illustrations are now available from Photospin. Contact your instructor for more information.

Optional: Repeat this project to add additional samples to your portfolio.

Procedure

1. RESEARCH FOR INSPIRATION: Research existing award winning web sites. Be sure to review trade publications (Print, How, Communication Arts) and the art director's annuals. Scan or take screenshots of designs that you think are successful. Look specifically for creative concepts, innovative navigation, clean typography and good page layout. Publish your research on your projects page for discussion (see example).

2. Research your client (or make up one). What is the client's history? Are there any unique selling points for this business? Who is the competition? If appropriate, visit the business. Analyze your research and write a written statement of objectives in the form of a memo (see sample brief). In describing the "character" of the web site, make use of the Vocabulary Wheel as a starting point. Submit your brief as part of your Angel homework assignment (when prompted).

3. DEVELOP THE CONCEPT: In your sketchbook begin to conceptualize ideas for this project (see sample thumbnails). Make at least 10 sketches of all possible directions you might take this project. Draw exactly how you intend to layout key pages of your site (i.e. splash page, inside page, portfolio page). Edit your concepts down to your best three ideas and redraw them inside a browser window using a felt tip pen (download blank browser window ). Rough out site maps (download examples of site maps) as needed to explain your navigation scheme. Discuss your concepts/site map with your team members and choose the best idea(s) for execution.

4. PROTOTYPE MOCK-UP: Based on the critique of the above, create a prototype "mock-up" of key sample screens in Adobe Photoshop which will indicate the "look and feel" of the web site. Place your art inside a blank browser window (download blank browser chrome in PNG format). Also develop your site architecture by preparing the text for your web site and publish a text-only web site (see example). Generate web-ready JPEGs of your prototype screens and publish them on your personal projects page for critique.

5. TEMPLATE PRODUCTION: Revise your layout as needed, then slice up your pixel elements and produce working template pages in XHMTL. Publish your templates on your personal projects page for critique.

6. WEBSITE PRODUCTION: Revise your template as needed, then produce a fully functional web site. Publish your web site with your own hosting service and make a link from your personal projects page for critique.

7. FINAL PRESENTATION: Based on the critique of the above, revise your web site as needed and present your finished site on screen for final critique. If necessary, make refinements until you are 100% satisfied with the project.

8. GRADING: Review your projects page and make sure you have an accurate record of your process. You will not receive credit for this project if any of the above elements are missing.

9. STUDENT GALLERY ARCHIVES: Prepare a ZIP archive of your finished web site and drop it in Angel's drop box. Your project may be published in a showcase of student work on Parkland's web site.