Being as indecisive as I am, I’ve made yet another portfolio website but this time, I’m sticking with it (Hopefully). Just like my second attempt, i’ve gone with picture backgrounds as they’re more visually interesting than a block colour. I’ve tried to keep the pages clean, simple and not too cluttered.
Here is the ‘home’ screen which is what you first see when you go on my website. The image is split into three layers; the background, the railing, and me. Separating the layers meant I could use a parallax effect, as they move in relation to the position of the mouse.
The website works on a ‘one page scroll’ basis, which means when you scroll down a little bit, it scrolls all the way to show the whole of the next page (Trying my best to explain it). The next page is my portfolio page. I used the same style of blocks from my second website attempt (if anyone saw the blog post). On hover, the background colour goes solid, and the box enlarges showing a title name of the portfolio piece. When it comes to adding more pieces of work, I just need to add another page with more work on it. At the moment the current set up only allows 4 pieces to comfortably fit on my 13inch screen (which coincidentally works perfectly for my current situation). On my bigger 24inch screen there is a larger empty space, which could be fixed in the future.
The third page is my About Me page. I wanted to keep it short and sweet, as to not clutter the page with too much text. As for the image there was a bit of a dilemma with deciding for the right picture to use. In the end I made on based on me (as it’s about me…) but also hopefully reflects my personality and my digital nature. Once again I included a disabled link to an unwritten CV which swear I will get around to doing at some point.
The portfolio pages have a thumbnail image gallery which keeps the page small, and upon clicking the images they expand so you can see more detail in them. My first attempt at this is shown below (and my final result shown below that). I felt putting the background behind the pictures too bought the whole page together and unified it as one, opposed to the separated blocks. The second picture also shows the navigation I chose, allowing users to easily flick forward and back through the portfolio or to go back to the portfolio page itself. Adding the forward and back options made navigation smoother and easier, as it didn’t involve constantly flicking backwards and forwards. Despite the portfolio pages looking rather different to my homepage, I felt having the navigation with a similar appearance helped keep a link between the two.
In this website, I decided against creating a contact page with a dedicated contact form and went for a simple link to emailing me. This reinforces my idea of reducing clutter and unnecessary content, and removed what I believe to be an outdated web element. Modern websites don’t often use contact forms anymore (from my experience) so I wanted to do the same with mine.
While creating the website I kept linking my progress to my friends, in order to get guidance on design and layout etc. As none of them have studied web design it was a real test of how easily they can navigate my site. From my experience there were not problems with realising having to scroll down from the first page to see the others, despite there not being any instruction to, which is ideal.
Above is a testimonial from my friend, Charlotte, after linking her my website to review. Something tells me that this is the type of response I want to my website, as everyone seems to love the parallax effect on the homepage.