• entries
    134
  • comments
    273
  • views
    173613

new portfolio thoughts on design

Sign in to follow this  

326 views

New Portfolio
Or: A few thoughts on the web design of my portfolio page

I finally sat down for a few hours and completely redid my portfolio and cv/resume like I've been meaning to do for quite some time. The problem, you see, is that my old portfolio showed who I was as an artist a year ago -- I need a portfolio that shows who I am as an artist today. Or, um, yesterday, because I don't update my portfolio every single day, obviously. Moving on.

Looking over my old portfolio, I'm amazed at the broken links and typos I found, to say nothing of unnecessarily baroque design that is, in hindsight, much more confusing than impressive. And the constrained size! -- I mean, seriously, anyone who is viewing a webpage on an 800x600 screen has bigger problems than deciding who to hire to do their artwork.

So: images are links, the new portfolio is on the left and the old on the right.



I'd like to elaborate on a few points of portfolio and web design that came to mind as I went through this process.

Layout

My old page had two separate panels of buttons, one for four main links, one for three different galleries. That's seven links in total grouped into two different places in the layout.

During redesign I noticed a number of areas that could be simplified; refactored, if you will. For instance, the "contact" and "freelance work" sections were saying the same thought in two parts in different places: "contact me to talk about work". So I put all of that into one section called "contact" that has both a paragraph selling myself and the email contact. Done.

As for the three different galleries, "game art" was the one that contained everything important, and while there were a few images in "digital painting" there was nothing at all in the "other art" section. The obvious move was to rolled them all into one link called "gallery".

The whole business with two sets of links in different places was an awful idea, I now realize. (Of course I can justify to myself that when I made my portfolio a year and a half ago, I didn't know nearly as much as I do now.) I think I made the two separate link panels because I love to make things complex for their own sake, I love baroque aesthetics. The layout design was made more for the idea of having a horizontal panel below the title and one on the side so it looked like a cool sci-fi control panel than for usability.

In my new portfolio page there is just one bar with four links under the title. The viewer needs to remember only one place on the page to find links to navigate the site -- and they're pretty obvious. Much better.

Navigation

When making games one must consider the number of dimensions the player has to conceptualize while navigating the game-world. In a one-screen game like Tetris, everything is right in front of the viewer. In Mario, the world scrolls in two dimensions. In Quake, the world is three dimensional -- important things can happen anywhere, and the player has to do that much more mental work to conceptualize what is going on.

The same applies to UI design: The simplest UI puts everything the user needs in front of them. But this is not always possible because a balance must be struck between usability and showing content, especially in an application that is as content-driven as a portfolio.

To apply this point to what I'm getting at: In my portfolio I've tried to limit the number of dimensions that need to be conceptualized as much as possible. The only way to move is to scroll up and down (and, possibly, to click on a thumbnail of an image to view a larger version) -- and all of the links are always at the top of the screen. Further, all interaction takes place within the bounds of common html -- no Flash or Ajax or whatever fancy stuff that introduces new, possibly unfamiliar procedures for navigation.

(I must admit, I rather loathe Flash-based webpages. People should consider themselves lucky that I even have Flash installed. )

Graphical Elements

I committed the same error of valuing complexity for its own sake with regard to the graphical elements of my old portfolio. I indulged in some extremely thick and complex pixel art borders around the whole content panel along with a fancy background effect. This is cool for showing off my skills, yes, (and may have been necessary when I had very little content with which to fill my portfolio), but the graphics get in the way of presenting the content of the portfolio itself, which should be the point of the exercise in the first place.

The old graphics are cumbersome and distracting, basically, and would do better as an entry in the portfolio itself than surrounding the portfolio. In short: My desire to show off through the design made the design cumbersome. This is an important point, people! All the time I see people (and myself) trying to show off their ability by making the interface for their portfolio what, to them, appears to be "fancy" (especially with incomprehensible Flash elements, as said). Or those thumbnails that don't show anything at all about the picture they link to in an attempt to appear artistic. Like this:



Never do that, please!
Or, to get back to confessing my sins, I shouldn't go using all sorts of unnecessary sections and links that I never fill with content anyway hidden in meticulous, opaque pixel work. One must resist the urge to over-design -- stay on message.

The new portfolio graphic (just one!) is far lighter weight but still, I think, pretty cool-looking. And it shows off some of my ability, sure, but also some restraint; Heh! Kinda. I more-or-less stuck to one color, one simple movement (horizontal), and some nice texture with interesting things happening to the color within a small range. For whatever it is, it is far more elegant than my old layout, that's for sure.

Coding

I won't go on about it because no one comes to be for coding advice, but in my old portfolio I tried some crazy stuff with css and did some rather poor php. It was, to follow my theme here, more complex than necessary and a poorly executed attempt to show off. At some point last year a friendly hacker emailed me to point out that my rather poor php opened my website up to an exploit, which is why I hastily converted the whole thing to pure html. Thus with the broken links and an unprofessional index page.
And my css file was a complete mess. Still is; I need to clean it up.

So yeah, it's fun to overshoot one's knowledge to learn how to do something new, but it's probably best to just do it correctly in an application you need to be functional.

Content

Content is the area I still have to really clean up.
I've somewhat taken a documentary approach of showing everything rather than showing a (best) selection of my work. This is not only a matter of my love for overly-complex aesthetics; I also need to quash my deeply help value of being fully honest through full disclosure and, instead, put my best foot forward so that I look better than I am -- or, to put it politically: I want to show how good of an artist I can be for you.

That said, I need to go over all of the old images (half of which I just ripped from my journal) and replace them with high quality files, add (informative) thumbnails in place of larger images, and cut down the amount of content to show only the best pieces ... which will also make navigation simpler.

And that's how it's done

Right; I still have to add a printable version of my cv/resume, make the contact section friendlier with a clickable email link, and clean up a few things -- for instance, making the artscum.net text into a link to the base domain, and my css file still needs that spring cleaning. But in all I'm much happier with how the page looks and glad to finally have my portfolio updated.

[And I'll update my head on this journal page to match the style of my new portfolio ...]

Back to game graphics posting next week, let's say.
Sign in to follow this  


0 Comments


Recommended Comments

There are no comments to display.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now