Currently, I use WordPress for my website, however since learning some coding I’ve been looking at starting afresh so I can have a bit more control over the appearance and structure, plus it seems like a great place to put my new skills to use.

Having looked at countless portfolio sites over the last few months and have borrowed a few ideas, but I have tried to keep it fairly simple.

One of my preferences when viewing other portfolio sites was the use of scroll animations between sections, I like how it directs your full attention to one subject at a time. I think this is important as I really want to prioritise certain sections and guide clients/employers toward particular things first.

These two sites are good examples of what I mean by the ‘scroll animation’, I referred to these sites quite a bit throughout my design, among others:

Currently in my prototypes there are arrow buttons which you click to simulate this effect – I would like to ultimately achieve the same effect using the mouse wheel, however to my knowledge there’s currently no way of doing this in Adobe XD. I will in the final version remove the buttons. I am also including progress indicators on the home section, to let users know how much content there is to be scrolled through.

After the initial chunking of prioritised sections, I still feel the ‘gallery grid view’ is a very effective way to display projects, so I’m going to divide my projects into different groups, with clear titles and display them all in this fashion:

I am aware that in my current site, in certain projects there can be a lot of scrolling in order to find certain sections of work, so using ‘drop down’ sections for each project will be one of my solutions here. This means that if users are particularly looking to see, for example the research behind a certain project then they will be able to click this subheading and go straight to that part instead of having to scroll through lots of information.

sec b

One thing I did do slightly different in my design was to combine the ‘about’ and ‘contact’ tabs into one ‘Info’ tab. This section in my opinion should be quite minimal/to the point.


Here are some prototypes for web and mobile. I have left comments on, so if anyone does have any feedback, please do feel free to contribute, any opinions are always appreciated!

low fidelity:



High fidelity:


The site (in progress as we speak!)

Here’s what i have done thus far. I’m still working on the homepage, but making good progress. I’ve not made this responsive yet, so it may look off depending on the device you are using – this is something I will fix soon;