Inspirational portfolio websites.

Websites nowadays have dominated paper-based portfolios. Almost every designer today has their own website, which shows off their work as well as sharing what is going on around them on one page. Even journalism has spiraled in the past few years, encouraging aspiring designers (and anyone else) to document their work and present the journey to how they came about from it, consistently developing their knowledge and skills as they show people all across the globe. I took a look at a few websites of well-known designers, as well as those still developing to look at their styles.

Screen Shot 2015-04-28 at 17.02.17

Screen Shot 2015-04-28 at 17.02.44Pentagram:

One example I looked at was Pentagram, one of the biggest design industries in the world. They are an inspiration to the majority of aspiring companies who want to develop, as well as being one of their clients, such as the New York Times and TIME magazine. The homepage is laid out entirely with a list of their work in picture format, with filters above.

Because the company has produced so much work, presenting the pieces in a neat file in certain orders of your desired choice keeps everything neat and organized. I like how they have allowed minimal colour and design on the page, allowing the work to show what they are capable of instead, keeping everything very professional.

They even have other links such as articles from/about them such as Alan Kitching’s A-Z in Creative Review and being featured in The Guardian. I really like how they have kept everything professional looking, but also interacts with the clients and viewers.

Spin:

Another example I had looked at is Spin. Spin’s own website involves a lot more colour and creativity to the design of the website itself, however it retains the neutral theme of only using gray scale colours. I noticed throughout looking that they produce on the majority prints and digital based work such as working with the identities of University of Creative Arts and Channel 4.

I noticed also, that all of the work is finalized on a digital base, which tells me again that digital is what they specialize in. it also helps to give the final product a crisp finish. The site as a whole is quite easy to navigate through, as they have fewer categories of what they do, but I especially like how they have isolated only the final image of one part of the product on the list of items, as well as showing how that product was made; whether it be print or motion based.

I liked how this site interacts with us with a journal of what they do throughout the year on the site. They stick with the theme in including photography images as the main highlight on the list with a rollover button to give more information about it, showing us what they are doing as well as designing.

Another website that reminds me of this design is: www.gavinambrose.co.uk

Ligalux:

Ligalux is a German design site that works on (the majority) prints. Although I am unsure about the background design, I feel that the idea of the pictures changing on the rollover is interesting. It is clear that they want the pictures to show the audience what work they specialize in, such as books, posters and leaflets.

Personally, I feel that as well as the background design; the font and colour scheme could have been worked on a little bit more carefully. Although they show the correct intentions, such as showing their work on the homepage and having the menu bar at the top etc. it doesn’t stand out like a portfolio website should. The pictures for example, are black and white, matching the background colour. This does not make your work stand out, it in fact is making them blend into the background and not showing its full outcome to us unless we hover over it. The images look beautiful when you hover over them, and it would work better having a plain background and coloured images, perhaps even when you hover over the image it turns into another piece of work from that project?

I like how they have set up a blog site on the website, which keeps you in the loop of what is happening currently at that time, and what they may be actively doing also, which helps to gain recognition to others.

Other examples of sites that are simple are: www.whynotassociates.com and http://www.miltonglaser.com/the-work/

Studio Cuculic:

This is one of my personal favourites in the design layout. A Croatian design company who use perspectives of their work to draw you in when you enter the website of their best/newest pieces. The pages are laid out in a very simple layout, with the menu going down to the side, with the estimated ratio of photos to writing of 80:20.

Looking at the page, they specialize in a lot of different things relating to design, whether it be digital or drawing, but I love how they put a bit of everything at the front to give you a taster of what you would be expecting if you were to use them. The characteristics of the website is very professional but it is also interactive, as they show of proudly their work. Although they have no blog on their site, you are still able to communicate them through a shown link on Facebook.

They would be able to build better communications with people however if they were to set up a journal or a blog of their journeys, inspiring people around the world of their creative talents. It is clear that the site is only used for portfolio purposes only, and to show clients what they are capable of.

Another good example of work that is more to the point is: www.nbstudio.co.uk

Design Gruppe:

Design Gruppe is another German based company. Immediately the site invited you with awards and the latest news going on around, giving the customer/client the impression that they are actively involved in projects and interacting with people around them. The pages that show their work do not appear to exaggerate anything. What is meant by this, is that the images for example are not the primary focus when you click on the button to view the project, which does not imply to the viewer that they are ultimately proud of their work, and feel that they have to explain a lot first.

It is obvious that they have built a lot of solid relationships with the awards that they have been presented and shown on the homepage, which is encouraging for the clients who are thinking of working with them, however the overall structure and design seems dated. The brown border on the sides make the website not feel like a portfolio, but a site of information instead.

A way to make this website appear much more outstanding, would possibly be to have the work presented on the very first page or at least the categories, and have the awards separate on another page, and have it as a title on the menu instead, because viewers and clients are more interested to see what they can do, instead of what awards they have won.

Segura:

This is another example of a website that has a lot of information stored on one website. It is clear that the company is a big company and that viewers and/or clients would want to see all the information at once when they first look at the homepage. The website shows a lot of work that they have done, as well as showing the relationships they have built through their news and blog pages.

I really like how they have made sure that everyone is involved in their site, and included more personal posts that would appear less relevant to design in itself, but helpful to general people. What I am finding challenging is the design layout and understanding in some cases of where I am on the page. I feel that the page almost needs to be stripped to about a quarter of the information that it includes on every page.

Because there in so much information on the page, it could look a little bit overwhelming when you want to look through what they have done. This could potentially lose customers; despite they may be a very well known company. It has been shown that minimal designs appear to be more effective, especially in design.

Another example of a website that is very informative is: www.jaketilson.com

Johnson Banks:

A great example to use type as a way of interaction. This website shows how blank space on a page is an effective way to use colour in other parts to make them stand out against anything else. Johnson banks have worked with major companies such as Virgin Atlantic, More Than and the Science Museum. The idea of breaking down the categories of their work in a paragraph on the homepage is a different way of presenting, showing a more informal design of their work.

I’m not sure if I would use the structure of the website however, because being able to only click on the words selected can get confusing, with not menu bar either. Having the page split seems like a good idea on the homepage also, but as you go through their work, it appears to be crammed into one side of the page, which could put someone off wanting to go through the whole lot. I think having pictures and text separate on a page is a better approach to take, as you would be leaving space for the person to read, but also examine the picture separately, instead of always being distracted and trying to do both.

I like how clean the website appears when you glance at it however. The font is easy to read and is not harsh to look at when you try to read it. Looking at this website, I feel that it is not a professional portfolio from a big company because of how informal and scattered certain parts are on the page. By limiting more on the homepage and having a menu bar, as well as separating more the image and text, it could give out a much more crisp look.

Other examples similar to this website are: http://www.saedmeshki.com/main.php and http://www.barnbrook.net/index.html

Pearl Fisher:

Pearl Fisher shows a lot of interaction on the homepage, which drives you straight in when you look at it from first glance. Having all of the images in the grid change in a slideshow makes you intrigued to what one is about. Working with companies such as Starbucks, Waitrose and Absolut, they neatly boast their design work in all different categories to really break down what they do.

The website itself is incredibly easy to navigate, and I love how it has broken everything down into very specific categories. The images themselves are either photography or digital based with a white background if necessary. All of the pictures also are filled with colour, bringing out the designs against the plain template of the website design. I really like how they have structured the whole theme of the website, as it also would make it easy to navigate if you were to look at it through a phone or tablet with the grid structure.

Being such a big company set in two major cities, they have a lot of events and interactivities going on constantly. They separate well all the different categories such as exhibitions and shows, articles, interviews and awards.

An example of a website that also showed good interaction is: www.hat-trickdesign.co.uk

Screen Shot 2015-04-29 at 10.31.12

Screen Shot 2015-04-29 at 10.37.40

Big Fish:

Big Fish is another UK design company that also stands out with its interaction with people, including customers mainly into keeping in touch and up to date with what they are doing. The topics on the menu are precise and direct, which makes it a lot easier to find where you would like to go and search without browsing too much of the web.

The informality of the website makes it appear a lot more fun to go through and read up on what they do. When looking at their work, they lay out the text mainly on the left and have a slideshow or a selection of images neatly presented on the right with a background that suits the object/scene, still giving it that professional look to it.

It is clear that the company targets people who appear quite light-hearted and prefer to actively get involved with them. I really like how clear and precise this site is, and that I can relate quite closely to this website with its informal but professional character to the website.

Stefan Sagmeister:

Sagmeisters’ website is a website which everyone would take inspiration from. His homepage shows what appears to be a constant video of the studio and live footage of what they are all doing at this current moment in time that shows still images every minute. His menu bar is discreet but drops down to the categories that you may wish to look for. The logo is placed in the top left, allowing you to return to the homepage by clicking on it also.

The homepage is especially interesting, and looks as if they had stuck down the ‘buttons’ on their actual floor, and adjusted the settings so that when your mouse hovers over that area, it will direct you to that place labeled, which is also clever because objects overlay it and you do not needs to constantly edit one photo to get this effect, making it much more interesting to look at.

The neutral layout of the website makes it really easy to navigate, with precise links without revealing too much detailed information. The portfolio side of their work is also laid out in a grid form, allowing you to look at the images and decide what one may relate to you or the client to see what they do. I really like the slideshow they produce also, revealing only a few images of what they have done from that project.

To make a website always this interactive with viewers, it takes a lot of time and commitment, which is reflected from this. The whole layout and idea of this website showing what they are doing is an extremely clever idea to keep the viewer coming back and seeing where they are or what they could be up to next. It is obvious that this website is for clients and customers to view, and is very open to opinions and answers. Looking through you can see blogs they have written, and extended work that they have volunteered to do and work with inspiring designers such as Erik Johansson, which shows they are willing to work with people outside of the studio.

Another example of a fun interactive blog is http://odedezer.com/portfolio-category/work/ and one to give you some inspirational thoughts, http://erikjohanssonphoto.com

Charlotte Tang:

Charlotte’s website is a website that I have found some inspiration from in the past with her thoughts and layout of her website. Her website represents a much more personal portfolio based website, but still has the same general understanding with the concept and layout of the majority of portfolios that I have seen. Her homepage is the page of her work laid out in grids but in the shapes of circles instead of boxes. Her limited use of colour also makes her portfolio quite interesting, showing the colour of her work as you hover over the image before you click on the link.

Her portfolio is precise and easy to view. Her blog is very personal and includes stories that are not just all about design, but about her lifestyle also, which invites people in to view her lifestyle and interact with what she does outside of purely designing also.

The issue with her blog is it is hard to get back to her portfolio website as there is no direct link, which would put people off wanting to keep looking if they cannot redirect where they were originally.

Another website portfolio I have found to be quite personal also is http://elupton.com/designer/

Ben Hulse:

Ben Hulse’s website is an excellent example of a personal portfolio that purely shows what he is capable of doing. Looking through what he has got there are only a few categories to separate what he does for people to see, which makes it a lot easier to navigate. Having a website with not a huge amount of extended information, he has kept everything concise and clean.

Ben’s portfolio I feel I can relate the most to when I think of my website. Because I will not have a huge amount on there to start with, I would need my website to be crisp and simple, as well as to the point. Ben has successfully put his website together to show exactly this to viewers and clients, so they can see purely what he does as design work. I have noticed in the majority of portfolio blogs that the description is also concise, and works better having the text separate from the image, allowing you to focus on reading or looking at the attention to detail.

Another website that I find inspiring with their portfolio, but shows a lot of work that is ‘played’ with. Gerren Lamson’s work shows a much more professional approach to his work, showing pieces that he has produced outside of work hours to help inspire us. I really like how he has made his work look professional, but have an informal atmosphere to his work by the way that he writes about his work; as if he was telling us the journey throughout than just what the final product is about.


The main designers’ websites that have inspired me the most personally are Studio Cuculic, Pearl Fisher, Sagmeister and Ben Hulse. All of their styles of websites are clean, neutral and precise, enhancing colour only in the grid of the portfolio work. All of their websites compliment the target audience they are aiming for, inspiring and generating fresh ideas to clients and viewers.

I think having a blog on the website is also a good way to allow people see the details of your work and the thought processes throughout. I could also write articles to put on my blog also to show what I am interested in outside the design world. Their websites contain relevant information on every page that is necessary for people to see, keeping everything the same in the category you are looking at. The themes for all of the websites involve simple fonts, an easy logo and a menu bar that is subtle. I have also noticed that the description of the work is detailed but precise. I think that having a brief description of the journey you came to making the final piece, depending on how extensive the project was and what was included within it.

What I noticed that appeared to be missing in a lot of these websites was a button that someone was able to click if they were hard from hearing or visually impaired. Although it may be difficult to be able to create this, I would like to look more into detail about the best possible solutions to resolve this with my 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 )

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