Competitive Analysis of a Professional Website

Website: http://www.webbositedesign.com/index.htm

Location: West Yorkshire, Leeds area (exact address not given.)

Client group: Sole traders and small businesses, eg: Mobile make-up service, driving instructors, wedding dress shop, cycling holidays in the Yorkshire dales.

Introduction

As I am quite likely to start out as a sole trader or freelance web designer with the basic skill required and no specialist area such as flash or e-commerce, I concentrated my search on professional website designers who appear to have the same skills and a similar market.

The website I found is based in West Yorkshire (he doesn’t give an actual address but his portfolio clients are all West Yorkshire based.)

Although pretty basic in terms of not being Flash or Javascript reliant, his work shows an effective use of imagery and layout to produce sharp looking websites. His own site is quite clear and standard, with a large banner image and logo, and an introduction to his services on the homepage.

Navigation

The links are curiously spread out over two lines, the home and contact links are above the header, and the rest of the links are just beneath the banner. I personally think this could cause some confusion to a viewer as links are usually in a predictable line, either vertically or horizontally.

I would also add a ‘current page’ indicator bar to the navigation links, as this can be done quite easily using only CSS2 and HTML.

Corporate ID and Logo

The name ‘Webbo’ is perhaps a little bit cheesy but it does suggest immediately the nature of the business and is very easy to remember. The cheesy factor is played up by the friendly approach of the website, which may reassure client who have little or no knowledge of website other than being aware that they should have one for their business. A more technical and sophisticated look might actually put off some of his potential clients.

The Logo is friendly looking and uses a nice ‘Courier’ type font with a slightly degraded ‘typewriter’ effect, but the central letter ‘W’ should be reduced in order to have more of the orange background around it, making it more visible as a ‘W’. At the moment it could be mistaken for a small ‘v’ which doesn’t make much sense.

However it is still quite a nice overall effect. I also like the way it has been superimposed onto the header images to break up the linear appearance and make it more friendly looking.

The banner images change for each page and are quite a bizarre assortment of images.

I would at least keep them to one colour theme (orange) in order to improve repetition of the overall site.

Grid Layout and PARC principles.

The Website ‘content area’ uses a consistent column structure throughout: A central double width column and a half width column on either side.

This consistency adds to the clarity of the website and shows a competency of using the grid system, whilst also being quite a simple layout.

Repetition of the colour theme also follows the PARC principles.

The proximity is helped by having key information for each page in the central column, the left hand column remains constant, showing the price list of various packages, which could be immediately reassuring for a potential client.

Contrast is helped by using a white background and dark text. The clear headers also break up the content text making it easier to follow.

Overall I think this website would appeal to a sole trader looking for a simple but attractive website in order to create an online presence.

Competitive Analysis of a Student Online Portfolio.

www.beakable.com

As I wasn’t sure where to start looking for student website portfolios I started with Wakefield College graduates. However I couldn’t find many sites even though I thought they’d be the obvious choices.

The one that caught my eye was a friendly looking site by a ‘Web Development’ student at Glasgow.

The first impression of this site was that as well as being quite quirky and original it was also very clear to read, having well spaced out text and containing an appropriate amount of information on each page.

The Website uses a common layout throughout its four pages, having a common banner which stretches across the whole page. This adds to the Repetition of the overall website.

The background imagery of the website uses a mottled pale blue paper effect which blends into the header image, which is slightly darker and has more detail.

The background image spreads across the whole screen and is repeated, although this is not obvious at first glance.

The main content area of the website is centred on the screen. There is no obvious grid structure to the web pages, although it seems to be based on a simple two-column structure which is adequate for the site.

The overall website comes across as being fresh and energetic, with the content of the text being very positive about the author’s work and experience.

The Home page has horizontal links along the top part of the web page in a fairly standard position, followed by a very obvious introduction in large text briefly telling the user about who the author is.

Underneath the introduction is a box containing more detailed information. This box can be scrolled by clicking on a button just underneath it, however it is not a very obvious link and looks more like a background graphic, being a pale pink colour. I would prefer it to have some text instructing the viewer to use it, or also have the button as a stronger image to make it stand out.

Once clicked the box shows a sample of previous work, and provides more detail about his professional background.

The Portfolio page is nicely presented, continuing with the friendly fun theme as two image links to his recent work are displayed as notice board images on scrap paper. One link is for Website work and the other for Flash work.

In the website's portfolio the links show a screenshot of the website design, rather than taking you to the actual site. An ‘info’ tag then provides some background to each of the projects. It is very clear to follow and has an appropriate amount of information for each project.

The Projects page has some of the author's Photoshop and Flash work; and although in itself the digital artwork is not very impressive, it does show a high level of competence in Flash.

The Contact page has a fairly basic feedback form with some background graphics added to it to give the impression of a letter and envelope. This also fits in with the quirkiness of the overall website.

The Blog page is the final page containing posts about the author’s college course and his professional work, and written in a casual yet semi-professional manner.