Self-Branding: Website

Creating my own portfolio website with my new branding

Posted by Callum McMurray

Final Outcome

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.


Brief

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.

Screenshot of Melanie Daveid's personal portfolio website. Click image to see source.

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.'

Ruin's website design which focuses on using one main colour to draw the attention of the audience. Click image to see source.

Sketches

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.

Initial iterative sketches for the layout of the main sections of the website. More initial iterative sketches for the layout of the main sections of the website.

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.

Further sketching of compiled ideas.

However, I decided on maintaining a simple straightforward design because this looked more professional, was easier to navigate and best represented my brand.

Sketches developing the 'professional' looking aspect of my portfolio website.

Wireframes

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.

Screenshot of the wireframes for the design of the portfolio website.

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.

Open the wireframes in a new tab here.

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.

Adobe XD designs for my portfolio website based of my previous concepts.

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.

Desktop and mobile designs for my portfolio website in Adobe XD.

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:

Mobile designs live prototype. Click on the menu icon or scroll up and down to interact.

Web Development

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.

A screenshot of the html code for my homepage and the CSS stylesheet for the website.

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.


The final outcome can be seen back at the top of the page