My Website

This site was created to showcase my skills and let prospective clients learn more about me and the work I produce.

November 2016

Skills Utilized

Adobe Illustrator, Sketch, Processwire CMS, PHP, CSS, HTML5, Javascript & jQuery

Problem

I was keen to produce a website which demonstrated my skills, showcased my services to prospective clients, and gave me a 'brand identity.'

Rather than just a static HTML site, I wanted to integrate the use of a CMS. That way, I will be able to update content with ease whenever needed. This would also allow me to learn some PHP and how to create dynamic, updatable websites for prospective clients.

Solution

I've designed and developed a personal website in which the homepage is made up of the following sections: a cover page, about, portfolio, blog and contact. 'Previews' within the portfolio section link out to sub-pages which delve into more detail about particular projects (like this one!). The blog section links out to a fully fledged blog where I talk about design and development. Across the website, text animates upon page load or when it scrolls into viewport.

The site uses Bootstrap's grid system as well as a few media queries to ensure it's fully responsive. It was implemented into an open-source, PHP-based CMS called Processwire, which allows me to update and add new content without having to go into the code.

Color Scheme and Type Scale

Site flow and user interactions

During the planning and preparation of my website, I mapped out each section and page to ensure I knew how the website would flow before starting the design phase. I also used the site flow to label the interactions between pages not typical to a parent/child navigation hierarchy.

Wireframe

Before creating a visual design of my website I put together a Wireframe of the homepage so I had a reference to how I wanted the sections to be laid out.