Website Redesign - 2013

It was long past time for an update for the old website. I can't expect a design to stay feeling current or fresh for too many years, and this one had gotten about as stale to me as possible. I thought it might make for an interesting blog post to document some of the design tweaks I made over the last two weeks of working on this, but things actually fell into place really quickly so there maybe isn't as much drama as I was hoping for.

Here's what my old website looked like - I think it was designed in 2010 or 2011, and was my 3rd major overhaul to my online portfolio.

I knew I wanted my new website to be a bit more dynamic, and re-focus itself as a place for people to come look at pictures of my work right when they enter - no digging.

As a more straightforward image displaying website, I had many ideas for full page scrolling photo galleries, and other flashy single page image viewers, but it turned out that I continue to be more drawn to a more structured style. I kept coming across three styles of websites that I thought looked awesome and could also work for my purposes.

Here's what my old website looked like - I think it was designed in 2010 or 2011, and was my 3rd major overhaul to my online portfolio.

I knew I wanted my new website to be a bit more dynamic, and re-focus itself as a place for people to come look at pictures of my work right when they enter - no digging.

My first inspiration is the portfolio of a Crytek Environment Artist, Simon Fuchs.

I've been drooling over his work for quite a while now, and I like how I get a full presentation of his art right when I enter. The horizontal slats give me a good idea of the content, while hiding most of the image and really making me want to click through. Once through, it continues to be upfront in its presentation, simply stacking a ton of beautiful high-res renders on-top of each-other This website really knows what it wants to accomplish.

I also really liked the ideas of displaying all my work on the front page almost like a Flickr search result. There are quite a few photographer websites that pull this off really well. Unfortunately when I started down that path, I realized quickly that I need to start making some more art at home - I simply do not have the required amount of content to pull off that look.

Additionally, I liked the idea of keeping a top navigation bar and maybe getting to show something off at a higher-resolution on enter, because we simply couldn't do that a few years ago. I really like these websites with beautiful full screen background images, I just didn't have anything I thought would hold up perfectly at that resolution, or wouldn't clash & be distracting when looking at other large images of work.

So I merged together some of my favourite ideas and knew I wanted a website where you landed on a number of images that displayed all my portfolio work. I wanted that landing page to have a top navigation bar, and a large high res banner. If I could get any sort of dynamic fanciness like making the banner move with me I'd be super happy.

First things first, I blocked out a large top banner, added some floating banner text, created the bones of a top navigation bar, and a center column for text. I'm pretty surprised how much of that initial nights work stuck through until the end - it was basically designed at this point, where did the next two weeks of evenings go?

I kind-of jump around in my work, so at this point I was interested in setting up all my text styles. Too often I get lazy and just end up formatting everything manually at the end - which is 100x the work of just setting up all my CSS exactly how I want them right off the bat. I've always been a sans serif guy. My favourite typefaces are Tahoma, Lucida Sans, Microsoft Sans, and of course Helvetica. I obviously wanted to keep all my body text super readable and modern and did land on a nice "typical Kevin" font for that - however I surprised myself by sticking to Times New Roman for my name in the banner. I then tied it in by making my Heading styles TNR as well. I tinted the background just a slight off white (into the yellow), and added some yellow to the active nav button. I think it looks pretty f'ing classy and a little less stale.

I was tired of looking at the grey banner so I searched through my portfolio to create my banner image. I wanted something that wouldn't be too distracting, had some depth, and was quite recent. I settled on this angled shot of the wall of the Mech Lab I created for Mechwarrior Online. It was still too much of a distraction, so I desaturated it almost fully and added a neat pattern fill to try and lock it to the background.

I thought this worked quite well but I didn't love where it sat, the width resolution was too small for high end monitors, I didn't like where my name had to compete with the bright railing. I also ended up adding some of the color back in and was extremely happy with the results.

With my banner and typefaces chosen I spent the next few evenings writing my bio page, creating a contact form, and beginning to fill my portfolio pages. I went through many different types of photo viewers; sliders didn't look good because the site doesn't make use of the full width of the screen, thumbnails opening to a lightbox didn't work because I wanted the page to look just as good with one image as it does with 30, so I settled on a clickable album that flips at 10 seconds, and has thumbnails if there are multiple images.

At home I my monitors only have a max resolution of 1440x900 so although I thought the center column was maybe a little too small, when I checked this page out at work at a much higher resolution I knew for sure I had to widen the center column signfiicantly. I extended it by ~25% widthwise and re-uploaded new minimum 1000px width images for all content and the front navigation buttons.

Lots of minor tweaking of colors, sizes, positions, and writing content followed the next few evenings. Overall I am quite happy with how the website turned out, and that I didn't need to redesign the whole thing half way through. I think it fulfills its main purpose of hosting my artwork far better than any of my previous revisions. There are also some fancy (for me at least) features like the floating nav bar that changes styles if you have super low resolution (like viewing on a phone, or in a windowed browser). I'm likely not 100% done with some minor tweaks, for example, I still haven't decided if I like the home page's navigation images as desaturated as I made them. Also, there is an eternal struggle with whether or not I want to keep this blog section here at all, they're pretty lame, its not like I add any content to it, and no one reads it anyway - on the other hand, it gave me something to do this evening and maybe gives you a glimpse at my personality. For now it stays. Feel free to comment or contact me with your opinions on the site, any bugs or typos you come across.