Project Objective: Building an online portfolio site.

“It doesn’t matter how many glowing references you have or how impressive your work history, no one’s going to be interested unless they can see what you can do. And a design portfolio website is the easiest and quickest way to showcase your work.”

– Creative Blog

A portfolio site is all about promoting yourself. You are a brand, and your name is a brand name. No one is going to know about your brand unless you get it out there; and if you are a graphic designer, it’s essential that you have a good portfolio website.

Project Requirements:
• Entry page (index.html)
Please do not use Flash animation on your entry page. Having a flash splash page will actually hide your content from search engines, making it much slower to be cataloged and found by others.
• Intro page
• Resume page (HTML5 code)
• PDF resume and Word format resume
• Portfolio page(s) [JavaScript slideshow(s)]
• Contact me page, including telephone number, an e-mail address and a LinkedIn link

Project Duration: 3/28 ~ 4/30 (4 weeks)
Project Deadline: April 30, 2013

Project Process:

1. Search on professional portfolio sites, which inspires you;
2. Collect your high quality works, and prepare those images for your online portfolio;
3. Design a logo for your portfolio website and an optional tagline in your header section;
4. Design a PDF resume
5. Create your domain: http://www.godaddy.com | http://www.ixwebhosting.com
6. Design the page layouts with multiple columns and typographic hierarchies;
7. Build a usable interface, a friendly navigation, and a CSS3 file for the entire web site;
8. Apply one of the JavaScript slideshows to your online portfolio;
9. Address an easy-going contact information
   (could be a fake contact info for the project);
10. Validate the CSS and all HTML5 pages by W3C Validator;
11. Upload the finished website to your web space for the final presentation

Design Tip:

•  Write clear messages on your portfolio site

1. Express what you are good at
2. Express what you want to be good at
3. Inject a bit of personality
4. Add it to your site so it could be one of the first bits of information people read
5. Makes it easier and direct for people to learn about you and what you can do for them

• Create a professional-looking portfolio (interface, slideshow and page layout)
  

1. Site Logo Design
2. Banner Design
3. Navigation and Interface Design
4. Typography Design
5. Information Design
6. Slideshow Design
7. Resume Design

Your every individual work in your slideshow may be good, but if your design around the messaging and works is poor, it will reflect badly on you. Stick to your strengths and consider the following as a guide:

1. Information Hierarchy: Your name
2. Elevator Pitch: Your simply stated elevator pitch without mistakes and ambiguity
3. Work Selection: Your BEST works
4. Access: Quick and easy access to your work, and more information on your experience and abilities
5. Problem: A common mistake that non-professional designers make when creating their first interface is to place a visual design above interaction design and usability. Your site needs to excel in both disciplines. Try to avoid great looking interfaces that are confusing to use.

• Add clear descriptions of each work

1. Project Title
2. Project Duration
3. Client Name
4. Your Role and Credits for Contribution
5. The Brief
6. Your Solution
7. Insight and Result
8. Relevant Links

Consider an effective structure to get an idea of how above elements tie together. Describing your works in the captions to each piece shown in your online portfolio is a great opportunity to tell a reviewer about your capabilities and thought processes.
You should include the above important information, but each of these points can be described VERY succinctly. A reviewer scanning a paragraph quickly is looking for key facts, not a novel. The descriptions of your work are an excellent place to include the words that search engines may find you.

•  Find a unique concept for your self-promotion site

A concept can be many things. It could be a visual metaphor where the interface elements become props in a scene that mimics some aspect of real life. Or it could be something altogether alien. A concept can be whimsical, illustrative, minimal, or eclectic…The possibilities are endless.

– Lan Clazie

 

Main Framework Categories

1. Gallery View (the most common type of portfolio structure)
2. Scrolling View (the vertical scrolling view is the native format for blogs)
3. List Navigation

In Face, most well-designed portfolios are combinations of more than one type.

The Core Elements of a Professional-looking Portfolio Website

1. Good typography
2. Usable and well-designed interface elements
3. Good balance and harmony on color and layout grids
4. Clear information hierarchy
5. Clear identity across the entire site, including your name in a consistent and prominent location

Common Mistakes in Designing a Portfolio Website:

1. Poor navigation
2. Poor graphic design works or photographed art works
3. Too many fonts
4. Insufficient text and content
5. Excluding a telephone number
6. Hiding the email address
7. No contact information of any kind
8. Background music playing automatically

Project References:

• Create the perfect design portfolio: 30 pro tips
• 10 Steps To The Perfect Portfolio Website
• 10 Essential Tips for Creating that Killer Portfolio

• 50 Creative Portfolio Designs
• 50 Designer Portfolio Sites
http://coolhomepages.com
http://csselite.com

Previous Student Works: http://pxstudio.us/student-work/portfolio/index.html