Category Archives: Portfolio 2.0

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.

Image

 

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 , ,