Final Website

Home Portfolio About Contact

Portfolio Pages

I am happy with my final outcome. I think it is easy to navigate, everything is labelled clearly and I think it is a strong design, hopefully making it a successful website. I think the simple style I have used has worked well and I have made sure not to make anything too complicated. I think if I had more opportunity to take this further I would consider exploring different, more complexly made designs that don’t necessarily appear complicated or confusing. I would also want to look into accessibility and perhaps using spoken labels or the option to change the appearance to accommodate those with sight or hearing problems, as I did not get the chance to explore this with any depth. I would also like to experiment with creating mobile and tablet versions of my site, allowing it to be seen from any device as this is something I am interested in. I would like to see how I can transfer the same design to a smaller screen whilst keeping it as similar as possible. Despite these things, I feel I have created a strong user website, and I think it represents me well as a designer and successfully showcases my work to most audiences.

Design Process

Before starting my design I sketched out some ideas about what I wanted my website to look like and what different pages would be included. I wanted to make sure I had a rough site plan before beginning anything digital so that I knew what I was going to need to make.

After figuring out roughly what I wanted my layout to look like and how I was going to arrange my site, I began using Muse. I started with a new blank site. These were the default settings that appeared on the new size page. I wasn’t sure about the width of the page and whether it would need to be bigger, but after a little experimenting I found that however wide the page was, there was also an option for background fill which would fill the rest of the browser, no matter the size. This means that there would be no empty space that the site didn’t reach and also that my site would always be centered on the screen, which is what I was concerned about. I found that 960 was once the standard width for a web page, and after speaking with my tutor about it I decided to keep it at that width as I didn’t think there was any need for it to be bigger.

My first step was to create my master page and place my site header that I had previously drawn up. I knew that it looked better with a black background and that I wanted a fairly dark website, and so I made my web page black. I decided to keep the background fill white and to bring my site page right to the top which created a black column through the middle of the page. I chose to do this as I thought it would be more interesting and it would allow me to bring certain things right to the edge of the black, breaking it up a little bit. I also created a menu using the widgets library. I created four initial pages including the home.

After creating my master page, I went on to build my portfolio page which would hold all of my work. This is where I would place my Photoshop buttons. When doing this a menu appeared which allowed me to select which layers would appear in a normal state and which would appear when rolled over. I decided to keep the square idea, creating a 3×3 grid and ordering the work with the newest first. This means that it will be easier to update the site with new work and also allows the audience to easily see which work is the newest. I decided not to divide my work into categories in the end as I felt that my body of work wasn’t big enough. I also felt that whilst I am still experimenting as a student, much of my work would overlap a number of categories and I think it would be difficult to decide where to put certain pieces of work.

After placing my portfolio, I needed to make sure that they linked to something which meant first creating a new page for each piece of work. In doing this, it added each new page to the top menu as well which I didn’t want, and so I had to go to each new page and hide it from the menu. To then create the links I selected each button and then went to the hyperlinks option at the top of the page. I simply selected the page that corresponded to the button which created the link.

After all my pages were then made and I had made sure that all my links work, I started working on the layout of my pages, starting with my homepage. I wanted to include a panoramic style slideshow at the top of my homepage,making it the first thing the audience see and showing some of my work but without giving it away straight away. I took a black slideshow from the widgets library, input my photos and resized it to fit across the whole screen. I decided to take out all of the other parts of the slideshow like the counter and next/previous buttons as I wanted the slideshow to play through on its own but not be interactive, making sure it is not the main focus and does not take too much attention away from the rest of the website.

I decided to include a link to this blog on my website as this is something many other designers do. It allows people to see more into my work and the background of it, and also shows people a more personal, real side to me and my design. I chose to put this on my Contact page using a hyperlink to this blog, along with an email address and phone number.

When building the layout of my portfolio pages, I found it quite difficult as I wanted to try and have a similar layout for each, however all of the work for each project is in different sizes and has a different number of images to include. I chose to follow the 3 column grid I had used on my root portfolio page, having the text take up one column and then the work running across the other two. This wasn’t possible with all of my pages but I think it is successful on the pages I have used this on. I think it brings the pages together a little more by having a similar layout and following a grid for each.

As I was designing I was concerned about my header logo, as it didn’t state anywhere on my site that I was a designer or that it was a portfolio. I wanted to make this more clear and so I decided to add to my design. I hand drew a smaller piece of text saying ‘Graphic Design’ and added this to the logo using the same process as before. I scanned my image in and used Illustrator to live trace the image. I think that this has been successful and I think it fits well with the original logo.

After coming close to my finished design I found became less sure about the white background fill and whether it was taking away from the website slightly. I wanted to make sure my site was as strong as I could make it so I tried changing the background to black to match the colour of the page. I felt like this made the site a lot stronger and made the contents of the site stand out a lot more. I think it also makes the site seem wider, where it is not held in by a big white columns either side. I think this was a fitting final touch to the site and I think it has made it look much stronger and much more like a real website.

Website Rollovers

On my  website I planned to include a separate link to each piece of work that I include in my portfolio. To hold the link I wanted a small image of each piece of work, which when clicked on will take you through to the page with that work on. One thing that I was very keen on using in my website, and that I think would be perfect for this, was rollover states for buttons, meaning the appearance of the button changes when the mouse is hovered over it. After watching the Muse tutorial, I thought the best way to do this would be using Photoshop and placing the final PSD as a Photoshop button in Muse.

For my portfolio page I knew I wanted to use a square grid of images of my work, and so I kept this in mind when creating my rollovers. I began by placing a black square over each image with the opacity turned down, which would appear when rolled over. However I didn’t feel like this was strong enough and so I also added a title to each project, appearing on rollover. I think this is more successful and also creates a friendlier website to the audience as it allows them to see roughly what they will be looking at without having to click through to each individual page.

Pick Me Up

A little while ago I visited the Pick Me Up design festival at Somerset House. It showcased a range of young, up and coming designers, graphic artists and collectives in an exciting, bustling exhibition that featured designers’ stalls with work available to purchase and with designers working on live briefs.

I thoroughly enjoyed my day and I found it interesting to see the range of different work and to get a glimpse into the way that these designers work and create art. The first area was held downstairs in a gallery style space, exhibiting a selection of works from various designers each varying in styles and processes.

This slideshow requires JavaScript.

One artist that I found particularly interesting was Hattie Newman, who creates 3D models using card and other materials. These models often depict landscapes, places or objects. These models are then photographed and presented as an image that appears to be digitally created. This is done with the clean appearance of the materials and the way that they are photographed. I think this is an incredibly clever process and I think she does it very well. Had it not been for the exampled of the 3D models in the exhibition, I don’t know if I would have been able to figure out how the pieces were made.
http://www.hattienewman.co.uk

Next I ventured upstairs to an area that felt much more like an art fair than an exhibition. This area was a lot more bustling and full of energy. This is where the designers’ stalls and working designers were placed. I immediately found this exciting and ran straight in. As I wandered around more and more I started to notice a certain style that was fairly prominent in all of the works. The theme seemed to be a strong use of bold, bright colours and simple, block illustrations. The whole space was a bombardment of colour and bold works which I personally loved. Whilst there was a lot of similarity in the styles and ideas of many of the designers, I think it was still clear to see the individuality within the works and to see the way these designers have put their own spin on the styles and ideas. There were a number of illustration works and also typography works that I loved and I feel I have found some potential inspiration for future works.

This slideshow requires JavaScript.

One stand that stood out in particular was Sope Inc. who had brought a printing press and a collection of plates, allowing people to chose a design and a background and create their own personal print.

‘Sope Studio is formed of four practising designers, each having a specialised creative area and using new technologies with hand-crafted techniques. Brought together over the past 5 years by circumstance and a mutual appreciation of each others talents, the studio collaborates to join skills and feed off each others energy.’

http://www.sopestudio.com

I thought this was a brilliant idea and immediately drew my attention as I have always had an interest in printmaking. After speaking with the man making the prints I found that they were part of a collective of designers and artists, each with varying skills and interests, but which all compliment each other, making for some exciting, unique work. I couldn’t help but buy a personalised print of my own.

I feel that going to Pick Me Up has helped me gain more understanding of what is going on with new designers and what seems to be popular now. Whilst I don’t think there is a huge amount of diversity in the work that was presented, I feel like I can still take inspiration from this and feed it into my own work to create something which is well received, but is also very different and stands out from the crowd. This is something I want to do with my online portfolio, and so I think visiting Pick Me Up has helped me to understand this more and has given me some more ideas about where I can go with my design.

Adobe Muse

Adobe Muse is a software aimed primarily at designers. It allows the user to design a website, using an interface similar to InDesign, arranging everything easily so they can see it. This means that the user doesn’t need to delve into any code and therefore can create their website directly, rather than creating a design and then having to send it away to a developer. I wanted to experiment with this software as it seems to be a fairly straightforward process whilst allowing for some extremely creative, professional outcomes. I began by looking at various tutorial videos to give me an idea of how to work the software and where to start, and I found the video above extremely helpful. I like how straightforward and convenient this process seems and I think it will be much more suited to the way I want to work and the things I want to create.

I had a look on the Muse site and found a page called ‘Site of the Day’ which showcases some very well designed websites, all created in Muse. Some of these are very well put together and are very detailed. These all show some of the things that can be done within this process including animations, parallax scrolling and embedded videos. I definitely want to explore this process further and hopefully use this to create my own online portfolio.

Some interesting Muse Site of the Days:
http://muse.adobe.com/site-of-the-day 
http://dropmedia.tv/index.html
http://www.yihsuanlu.com/index.html
http://paulapetersdesign.com
http://das-werbeatelier.de
http://www.otaikavalleyeggs.co.nz

Dreamweaver Basics

As an introduction to building a website and different ways that it works, We were given a quick group tutorial on how a site can be made using Photoshop and Dreamweaver. We were given an example home page that had been mocked up and opened it in Photoshop. The next step was to use the slice tool to divide up any areas that were to be buttons or links on the website. I then went into the slice options for each link and renamed them so that I would know which slice corresponded to which button later on. After dividing up all the links I saved the page for web and then brought the html file into Dreamweaver.

When brought into Dreamweaver, all the slices I had made remained there, allowing me to use them. The first step was to make another page that one of the links would go to and so to do this I needed to add something new to my existing page. I decided to select the large image in the center and delete it, allowing me to place a new image of the same size in its place, creating a different page. I then saved this as a new page, titled ‘Portfolio’, allowing me to link to it.

To create this link I returned to my home page and selected the slice that I wanted to link to the new page, for this it was the ‘Portfolio’ slice. When selected, I went to the bottom of the screen and found the ‘Link’ option, and dragged the small cross hair icon towards the sidebar and onto the ‘Portfolio’ page that I had previously made. This now creates a link to the page when the Portfolio link is clicked. So as not to get stuck on the Portfolio page I then went to it and made another link back using the ‘Home’ slice.

Finally, I decided to make a third page under the ‘Contact’ link. To do this I used the same method as before by  replacing the center image with a new one and saving it as a new page, and then using the ‘Link’ tool to link all of the pages together.

Personally I found this method quite straightforward and fairly easy to do. However I’m not sure that it is the most effective way to build a website as it is very long winded and to create anything very technical or detailed I think would take a huge amount of work. I didn’t like how long winded this method was and how much it took to make it work, and so while I think it could be used very successfully, I want to explore other ways that I can make my online portfolio.

Portfolio Logos

Andreas Preis

Skinpop

MUTI

For my online portfolio, rather than having a simple title at the top of the page, I wanted to experiment with using a logo or more customised piece of typography at the top of the page. Some of the designers and design websites that I liked the most all used a custom logo on their websites. I think that this helps to create more of a brand for a designer as it gives them something to be recognised by.  I also feel like it can be used to reach a wider audience, as a logo will be more recognisable than just a name and can be used on anything, to appeal to more people, for example printing on t-shirts or custom stationery such as letterheads.

After looking at a few examples that I liked, I started sketching some initial ideas for my own site logo. I wanted to experiment with including my name and create a quite typographic piece as this is something I enjoy doing and I feel represents the way I work. I wanted to hand draw the typography and then scan it in to manipulate it and create a clean, digital design. I liked the idea of using a shaped border around the text, almost like a crest. I also wanted to use quite simple text, rather than clean, decorative, stylised typography.

After various sketches and ideas, I narrowed down my design and came out with this drawn piece of typography. I wanted to fill the border with the text as I think this creates a quite unique look and I also think it suits the style of typeface that I have used very well. I also really like the effect of perspective that is given to the text where the middle is larger than the edges. I wanted to experiment with something behind the text and I ended up with the lines that almost appear to be bursting out from behind the text. However I am not sure about this part of the design and I may remove it later on.

After scanning in my design I began to tweak it digitally and experiment with what would look best. I took the image into Illustrator and used the Image Trace tool to extract the lines and make them more solid whilst still keeping the uneven, hand drawn effect that I wanted. After that I experimented with the border around the text, giving more space between the text and the border and then experimenting with using no border at all, which I think is still successful as the shape is still held in the text. I think that this is a strong design for a website logo/header, and I think the hand drawn effect is successful and represents well the way that I work. I experimented with inverting the text to white on a black background and I much prefer this to black on white. I think it suits the style of text well and it also means that it will work on a website with a black/dark background which is something I wanted to think about using.

More Online Portfolios

This slideshow requires JavaScript.

Studio Muti. Muti is a design studio based in Cape Town, South Africa. I think compared with some of the studios I have looked at, they are not quite as well known, however their work is personally some of my favourite design. Their website is fairly simple and straightforward, although I think it is designed very well and successfully reflects the studios recognisable style of work. Again with this site, the work has been split into categories based on the purpose or style of the work. One aspect of this site that I really like is the way the links are laid out vertically to the side of the page, allowing the work to run all the way to the top. I think this creates a more landscape feel to the page which I think works well and helps to make the work the main focus of the page.

This slideshow requires JavaScript.

I think the Contact page of the site has been done very well. They have included a fairly informal photo of each member of the Muti team (including the office cat, Churchill) which gives a more personal, friendly feel to the site. This helps the studio to look more inviting, helping to bring in more work and attract a wider audience. I think this also shows the kind of people they are; as a light hearted, happy studio.
http://www.studiomuti.co.za

Carlos Garde-Martin. Carlos is a Brighton based designer who not long ago came to out university and gave us a workshop on the way he designs and works. His website again is very simple but very effective. The layout follows that of many of the sites I have looked at where the work is laid out in a grid. With Carlos’ site the work is arranged in squares with no space in between them, which does look good, although I think it can be quite crowded, whereas with my portfolio I would like everything to be more spaced out.

This slideshow requires JavaScript.

When rolling over the images in Carlos’ portfolio, it shows the title and a small description of the work. I think this is very useful as it allows the audience to quickly see what the work is about, making it easier for them to find something of interest rather than having to click through to each page of work.
http://www.carlosgardemartin.co.uk

Skinpop. Based in Mexico City, Skinpop is another, lesser known studio with some great design and a well made website. They have used a style similar to Carlos, with a grid of squares and a small description of the work when rolled over. What I really like about this site is that Skinpop have quite clearly created a brand for themselves, with the black and yellow colour scheme and the use of a snake as their logo and icon for much of their branding.

This slideshow requires JavaScript.

I really like the design of this site and also the use of self branding that the studio have used for themselves. This is something that I am interested in using and that I want to experiment with when creating my own website. I think creating a brand for yourself helps to establish someone as a designer, whilst helping to discover a signature style and also helping to bring a portfolio together as a solid body of work.
http://www.sknpp.com

Kilian Schönberger. Schönberger is a landscape photographer from Germany. I thought that I would look at an example of a portfolio from someone different to a designer to get some ideas about how other creatives have laid out their work. I found that this site is quite basic and while the photography is stunning, is not presented well or in an effective way. There are lots of images and they are laid out in an extremely long column that results in a lot of scrolling, which almost takes the focus away from the photography.

This slideshow requires JavaScript.

I don’t think this web layout works particularly well and makes a lot of work for the audience, which may well discourage them from the work. Looking at this site has been helpful as it has allowed me to compare successful portfolios with some that don’t work so well which I think has helped me to gain more of an understanding about what is successful and what isn’t, and the reasons why.
http://www.kilianschoenberger.de

Online Portfolios

As I am tasked to create an online portfolio for myself, I thought it would be wise to look at some existing portfolios from working designers and studios. I will be focusing on the good and bad points to them and taking parts I like as inspiration for my own work. Whilst I will look at some well known, successful studios, I will also look at some younger, up and coming designers as these will have less work, possibly be less formal and will look more like the portfolio I will be designing.

Spin. The first that I chose to look at was Spin, a design studio in London. On first approach, their website appears very slick and clean, with black and dark grey backgrounds framing examples of their design. The menu appears to the side of the page with a few links to the work, clients, journal and information about the studio. The work on their site is divided into categories based on the kind of work e.g. Identity/Digital/Print. I think this is a successful way to work, and it is the easiest way for the audience to find the kinds of work that they will want to see. However I think this is better suited for a portfolio with lots of very defined work, whereas with my portfolio at the moment it is a lot more open and I’m not sure that there will be enough work to be divided this way, although it is something I will explore further.

After looking at some of the work that Spin produces, I think the website is well suited, Much of their design is very clean cut, cubic and minimalistic. Spin like to play with shapes and lines of colour, and often use a very limited colour palette that almost always includes black. I think this very much justifies the very dark background to the site, which I think looks good. Personally I think white text on a dark background can be very successful and is something I have been thinking about in terms of my own site. I think it creates a more serious tone and can sometimes look more sleek and sophisticated than using white. I really like the Spin site and although their style is quite different to any that I have, there are certain aspects that I think are successful and that I want to experiment with in my own design, such as the dark background.

This slideshow requires JavaScript.

http://spin.co.uk

Sagmeister & Walsh. The next studio I looked at was Sagmeister & Walsh, based in New York. Already this site is very different from the last in its design and approach. The home page  appears as an aerial image of what looks to be their studio with the links appearing on the floor. Interestingly however, upon revisiting this site a few times I noticed that it is not one still image, an image that is refreshed every now and then with a new image of the studio. This means that the scene is always different, whether it be the light changing or where someone has moved a chair etc. I think this is a brilliant idea as it is quite simple, but very successful. I think it gives the audience a closer connection to the studio and also gives them more reassurance almost that it is an actual live studio and there are always things happening.

This slideshow requires JavaScript.

In terms of the rest of the website, I think it is quite simple and well laid out. I like the use of only black and white without too much colour, and I think the border works well and frames the site nicely. With the portfolio I like the simple grid structure used to present all of the work. On the top portfolio page it also doesn’t say what each project is, which encourages the audience to look further into ones that may interest them to find out what they are about. I did notice on this portfolio that the work is not divided into categories, but is all in one place, I presume in order of the most recent. Whilst I think that this might be more suited to my portfolio as I won’t have a huge body of work, I don’t think it works as well for a studio of this size with this body of work. I think that dividing the work into categories is much easier to process and makes it easier for the audience to find the kinds of work they may want to look at.

This slideshow requires JavaScript.

http://www.sagmeisterwalsh.com

Jake Tilson. Personally I think this is quite a poorly constructed website and also poorly designed. When first visiting the site it presents this cluttered, unorganised looking page showing links and a few examples of work. Everything just seems crammed onto the page with no real order or thought behind it.
It is only after clicking on one of the links and then returning to the homepage that it seems to have sorted itself into a more organised page. Everything is now centred and the design examples are now placed inside more ordered boxes. I think this already is a major issue with the site and has already put me off of the designer.

Although now the site is more structured and looks more like a professional website, I am still not keen on the design of it. I don’t think the choice of typeface is working well along with the colours used. I think that the typeface should be more integrated with the background for it to work better, and used in more subtle colours rather than bright red and yellow. I personally don’t like the colour scheme either. I don’t think the loud red and yellow are working in the way they have been used, especially against the murky green used for the background. In terms of the layout of the site I think it works fairly well; it is simple and easily navigated, and the work is split up into the kind of work it is. I just think that the design of this site is not very strong and does not give off a massive appeal to the audience, which is obviously not desirable for a designer who wants to attract potential clients.

This slideshow requires JavaScript.

http://www.jaketilson.com

Johnson Banks. A studio based in London, this website again has a very different approach. The homepage is very simple and rather than having the typical links back with a title running along the top, it features a paragraph with the links integrated into it. This is much more informal and invited the audience in to look at whatever they want to, even giving the option of a ‘Lucky Dip’ which brings up a random post from the website, giving the audience an idea of what interests and ideas the studio holds. After clicking through to a category, the links are made smaller and placed in the top corner, although they keep the position they held in the original paragraph with I think is very clever and is a subtle but very effective touch.

I think this is a fairly successful site and is easy to use. I like the way they have created a more friendly, inviting approach to presenting links, and I think everything is laid out neatly and clearly after clicking through to one. I am not so sure about the amount of white space and I think maybe a small addition of colour in some places may make the site more interesting for the audience.

This slideshow requires JavaScript.

http://johnsonbanks.co.uk

Big Fish. This is one of my favourite portfolios that I have looked at so far. There are a number of subtle additions that make this a successful website, for example the entire background is plain white, but the main area of the site is inside a white box with a drop shadow to bring it out from the background. I also really like the simple layout of the site and I think they have used typography well, picking simple, strong typefaces that fit with the style of the site. Much of their design is quite light, simple and illustrative and I think that the design of the site compliments this well.

In this portfolio they have not divided their work into categories, although it is not a huge body of work and I think the layout is clear and simple enough that this isn’t a problem and will still make it easy enough for the audience to find any work they want to see. Much of the work from Big Fish is also very similar in its style, which is not necessarily the case for some other studios and therefore I don’t feel that the need is as strong for the work to be split up.

There are various aspects of this site that I really like and that I want to think about using in my own work, for example the use of a drop shadow to brake up the background and not have to have a huge amount of white space. I also really like the use of a side scrolling gallery which is used a lot throughout this website. I think it is an effective way to show a large amount of work but without taking up a lot of space. It looks a lot neater and it is something I want to experiment with in my own portfolio. I also like the fact that they have included different pages for information about who Big Fish are and what they do. I think this makes the website more personal and gives the audience the idea that the studio is more friendly and inviting for them. I think tis is a successful portfolio and works much better than some others that I have looked at.

This slideshow requires JavaScript.

http://www.bigfish.co.uk