I started working on the latest version of my website in 2016. This is the 7th major iteration over a 10 year period. The website has always been an outlet to experiment with design and learn new skills as well as to showcase my creative endeavours.
The previous version was lost when I moved to Sweden. I was so focused on the challenges that faced me with living in a new country that my website ended up being shut down and in the end I lost my work. Different fragmented backups were spread out between different devices and even countries. There was no sense of organisation or understanding of what I had done. Even now I don’t have a definitive copy of the 6th version. But you live and learn!
I learned that I needed to be more in control of my files and since then I have tried to find a way to organise things so that I always have a backup and always have access to my files when I need it. In 2016 I was determined to start up a brand new version of the website that I would build from the ground up. I realised that I would need a different approach and learned about using Git for version control. I also wrote down and documented every single step I took along the way, all my thoughts and problems encountered. The ability to refer back to a previous mindset in different stages of development is an invaluable tool, it also allows you to pick up from where you left off.
I recently found some screenshots of my earlier work so I wanted to take a look back at a few of my designs and my thinking in development over the years. Starting with the earliest version that I’ve found so far.
2009 – Version 5.4
Version 5 evolved around a magazine layout. This is the homepage design which had navigation links running across the top. Noting here that the screenshot was when I was testing if I had space to incorporate an RSS link so that icon is just pasted in from another source. I was also never really happy with a floating search bar idea so I changed this later on. The design was based in WordPress so the search query pulled the latest post and I styled that post to be more prominent than the others. The banner at the top was only ever used to tease other works and transitioned between different posts using a fading slideshow effect.
Here I was testing out a complete redesign for the posts. The title and date ran down the left hand column, the main content was in the middle and the option to rate the posts was available on the right hand side. After the post content came navigation links to the previous and next post and at the bottom was a subtle link entitled “Delve Deeper”, this unlocked a sliding footer panel with more options. At the time I was trying to do a daily photo blog and posting a different photo to represent each day. In the end this post design didn’t really fit in with the header design and needed to be changed.
2010 – Improving on Version 5
This is a screenshot from the live version of the site at the time. Gone is the floating search bar. The RSS icon has been integrated into the navigation bar which has a few different links including “Random” which redirected the user to a randomised page on the site. The navigation bar is narrower and the logo hangs subtly down over the banner content. The dates of the posts are also hidden until the user hovers over them. Finally, a gradient background makes the whole thing feel more tangible.
The hidden footer design of the earlier version wasn’t very user friendly so I expanded the section and incorporated the search bar. Taking a 3 column design to include space to display a “Micro Blog” with entries from Twitter. These entries were automatically copied and saved to WordPress for backup purposes but also to experiment with different display and layout designs.
The post layout design had also changed. Offering previews of similar posts, a different rating system and links for commenting and to share the post.
2011 – Version 6
The focus of Version 6 was to break away from the magazine style design and use more of the viewport space.
I experimented a lot with different styles of displaying information. Here are some of the different styles I tried using WordPress posts saved from my Twitter stream. This experiment was early in 2011 and I hadn’t decided on the design for the header of the site but I played with the idea of using a sliding navigation, indicated by the colour band at the top of the screen.
It wasn’t until later in the year when I started to develop the design. I took raw screenshots at various stages along the way to show my approach in designing and debugging. The whole thing was developed from scratch. The aim of the design was that the content was going to depend a lot less on the viewport size. I ended up being set on following the design trend of that time; using a masonry-style layout.
The design had good visual impact on a big screen but also worked on smaller devices. The content loaded dynamically with an infinite scroll feature. The header and footer became fixed bars, the header offered links to access more content, each icon linked to a page with a customised layout and design, one of which was taken from earlier experiments with the Twitter posts. Social media features were added to the footer bar. Eventually I used smaller images for the homepage to display a lot more content and reduce the amount of scrolling that the user would have to do. The photos or videos would open in a modal window with AJAX loading. The header had a CSS breakpoint for mobile devices to display a pop out menu instead of a row of icons.
2016 – Version 7
Fast forward to 2016 and the start of a brand new design. The development of previous versions and everything I learned over the years has played a role in creating Version 7. I have been discovering new ways to resize elements to make a better responsive design. I wanted to try a more minimalist design so I removed the distracting icons from the header, replacing it with a hamburger menu icon which has become recognisable due to popular use in mobile app design. The content on the homepage now fills the screen regardless of which device it is being viewed on.
There are a few areas I can see for improvement as I write this post but unfortunately the development of this version came to a complete stop towards the end of 2016. It was at this time that I was given the chance to become a teacher and this opened the possibilities for personal development so I ended up dedicating all my time and effort into adapting to this new role and putting my passion for web development on pause.
I figure that I’ll return to this project in the future and that should be easier to do now that I have more extensive documentation and a Git repository of the changes I’ve made. The theory being that I’ll be able to jump right back in and pick up from where I left off and continue development on my website again.