Site design decisions

| | | - februari 1st, 2010

The current version of this website has been online for a while now and even though it’s still work in progress I’m pretty satisfied with it. This article will focus on the reasoning behind the design and development of this website, which should give an insight into my usual design approach from start to finish.

Concept

The comparison above shows the huge difference between my old and new portfolio. Some people (including myself) might argue that the old website was more creative and the website itself obviously had a more of a unique feel to it. While this is true, the approach and reasoning behind the two websites are completely different.

The old website was created in 2006 as an attempt to get an internship at a design studio (part of my college education), since I carried a sketch/notebook around I figured I’d make a digital version displaying the major projects I had done the previous 2 years, it was meant to quickly give an impression of my abilities as a design student. every project had it’s own page and design, and for the global idea I kinda went for a “sitting outside reading a book” feel, which didn’t really work out, as you can see it’s pretty darkā€¦

Visit the old portfolio website

The idea behind the new design was to create an archive with all my previous work, and was meant as a way to document the projects in more detail, most of my projects aren’t just pretty pictures, theres a concept and a goal, and these usually require more background information, therefor I wanted to focus more on the process and less on the final result. I also needed a solution that allowed me to structure all the work for easier reference in the future.

Content

Since most of my work is visual by nature, sometimes animated and sometimes interactive I really wanted a way add a lot of media. I decided to host most of the media on the various media services available online, most videos are hosted on youtube and images are hosted on Flickr, which allows users to approach the website through different channels.

I also wanted to link my website to more social networks (Twitter, Facebook and LinkedIn) again to add channels through which the website could be discovered. Luckily most of these websites allow RSS feeds as part of your profile which makes it easier to spread your content throughout your social network automatically. Not necessarily channels that future clients would use, but a way to connect to fellow designers and developers who might request my services some day.

Structure

After deciding on what I needed, I started looking for the easiest solution, and since form follows function I did some research into various CMS and (advanced) blogging solutions, I eventually decided to use WordPress (same reason as most people, well maintained and documented, easy to use and lots of available plugins).

The structure dealt with 1 problem in particular. some of my projects consist of multiple parts, example: for the virus free generation hip hop tour I edited video, took photos, did the print campaign, maintained the website on the road and even wrote a thesis on Internet in Africa, Lots of different elements that in a way all deserve their own page, but also fit in a single project. As far as I know WordPress doesn’t really have a solution for this (other than using lots of tags) so I decided that featured projects would consist of whole projects, while portfolio items were individual activities like “print design for” “website for” etc. Since all these items would be searchable (by tag as well as keywords) it would cover all bases.

I also needed a personal ‘inspiration’ section, which would include my digital life (my tweets and flickr stream for example) but would also allow me to add items to the website that aren’t part of my professional portfolio (since I’m not a robot).

After listing everything I needed it was time to create some wireframes (first hand drawn and later in illustrator) and to get started on the design.

Design and Style

The fun part for most designer is the actual design work in photoshop and illustrator, and the same usually goes for me, but in this case it didn’t, the main problem I came across was that I didn’t want anything that distracted from the content, but at the same time I wanted add enough actual “design” so that the website wouldn’t end up being a blank page with some thumbs. The decision was to go for mostly white (95% white) with the R G B colors for every section, and different fonts that would increase the differences between sections.

  • Red and a more handwritten font for the more personal opinion and inspirational section.
  • Green for the contact section (this just felt right).
  • Blue for all the work related posts, a more neutral / cool color.

After 3 attempts I finally got the simplicity I was looking for, the focus was fully on the content and it still looked nice.

Development

The website was fully developed in Coda (XHTML, PHP and jQuery) and everything is W3 validated. I used the 960 fixed grid framework to align the content while developing the templates which was easily implemented. Extra time was spent on the typography, line height and font size in particular.

Revisions

short after the launch of the website I realized that I needed more freedom to design project pages (posts) because they all looked identical (the main reason for people not to use a CMS), but custom css insertion using the Art Direction Plugin ended up being a great solution.

To do

  • Add more content, even though most projects are on the website, a lot of them are still missing any content (screenshots, videos, text and links).
  • Find a good design quote or just remove the option.
  • The title “inspiration” might not be describing the content listed under that category right now, but it will in the future.
  • Redo the Twitter and Delicious widgets, not happy with the layout and design of the inspiration section, I’ll probably switch to a horizontal sidebar.
  • Think of a way to incorporate an interactive business card with the content of the website (probably using Augmented reality).
  • Finish CV page (almost there, won’t be public).
  • Work out the best client / billing solution for WordPress. WP-Invoice
  • Switch to HTML5?

Bookmark and Share

E-mail this story to a friend! TwitThis Digg Reddit del.icio.us Design Float DZone StumbleUpon Facebook Technorati Google Bookmarks Live Yahoo! Bookmarks Turn this article into a PDF! Print this article!

Related posts:

Leave a Reply

Name: (required)

E-Mail: (required)

Website: