I’m very excited to share my new personal website with you all, it has been in development for quite a while this year but I’ve finally found the time to get it polished off and get it published.
I'd like to talk a little about the project and give you an idea of how it was put together.
Planning & User Experience
I wanted a simple website to talk about myself in a professional manner and be able to publish articles about my work and the things which inspire me.
I started out like I would with any project, with a sketch pad and pencil. I roughed out some quick ideas for layouts keeping in mind the purpose of the site and making sure to prioritise elements to help me achieve the goals I had originally set out.
Once I was happy with my ideas, I brought the layouts into the computer to draw them out to scale and build a small prototype.
For the visual treatment of the site I wanted to go with a simple and neutral approach taking my lead from magazines and strong typography. As part of the process I built a moodboard for inspiration on Pinterest to help immerse myself in the visual direction I wanted to take.
Using the UX prototype as a guide, I applied the visual treatment in photoshop. It's worth noting that the chosen font is different to the final version as after a little time I felt my original font choices were not modern enough to reflect the style I was aiming for, so I switched them out at the development stage. Using SASS and a modular approach to the design, this was easy as it involved changing only two lines of code.
For the development of the website, I started out with the HTML5 boilerplate and used the Compass SASS framework to take a modular approach to my frontend development. For the backend development, I decied to go with Jekyll. I chose Jekyll as a publishing platform for my website for the following reasons:
- Jekyll publishes flat HTML files so it’s very secure and fast.
- Making SEO and site optimisations is a lot easier with flat HTML.
- While I am using some simple designs and templates, if I decide at a later date to get more creative, it will be much easier to implement some custom templates and styling.
- The codebase & content is 100% under GIT version control.
The final website was hosted on a Digital Ocean image and deployed using GIT.