• If you are citizen of an European Union member nation, you may not use this service unless you are at least 16 years old.

  • Buried in cloud files? We can help with Spring cleaning!

    Whether you use Dropbox, Drive, G-Suite, OneDrive, Gmail, Slack, Notion, or all of the above, Dokkio will organize your files for you. Try Dokkio (from the makers of PBworks) for free today.

  • Dokkio (from the makers of PBworks) was #2 on Product Hunt! Check out what people are saying by clicking here.


Portfolio Website Design

Page history last edited by Mr. Stemmler 11 years, 9 months ago





Friday, October 15th


  • 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.


  • 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.


  • 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!





  • 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:
    • Fantasy Card (graphic design)
    • Camera Manual (desktop publishing & photography)
    • Bullet Movie (audio production)
    • Personal Logo Design (graphic design)
    • Lightwave (3D animation)
    • Newscast (video production)
    • Web Site Creation (Dreamweaver, Fireworks, Flash)
    • Personal resume site (optional)
  • 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.




  • 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
    • Use of images/graphics to enhance page appearance/appeal for user
  • 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)



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




Comments (0)

You don't have permission to comment on this page.