Personal Website and Portfolio

The Internet is a powerful tool that you can use to inform people about your work and yourself. For this project, you will create and publish an online portfolio.


You are all have different strengths and interests, so the specific content of your website will vary. However, some things all of you must include on your personal website and portfolio. These are:

  1. An about section that includes a statement that you write about yourself. This also can include information about your website.
  2. A resume that includes your accomplishments and is written in a format appropriate for your field.
  3. Examples of your accomplishments and experience in your field including things like: samples of your work, writing samples, images, or other ways of demonstrating your competence.
  4. A link to your blog.


Your site must meet the following criteria.

  1. Professional appearance. It can still be fun and/or playful but there should be no spelling or grammatical errors.
  2. Well organized.
  3. Easy to navigate.
  4. You must include links and they need to work.
  5. Links should be clearly understood as being links and should have different states including:
    • link
    • visited
    • hover
    • active
  6. Graphics and writing should be appropriate for the content of the page. Also keep in mind that this site should be able to be shown to anyone, including future employers. So, no offensive material.
  7. You must complete all Process Steps.

Attention must be paid to:

  1. Navigation.
  2. Hierarchy.
  3. Site/information architecture.
  4. Graphics.
  5. Fonts.
  6. Color.
  7. Valid and appropriate HTML and CSS.
  8. Writing for the web.
  9. File management.


The goals of this project are to demonstrate the skills you have learned in this class as well as your professional and school experience. You should be creative when doing this. These guidelines are the minimum requirements. You are encouraged to explore and create more than the bare minimum.

Process Steps

You must complete the following steps and turn in a process binder that has ALL of the steps written or printed out (reread this article):

  1. Research, Discovery, and Competitive Analysis
    • Identify the strengths and weaknesses of existing portfolio websites.
    • Who is your target audience?
      • What do they expect?
      • What do they like?
    • What makes you different from your competition?
  2. Exploration
    • Brainstorm.
    • Create lists of relevant words, topics, and phrases.
  3. Copy

    Sometimes it is easier to design when you know what you want to say and how many words it is going to take you. Doing this step at the beginning of the process will help you determine how you will want to structure your content. Things to consider:

    • Navigation titles.
    • Headlines.
    • Subheads.
    • Body copy.
    • The tone/mood of your website.
    • Your target audience.
  4. Thumbnail Sketches
    • Create small sketches that can literally be as small as your thumbnail, or as big as a couple of inches in width and/or height.
    • Capture the basic ideas for page composition, like header placement, column structure, and text alignment without focusing on small details too early in the process.
  5. Grey Box Method
    • Read this article again and make sure to do this step:
    • This will serve as your visual outline before creating your website design.
  6. Typography
    • After you have a few compositions that you like, create typeface and letterform studies.
    • Make sure to study multiple typefaces. Determine what typefaces look best together to create the mood that you desire on your website.
  7. Imagery
    • Research and locate imagery that your have the copyright permission to use. The printouts of the imagery that you are thinking about using can be in black and white or in color.
    • You must include the copyright permission in your process book. This printout can be in black and white.
    • The printouts of the final images should be in color.
  8. Composition/Mock-up
    • Work in Photoshop to create a mock-up of each type of page of your site before you start working on the HTML and CSS.
    • Include your type treatments, images, different hyperlink states, navigation, and all other visual elements that will appear on the various pages of your website.
    • The printouts of this step should be in color.
  9. Execution and Implementation
    • Save your images for web using the appropriate file format.
    • Markup your content as XHTML.
    • Define presentation styles with CSS. You must use an external style sheet(s).
    • Make sure the design is what you want. Check it in different browsers. At a minimum, it must work properly and look correct in the latest version of Firefox.
    • Validate your HTML. (This must be valid.)
    • Validate your CSS. (This must be valid.)
    • Make your website live.

Graded On

How well your website meets and exceeds the minimum requirements as listed in this document and any additional requirements given in class or through Basecamp. You will also be graded on the quality of:

  1. your writing,
  2. your design,
  3. your HTML,
  4. your CSS,
  5. your participation,
  6. and your process binder.

You will loose points if:

  • your website is frames based,
  • you use non-standard or proprietary elements or attributes on your page,
  • you do not use an appropriate DOCTYPE statement,
  • your HTML is not valid,
  • your CSS is not valid,
  • you don’t turn in a binder with all of the steps,
  • your website is not readable (your website’s layout, colors, background textures, if any must not obscure the content),
  • you use any technology that requires considerable download time (such as large images) or causes my web browser to crash,
  • your links do not work,
  • you do not follow all of the requirements in this document or any requirements that we discuss in class or on Basecamp.

No late projects will be accepted! If you turn it in late, you will receive 0%!