Building a Portfolio Website

When looking at how other people have laid out their portfolio websites, I saw that lots of the ones that I liked and thought were most effective were the simplistic clean designs that put the focus on the work on the website rather than distracting the user with lots of colour and features. Therefore, I would like to look at creating a website design that is simple, clean looking to reflect the type of design that I like.

In terms of colour schemes, I think that using dark greys and white would work best as it would match with any colour that it is paired with and would work for showing different projects all on one page as otherwise, having too much colour could make the website look cluttered and unprofessional. The design of the website will also create an impression of your design skills as well as the projects that you wish to share so what you are conveying with your web design should also be well considered.

screen-shot-2017-01-18-at-22-01-29

For inspiration I looked at Salad’s website, who I visited earlier in the academic year to receive an industry brief. I was particularly looking at how they have organised their “work” section. I like how they have organised their projects into different sections such as “Branding” which allows their audience to narrow down their search and find content that is relevant to them.

They then describe the problem, their solution, how they did it and the impact on their clients business. This is very informative for the audience and shows a good structure. This gives a good impression to their potential clients who might be considering using them and shows that they are methodical and seem enjoyable to work with.

This style of showing the work would be an effective one to take inspiration from for my own portfolio website as it shows organisation and structure while also being very detailed and informing your audience of all the details they need to know.

Development

I started by drawing out layout plans for my pages in order to organise my content and decide on some of the features of each of the screens e.g. homepage.

I liked the use of a 3 column grid and preferred using different sized boxes to create variation so that the layout was less structured and repetitive as this could look more boring.

layouts-11layouts-21

I then began to plan how I would display my project descriptions below my main image. I wanted to separate the information into sections and create a clear hierarchy, using features like weight, colour and layout to make certain information stand out. I wanted to ensure that each of my pages followed the same structure to be clear and consistent. Therefore, the website user would be more likely to be able to navigate the information and locate the content they are searching for.

screen-shot-2017-01-29-at-20-42-22

I ensured that I measured out the dimensions in order to save my artwork the correct size and to fit neatly on the page.

about-dimensions

I organised the layout so that the project would always begin with a large image which shows the final solution from the project and match this with my thumbnails on my homepage to create consistency between each navigation point. Using a large image would create a focal point and draw attention to the content higher up in the hierarchy.

screen-shot-2017-01-27-at-09-46-37

I began by adding project titles and descriptions below my thumbnails to give the user an insight into the project before they click into it to ensure that it is something they are interested in viewing. However, I felt that this could be more interactive and engaging through the use of rollover buttons which would provide the content only when the user requires/ wants to view it.

first-project-page

I added rollover images to my thumbnails with a title and short description to be to the point and quick to digest keeping the image behind to link text with the visual outcome.

screen-shot-2017-01-29-at-21-22-33

I then organised and spaced out each of my thumbnail images and used different shapes to create a more dynamic selection. Making use of the three column grid was able to give some structure and order to give the website a professional and neat feel.

screen-shot-2017-02-02-at-16-02-21

screen-shot-2017-01-31-at-20-43-20first-clean-streets-page

I began by implementing my content into a template just using a simple organisation with title-image-description, however, I wanted to reorganise this to bring the text together and make the image the first thing to view.

screen-shot-2017-02-01-at-10-38-00

I adjusted my text layout into separate columns and split up the different sections of text to be easily found and clear to read.

Final Website Screenshots

Screen Shot 2017-07-26 at 21.42.18.png

screen-shot-2017-01-29-at-20-56-24

I decided to make use of one main colour on my website which follows my personal branding in order to create consistency between different elements of my work. I believed that the red/pink would stand out and be bold to grab attention. I then paired this with greys and white as I didn’t want to overload the site with too many components or too much colour as I would want the focus to be placed on the work.

Screen Shot 2017-06-26 at 16.14.57.png

Within my about page, I chose to add some details from my personal branding scheme to add more colour and personality to a black and white image.

I would like to develop my website further by making it responsive, adding film features to be more interactive and engaging and to also continue developing my knowledge of HTML and CSS by reading up and putting more coding into practice.

I believe that as a Graphic Designer it is important to be well rounded/ multi skilled and try out many different types of design practices (e.g. film, editorial, branding etc.) to apply different approaches to your design process and learn new ways to tackle problems in order to find a solution in a creative way. I believe that learning to code is a valuable skill as a Graphic Designer and I hope to continue putting the new skills I am learning to good use.

To visit my live website, follow the link below:

eilidh.design

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s