Web Portfolio
Scenario: You are a recent graduate of the SFCC Web Design program. A local newspaper has listed a position you are interested in. The company has asked that you send a cover letter, resume and a URL for them to review. You need to
  1. gather your past projects,
  2. determine which projects to re-vise and show,
  3. research costs in developing the online portfolio,
    • ISP
    • Hosting service
    • Domain name
  4. develop an interface.
  5. upload the final portfolio to a server for review.

a) gather your past projects, 
b) determine which projects to link / upload, 
c) determine which digital formats work best (.gif, .jpg. pdf) 
d) research costs in developing a personal website: Along with the portfolio examples you will need to: a) state your work objective, b) past work experience and c) technical skills.

The process you will use includes research, idea exploration, and concept development. You will show thumbnails to your instructor. The instructor will then choose 3 concepts to develop into 3 tight roughs.

Once the roughs, in the form of Photoshop layer comps, have been developed, the instructor will then sign off on the 3 roughs for you to show to "projects course instructor". .

Each rough should include the following: An index page and two other navigation areas of your choice.In order to make sure that the job is scheduled appropriately, functions well and all electronic files are configured correctly you will be in close contact with the internet service provider. 

The final digital files will need to be uploaded to a server for review.

Student Examples  2005    2006

View the lesson plan for this project.

Step 1: Meet with your projects instructor.

  1. Go to the Web Portfolio projects page and collect the project information:
  2. Print out a copy of the sign-off sheet
  3. Schedule a meeting with the projects instructor, who will be your account executive for this project.
Step 2: Meet with your process instructor.
  1. Go to the Web Portfolio process page and collect the process information.
  2. Schedule a meeting with the process instructor, who will be your art director for this project.
Step 4: Complete project research.
  1. Define the target audience.
  2. Define the client need.
  3. Collect examples of web portfolio sites..
Step 5: Develop thumbnails
  1. Create three different concepts for the site design.
  2. Sketch the site design in thumbnail form.
  3. Verify that your work meets thumbnail criteria.
  4. Submit thumbnails to the art director for sign off / approval.
Step 6: Develop rough layouts.
  1. Develop roughs using Photoshop or Illustrator.
  2. Rough layouts will be actual size flat art saved in in GIF or JPEG format.
  3. Submit roughs to the art director for sign off / approval.
Step 7: Submit rough layouts to the client.
  1. After the art director approves your roughs, meet with the client and present your designs.
  2. The client will sign off and approve the design to be taken to final stage.
Step 9: Produce the digital comp.
  1. Create all images using Illustrator and Photoshop.
  2. Create a functional site using Dreamweaver.
  3. Make backup copies of all files after each work session..
  4. Have "DIGITAL COMP CRITIQUE / PEER REVIEW" of your portfolio site design.
  5. Make appropriate revisions.
  6. Copy all final documents to the server folder(s) specified by the client.
  7. Make an appointment with your art director for sign off / approval.
Step 10: Verify correct file preparation with your lab instructor.
  1. Using the web checklist have a "TECHNOLOGY PEER REVIEW" of your project files before meeting a lab instructor
  2. Make an appointment with your lab instructor to sign off on the following:
    • hand in studio (lab) time sheet
    • show back up filing system
    • discuss file organization and naming conventions
    • discuss learning strategies
  3. Verify:
    • Correct raster file sampling and preparation.
    • Correct font choices and styles.e.
  4. Submit the completed checklist to your lab instructor for approval/ sign-off.
Step 11: Submit final comp to the client for sign off / approval.
  1. Project should be linked up to the roster page provided.
  2. Project should presented using the html template provided.
  3. Client should receive all digital documents on the server as specified by the client.
Step 12: Fill out self-assessments:
  • Projects
  • Process
  • Lab