Designing a basic student portfolio

Supporting links

• Shadowbox, the platform we're buiding our portfolios on.
• Sample dummy files you can use to complete this workshop.
• View the working example.

A big mistake design students make is to wait until their senior year to develop their portfolios. Excuses include:

• no clue how to go about building one
• a feeling that the work is of inadequate quality
• general disorganization: projects are lost, poorly labeled or broken into multiple folders/drives
• too busy with other schoolwork or just plain laziness

After taking this workshop, you will have no excuse. You'll learn a simple system for building your online portfolio. I'll show you how quickly improve your projects and properly save and archive them. As for time management, that's up to you.

Organize your content

Start by organizing the content you wish to put in your portfolio. Make a new folder on your desktop to gather all of the items you want to use in your portfolio. Keep in mind that this will need to be backed up to a very prominent and permanent place.

What kinds of files should be in here? Over the course of your studies you'll have numerous folders containing project work, hopefully backed up to a thumbdrive or your student server space. If you can't locate items, ask your professor. Copy these files into your portfolio folder.

By now you should be familiar with the idea of some files being source files and some being output files. Examples:

Your portfolio can only show output files, but you'll need the source files if you want to make any adjustments. Never EVER make edits to an output file, unless it is ABSOLUTELY necessary. In many cases, output files are "lossy", meaning some quality has been compromised for substantial compression, and editing them makes them even worse. ALWAYS edit source files.

When preparing work for your portfolio, remember the feedback from your professor/classmates/peers. If you don't remember the grade and feedback you got, show your work now. Find a professor or talented fellow student and ask for their honest opinion. Think about the grade you got; if it wasn't an A, it's probably not good enough for your portfolio.

Your goal is to prepare at least 10 projects that are portfolio quality. These can be logos, ads, illustrations, altered photographs, collateral (brochures/pamphlets/magazines), websites, flash games, animations, videos, 3D models/animations.

Generate your output files

Open your source files, resize them to fit in an 800x600 space, and save for web. Choose gif for images with few colors, like posters and logos, and jpeg for photographic images with continuos tone. If you are presenting a series of images, like stationary design, try to put all the elements up on one output file.

Do not show just one logo; you should have at least 5 decent logos, and show them all on the same output file. Open each one separately, copy and paste them into a new source file, arrange them nicely, and save the output file.

Output files should be as small as possible while still looking good. Generally, you want to show your piece but not take over the viewer's screen with it. A good target size for .jpg, .gif and .png files is 800x600 pixels, under 200k.

Follow good naming conventions on your files. Name them with memorable terms, e.g.--instead of calling somehting ad1.jpg, use griffins_winter_promo.jpg.

If you have websites you want to include with your site, make sure to take good screenshots of them. Do this on a mac by visiting the site, making your browser window as small as possible while still showing as much of the site as possible, and hitting shift-command-3. This will put a picture of your window on your desktop. Rename it website_screenshot.png. If you want to compress it, you'll need to open it in photoshop and save an output file called website_screenshot.jpg.

Shadowbox does enable putting the actual website in your portfolio. Be carful though; if the site isn't hosted on your server, you run the risk of it being pulled down or redesigned without your knowledge, and the wrong website showing up. Grab a few screenshots just in case, and make sure you have the site backed up to your local drive.

Make your thumbnails

This part is very important. Thumbnails give your audience a glimpse of the portfolio piece they will be viewing. Since they are small, typically 150px or less, they can't effectively show your entire piece. Therefore, your source files must be opened (if they are videos/interactive, screenshots must be taken at appropriate times) in photoshop and effective crops must be made. Here's a technique:

Select the crop tool. Type in 100 for the width and 100 for the height. Click on your image, and move/drag the cropped area around until an effective area is chosen. Hit enter to apply the crop. Save your image for web, choosing either jpg or gif format, depending on the amount of colors in the image (gif for a few like logo, jpg for a lot like photo). Call it the same name as the large image, just add t or thumb to the name (griffins_winter_promo_t.jpg). Be organized; put all your images in a folder called "images" in your portfolio.

Design your portfolio page

We are going to build a basic, online portfolio using html, css, and a wonderful media viewer called Shadowbox. Let's start with the basic code for our portfolio:

Here is the starting html code. , copy and paste this into the new file:

Save the file as index.html into a folder called portfolio.

By default, shadowbox can only display images. So you need to add more players in the code above, where you see:

Inside those parentheses, you add {[parameters]}, so that it looks like:

You can add lots more parameters, or options, to make your slideshow unique, e.g., you can change the background color of your slideshow as follows:

Go to http://www.shadowbox-js.com/options.html for a list of options.

Notice how I put gt and iframe in there, each inside double quotes and separated by a comma? Those are called players. You need to add a player for each type of content you'll be displaying in your portfolio.
Here's the list of available players:

Now for the css:

Save the file as style.css into the portfolio folder.

See all those placeholder.jpg and placeholder_thumb.jpg references there? Change those to the names of your output files and thumbnails. Change where it says "My Image" to the title and description of your choice.

Save and test your index.html file often.

You're done! Except that your portfolio looks exactly like everyone else's. Now it's time to customize. Change the background color; try adding a graphic. Play around with the format of your thumbnails. If you don't like a grid, try lining them up horizontally. Play with some shadowbox options. Customizing the look of your portfolio will not only make it more unique, it will improve your coding skills, which are in huge demand these days.