Portfolio Website Layout

    During this year I will be creating a website that will serve as a professional portfolio of my work. This will contain images of work I have done, analysis of my work, development blog entries and is generally going to be used to showcase the skills I have as a games designer. One of the first tasks for this project is researching existing portfolio sites, seeing what fellow creative media professionals are producing, analyzing trends, and using this research to come up with a layout for my own portfolio site.

    One the clear trends I can see in my research is the popularity of video splash screens, where the landing page of a website has a moving image as the background, with minimal text on screen. The video immediately grabs your attention and pulls you in and the sparse use of text on these pages and the negative space surrounding text also adds to the effect of the media first approach, whereby the image or video, whatever the media product may be, is center stage. This is an effective design and layout for a media student portfolio, it get's straight to the point of why someone would be viewing your portfolio; because they want to see the quality of your work. I think that this is an approach I would heavily consider for my portfolio, as an interactive media student. Maybe I could take this approach one step further and have an actual game on my portfolio screen as opposed to a video of one.

    Another trend is the movement towards a clean and clear layout. Rather than cluttering the screen with huge reams of information, many sites choose a minimalist approach, keeping any text on their site clear and concise. This is a good approach for artists, video producers and photographers, whose bodies of work are strictly visual. However I feel that for a game, a picture only tells part of the story. With games being an interactive medium, it is important to communicate to anyone viewing your portfolio exactly what the interactive elements of your game are. A video can accomplish this to a certain degree, but it may be necessary to provide a little more of an in depth description of the game you have created.

This website uses a huge image as a landing page, a common trend amongst recent portfolios

    Below I have created a mock up of the general structure and layout of the site I aim to create.    

A page structure mockup, created in Adobe Photoshop

    For my portfolio website, I want a bold landing page with big images of the games I will have created. I want to split the page up into a number of sections (A,B and C) which will be dependent on the number of projects I have completed to a desirable standard, and each of these sections will have an image of the game. This will be still images upon loading up the page, but when the user hovers the cursor over the image, I want it to play a video of the game, and have it be a clickable link to a page that shows more information about that project. I think this is a great way of firstly showing off the different games I have created, and then bringing the page to life when the user hovers over each image. Also, having the images link to further pages will allow me to show off eye catching work on the landing page, whilst being able to elaborate on each project specific page. The main landing page will also have a header, which will contain my name, navigation buttons to other pages (eg. about me, gallery) and maybe a logo. There will also be a footer, which will contain contact information such as email address, and it will contain social link buttons, so that my site can be shared to Facebook, Twitter, LinkedIn and more. 

The same page structure, created in Sublime using basic HTML and CSS

    Above is a HTML and CSS layout I have quickly create in Sublime Text Editor. Of course it is very raw, but to be able to knock up a quick template in code and already see the structure coming together is very encouraging, and makes me believe that whilst the aims for my portfolio are ambitious for a novice web developer, they are very achievable if I put in the effort.