Design Companies Website Analysis

I will be looking at different design company websites and trying to analyse how and what makes them effective as portfolio websites. Looking at things like ease of navigation, accessibility, and design elements…
Screen Shot 2015-04-29 at 11.05.23PENTAGRAM

http://www.pentagram.com/work/#/all/all/newest/

My first impression of the pentagram website is that it looks cluttered with too many thumbnails on the home page. It also has a side scroll bar at the top which I personally don’t really like as it doesn’t feel natural to scroll left and right. When clicking on the ‘All work’ button a scroll comes down with many categories to choose from. I had to read the ‘about’ section of the website in order to get a better understanding as to what exactly it is Pentagram is about because the work seemed so varied. Once reading the about section it quickly becomes apparent why they have such a vast collection of work in many areas as Pentagram is the world’s largest independent design consultancy, the firm is owned and run by 19 partners.

Screen Shot 2015-04-29 at 12.48.38

Apart from the initial impressions of clutter, the navigation was good and the vast amount of work on the website is well organized and easy to find. When clicking on a particular project the work is displayed nicely. The hierarchy of information is clear through out the website with a good use of typography to disseminate the information.


Screen Shot 2015-04-29 at 11.44.41 WHY NOT ASSOCIATES

http://www.whynotassociates.com/

The initial impression of this designers website is the large image spread across the entire page, it is irrelevant to the website apart from being a photo of the designer. It makes it unclear as to what this website is about as the image is signifying that it’s either something to do with camping or photography. The type on the top left is a bit too small with no clear type hierarchy except for the highlighted orange website title which is the same size as the rest of the navigation buttons. When clicking on a navigation link to a specific piece of work the background becomes plain white with the simple navigation links on the left it feels like its lacking something, as well as clearer labels for the work and description and going back to using type hierarchy to break down the information.

Screen Shot 2015-04-29 at 12.44.38

Once on a project page, you can scroll by clicking and dragging on the page and pulling left/right and some up and down movement. The work is not displayed on a grid so it looks like its floating on the page, its and interesting way to navigate with but I think it deters from the work because having the work laid out like that becomes a bit distracting.


Screen Shot 2015-05-01 at 11.57.32

JAKE TILSON

http://www.jaketilson.com/index.html

I find this website to have too much happening on the home page, having a Tweeter feed, Instagram feed and use of 3 different typefaces and weights. There is no focal point on the home page, the name of the website and the navigation buttons on the top banner are neither left aligned or centered I personally find this distracting and doesn’t look right.  I also find it confusing to have repeating categories on the thumbnails e.g. ‘Art’ displayed twice seems unnecessary. The frames in which the portfolio pieces are displayed seem too thick. There are a couple of unnecessary graphics at the bottom of the page which are not buttons and seem to be purposeless.

Screen Shot 2015-05-01 at 13.28.00I am not keen on the choice of colour scheme through out, I don’t think the choice of typeface works well with the colours used especially on the red banner with bright yellow type with a light murky green background. In terms of navigation the website works well. I think the design of the website is not very strong and might not be too appealing to the audience and possibly putting off potentially clients.


Screen Shot 2015-05-01 at 13.32.11

SPIN

http://spin.co.uk/

I like the approach of having a banner displaying the latest work on the website although it perhaps assumes that you already know what the website is about because it’s not immediately clear unless you purposely where looking for it. The navigation links on the left are very straight forward ‘bring down menu’ with subcategories, and works effectively. If you scroll down you can see ‘selected work’ displayed in large thumbnails which I think in this instance it works because it helps with the minimal feel of the website letting the images speak for themselves. Having all the work sit in a black background helps the website work together better and even though the colour scheme is a bit dull but works at effectively showing the work instead of deterring from it.

Screen Shot 2015-05-01 at 13.57.51I like the use a bring down menu for the project information as sometimes it looks better to just have the large images to display portfolio work without the distraction of the body text. I don’t like the typeface used, I find that a sans-serif typeface like this is very dull and plain and works better in a smaller size used in body text. It feels a bit big for that particular typeface. Because there is very little text in the website it seems to be lacking hierarchy within the navigation itself.


Screen Shot 2015-05-01 at 14.10.49

Studio Cuculic

http://www.studio-cuculic.hr/

What’s immediately apparent of this website is that It doesn’t fit appropriately in the browser and only takes up half of the page. This was maybe because it wasn’t tested properly or maybe it was intentional. Either way it is not using the space appropriately and there is too much white space. Because of this the rest of the website looks very small, the thumbnails could be a little bigger to compensate. The type is too small and someone with visual impairment would have a difficult time reading it.

Screen Shot 2015-05-01 at 14.22.13

The concept of the website is minimalistic and I think it would work nicely if it wasn’t for the incorrect dimensions and large empty space white space. Navigation wise it works fine except when clicking on a project and there is more than one image it isn’t very obvious there is a small link to click to the next image found towards the bottom right of the page that should be better positioned directly underneath the image it’s self or made more obvious. The website is originally in an eastern European language but it’s accessible to English speakers by selecting the language on the top left.


Screen Shot 2015-05-01 at 14.36.27

DESIGN GRUPPE KOOP

http://www.designgruppe-koop.de/

There is not an option to change the language on this website which doesn’t help the accessibility of the page for non native speakers. I found it strange that even though the website is not in English there are a few English words laid around the website. I like the use of a banner on the home page displaying work with the option of scrolling left and right. This is something I’ll be looking at incorporating into my website. When clicking on the portfolio page, the work is displayed in the common thumbnail grid form but has a nice interactive element when hovering the mouse over an image it highlights the thumbnail box into a pink box with a description popping up within too. This works well as it makes it clear that the thumbnails are links and the captions are non intrusive.

Screen Shot 2015-05-01 at 14.51.50The work is displayed in a nice sized image with a description running on the left. Even though I can’t read it, it is clear and has a good hierarchy to the information provided. There is also smaller thumbnails below the main image with the current one highlighted to make it clear that they are also links. I personally don’t like the colour scheme but overall the website looks good with a modern feel to it.


Screen Shot 2015-05-01 at 15.06.23

SEGURA

http://segura-inc.com/

This website has way too much going on, it is unclear where to begin looking. It has a thin banner at the top that is a little bit hard to read because of the image and looks out-of-place as it is using a different typeface to the rest of the website. There are way too many tables with boarders around them to help keep the sections organized but there is too many and it looks messy making the navigation confusing, even when clicking on the portfolio button, the portfolio page had a very big list of categories making it feel like you are browsing amazon. I think this could be fixed with drop down menus if its necessary to have so many categories for the work.

Screen Shot 2015-05-01 at 15.17.55The work is displayed in a simple but effective scroll down way. The website is too text heavy for a portfolio site and the use of so many tables with boarders makes it feel outdated and saturated.


Screen Shot 2015-05-03 at 21.30.37

SAGMEISTER & WALSH

http://www.sagmeisterwalsh.com/work/

I like this website due to the great idea of creating a raw photograph of a design studio as the home page background and making it interactive by placing the navigation buttons as part of it. The rest of the website navigates very well with more than one way to find your way around. It’s also consistent through out and the information is nicely laid out.

Screen Shot 2015-05-03 at 21.30.58

The way the work is displayed is good using a grid structure and keeping the pages small without having to scroll too far down. The portfolio page doesn’t say what each project is, encouraging you to click on it and find out more about it. There are several ways to view the work with design elements such as left and right scrolls on the thumbnails. The simple black and white scheme works well and the boarders help frame the site nicely. There are no categories so the work seems to be displayed by how recently it was uploaded. I would prefer to have categories on my website but it’s not necessary as the quantity of work is small. I want to make something like this for my website by possibly using an image to integrate itself as the home page. The navigation aspects would also be something I would like to apply with a similar grid structure for my work as I feel a four or three column structure works well but anymore than that and the thumbnails become too small.


Screen Shot 2015-05-06 at 10.59.12

BIG FISH

http://www.bigfish.co.uk/

This is another website that I like, because of its simplicity and clean look to it. I like how they have used a white box frame over a white background framed by a drop shadow centering the design layout and bringing it forward. I like the use of typography on the site using simple but strong typefaces that fit within the style of the website. This site also uses the side scrolling banner displaying the work on the home page this is something that I like that I have seen on other sites and by scrolling down you are able to view more recent projects.

Screen Shot 2015-05-06 at 11.01.41

The navigation of the website is simple and its easy to find your way around. Although work is not categorized, the volume of work is not too big to be a problem for someone to find their way around. In this case most of the work here looks similar in style so the work displayed works well together. There are several things about this site that I would think of including into my own site for example, I think this is a strong online portfolio, I like the white frame with a drop shadow forming keeping the frame of the design, the use of typography and the banner for displaying work. I think the white frame centering the design makes this and elegant website.


Screen Shot 2015-05-06 at 10.38.47

JOHNSON BANKS

http://johnsonbanks.co.uk/

I like the creative approach this website took by getting rid of the usual navigation links on the top or side of the page and integrating them within an opening paragraph on the home page. It seems like an informal way to introduce the website to the viewer which works nicely by making the viewer read the paragraph and click on which ever link they like. Once you clicking through to a category the links are made smaller and brought up to the right corner of the page, the headings are also placed in the same colour coded boxes.

Screen Shot 2015-05-06 at 10.57.29

I think the website has a clean and simple feel to it and finding your way around it is easy. The work is displayed neatly and clearly. I like how you can view the projects in more detail if you wish, and read the development of each of their projects. This is yet another example of a modern clean website that focuses on displaying the work effectively without the website design interfering with it.


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