Web Media – Project Two

I will be posting my class web media notes on how to make a portfolio website here:


Project 2: Create an online portfolio.

Brief Checklist:

  1. Document all work, planning etc. on your blog.
  2. Gather min. 8 pieces of art.
  3. Each piece of art needs a description of 100 words. min.
  4. 500 words outlining your style of design and motivation.
  5. Site must include 150 words about yourself.
  6. Must have a header including your name.
  7. Consider links to your blog e.g blog and social media.
  8. Include contact details e.g email, contact form.
  9. Plan and structure your site around all content.
  10. Make a prototype.
  11. Develop your prototype.
  12. Build your site.
  13. Test your site.

Weekly Plan:


URL and Hosting:

Purpose of your website:

Purpose Brainstorms:

Purpose mindmap

Site planning questions brainstorm:

mindnode mindmap

Target Audience: Other designers and people looking for a graphic designer.

Purpose of my website: I am making a portfolio website to showcase my work and draw in potential freelance clients.

Content Manifest:

Work i have done to date brainstorm:

I brainstormed the work i have done to date so i could figure out what images i would need.

mindnode mind map

My website’s content:

TOTAL: 22 images:

  • 2 web images
  • 6 graphic design images
  • 8 photography images
  • 6 multimedia images

Header including my name.


  • About me page text of 650 words.
  • At least 50 words description for each piece of artwork

Main Nav Pages:

  • Home
  • About
  • Portfolio
  • Blog
  • Contact

Portfolio main categories:

  • Web Design
  • Graphic Design
  • Photography
  • Multimedia


Blog and email


Site map:



Below is a link to a post where a researched unique sites.

research into websites and portfolios:

Wire frame:

Wire Frame Template, This will be my basic layout for all pages. the only thing i will be changing is “The main content of page section”

wire frame template

The is the wire frame for the Home page and the portfolio page. They will both be the same.

Home and portfolio wireframe

About page wireframe:

About page wireframe

Contact Page Wireframe:

Contact page wireframe

Thumbnail pages for all portfolio categories will be the same layout based off this template.

Thumbnail pages wireframe

Single page images wireframe:

All these pages will be the same, the only thing that wil change will be the picture. I also want you to be able to push the picture and view all pictures in a slideshow as well.

Single pages images wireframe

Website Layouts:

I chose to go with a 2 columned layout in some pages instead of sticking to my wireframes, i felt visually it was stronger to have the nav bar all together than split up on 2 sides which would be too confusing for the viewer.


This was the first challenge of getting all the divs set up.

On of the biggest problems i had was the rollovers om my nav bar. This was very difficult as they were images above the nav that were of all different sizes.

This is my original designed image, but i have decided to tweak it a bit, because it is not how i want it to look i think it looks a bit amateur like this.



2 Comments (+add yours?)

  1. sherrylkiely
    Nov 11, 2010 @ 08:19:28

    Hey is this it are you done here I think not bahhahahahahah


  2. angelcakes45
    Nov 11, 2010 @ 08:24:33

    hahahah i said i was half way hahahhaah


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: