The 4th Edition of viljamis.com
I designed the 3rd edition of this website almost 5 years ago, which is an eternity by today’s standards. The previous version was one of the first responsive websites out there that was built mobile first from start to finish. Everything was also done progressive enhancement in mind, which made it last well throughout the years.
But as with many personal projects, there eventually came a point when the content started becoming obsolete, type didn’t work anymore like I wanted it to, and even updating the website became so terrible experience that I just stopped doing it.
It was time to rethink. After some pondering, I came up with these 6 goals for the new version:
- Build a design system.
- Focus on the content, typography and readability.
- Better performance and faster loading.
- Switch to HTTPS and provide an offline experience.
- Ditch PHP and switch to a static site generator.
- Move hosting to Amazon S3 and use CloudFront as CDN.
Maintaining a website with a 5 years old CMS can be a challenge itself, but moving all that cruft to a completely new platform can be even more challenging. The previous version had also hundreds of subpages and the image resources alone took almost 1 gigabyte of space on the server. The need to convert all that content to a new format was the biggest reason why I didn’t even attempt to do this any earlier.
Originally, I thought I’d write about the workflow behind the redesign, but as it turns out, my process was somewhat unusual and it wouldn’t probably morph into a nice, readable article, just yet.
Basically, I went with gut feeling with pretty much everything you see here. There’s no grid, no fancy ratios used, no typographic scale, and no magic numbers that the layout, type or colors would be based on.
Shocked? Well, that’s really how it all started. But the intriguing part is that this ‘chaotic’ way of working, that included no proper workflow whatsoever, eventually formed a living design system, a tiny tool for content sketches, and even a grid for both layout and baseline.
Now, I won’t be encouraging anyone to necessarily start working this way. Grids, typographic scales and ratios can be very helpful tools, and I tend to use them when in hurry. Lately, however, I’ve wanted to learn to trust my own instincts more and let go of the imaginary feeling of control we’ve created for ourselves.
I quite like the simplicity here. Not just the layout and structure, but also how quick and simple this is to update. I’m basically doing all the updates now using Markdown format in a plain old text editor, and then deploying the changes to Amazon S3 with a beta version of Upstatic (btw, I did the website!).
There’s also the living style guide, which I’m happy about, as it helps me to more easily define a common visual language for all the individual components.
There’s no commenting, but if you’d like to leave feedback, please tweet to me instead. If you’re looking for the old versions of this website they are still accessible too, via v1.arie.ls, v2.arie.ls and v3.arie.ls. ❦