Art-420 Project-4: Portfolio Site

Posted by: Ping

Project Objective: Building an responsive portfolio site for self-promotional purposes

“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 Strategy:

  1. Find a good concept for your 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
  2. State clear message on your site
    • Express what you are good at
    • Express what you want to be good at
    • Inject a bit of personality
    • Add it to your site so it could be one of the first bits of information people read
    • Makes it easier and direct for people to learn about you and what you can do for them
  3. Address an easy-going contact information
    (for your personal privacy, you may put a fake contact info in the project)
  4. Build impressive slideshows in your portfolio pages
  5. Give a clear description
    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.
  6. Contain some of the following information below your work
    • Project Title
    • Date Range
    • Client Name
    • Role and Credits for Contribution
    • Insight and Result
    • Relevant Links
    • Awards
  7. Create a professional-looking portfolio
    (user interface, slideshow and page layout)

    • Site Logo Design
    • Banner Design
    • Navigation Design
    • Responsive Design
    • User Interface Design
    • Typography Design
    • Information Design
    • Slideshow Design
    • Resume Design

    The Core Elements of a Professional-looking Portfolio Website

    • Usable and well-designed user interface (and navigation)
    • Good balance and harmony on color and layout grids
    • Clear information hierarchy
    • Clear identity across the entire site, including your name in a consistent and prominent location
    • Dynamic slideshow(s)
    • Legible typography

Create your portfolio site step by step:

  1. Research on professional portfolio sites, which inspires you
  2. Prepare your art works
    • Collect high quality (jpg format) works you want to showcase
    • Unify the size of each slideshow image
    • Annotate each work
  3. Get your own domain and online space
    The Top 10 Domain Registrars
  4. Personalize your portfolio site
    • Design a logo for your portfolio site in the header section
    •  Write a brief biography
    • Design an online resume in html, pdf, and word format
    • Achieve the most personalized appearance possible
  5. Create a usable user interface, and a friendly navigation
  6. Build the page layouts in grid structure and multiple columns through a clean and valid external CSS
    Consider an effective structure to get an idea of how important elements tie together
  7. Control typographic hierarchy and color scheme
  8. Choose your favorite jQuery slideshow style to showcase your art work
  9. Upload your portfolio project to your personal website
  10. Validate the CSS rules and all HTML pages via the W3C Validator
  11. Correct HTML errors and CSS errors
  12. Review and test your site on multiple browsers

Problem-1: 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.

Problem-2: A common mistake that non-professional designers make when creating their first user 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.

Avoid some common mistakes in designing your portfolio website:

  1. Poor navigation
  2. Poor graphic design work or fine art work
  3. Too many typefaces
  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

Detailed content and flow of your portfolio site :

  • 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 (home page, but do not name it “home.html”)
  • Resume (HTML) page
    Plus a PDF resume and a Word format resume
  • Portfolio page(s)_choose one of the following options:
    1. Create JavaScript slideshow(s) using jQuery, Fancybox, or Lightbox
    2. Create and add dynamic content using Dreamweaver CC
    3. Create slideshows using Muse CC
    4. Create or redesign a WordPress theme
  • Contact page, including telephone number, an e-mail address and a LinkedIn link

Date Range: 3/20 ~ 4/22 (4 weeks)
Project Deadline: April 22, 2014