Inspiration
I had previously looked at different portfolio websites for inspiration. However, I thought it was important to create a mood board with a collection of ideas. Doing this gave me some last minute inspiration and gave me a better idea of the different approaches I could take. Here is a screenshot and a link to the Pinterest board I created:
https://www.pinterest.co.uk/lgilmore401/portfolio-inspiration/
Sketches
I began by drawing out boxes to allow me to come up with 12 different ideas. This task encouraged me to be creative and not let any doubt in my ability hold me back. I used a thick pen to avoid going into unnecessary detail.
Once I had all my ideas, I took my favourite one and scaled it up to add more detail. I liked the idea of encouraging users to view my work as soon as they entered the site as this was the main goal of my portfolio. Therefore, I chose one that would give users a preview of my work which they can then click on to find out more.
Wireframes
Creating wireframes allowed me to be more precise with sizing and where I wanted everything to go.
Design
Colour pallet and typography
I wanted to keep the colour pallet minimal so that my site wasn’t overloaded with colour as this can be confusing and unnecessary. Instead, I used purple which is my brand colour. This could be used for call-to-action buttons, icons and even the background colour of some pages. The white will mainly be used for the background but will also be useful for icons and writing when the background colour switches to purple. The dark grey will be used for most of the text. The whole site will use these colours to create consistency.
For main bodies of text I will use the typeface ‘Lora’. I chose this as it’s a variable font with different styles. This will allow me to make text stand out by making it bold etc. The font is also professional and easy to read.
I also chose the typeface ‘Orbitron’ to use as an accent font for titles etc. I think this works well with my brand as its quite geometric. Its also quite unique and stands out while still being easy to read.
Icons
I created these icons to communicate different actions for users. I made them simple so its easy to understand their purpose. For example, the menu icon is the hamburger icon which is widely used and well-known. I used the same colour for each one to create consistency. For the “get in touch” icons, I made sure to use the same stroke width, so they were all the same. I made the lines quite thick as it comes across as more confident and matches my brands tone of voice.
Home
Overall, the homepage is very minimalistic and only includes what is necessary with lots of white space. I decided to include my brand logo as its visually appealing and it almost creates an arrow directing the user’s eye to the case studies. Instead of displaying navigation buttons along the top, I decided to have a simple menu icon. This will open a side menu directing users to other pages. This keeps everything clean and simple.
I then have images of different projects I have done which have been faded to give users a preview of my work. This will encourage them to want to find out more. I wanted to have multiple ways to get to my work as it makes it easier to find. I wanted to include images on my homepage as it adds some colour and grabs the user’s attention.
Once the user clicks on the ‘view case studies’ button, there will be a nice transition which will then open the case studies page.
View case studies
The one on the left is my first design but then I decided to add text at the top saying “Case Studies”. I felt like this was beneficial as it lets users know what page they are on. This page has a purple background which I feel adds a nice contrast when the user navigates from the home page to this one. It also gets across the brand colour again.
I then have 4 case studies, which states the name of the project, that users can click on to find out more. Each of them has a different background colour which is associated with the project. This makes them stand out and adds more colour outside the basic colour scheme. The footer then has a contact section which will appear on every page.
Case study
Once you open a case study, the colour pallet changes to the theme of the project. For example, the background colour for the overview and final outcome changes for each project. This gives the user an idea of the tone of the project and adds a nice contrast in colours.
This page includes the whole process behind the project including, initial ideas, changes made, sketches and challenges faced, all the way to the final project. At the bottom there is a link to view the next project. This encourages users to stay on the site and look at more work. Once again, this page has contact details for consistency.
Get in touch
I wanted to keep this page very minimal and simple. This made sure I didn’t overcomplicate anything and it makes it as easy as possible for people to contact me. It uses the purple background with the white text, so it stands out. It also has my brand logo which has been faded so it doesn’t draw attention away from the contact details.