personal website

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 manifesto, poster, 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

Tuesday, March 9

1. Design Plans
2. Mood Board and 1-page explanation

Mood boards are used by graphic and industrial designers at the beginning stages of a project to focus on the emotions they want the product they are designing to evoke in users. Just think about how different the image of the Mac (sexy, hip) is from that of the standard issue PC (boring, nerdy), and you’ll understand what designers are concerned about at the beginning of the design process. Mood boards also allow designers to concentrate on the image of the product before focusing on technological constraints such as the cost of materials or the laws of physics (for example, you can’t put a spinning hard drive and all the other components of a computer in too small of a case or it will overheat). For this project your main constraints will be time and technological ability.

Your mood board should answer this question: what personal image do I want my site to evoke and what colors, textures, and shapes might I use in my design to create that image. Start by brainstorming a list of adjectives that you would like people to use to describe you. Next create a collage using cutouts from magazines, scraps of paper or cloth, and other small objects that you think would evoke those adjectives. Your mood board need not be more complicated than a cut and paste collage done on a plain piece of 8.5 x 11 inch paper. However, if you use cloth or other weighty objects, you might want a piece of cardboard or foam board. For examples of mood boards, visit this page of the Design Skills website.

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?

Tuesday, March 23

1. Storyboards (one storyboard for each page of your site)

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.

Tuesday, April 6 (project draft)

1. mood board
2. original design plan
3. all original storyboards
4. first draft of your site uploaded to our class server space (we will do this in class, so bring your files with you on your flash drives).
   The site need not be executed exactly as storyboarded if technological know-how prevents it. However, all pages of the site must be present in a modified, and at least partially complete form. In other words, the storyboards should represent your site as you envisioned it and the HTML files should represent what you were able to build with the knowledge learned thus far.
5. 2-page analysis of the process (hard copy)
   This document should explain any changes you think you will make to your original design plan as you continue to refine and build your site, discuss any technical difficulty you had in building the site thus far, and articulate what you will need to learn how to do in order to continue building your site.

Final exam time: Tuesday, May 11 3:40-5:40 pm (revised and final website)

1. mood board
2. original design plan
3. all original storyboards
4. draft analysis paper
5. final version of your site uploaded to our class server space. (You will have class time to do this)
6. 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

Web Style Guide

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.