Rounded corners

Competitive Analysis Of A Professional Portfolio

Who And Why

Chameleon is the web site I have chosen for my professional competitive analysis.

Chameleon Digital Media is a company based in Huddersfield, West Yorkshire. The company is made up of a team of designers, developers and marketers and have been in the profession since 1998. This should provide me with a good insight into what makes an effective and established web page.

The company offer a wide range of services which opens the door to a larger target audience which is something I should aim at being able to provide by myself. Being able to offer a full package, rather than odds and ends, will be evident by the size of one’s portfolio.

With the criticism I gather on this site I will be able to paint a clearer picture of the demands that will be expected of me in the near future and to be able to showcase my skills in a more professional manner. This in turn will widen my employment possibilities in the near future.

Overview

From first glance of the website it is clear to see a hierarchy of information. The logo take’s precedence over all other text within the first fold line of the screen and is clear to see what the company’s purpose is: Digital Media.

The featured work takes up roughly one sixth of the horizontal screen space which is a design I would tend to steer clear of but I’m sure that this must be a positive function of the site otherwise it would be omitted from the design.

The second fold line omits the title of the opening paragraph which forces the user to use the scroll bar to keep in view. This paragraph cleanly states the company’s intentions and gives insight into some of the technologies that the company specialise in.

Overall the site has a sturdy clean finish and has a fresh colour scheme that reflects the times of our generation with environmental awareness and efficient productivity.

I think the content could have been spared on the first page or even given more room to flow down the page. From first impressions it feels a bit claustrophobic.

Navigation

The navigation on this site has two tiers and another situated half way down the home page.

I find this confusing and would prefer to use a navigation system that stuck to one area of the site and to keep it consistent. If this was a must in the design process then I’m sure the problem could be solved via drop down or fly out menus.

The second section of the navigation relates to the large internal advert contained at the top of the page. This then breaks down into a further navigation system to navigate between the secondary navigation system. This seems to be getting confusing very quickly and will be something I will avoid from any design I will produce for my portfolio.

The navigation also lacks the :active tag in its CSS which can cause the user to forget which page they are viewing if they were to get too incised with the content.

The XML file for the site navigation keeps Google up to date with crawling and is paramount with creating SEO friendly websites. This should be taken as the norm and never fluctuated on.

Over all the navigation could be improved upon with this site and is something I will need to investigate to find the appropriate solution to my portfolio.

Proximity

As previously mentioned the site’s content feels a bit feels a bit claustrophobic and I’m sure this can be solved by either increasing margins and padding or to keep sections of the site aligned vertically as well as horizontal.

Alignment

As can be expected the site conforms to a 960 grid and strict use makes for easy reading. The only problem I have with alignment issues is what has already been mentioned. A lot of the content become lost and amalgamated into a visual mud pie and would be solved with some vertical alignment methodology.

Repetition

A repetitive colour scheme is key to good design and this site has conformed to produce a quality product. The site has even used a sub colour legend to break down the three tier navigation system which kind of gives a sense of location on the site.

Images are all formatted to give the site a sense of belonging together. This is especially evident on the portfolio section of the site and is clear to see that images use uniform borders and consistent sizes.

Some of the text that appears on the screen can differ in certain section of the site through the means of contrast which leads me on to the next section…

Contrast

The colour scheme works extremely well, as mentioned, and fits within that magic seventy percent for the contrast ration. The images are vibrant and all seem to reflect upon the repetition of the site. With a good use of white space the text is clear and unobstructed in parts but, as mentioned, can ‘clump’ when scrolling further down the page.

The header has also been given definition by creating a subtle gradient fill to break away from the main content. This gives the user a clear structure of the sites content.

Typography

Keeping the typography down to a minimum I think that the choice to represent the site needs to be of a justified choice. Arial, Helvetica, sans serif is not the most flamboyant of choices but it serves its purpose: to provide clean, readable text that most users will be able to view as the designer intended.

There is little else to be said about the typography except that the logo has chosen to stray from the body text and use a text similar to that of Bauhaus.

Content

The content of the site is quite intense and can be quite a lot to take in. A more simplified and sparse design, I feel, could have translated the same information across to the user without overloading the sensory preceptors.

Although there is quite a lot of information to digest, it is presented in manageable chunks that are easy to break down. The quality of the content is also of great importance and the information chosen to be presented is straight forward and to the point.

Code And Validation

To say that this is a professional web design company they have failed to take care of validation on their site. This tells me a number of things – that it is not a requirement of the company to conform to these validation methods, which can be seen as a faux pas in our industry. It also tells me that the company may not be required to adhere to accessibility guidelines such as WCAG, again, another minor for the websites image/repetition.

It is clear to see that the page relies upon more than XHTML and CSS but if these basic fundamental codes are thought of as unimportant and brushed aside what then can be said for more complex languages such as PHP and AJAX?

Having said this though a lot of the errors on most of the pages seem to be repetitive which would lead me to believe that there is some formatting issue within the CMS when having set up for this operation. But, again, this tells me that maybe they haven’t mastered the use of such technologies?

Summary

From the evidence I have gathered here I have been able to get an insight into some of the design choices made and choices in content to display that have occurred in the background of building this website.

Repetition is a fundamental in any design process which is one of the first most design principles that stick out in my mind when viewing these sites for criticism. This along with a good head for colour theory can be thought of as the building blocks to good web design.

I will find it hard to produce a website of this magnitude due to the sheer amount of content that is communicated here. Only with time and experience will I be able to archive the same amount.

From my critical review of this site I can pick up on a few flaws to avoid in my design as well as borrowing some good design practice to create a strong portfolio piece at the end of my tenure at Wakefield College.

These are summarised as follows:

  • Making sure all code is formatted to the correct syntax to avoid validation issues;
  • Being sparse with the content (less is more);
  • Keep a repetitive colour scheme for identification;
  • Investigate other technologies to keep my site up to date with future possibilities;
  • Control white space efficiently for easy to digest content.

If I take into consideration the criticisms I have listed hear I will be one step closer to creating a site that appeals to all levels of user whether there are surfers, potential clients or future employees.

Leave a Reply

You can use XHTML syntax in your posts
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>