The personal website project serves three purposes: it allows you to practice web design in small steps before beginning the final website project, it serves as an online portfolio for your work in this class, and it allows you to promote yourself to potential employers, scholarship, internship, graduate school committees, etc. This project will follow steps similar to our poster project including a design plan, sketches, and reflection.
general requirements
- a multimodal design (i.e., the site should include more than text on a page)
- a clearly defined subject, purpose, and target audience
- a rhetorically justified visual design
- a navigation system appropriate to the purpose and target audience
- a total of 6-10 substantial pages when completed including
- an index page
- a portfolio of your work in this class including the copyright paper, poster, sound project, and blog. The portfolio should provide any context necessary for your audience to understand each project.
- a biography or “about me” page
- a resume or academic CV
- at least two additional pages of content of your choosing
- all steps in the process completed (see below)
Your site must be composed from scratch using the program Dreamweaver and your own code writing skills. You may use the basic page templates in Dreamweaver and some publicly available code for embedding video, creating photo slideshows, etc., but you may not “steal” the code from another website and use it as your own.
deliverables and due dates
Thursday, October 14
- Design Plans
- Storyboards (one storyboard for each page of your site)
Your design plan should address the questions below. Now that you’ve had the opportunity to explore examples of personal web sites and to practice a little HTML code, you should be well situated to develop the initial plan for your own site. You need not answer every question below, and you may address each aspect of the design plan in whatever order you wish. Also, remember that this is an exploratory document—you don’t need to have every aspect of your project worked out right now.
your design plan should begin with an analysis of purpose, audience, and context:
- Purpose: What do you want to communicate to your audience about about yourself? Is your site an online portfolio with the purpose of helping you get a job, a scholarship, or entrance to graduate/professional school? Is the purpose to promote yourself as a member of a band or other artistic group?
- Audience: Who is your ideal audience? What is the audience’s demographics (age, gender, race, etc.)? What are their interests, hobbies, political and/or social leanings? What is their level of experience navigating the web? What expectations do you think your audience will have for your website given who they are and given your purpose?
- Context: What background knowledge are you assuming your audience will bring to your site? How do you imagine the situation in which they will view your web site: will they be drinking their morning coffee in a comfortable chair, sneaking a break at work? Will they be relaxed, worried, browsing leisurely, or looking for information quickly?
also consider the following:
- Medium: How will you take advantage of the multimodal capabilities of the web in your design?
- Arrangement: How will you visually organize your site? What colors, graphics, and organization of information appealed to you when you were exploring the web sites you looked at in class? How might you arrange your information? For example, if you are a musician, will you provide audio clips? How will you divide information up onto different pages? Do you want your audience to have to scroll or click a lot?
- Strategies: How will you establish your authority or believability as an author (ethos)? Will you write in a formal, academic style or is it more appropriate to be conversational or funny or creative? Will you provide evidence that you have specialized knowledge (about your major, etc.) by using quotes from other sources, links to other information on the web, embedded audio, video, or still images? Do you want your site to appeal to your readers’ sense of logic and objective reasoning (logos) or appeal to emotion (pathos) or to both?
A storyboard is a sketch of what a webpage will look like. Each storyboard is accompanied by text that explains the written content and various media files that will be included on the page. Storyboarding originated in film where each shot of a film is drawn ahead of time indicating where the lighting and cameras will be placed. Wikipedia provides a basic history of storyboarding. Your storyboards may be designed by hand using this template or using a computer program. They should be in color and each storyboard should include a brief written explanation of the content.
Thursday, October 28 (by the end of class)
- website draft uploaded to our class server space
Thursday, November 18 (by the end of class)
- original design plan
- all original storyboards
- final version of your site uploaded to our class server space.
- 3-4 page analysis of the process (hard copy)
This document should include a discussion of the revisions you made to your design after receiving feedback on the site draft from your classmates and me. Also included should be an explanation of what you were and were not able to achieve in the digital execution, a discussion of how you modified the site to fit your technical abilities while still maintaining the rhetorical objectives you established in your design plan, and what you would do differently if you had more time to work on it (and more time to improve your technical skills).
Resources
Below is a list of resources that will help you learn principles of visual and web design. There is also a link to download the software we will be using in class.
Web Design
W3 Schools online web tutorials
CSS Zen Garden
“CSS” stands for “cascading style sheets,” which is an approach to designing webpages. If you are interested in learning about style sheets and the design of webpages, this is a useful site—but it is also highly useful for considering how much the visual design of a site can affect our attitudes toward what we read. Click the “Select a design” option on each page to see the same alphabetic text presented in widely varying arrangements—and click the “Next designs” link to see listings of even more arrangements.
Before and After: How to Design Cool Stuff
Color
The Hex Hub (Hexadecimal color codes)
ColorSchemer Gallery
This site provides sample color palettes. You can view the hexadecimal code by mousing over each color.
Color Scheme Generator 2
Another tool to help you develop pleasing color sets.
Software Downloads
You can get 30-day free trials of Photoshop and Dreamweaver at the Adobe website.
