I launched "Version 3" of my site 5 years ago. I’ve made a few dozen attempts at redesigning the site, only to get busy and put the work on hold. By the time I got back to it I would want something different or tweaked. Repeat this cycle.
The last version served me well. Because it remained relatively static throughout the years, there was no urgency to replace. Finally I decided that I need to redo the site, the old one was just too outdated. I wanted the new design to share a tone with the previous version (which shares with version prior to that) but I needed to start over so I could achieve my overall goals for the site.
+ Larger typeface and less reliance on texture
+ Less clutter around the portfolio pieces
+ Member/login access to download wireframes & sketches (not yet made public)
+ Replace CMS with something that works better for my current workflow
+ Utilize better techniques and tools
I wanted to keep the color scheme bold & simple. I kept going back to the theme of wanting to navigate the work chronologically and I wanted to do more than just a straight list of the work. Slowly the timeline that you see evolved. It is drastically different than the initial static mockup & sketches.
At a later date, once my plans pan out for the design, I will likely go in more depth and post sketches.
I initially planned on using Sero as the typeface, but right as I was executing this design HF&J released their web fonts. Being a fan of Numbers and their work in general I made the switch. I may switch back (at least the sans serif font) if their fonts pop up in too many places.
Show more of the process
A major limitation of my previous site was that it was only a display of the final result. A small part of the process. Though I haven't fully launched it yet, the new design (behind a log in) will give visitors access to other elements of the project: wireframes, sketches, mood boards etc. I plan to include permission to share these in my future contracts as well, to make these features accessible without logging in.
Previously I used MODX Evolution to drive my site. I wanted something lighter and ideally something I could write locally and version control using Git. I narrowed it down to Kirby and Stamatic and finally settled on Statamic. I was a fan of the ExpressionEngine add-on, Structure, for letting clients manage hierarchy/structured navigation. I so far have been extremely happy with this implementation and I think it will even get better once I switch to content mode. I plan on writing more about this (and CMSs in general, I just worked for a CMS company after all) in the near future.
Building the site
One of the reasons I wanted to start from scratch is to utilize tools that I have grown to appreciate over the past year. As mentioned above, I wanted to keep the content & templates under version control. Everything is stored and managed on Git, so then I just pull to my server when ready to launch. All the CSS is generated using Sass & Compass as a processor. It took me awhile to jump on the Sass bandwagon – but as I worked on larger and faster moving projects, the benefits were hard to ignore. Now I use it for everything. I am using the Zurb Foundation 4 gridwork mixins to generate the responsive grid. While I am looking forward to using custom proportioned grids in the future using the same technique, for now I cannot imagine doing this any other way.
So here it is
The initial launch of version 4. I consider it to be just out of alpha and plan on doing a lot more continuous updating on this one to further flesh out the design. By launching the in-progress version, I think I will be encouraged to continue to improve it rather than start over.