Final Tweaks to Layout and Design of Online Portfolio

After adding all the content that I wanted to feature on my online portfolio, I thought that it was best to look back at the user feedback that I had gotten from my followers on Twitter. I have added a little more diverse in my content since then by adding more varied subjects of photography and my online curation so now I need to tweak the layout and design of my blog so that it looks more professional and appeals more to my target audience.

One thing that stuck in my mind from the feedback I had received was the background looking a little pixelated due to its size. At first, I didn’t notice this but I looked at the website on another computer and seemed that the fill option that I have checked on the background image settings makes the image look a little too stretched and thus making it appear more pixelated. To tackle this problem, I referred back to the layout settings on portfoliobox.


Its appeared here to me that there was an option to make it a little smaller but still have it covering the whole page and so I changed this to the ‘best fit’ option.


As you can now see, the image fits a lot better on to the background and makes it appear to be less pixelated and by that much more professional. Also, you can see here on this image above that I have changed the menu option as I felt it would be easier to read if there was a menu box with a background colour. To me, this option on my menu’s layout makes it appear more coherent to the rest of the site and does not distract you from the background image. Due to this being tweaked, I though that it might look more fluid to the logo if the menu font was changed to be the same; that way, the logo does not appear random and as though I have thought this through and gives it a more uniform feel in comparison to the rest of the site.

The next thing that I had picked up on from my feedback was that a lot of people found the purple coloured text to be incredibly hard to read when next to the background. As I most certainly didn’t want to change the background after having tweaked it a good few times I felt that the colour scheme of black, white and purple on my site needed to be rethought.

Although I really loved the way the purple contrasted against the black and white, I knew that deep down this was not practical as viewers simply could not read my content. So after looking through the colour rainbow on portfolio box’s colours and font tool and began experimenting with different colours to see how they looked against the black and white background.


I knew that in order to make the font look more readable then it needed to be a fairly bright and bold colour. I had thought that maybe an orange or a blue might look eye-catching in contrast to the background, but when I had tried this it seemed too bold and looked as though it didn’t quite fit in with the colour scheme or mood that I wanted to project. I had also considered maybe possibly adding a coloured text box behind the writing; but I thought that it would probably be too distracting and you wouldn’t ever see the background image itself. After a few minutes of experimenting with different shades, I thought maybe a red might look smart against the black and white background and would make the text easier to read as it is such a contrast and definitely a lot more eye-catching that the purple was.



As you can now see from the image above, the red looks far more eye-catching against the background and after experimenting with this and being successful; I then changed all the text to the same colour. Also as you can see from the images above, I have also changed the font style to make it that much more readable for my viewers. I chose not to make it the same as the menu and logo font as I thought this would be complicated to read; especially as the text on these pages revealed more about my work than the menu box ever would. For this I went back in to the colours and font tool in the design navigation of portfolio box where I found the font style that the arrow is pointing to in the image above. Although it might look a little child-like on the screenshot above, I knew that I didn’t want anything too fancy so that it would make the text illegible so I had to pick something that I though was simple but a bit more creative looking at simple sans seriff. I feel that this font makes the writing look a bit more quirky than it was originally and it is far easier to read now.


The last thing that I wanted to change but wasn’t actually mentioned in my feedback was the landing page of the site. Here, in my personal opinion the landing page look very unimaginative and instantly forgettable; which was something that I definitely didn’t want my viewers to think of my portfolio. So I took another look at the options of layout designs that I could change it to so that it would appear to be more striking and professional.



After taking a look at the landing page designs that were available, the one that appeared to be the most striking was the design with the menu links on the bottom of the page. I thought that this would be the best option for my landing page as I still wanted the viewer to be able to see the butterfly image clearly;so I changed it to this layout design instead. What was also great about this design was that I would link in my menu pages so that you could click on any of pages at any given time. Luckily, this also fixed the on-going problem that I was having with the lading page redirecting the viewer to the Austerity page on my photography addition to the site whenever you clicked on the logo. As you can now see in the screenshot just above, the landing page looks a lot more clean-cut and professional looking than it originally had. I also feel that adding the menu links to the bottom of the page gives my viewers the chance to click on a particular aspect of my site without having to go through anything else. To me, the contrast between the white menu box and the background image only enhances the beauty of the image and will make the rest of the black and white design appear more creative.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s