Who And Why
For my competitive analysis of a fellow student’s online portfolio I have decided to stick closer to home and choose a local web designer, now working in a professional manner. I will justify my choice by breaking down each section of the site and providing a critical reflection on each of the choices that have been presented.
My critical insight into this study will enable me to create a summary of my future objectives and provide me with crucial material to help me reflect and build upon my own portfolio.
Mark Till is the freelance designer I have chosen to analyse for my competitive analysis. He lives and works in Castleford and has done since May 2006. With a BSC Honours Computing Degree he is a little younger than myself and has almost four years experience ahead of me.
My critical evaluation of his site will benefit my learning if I am to approach the task with an open mind and to provide criticism of both positive and negative to help develop my own critical analysis skills.
Overview
From first impressions the site looks very clean. There was no delay in loading from the search engine and the optimisation in Google has worked well. I was presented with Mark’s portfolio from simply typing his name in
Google’s search engine.
The page itself provides the user with information, regarding the sites purpose, within the first instance: both in the title and within the first paragraph. This is immensely important for the end user and is a fundamental in keeping visitors interested in the site.
Navigation
The navigation on this site is simple and effective. There is no mistaking where the navigation is and where the user is located on the page. There is also a smaller navigation located in the footer that reflects the same as the one situated below the header.
Proximity
The proximity of the content has been spaced enough to provide natural breaks in reading and scanning. The header sits proudly at the top of the page with each section of the site falling in the obligatory fashion.
I’m not sure if the navigation’s size compliments the title of the web page as their size seem to be quite similar. This is only a aesthetic quibble and will no doubt be analysed differently through each user.
Each section has been given enough room to be worthy of having its own perimeter of white space around the surrounding area of text. This makes reading all that much easier.
A personal preference I would have changed would be to give a little more room between the navigation and the first paragraph. I would have given the same amount of space as delegated between the header/title and navigation. This would also reflect well in the sites repetition.
Alignment
The alignment is kept uniform throughout the design of the website by implementing a grid. This fundamental tool has kept the content of the site neat and easy to scan. There isn’t much more to say about the alignment at this point.
Repetition
With strong ties to proximity the repletion of the site has been reflected by keeping the same attributes to headers, navigation, subtitles and paragraphs. There is a natural hierarchy in the information presented and flow that can be followed when scanning the page.
One point of criticism that I have with the repetition, is that the site looses its dimensions when re-sized. There appears to be a ghastly green line that makes its presence felt when zoomed in or out by two levels in
Firefox.
Internet Explorer handles the resizing in an even inferior way and becomes really apparent when zoomed in/out at greater levels.
Contrast
Colour theory is a hard subject to nail down but I think the use of pastel greens and white has definitely given this site a visual impact. The tone of black for the text has also meant that no feature of the site stands out greater than the next. This helps reduce eye strain and is of little effort to read.
I’m not sure about the choice in using a gradient fill in the contact form. The contrast is out of the ideal seventy percent range and could effect anyone user that falls into
Level One of WCAG.
Typography
Choice use of typography is key to any good design. It is especially important to be aware of these uses in web design as many people only use the fonts their computer was packaged with.
Mr Till has done himself credit by providing that browser with a choice of three san serif fonts ensuring that the majority of his visitor will be able to view the site as the original design dictates.
Keeping the number of fonts restricted has also helped retain repetition in the site and as stated before given the site a clean and easy to scan appearance.
Content
To give credence to the designer the site has all the information one would hope to find in a portfolio piece. The opening paragraph explains everything the site has set out to promote. The subsequent paragraphs that follow go into further detail and elaborate on the opening statement.
The portfolio pieces are well balanced and each piece of written content gives a good insight into the content of each. Thought has gone into which sites to showcase on this site as there are additional sites located above the footer but have not been given the same space as the chosen few.
Content is king in any portfolio and I think the right amount of content has been collated to present to the user. There is enough to read and to get a significant insight into the working mind of Mr Till but not too much as to bombard and confuse the visitor.
Code And Validation
The code, as expected,
validates with no errors/warnings. This is to be expected of me from now on so I’m not going to digress into great detail surrounding the validation. I will divulge in the fact that the code seems to be uncommented which I see as a faux pas in this industry.
The XHTML has been coded to XHTML 1.0 Transitional which I feel could have been implemented to Strict quite easily. The code could be improved by using a few more indentations as well for a visually structured layout.
Use of Flash is always a tough nut to crack and can be helped by providing as much information as possible in the object tag; something that has been over looked in this design.
The CSS also suffers from the same symptoms as its predecessor and could have easily been presented in a more user friendly appearance. There also seems to be a few repetitions of code that have been duplicated unnecessarily.
Apart from these minor defects the code is solid.
Summary
Systematically pulling a web site apart, in a non-critical sense, to see the inner workings and decisions of the designer has helped me already to think about what I want my site to reflect and who it should appeal to.
Because I have noticed points for improvement so must other people, and potential clients/employees, in the same situation. I can help prevent these errors, though minor, to enable a increased chance for employability at the end of my tenure in college.
These are summarised as follows:
- Make sure the repetition of my site follows a uniform fashion with both the user interface and behind the scenes with the code;
- Enable my site to be resized without losing the content or design of the site;
- Keep my code slim – be critical of over-use and try to economise to prevent repetition;
- Be critical when choosing items to present on my portfolio piece – less is more;
- Use SEO to ensure that my site will be within the first page of Google and similar search engines;
- Maintain a hierarchy by using correct tags in my code and represent this through the end product.
Adhering to the bullet points will improve my designs in the near future when I am starting to contemplate my portfolio website.
