For this project I knew I wanted the design to be clean, the visual focus of the site had to be on the portfolio pieces, this was my number one priority.

With that in mind I started backwards- I knew I would have to implement some sort of thumbnail display for my works and I would want the videos and images to pop up in a lightbox. I also wanted my reel to be the most prominent element on the video section of the site. 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.

This led me to a structure of 3 pages, one for video, one for web designs and one for print designs, each one sharing a very similar layout. I started creating the video page as a basis for the other ones.

Initially I had the idea of a vertical navigation menu, and you can see that in some of the designs below. After some experimenting I realized that the vertical navigation did not look as good and created 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. You can see it in the final design below.

Portfolio Design

Portfolio Design

Portfolio Design

Portfolio Design

Portfolio 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 out to 642px wide and 333px wide respectively.

Some elements of the design…
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.
Font: Helvetica. Not only because I recently saw the documentary. I really 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.

Final Portfolio Design

Final Portfolio Design Grid Overlay

Color Theme

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.

Other Entries Related to this project are:
Building & Branding Myself On The Internet

It’s a difficult thing to sell yourself as a designer. The first step is to envision yourself as a brand. Your job even before you start designing is to convince your employer or customer to choose you over everyone else. I believe one of the most effective ways to do this is to create an online presence.

Online presence includes:
Blog Site
Social Networking Accounts
Portfolio Site
Participation in Community Sites.

I’ve decided to redesign my web presence. This includes two of my websites and I also plan to try to make an effort to connect to designers and people who inspire me through social networking. The first site is my personal portfolio. It was designed almost two years ago, it hasn’t been updated and I’ve outgrown the design. Not to mention the code is real sloppy and it is not a representation of my best work in web design.

The second site is this blog. DesignInFlux has worn many hats but for the past 8 months has been offline. I am going to transform it into a personal blog for my creative projects. The goal of this blog is to keep me motivated to always have an ongoing personal creative project, at least in theory. And also to talk about these projects. An integral part of learning new things for me has always been writing or explaining them. Even if nobody cares to read what I’m writing.

A lot of creative individuals have a similar web presence and I think its a great way to brand yourself and really sell yourself as a designer.

I wanted both the blog and the portfolio site to be cohesive, and navigation between them seamless. A very similar if not identical layout. Both sites will be retaining their individual domain names. I want to keep the eferrer.info address as my portfolio and my previous blog at dinflux.com already had an established web address with plenty of history and SEO power. This should pose no problem and the site would essentially jump from one URL to the other without skipping a beat, the sites would also be hosted on the same server so the visitor would never run into one site being down while the other was up.

That is the plan, to build something I’m proud of. I’m in it for the long haul, not for the money from ads or for meaningless traffic. The way I had read about years ago. You write about what you care about, and the traffic will come.