blog

Changes come...

...keep your dignity

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.  

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.

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.

See the light in the distance

... ten seconds from sleep.  If you blink, you could miss it.

I stumbled across the 2012 Valve Employee Handbook online a few weeks ago and, unshockingly, it is brilliant.  The fundamental ideas behind every single thing I read, watch, and play from Valve are perfect, so of course the Handbook would be too.   

"A fearless adventure in knowing what to do, when no one’s there telling you what to do" 

valve_handbook.jpg

Valve Handbook (direct link to .pdf)

Their well documented, "unique" (to put it mildly) approach to game design is flawlessly reflected in the corporate culture at Valve.  A hundred miles past the "trailblazer" line, this is an idiology that requires a full devotion to the idea that your employees are your company.  Once you are fully on board with that idea, it is pretty easy to see how all these other whacky ideas would evolve naturally, but I'd be shocked to see even a quarter of them being allowed to even sprout in any other company.  

This is a creative culture and flat reporting structure that many game companies claim to have, but when you see it fully realized it is painfully clear how far ahead of everyone else Valve actually is.  

One day Valve.... one day...

You can't push it underground...

...you can't stop it screaming out.

This is an oldie, but a goodie. You can tell because it is in 4:3 and makes this entire page look like crap. Anyway, still one of my favourite TED talks, aspect ratio aside. Intelligent, future friendly architecture & design, with many applicable ideas (a rarity in this field, even today) - and all of this was said 7 years ago.

Edit May 1, 2013 - So that link died, here is a better one anyway:

It took me all this time...

... to get, to where I said I would never be.

Manchester Orchestra.

One of the best music videos I have ever watched, and I've had the song (and latest album) on heavy rotation for the last few weeks.  You should watch it and like it too, before they become more popular and you no longer feel like you listened to them before it became cool to listen to them... oops too late. 

Very good 'Fall in Vancouver - Skytrain commuting music', because that's a genre now.

All we are is entertainment...

... caught up in our derangement

Was just watching a news report on the London riots.  The reporter said something along the lines of "we don't know why this is happening, there doesn't seem to be any real reason.  This riot is so severe that the prime minister is cutting his summer vacation short!".  ... I think you found some of the reason right there.  It's pretty safe to say that a lot of people are pretty well fed up with the world, I know we are in Vancouver (hey, we rioted too!) - the global economy, ridiculously expensive housing (1+ mil for the now "run down" shack some 50 year old bought for 14k, 30 years ago), arrogant and corrupt politics everywhere you turn....

It is absolutely terrible that innocent people are losing their houses, but I don't think it is a mystery why some people are marching around lighting things on fire or smashing windows.  Normal human beings suppress those primitive urges, and as a 'normal person' I'll continue to watch, think about life, and post old, partially related comics. 

Tonight there are ~1000 on duty police officers in London, there were ~5000 on duty during the Royal Wedding.  Let's get some priorities straight - when we do that, we might find that a lot of the reasons to riot have been solved.

riots.jpg

I saw a magician cut you in half, so bloodless...

... daunted I applauded.

"Carmageddon" didn't turn into a newsworthy happening (big surprise), but this video is sweet.  Take enough hours of film on any busy road, and sooner or later you'll have enough frames to compile a single complete road without cars.  Throw that in front of a moving background, and you have LA without cars.  Looks great too.

And everyone lives to tell the tale...

...of how we die alone some day.

So, the whole "blog" thing doesn't work.  Who has time to actually blog anything, especially when you can just press 'reblog', tweet, share, or countless other 'easier' ways of achieving the same end goal?  So here is the new plan; although this page has basically existed like this already, I am officially switching this to a "sharing of things that I think are cool... place". I'd bet I see at least one cool thing a week, right?  And if I do, I'll put it here!

Also, I don't know how to properly use a semi-colon, but I like them, so I am going to continue just using it and sooner or later I'll get lucky.

Anyway, let's get started.

A few posts ago (and years...) I shared pictures from the Blink reunion tour that I went to.  Well, tonight Blink released their first single off their new record.  You can listen to it below.  It is good, nice new sound, and I am properly "happy" just to hear new music from them.  You should listen to it too!