envision yourself as a website
envision yourself
as a website
When I tried to envision my new portfolio site, I pictured a very clean design.
The visual focus of the site had to be on the portfolio work, this was my number
one priority, and accordingly, the focus of the design as well. With that in mind
I started working backwards – I did not want the page to
be cluttered up with video descriptions, or an overwhelming gallery of works.
I decided to split the site into 3 pages: One
for video, one for web designs and one for print
designs, each one sharing an almost identical
layout. This way, I always had the option of
sending an interested client a URL to just my
video work, or just my web work. I started
creating the video page as a basis for the other
pages.
I knew I would want to implement a
thumbnail display for my works, and have the
videos and images pop up in a light box. This
would help keep the page clean and free of
descriptions. Any information related to a portfolio
work would be dealt with in that work’s lightbox
display.
For the video section of the site, I wanted my
reel to be the most prominent element. While the
site will include most of my work, I understand
that most people don’t want to go through all of
my work, they just want to watch the compilation
reel. This is specially true if I plan on using the
site to try to garner employment. So the
design was always focused around making
the reel the most prominent element on the
page.
Initially I had the idea of a vertical navigation
menu, and you can see that in some of the
designs to the right. After some experimenting I
realized that the vertical navigation did not look
as good and most importantly created some very
weird spacing. The weird spacing issues eventually
lead to the idea of using side scrolling and in
the end I went back to designing on a very tight
grid with fixed top elements and side scrolling to
showcase my work.
the final design
The final design is based on a 975px width. The columns are 95px wide and have 12px wide margins. The main video area and the right area widths are based on the divine proportion. And come in at 642px wide and 333px wide respectively.
Once I was happy and done with the design, I thought about the other pages – the web section and still section. What would take the place of my video reel in those pages? I came up with an unorthodox solution. The same reel. I decided instead of making a video about video to try to make a design reel which highlighted most of my work. I’m happy with how it came out, and think that if a visitor comes to the site and only views the video, they can get a pretty decent idea of my work.
You can of course see the design live at my portfolio site: eferrer.info. Below are some more notes about specific elements in the design.
elements
Background
Image I had on my computer, if it is yours let me know and I will credit you, I honestly don’t remember where I got it.
Color
This was a theme I remember seeing on Kuler for a
previous freelance project I had done, I tried
searching for it again and couldn’t find it, so I recreated the
colors from memory. I’m really in love with the colors. For
anyone interested these are the color codes:
#FEFEFE, #a1b70d, #e44025,
#9e9e9e, #cecece, #000000
Font
Helvetica. I do think Helvetica is getting really over
used. I tried searching for another font, but I really like the
capital R’s in Helvetica and the font just fit really well. All
the titles are actually stretched vertically, so we could say
it is a modified Helvetica.
I took my time with the design of this site, and when I thought I had a design I liked, I would let it sit for a couple days and then come back to it. This is a great practice that often times is made impossible by project deadlines, but I believe it really helps. When I come back to a design a week later and still think there is nothing I can do to improve it, that is a design I can really stand behind. I as I look at the portfolio site, I think that is still the case. Except for some minor tweaks I would like to do – sigh, a designer is never done after all…
- ECF
Pingback: Coding A Portfolio Site | Design In Flux