PORTFOLIO WEBSITE ASSIGNMENT

FINAL PORTFOLIO PAGE DESIGN DUE:

Friday, October 15th

WHAT YOU'RE GOING TO DO:

During this class assignment, you will design the home page for your course portfolio site and produce a web navigation map that will help you organize your site pages, information and links.

STEP #1 - RESEARCH:

You will begin by researching portfolio websites online to find page layouts and designs that you like. You should use these sites as inspiration for your final page design.
Keep track of the sites you visit and are using for design inspiration by copying the site's address in the address bar and pasting into a Word document. For each site visited, provide a short 3-4 sentence explanation of why you like the site in terms of design and functionality. You should provide a minimum of 4-5 sites as the research portion of the assignment.
Print out your research findings to submit with the rest of your portfolio design materials.

STEP #2 - ROUGH LAYOUT:

You will create a full-page sketch/design of your portfolio layout. This rough design will include:
Neatly drawn layout, with carefully placed graphic elements (buttons, shapes, title graphics, etc.). Make sure you use a ruler as required. Do NOT use pen. You should sketch out the design lightly with pencil, then add colour as required (pencil crayons, markers, etc.).
Title graphics and buttons should be accurately drawn. Try your best to sketch out the font you plan to use for your final page design.
See samples below for how to create a page layout. NOTE - your page design will be in colour!

STEP #3 - WEBSITE MAP DIAGRAM

Once you have your rough page layout completed, you will create a website map that shows how pages are organized and linked. See sample below. There are many ways to organize your site pages. You need to ensure that you create pages that allow you to showcase the following projects that you will produce during the course:

Your map should be organized to show how pages will be linked and will reflect the buttons/navigation tools you will use in your site.
You can use Word (or similar program) to create the web diagram. You will need to print a copy if you use the computer to complete this step.

STEP #4 - HOME PAGE CREATION

You will use Fireworks to reproduce your page layout sketch for your portfolio home page. The homepage design will include:

Well-designed title graphics and page layout
Appealing colour scheme
Navigation tools/buttons for all pages in site (including rollover buttons and/or interactive elements)
Page content:

Personal introduction - provide information about yourself (grade level, career goals, specific comm-tech skills/interests) - approx. 1-2 paragraphs
About the course - give details about the comm-tech course (refer to course of study - should include details about projects, software used, etc.) - approx. 1-2 paragraphs
Purpose of the website - short explanation of why you created the site and what content people can be expected to find when they browse the pages

You may also want to use Photoshop to create additional graphics for your page
You will export your final Fireworks page as an HTML document for use in Dreamweaver
Make sure you create the necessary folders to organize your portfolio content (subfolders to include Graphics, Media and Images)

STEP #5 - WHAT TO HAND IN

Research Page - printed results of web search (4-5 sites plus write-up)
Rough page layout - neatly sketched, 8.5 x 11" (use proper drawing tools, etc.)
Web Map Diagram
Project Folder (Portfolio) - includes Fireworks page, exported HTML page and images subfolder)

Portfolio Website Design