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:

Site planning questions brainstorm:

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.

My website’s content:

TOTAL: 22 images:

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

Header including my name.

Text:

• 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

Links:

Blog and email

CardSort:

Site map:

Research:

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”

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

About page wireframe:

Contact Page Wireframe:

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

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.

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.

Progression:

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.