Finalized Portfolio Website Design – Version 1

I had previously not blogged regarding my portfolio website designs, but having finalized the first version of my portfolio for submission I feel it is worth discussing some of my design choices!

The initial idea I had was for my home screen, the first thing visible to a visitor. As first impressions are important I felt simplicity was key, along with a nice visual design, so the user knows clearly the way to navigate the site and access my content. My idea could be simplified into: The headers, a welcome message, and the navigation element. My first sketch of the homepage is below:

20140108_021206

This was the idea I ultimately stuck with, and have since developed. Alternate ideas I had considered took into account consistency with the other pages of my website – the navigation tool is scaled down and kept near the header to maximize accessibility while keeping the content of the page in focus. Attempting to do this meant my home page looked rather empty, whereas I felt merging it with the “About Me” page of the website would feel like too much of a compromise that left me without a true home page.

As a result of these decisions I kept with the initial design – for the home page, the navigation element could be considered its content.

Following on from this, I decided on a color scheme using Color Scheme Designer 3, a tool to help strike a good balance and use of color on my website. Slight desaturation was important to include so the background colors of the pages’ elements didn’t feel like the most visibly striking parts of the webpage, and I decided on a scheme slightly altered from this, using the darkest shade to mark out the header and the lightest for the body’s background.

homescr

The outcome of my design choices is screenshotted above. The icons on each of my navigation buttons were acquired from Endless Icons, available free for use under these terms.

To refine the style visually – getting rid of the rough edges, so to speak – I used subtle CSS styling such as 1px borders and the box-shadow function to add a small, yet noticeable amount of depth to the appearance of the website. Following from this, I imported Montserrat Alternates for use in my header bar consistent across all pages, and Cabin for use in the pages’ content, both from Google Fonts. This displays correctly on all up-to-date browsers as the fonts do not require installation on the user’s computer.

The final stylization I applied to the page was background-color transitions on the navigation buttons when the mouse hovers over them, to add a smooth bit of visual interactivity to the site. Rather than sticking with the blue color scheme used on the rest of the site for the transitions I chose to use this color scheme on the animation. The colors are slightly more vibrant than the rest of the site, but will only be seen on mouseover so the user’s attention will already have been drawn to that element. I made sure the transitions were also not too slow (0.4s), as I wanted the user to experience the whole animation on mouse hover while understanding the users would be looking to navigate to the site’s content, not admire the animation.

I kept the same visual style on the other pages of the site, yet had them filled with the relevant content – about me, and my portfolio work – moving the navigation buttons to the top of the page instead, out of the way of the content yet still accessible.

abtscr

These smaller navigation buttons still use the same CSS background transitions as the main page. When on a relevant page, the navigation button for that one stays in the transitioned color to emphasise that for navigation purposes. Mousing over it brightens the color slightly.

I plan to continuously revise and improve my portfolio site as I get more work and my skills improve, so keep an eye on here for updates!

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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