IXD301: Building my Portfolio Website

My portfolio website link: My Portfolio Website



The first thing I did was build the navigation. This would be the same on every page, so I made it a ‘symbol’. This meant I could add it to every other page which saved me time and ensured consistency. I also ended up changing the typeface from ‘Lora’ to ‘Monserrat’. This works much better for navigation as its san serif and easy to read. I also feel that it works well with the tone of my brand. I now use this typeface for all titles throughout my site. For bodies of text, I use ‘Lora’ which is serif and easy to read.

In my original design, my logo was quite big in the centre of the screen. I decided to reduce the size of it and place it within my navigation instead. This gave me space to include an introduction which I thought was necessary to tell people what the site was about. This also gave people my name which is important.

I then added my images, giving examples of my work. This is to entice people and encourage them to stay on the site and find out more about them. My call-to-action button is in between the images. I thought it was important to have two ways to get to my work as this is the purpose of my site.


Case studies

This page remained like my original design as I wanted to keep it quite simple and easy to navigate. One thing I did add was a short paragraph giving an overview of the project. This is to encourage users to find out more as well as make it easier for them to find what they are interested in. I like that the background colour changes to purple on this page as it reinforces the brand colour and it’s a nice contrast from the white background. It also makes the case studies stand out more as they are light colours on a darker background.

Individual case studies

Originally, a lot of my images had the wrong colour background which came across as untidy. To make them cleaner, I made sure the background of them matched the background colour of the section. As for my sketches, I made them clearer so users could see them better.

Every case study has the same layout. I start by giving an overview and then talk through the process. This includes, research, sketches and wireframes, challenges faced, feedback and the outcome. Images are placed throughout to provide a visual pause; it makes it more engaging and easier to follow. I decided to add in challenges I faced as this shows how I go about solving problems.

At the bottom of each case study, there is a link to the next one. This keeps users on the site and encourages them to look at my other projects. It also makes it easier in terms of navigation, so they don’t have to go back and forth to the case studies page.

About me

This page didn’t change much from the original designs, and I kept it quite simple. It has a short introduction which is the same on the homepage, creating consistency. However, there is another paragraph which is a more detailed bio. I also made sure to include that I am currently looking for a placement for next year and a button to download my CV. This is important to make potential employers aware that I am seeking opportunities and gives them an easy way to get my CV and find out more about qualifications etc.

There is a picture of me which makes it more personal. I also feel that a picture comes across as more trustworthy. I included a certification that I have in web accessibility. I added this as it shows I’m passionate about what I’m doing, and most companies take accessibility very seriously.

Get in touch

This page is very simple as it just includes the icons for the links. This has changed from the original design as I decided to use the actual brands as icons. I think these are cleaner and more accurate than the ones I created. I was also able to find a WordPress one for my blog which is more recognisable than the icon I designed.

This is the process I have made on my website so far and I will continue working on it. One thing I need to improve is the responsiveness of the site as some elements are too big or too small when viewed on other devices.


Leave a Reply

Your email address will not be published. Required fields are marked *