Let the Web do the Work: Building an Online Portfolio

---

July 24, 1998

Greg Melander

Contents

But Where's the Leather?
Why Function and Form Go Together
Take the Show on the Road
Every Designer Needs an Agent

Wrapped in a sleek vessel of code, my design collection acts as an insomnia-ridden, workaholic agent, 24 hours a day, seven days a week.

But Where's the Leather?

I wanted to communicate with other artists, but I am tucked away in a state where cows outnumber humans. I also wanted to keep ahead of breaking technology and experiment online with my design and identity philosophies. (Secretly, I want a fancy creative director in New York to lose sleep over the possibility of great design coming out of Idaho.)

I wanted to display my portfolio for people to look at, and I decided to see whether a Web portfolio could do some work for me -- while I fished, flew a kite, or drummed up more new ideas.

After six months of showing my portfolio online, I believe the results are irrefutable. Lose the traditional leather case filled with paper and slides. Replace it with an intriguing site, and watch your career as a design guru come to life.

Back to top

Why Function and Form Go Together

I had a simple problem. My portfolio includes a lot of pictures. Before I even thought about what colors I was going to use or what images to put where, I needed to answer some fundamental questions about the function of my site. I decided to use a frameset for a couple of reasons. First, some information (the portfolio pictures) would change, while other information (the navigation) would always be visible. Secondly, my portfolio images would seem to download more quickly in a frameset. After the top and side navigation had downloaded, the only thing left to download would be the portfolio images.

I wanted to create a layout that seemed to break the rules of HTML. I accomplished this through a variety of methods. In each frame, I placed transparent images on top of a background color. The left navigational frame has a background color on the bottom, then a background image with a transparent section on top of that, and finally transparent images on top of the background image. I made most of the images transparent, so they would match the background color perfectly around the edges, and would look seamless to the eye. I also wanted to create the illusion of a bent frameset -- something to catch the viewer off guard. Most importantly, I wanted it all to download quickly.

I included JavaScript mouseovers to let people play in the navigation a bit. As people mouse over the navigation, they actually learn the navigational system. I wanted to keep it simple, because it is easy to let a bell or whistle get out of control.

Finally, I came up with an identity that worked for my content and my target audience. I thought about what I like, and what the viewers might like to see on my site. It really was that simple. I thoughtfully decided on colors and images. The coding of all the pages did take a while. I divided it in large chunks, so I could get major sections done all at one time.

One last note: The naming of image files is very important when you have a lot of images. I came up with a scheme for each section or type of graphic I was working on. For example, the top navigational images were nw_illust.gif, where n stands for navigation, w stands for white and the _illust stands for the section to which the link goes. This naming convention helped me organize the images better.

Form and function go hand in hand on the Internet. My advice to designers would be to think about function just as much as you do form. One cannot solve any problem without the other. Great site design depends on pushing the limits of form and function.

Back to top

Take the Show on the Road

Turning the concept of an online portfolio into reality takes more than mere HTML. I also summoned up a keen sense for guerilla marketing. Northlight.com was built on the following premises:

1. Know your audience. Even if your end goal is to bring in clients, keep yourself honest by targeting your peers. I aim my online portfolio at both prospective clients and other designers.
2. Don't make them stand in line. Work within the limits of the Web to design an engaging, self-evident interface. As with any retail environment, employ innovative visual tricks to mitigate download times. For my portfolio, I set the mood with simple, logical navigation in borderless frames. As an image loads, I tell its story. The feeling is relaxed and friendly.
3. Strike up a conversation. I broke the ice and took my initial Web plunge by alerting like-minded sites of my whereabouts, winning contests at Macromedia, and wearing stylish Northlight.com T-shirts. When you involve your visitors in your site, as I did while designing my logo, you give prospective clients real-time insight into your problem solving skills. Invite visitors to spread the word with the "send this page to a friend" feature. Then get ready to promptly reply when clients put out feelers and design students and peers bounce questions off you.
4. Make it personal. It's obvious: Do what you love. Scan, photograph and upload only the work that resonates, not the whole kit and caboodle. If it bores you, it will definitely bore your audience. All the common-sense rules apply: Change your content often, keep it relevant, and make it fun.

Back to top

Every Designer Needs an Agent

Relax. Analyze your log files. Scratch a fledgling design itch. Lovingly tend to your inbox. It's time to reap the rewards of the Internet:

• Word of mouth is the best form of marketing.
• Quality design attracts quality clients, which saves you from pounding the pavement.
• Clients are hip to instant gratification. Let them type in a URL and get a feel for who you are and what you can do for them.
• You can live wherever you want.
• Design is driven by trends. There is nothing better than showcasing your work with a cutting-edge medium.

Greg Melander is a graphic designer/artist with all the trimmings. He has been designing on the Internet since 1995. Today, he uses traditional tools along with the latest technology to create a host of content. Northlight.com is his online portfolio of design and new media.

Photo Credit: PhotoDisc