Website Redesign - 2012

ChrisBinghamDesign.com Redesign
The personal website needed to be overhauled.

My goal in the creation of the first edition of my website was to be simple, unobtrusive. I wanted the viewer to be able to focus on nothing but the artwork. I was also set on using a cumbersome, and limiting slideshow to show my work. I came to the conclusion that a redesign was needed after looking at peer's websites, and using Google Analytics data. Users were not going to all of the pages because they were cumbersome to click through, and just to many in general.

The homepage below featured the full version of my logo, along with some of my "current" work. The viewer was required to click through the slideshow. I intended this to be a preview of what was to come, but it did not reflect that with the data.

The sub-navigation was uninspiring, and boring. It showed people where to go, but did not entice them to look at more work. If a category had more than one project, a page similar to this would list out those projects. This led to more clicks, and more time spent not looking at work.

The slides themselves were small and could not show crucial design details.

The contact page was the only place that a little of my personality was able to be displayed. It was still to rigid and static.

After experimenting with the Lightbox widget in Dreamweaver, I felt confident that I could successfully redesign my website around this versatile slideshow.

I made sure to sketch out my ideas before committing anything to code or Illustrator. The design I had in mind called for a large viewing area, better navigation, and most of all, personality.

The execution of the new website went pretty smoothly. I mapped all of the designs out in Illustrator, so that I would have accurate sizes, and could redesign on the fly.

I had to experiment a lot with the layout. I wanted the layout to be in the exact center of the page. I had to create the outer container and while it's easy to center it horizontally, it's a little difficult to center it vertically. I figured out how to do that here. Getting this right was essential because my site is going to be viewed on many screen sizes, and since the overflow is contained, it needed to look good on the largest screens.

The indexes design is simple, and precise. A random logo is not in the middle of the screen, and there is no lag in loading time. The links when rolled over turn white.

The portfolio, of course, needs to be the hero. The projects are split up into their individual sections. The projects within the sections also have their own thumbnails that go to their specific section of the slide show. If the viewer does not want to click in an out of the show a section title will appear. When a thumbnail is rolled over, it will highlight blue.

The links on the side provide a simpler form on navigation. The section title is larger, and when rolled over the links will turn blue.

The shot below this one is of the gallery in action. The slides will display a bit of information at the bottom about the particular piece.

I tweaked elements of the resume design from the previous version, but the overall layout is the same.

The fun and personality arise! The image in the background expands with the screen size, so the viewer is always exposed to the heroic designer. I provided much more personality information with the redesign.

The bonus page contains photography, and eventually sketches.

I wrote conditional CSS for both orientations of the iPhone. The design shifts to expose the full portfolio, since it is often difficult to scroll inside of a div on the phone. When it is flipped, the design changes slightly to better fit the screen. Also, without the benefit of hovering over links to expose them, I chose to color them on the iPhone version.