The final outcome for this project is the website you are on right now, clicking the image below will take you back to the main homepage.
The goal of this project was to produce a personal portfolio website that could display my projects and the narrative behind each of them, and for the design of the website to follow my new brand.
Research & Inspiration
Before starting to develop ideas for the portfolio website, I started researching examples of portfolio websites to take inspiration from. Melanie Daveid's website was one I liked because it was a single page scroll, so all information was in one place. It had a minimal style, didn't have too much information and showed her personal brand identity clearly though colours and illustrations.
Ruin's website inspired me because it was bold and striking while using few colours, and emphasized red elements boldly. I wanted to use this style for my website because it would work well with the brand's colour scheme. This can be seen in my 'Brand project.'
After gathering inspiration, I sketched multiple concepts for my website to give myself a choice as well as allowing me to take the best ideas from each design if needed. Each of these designs had four main sections (even if single or multiple pages) which were Home/landing page, About, Portfolio and Contact.
After creating a breadth of initial concepts, I started to take aspects of my favourites and funnel them to new sketches. Both designs had a large hero image on the homepage to welcome users to the site, however the key differences were one having a side navbar and a portfolio page consisting of various sized circles to display content.
However, I decided on maintaining a simple straightforward design because this looked more professional, was easier to navigate and best represented my brand.
I translated the sketches in to basic wireframes that I could use for reference when I created mockups and develop the website. Using Illustartor to: label areas of the page, state the size of an image, colour of background or type and any text that is needed. An arrow was used to show the order of the web pages from each other.
After finishing the wireframes, I took them to InDesign and exported them as a PDF to easily access for reference later on in the project.
Adobe XD Prototype
I started to create a mockup of the website on Adobe XD, starting with a mobile first design to ensure that it could be accessed on smartphones when it was built. I used Adobe XD because it's a software built to create and test out designs of app and websites. The colour scheme was built in the design so that red highlights areas of interest for the users and draws their eye. Also, I created an example portfolio piece that could be accessed through the website so I could display this feature through the a live prototype.
Following on from designing the mobile version, I created the design for a desktop version of the website by expanding the elements to be of a larger size and adjusting the layout.
After completing the designs, I used the mobile layout to trial out the prototype to ensure the navigation would work and was not confusing to operate. The prototype can be seen below:
Developing the website, I used 'Bootstrap 3' as a framework to code, and using code from my old portfolio website. This was to ensure that previous pieces of my work could be uploaded and displayed on my portfolio site, though these pages were updated significantly with the new brand and layout.
Changes to Final Website
Changes that happened to the website's design during the development process was changing the homepage background to black and white instead of red because if it was red, it reduced the significance of the colour on the page that I wanted to achieve.
Additionally, the contact page was replaced with a footer at the bottom of the website because I realized it was redundant to have a form for users to fill out when they could easily send an email to you with the same information. Therefore, this required less space on the page to display.