How to build a portfolio site

Introduction

What are the advantages of creating a personal portfolio website? It will help to:

• find your core strengths and weaknesses
• find your professional goals
• reach these goals by showcasing your work
  

Why would I create one now?

• peer to peer comparison / feedback from other students
• after graduation you might not have enough time or inspiration
  
• You can ask teachers to help, judge and inspire you.

You are the client

In order to accurately represent yourself you need to analyse yourself thoroughly.

Your portfolio can help you reach your goals but you need to find them first:

• What are your main interests within the (design) discipline?
  
• How do you work, what is your design process?
  
• What is the goal of the portfolio? (This usually reflects your desired career path)
  
• Write your own personal and professional biography
  

Write a concept document in which you collect all the information above
If you see yourself as your own client you can be more analytical and reflective which results in a more authentic and representative portfolio.

Where do you find inspiration?

A good portfolio's accurately represents the designer's quality, specialization and passion. Finding out what makes you tick can help out:

• What inspires you?
  
• What excites you in other people's work?
• collect designs you like and find out why you like them
  

Designers can be influenced by a variety of things:

• media (websites / tv)
  
• other design fields (architecture/ product design)
  
• art (paintings / film / photography / music / literature)
  
• nature / technology
• design theory

The biggest influence can be very valuable as an additional skillset.

The design process

Everybody works in a certain way, but most aren't aware of the design process:

1. concept document (concept phase)
   
2. information design or create flowcharts (structure phase)
   
3. programming or designing on the computer (use phase)
   

There are four main ingredients within website development:

1. Branding
   
2. Functionality
   
3. Content
   
4. Technology
   

According to the purpose and target audience some of these elements will have a higher priority than others.

How do I start with my portfolio site?

It is helpful to create a concept document with a describtion of your sites goal:

• showcase you and your work as a designer
  
• reach a specific target audience (companies looking for designers)
  
• make it easy to update (database system or manual updating)
  
• accessible (size in resolution and KB, easy to use, etc)
  

The objective of a portfolio is clear: showcase you work. But how you will present yourself and your work?

• focus on core specialization or present your (broader) skills in a balanced way?
  
• try a different design process to refresh your way of thinking
  
• Switch between the conceptual/structural and the graphical/functional approaches
  
• The best designs balances the ingredients according to the goal of the project.

Content of the portfolio

Only a picture gallery is unlikely to convince every potential client.
Besides your skills visitors would like to find out more about you as person and as a designer, are you:

1. communicative and reflective
   
2. know what you are doing (and talking about)
   
3. authentic and honest
   

Checklist of content:

1. Gallery of your work - with a description
   
2. Biography
   
3. your CV
   
4. Articles / Vision
   
5. Download / Making of / personal interest section
   
6. Contact page

A portfolio sounds like fun, but which projects will I expose there?

• everything you create, you can use for exposure
  
• try to make every project fresh and better than the previous one
  
• try different design processes, as this will result in more diverse work
  
• finish a (-small- school) project so it can be shown in your portfolio
  
• enter competitions, this will increase the quality of your work
  

Graphical style of the portfolio

The graphical style is the visual identity, the brand aspect of a website.
There are various graphic styles seen on the web:

1. Typographic minimalism
   
2. Metaphoric approach
   
3. Abstract
   
4. Illustration
   
5. Postmodern eclectic

There are only a couple of designers that can actually call themselves style innovators.
Inspiration is necessary but there is a fine line between 'being inspired' and copying:

• Find inspiration outside the web for the style concept
  
• True inspiration is acknowledging the original quality and energy, by developing it further
  
• Make sure you do not copy the outer shell of a inspiring site without adding value to it or using it appropriately and conceptually

Interaction design

Interaction design can be seen as the integration of all the ingredients into a coherent and communicative website. Navigation systems come and many shapes and forms:

1. Typographic: the name of the button relates directly to the interaction or content
2. Icons: arrows, icons, internationally recognized symbols and icons
3. Metaphor: existing element represented in an interface, like a phone, TV remote
4. Technology driven: intuitive and responsive experiences with a specific behaviour Link the 'behavior' and design of a navigation system to the concept or graphical style Design theory can help you to find a way to effectively link the site's ingredients together.

Interaction design - usability

The target audience of a personal portfolio is quite specific. There is room for innovation but keep usability in mind:

• designs are used not just looked at on the web
  
• find a balance between accessibility and experimentation / innovation
  
• knowlegde of usability is a must: Make clear you understand as a designer that you role is to communicate, not just make pretty pictures
  
• To know the usability rules does not mean you have to follow them literally The biggest challenge is to integrate an intuitive, usable (and innovative) navigation
  into the website efficiently.
  
• Storyboarding and mapping all the ingredients of your site is a big help

Technology

Technology makes the web tick, and at the moment the most popular and commonly used software for it is Flash:

• 98% of the web users have the Flash plugin - biggest multimedia audience
  
• Files sizes can be very small - fast downloads
  
• Easy to learn - even if you cannot program
  
• Best software to showcase your graphic, interaction, scripting and animations skills in an integrated way.
  
• Efficient integration of video
  
• Database and XML communication

If your main skill is interactive / realtime 3D there are better options:

• Shockwave (Director)
  
• Virtools
  
• etc.

Promote your site

Finally, when your website is finished, you can do many things to ensure you get plenty of visitors. You can submit your site to:

• search engines
  
• design websites
  
• awards
  
• magazines
  

Resources:

Design theory:
http://www.boxesandarrows.com
http://www.useit.com
http://www.guuui.com
http://www.usableweb.com
http://www.zeldman.com
http://www.directiondesign.nl/subtype
http://www.directiondesign.nl/sites/dina

Technology:
http://www.flashkit.com
http://www.builder.com
http://www.actionscripts.org
http://hotwired.lycos.com/webmonkey

Site promotion:
http://www.submitexpress.com
http://www.pixelsurgeon.com
http://www.styleboost.com
http://www.favouritewebsiteawards.com
http://www.goldenwebawards.com
http://www.linkdup.com

Books and magazines:
Dzone Magazine
Computer Arts Magazine
Visual Language, R. E. Horn
Designing Web Usability, J. Nielsen
Design for Interaction, L. Baggerman