PPP2: Web design.

PPP2.

SELF PROMOTION.

WEB DESIGN. 

Although I felt comforrtable creating my printed ephemera for my promo pack/ stationary without looking at any other designers, I am quite inexperience, through choice from lack of interest and enjoyment, about the web world. When thinking about my own self promotional website I wasn't sure, what to include, where to put things, how to catergorise my website. 

Therefore I researched and looked into the personal websites of many freelance Graphic designers.

I started by looking at Graphic designer Lee Masons website. It is clear that Lee is a very experienced Graphic designer, with a large portfolio and string of sections to his websites. He has added details not usually seen on such platforms including, testimonials, a section of the website, in which he can make public the opinions which his clients have of him. 

This is clearly Lee's main platform for speaking with clients and promoting his work, as he outlines a lot of information about himself on the site such as services, a lengthy about me and testimonials. As a new designer with not much experience outside of college, I will not be able to go into this much depth on my website, however I can still take format and layout hints from pages I will be including such as an about me and portfolio page. 

Lee's website is very consistent in design and also very minimalist. His monochrome colour scheme means that any other colours on the page are bound to stand out. Making his work appear prominent over his own branding. 

In terms of the layout, the work is separated into a simple and clear to navigate 3 column grid. I also noticed that there are roll over cues on each of the pieces of work pictured. However what lets this down is that the cues are very much unreadable. Although Roll over cues are a great tool for making the page easier to navigate, if I choose to use these in my own website, I must make sure that they are easy to read.

Another details that I also liked about Lee's site was the experimental nature of playing with hierarchy and text. Lee uses a larger, darker and bolder font to make statements. These by themselves, can be enough information for the browser, or they can continue to read the text in relation to what is said in this bold heading. 

The next website I looked at belonged to freelance Graphic designer Mark Lawrence. Mark Lawrence uses a rarer form of navigation on his site, adhering this to the left hand edge of the screen. The catergories seen on this website, seem a lot more adequat for an up coming Graphic designer like myself. Here he has simply split the website into work/portfolio, a blog (wouldn't be necessary for myself), about, and a contact page. 

Again I went to look at the work page to see how this has been laid out. Just as Lee Mason does, Mark uses a combination of white and black branding, allowing his work to to the talking. The only issues I have with this page is the extra green banner implemented on the page at the right hand side, I believe that when creating a webpage, for continuous and easy navigation it is always appropriate to keep the page balanced, extra details such as these hinder that and distract the eye, which is not what you want on a portfolio page.

However I was very impressed by Marks experimental rollover buttons. Instead of making the work dissapear, browsers are still able to see some visual of the work, and are then given a name for the visual. this could be a more attractive prospect than making the whole image disappear. 

Mike Kus is another great graphic designer who's site I really love for its amazing simplicity and minimalism. I like how the whole of Mike's homepage is a slider filled with his work, meaning that the work is truly what speaks on the website, which I think is really important. I also like that as well as the 3 main sections I have seen on the home page (which is the most appropriate categorising I have seen so far in terms of what will work for my website) the designer has given links to other platforms such as twitter and Instagram. This way, we are allowed to as browsers, keep up with the designer in day to day life, looking at and hearing about projects they are constantly working on. 

His work page also works as well as his homepage. It is eye catching, clear, easy to distinguish. His roll over buttons are equally effortless and accessible and very quick in response, creating a perfectly easy browsing experience for the user, and therefore allowing the browser to look at a larger amount of the designers work in a small space of time. 

I also had a look at some designers websites whom I would consider some of my favourite designers, whom I also tend to have a similar style to. Kate Forrester (website seen below) is a very successful Graphic designer both locally and internationally. Her wealth of experience can be seen by not only looking at her work, but also her homepage on her website. Kate does not have a portfolio category, she does in fact split her work into 3 sections; words, pictures and books. There are also other sections on the site such as news and newsletter, in which we are invited to keep up with the design projects that Kate delves into, as soon as she starts working on them. Alike to Kate Forrester, my logo is quite flowy and intricate and so it is inspiring to see how she has still managed to keep a minimalist theme on the site by, keeping any other detail down to a necessity. 

Although I am a fan of Kate forresters, I am not keen on the design of her website, as to me, with the additive details of lines inbetween and surrounding her navigation and other features such as wrap around text, makes the website look quite untidy. 

On Kate Forrester's work page the layout is again sectioned into a grid and we are able to view the names of the projects she has created in the left bar navigation. However it is not clearly appointed what name goes with what piece of work, do we read the works, left to right or top to bottom. 

When clicking on one of the pieces of work, the name compatible with this is highlighted in the left navigation bar. However there is solely one image of each piece of work and no description what so ever.  

Lastly I looked at another favourite Graphic designer of mine Jessica Hische. 

After looking at these websites, I wrote down a list of things which I need to consider:

- How many pages will the website have?

- What pages will these be?

- Will I use left or top navigation?

- How will I get my intricate logo to work online?

In terms of pages I think it is important to realise what the purpose of the website is. The number one priority for my website is to promote both myself and my work. Therefore there are only 3 other pages, other than the homepage which I would want to have on my site. These are; an about me, so that browsers can learn about me and my practice, a work page where browsers can view past projects I have completed, and a contact page, with my details incase people desire to contact me about work. 

The work page will have further navigation, in the format of a grid which will have rollers as seen above as this is is a useful tool.

In terms of the next two questions I have about my website, I will have to sort these by trying out different options.

I sketched up each of my screen designs below, I decided to use a top of the page navigation as this was more fitting and appropriate for my logo. My logo is quite wide and so it wouldn't really work in a left  page navigation system as it would make this section very wide and take up a lot of the home screen. This also conquers the issue of getting my logo to work online. 

Home screen:

I decided for the home screen I would do something similar to graphic designer Mike Rus' website. In which I would use a slider to take up the whole home page in which would display my work. I felt that this homepage layout really reflected the intentions which I had in my printed portfolio which was to let the work do the talking. The plan would be to place my pieces of work on background with a similar colour palette to the work pictured. I would produce my logo in white and this would stand out against the different coloured backgrounds of the slider.

I decided for the navigation bar that to be consistent, the menu choices should also be in white which would then change to the dark teal/turquoise colour and my promo pallet.

Below is a view of how the slider would switch between work.

About:

I kept my about me page design simple and similar to the rest of my web layout. However It was also an opportunity to reuse my creative cv which I was so proud of. I felt that this really represented myself well to both employees or clients, and that it included any information they would need to acquire. 

Work:

For my work pages It was really important for me to create an initial page the user would land on that would show icons of my work, really easy to use. 

Keeping the same navigation as that shown at the top of the page for consistency, I created a clear and strong grid of icons of my work that would be simple for any user to understand. As the websites purpose would be to promote my work, It is important that this is the focus of my website, but also that work can be found easily and quickly during the navigation sequence.

For this reason I have created the design so that each piece of work has a simple roll over action. When the work is hovered over with the users mouse, they are able to see the name of the client, what type of design it is (packaging, publication etc) and then when it was completed. This way the user can also view how I have improved over time by dating the projects. 

Below is the first page the user will land on, displaying my vast range of work, the second, how an image will look when rolled over, and the third, how each individual piece of work will appear on its own page:

Contact:

The contact page follows the same format seen on the final work page using the overhead headline section to write a small message to users. Its really important that I come across to possible clients as friendly and approachable and so the headline I have chosen to use is 'I'd love to hear from you'. 

This is followed underneath with a simple list of information including another another welcoming message 'If you've got a great project going on, drop me an email or we can talk over some tea.'

This is then followed by two ways in which people can contact me as some may wish to email me, however others may wish for instant communication such as talking via phone.