Category Archives: Portfolio Website

Portfolio Website

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

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.






Screen Shot 2014-03-24 at 14.29.08


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.

Screen Shot 2014-03-20 at 17.20.38 Screen Shot 2014-03-20 at 18.14.44


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.

Screen Shot 2014-03-23 at 20.54.36


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.

Tagged ,

Portfolio 2.0

By the time I finished making my first portfolio site, I hated it. I had spent far too long looking at it, tweaking it, trying to get it how I wanted and ended up losing sight of the end goal. This pushed me to start creating and developing a new website, one that hopefully I don’t get tired of, and one that is a better reflection of me and my skills as a Digital Media Designer.

From the beginning I knew that I wanted to have an image as the background. This served two purposes; firstly it is far more interesting to look at than a solid block of colour, and secondly it helps fill empty space on larger screens (a problem I had with my old site). I was also tired of the grid format I had for my portfolio, it seemed outdated and just generally wasn’t very good to look at, despite being practical and ordered.

Portfolio 2.0

As always I started with the homepage. Just like my first site, I kept the portfolio of work on the main page, making it the first thing they see. As for the text near the top, that is just a placeholder and i’ll probably put something a bit more… normal, when I think of it. Sadly I didn’t get any screenshots of my progress as I made it so the above screenshot is generally how it’s going to be. To compliment having a background image, the boxes for the content on the page are transparent, but to a level where the text is still easily legible.

I kept the header similar with my name/logo on the left and the navigation on the right. I like having it like this as its easy to find and is suitable for a responsive layout.  For my work, I made them stack vertically, almost filling the width of the page. The background colours are colours used in each of the pieces of work, which will likely make each one unique.

Screen Shot 2014-03-05 at 20.06.46

As always, the layout is responsive, with the navigation bar dropping below my name using a CSS media query, and the text resizing dynamically to best fit the size of the screen. Even when the site is in mobile view, it is easily recognisable as my portfolio, as the layout and theme remain the same. With this starting point, I already like my new website a lot more than the old, it looks more modern and a better representation of my style.

Tagged , ,

Initial design ideas



These were my initial drawings of my portfolio ideas. I chose to develop the last one as the layout was my favourite 


Contact page

When making the contact page I wanted to have big social network buttons (the purple squares are placeholders). My first solution filled the whole width of the screen. I found it looks too intrusive as the buttons are too big. In a smaller browser window they looked more reasonable. 



My second solution split the page in half to make the buttons smaller as well as fill the page a bit more. When the window is made smaller the left part of the website goes below so to make optimal use of the page space.




Colour theory


The connotations of colours are pretty important when designing stuff, it’s not all about looking pretty, though that is still rather important. For my colour scheme I looked at the connotations of the colours I will use and how they reflect me/ my work.

  • Red – Red is a powerful colour and works great as an accent colour which I’m using, though needs to me used in small proportions as to not be overwhelming. It can also connote passion, perhaps my passion for design and such.
  • Black – Black is a neutral colour, commonly used as it is clear and easy to read which makes it good for typography and functional parts of the site. 
  • white – White is associate purity and cleanliness which is just what i want to use for a minimalist design. A white background can make other things stand out more on the website. 

While making the social network link buttons for my site, I noticed that all Facebook, Twitter, Linked In and Instagram all use a shade of blue as their primary colour. Surly I’m not the only one to notice this, and after a quick Google search I knew I wasn’t alone. By the looks of it, its down to three (possibly more) reasons: 

  • Colour Psychology – Blue is the colour of the intellect, the mind, making it the colour of communication and when you think about social media, it’s all about communicating.
  • Blue also has the perception as being trustworthy, dependable, safe and reliable. These are the perceived positive qualities of a business who chooses blue.
  • World’s Favourite Colour Research has also shown blue to be the world’s most popular colour.

Lets Get Responsive

I’ve been hard at working trying to make sure that my website is responsive and will work on phones and tablets too. I have come up with a solution which i really like using media queries to create a mobile menu and change the photo grid to best fit the window. The main width of the site is 960px as it’s a standard size to use, this makes the photo grid have 4 columns. the next size down is 768px wide which has 3 columns. Once the full size of the window drops below 800px, the grid becomes more fluid and the main body takes up now 95% of the window rather than a pixel definition to maximise use of space on a small device. The navigation here also changes to a mobile friendly version to make it tidy and easy to use as shown below.



There is still a problem with the images due to the lack of being able to ‘hover’ on a tablet so the images remain black and white, and the title is always hidden. One possible solution is to have have the title always visible and the saturation of the images set to ~50% to still try an stick to the black and white feel of the portfolio.

Tagged , ,

Portfolio Progress

I started work on my portfolio website after a lot of time contemplating design ideas and looking at other websites for inspiration. As the website is supposed to be representative of myself, I’ve decided to use a greyscale colour scheme with red as an accent colour because of my dislike of colours and my favourite colour being grey (Fun, right?). I wanted to keep the site clean and as minimalistic as possible hopefully without looking too boring and dull.


Here’s a screenshot of how i currently have the main page of my site. The index page will be where I display my portfolio of work as this is the first thing I want people to see, making it clear that I do stuff… and this is it. Ignore the pretty pictures of flowers and such, they’re just placeholder images until I actually put some real work on there. On hovering over an image, it becomes resaturated, adding a splash of colour to the page and the title of the piece of work appears, as demonstrated by the first image in the grid. After making this i realised there are some potential issues here when viewing the website on a phone or tablet as you can’t exactly ‘hover’ over an image. A work around for this would be needed to detect when a mobile device is being used.

Tagged ,

Responsive Design

For my portfolio website I really wanted it to be responsive, to adapt to fit the window size better when it is changed. So Instead of using pixels to size and position things, percentages could be used. After playing around with them for a bit i had a lot of trouble trying to get it to work as i wanted. The same goes for VW and VH units. After stumbling across this website while looking for a solution to my responsive question I looked further into CSS3’s media queries. They look at the size of the browser and even the resolution of the device its being viewed on and can change stylesheet properties as appropriate. I feel this will come in handy when creating my website and making it responsive.

Tagged ,