When you first load the page, your eyes are not drawn strongly to any particular section of the screen. The design is very flat, something which I will raise further on. The only reason I was drawn to the middle of the screen was because of the movement of the images (the fading slideshow).

Being a wearer of glasses, I tried something different this morning. Visual hierarchy can be determined through colour, shading, whitespace, font sizes and various other things. So I took my glasses off, and saw what stood out the most. The main things that stood out were the logo, the large image in the fading slideshow and then the large ‘The Three Network’ banner a little further down the page. My eyes were not drawn to any other elements on the page on the way down – so many missed opportunities to utilise space.

Now let’s take a quick look at some other elements of the page:

1. To me, the yellow banner seems too much like an advert and makes me want to ignore it. When you hover over it, you will find the package builder tool. Now in the current global situation, everyone wants the most they can get out of as little money as possible, with little waste. Why would you hide a tool which would aid the buyer in such a way?
2. Search is an important feature of any larger website. People do not have the time to find things manually. The search box is very small in comparison to the surrounding elements – and may be overlooked by the average user.
3. The title on each slide of the fading slideshow has impact and draws the eye. This is the key area for pushing latest offers and it’s where Three want to make their sales.
4. The only reason this call-to-action button works is because of the colour contract. There’s a lot of black and white, but no colour. However, this button brings green in to the design. It still doesn’t however shout ‘Click me!’ A more prominent call-to-action is needed here.
5. Large imagery that is colourful and simple can often stand out very easily, especially when surrounded by details images, such as mobile phone shots.
6. This carousel shows the latest handsets being pushed by Three. This area seems very tight, with not much space between the phones and their titles. Another issue with this area, and with the larger slideshow, is the inability to stop the slideshows (by hover would even do) or go back to a previous slide. The user must wait for it to come back around again.
7. Importance can be determined by colour and contrast very easily. It’s easy to see that the title is more important than the text below it. However, this has been done fairly poorly. The contrast of the grey text on the white background is bad from an accessibility point of view; users with visual impairments may struggle to read this text.
8. The words ‘Find’ do not look like clickable buttons or links (no-underline). The design team behind this seems to be taking for granted that the average user knows more than they think. Another issue with this is the spacing between the input field and these ‘buttons’ – the spacing is too much, causing them to look unrelated.
9. As mentioned in previous points, spacing makes another issue here. In the top part of the website, there’s a mix of good whitespace use and bad whitespace use. This spacing here doesn’t make much sense and conflicts with the rest of the design. The other spacing seems in proportion, but this seems like wasted space.
10. So it looks like a movie poster. I like the imagery, but it doesn’t really seem to fit in with the rest of the branding.
11. The space to the left of the SIM card looks like something is missing. They should have had the Three SIM card laying horizontally. The Three logo on a real SIM card is actually in the horizontal orientation anyway.
12. In contrast with issue 9 and too much whitespace, this area of the homepage seems far too tight, possibly overwhelming the user.
13. Users have the ability to search phones by brand, and to find out more about these brands. However, these two blocks of information seem very irrelevant from each other in terms of the design. Bringing these elements closer together may show more connectivity.
14. Nearly finishing off the body of content is an unusual empty area. It doesn’t look tidy, and looks more like they ran out of things to put there so left it at that. Or, there used to be something there in the initial design, but it was removed last minute.
15. The footer is basically a reverse of the top half of the website. It’s white text on a black background. It fits in, it’s clean and informative. Everything the user may want to find, it is here.
16. Maybe they weren’t comfortable with such an open design. An ugly shadow has been added to either side of the layout. This boxes everything in. This doesn’t convey the message of open, free and mobile. To me it says boxed-in, physical connection and wires.

Conclusions

This design has a lot of potential, but there are a lot of things that need re-thinking about. It’s not too late for this to be salvaged. Maybe fixing an element each week, and the public would be non-the-wiser, but getting a more pleasant experience each time without knowing why.

Rating: 5/10.

Typography

When you go to any new website, the visitor should instantly be told what the website is or what it is about. Jon Brousseau does this extremely well – and if you miss this intro, I think a trip to the opticians is in order. From the off you can tell that Jon is an interaction and print designer. As you go through the website, the headings are set up correctly and perform a level of hierarchy. But to me, it seems that it has been done in a very thoughtful way. The title “some work samples” is a lot bigger than the individual project titles, but the project titles stand out a lot more, showing more importance – purely through colour.

Layout

After the introduction, the layout is simple. Large portfolio screenshot, a brief summary of the project and a link to the live version (if applicable). This is purely a portfolio site, so attention must be given to the work. If this were a freelancers website or agency website, it may be more worthwhile given more information about the project.

Extras

You may notice that when you scroll down the page, the portfolio item screenshots fade in. A subtle effect, but it gives the page so much more life.

In the opening paragraph there are some tooltips that appear when you hover over any of the three links. I do feel however that the only link that may need a tooltip (or further explaination) is the ‘experience’ link. The other two (view work and get in touch) are very clear and do not really require extra information.

Conclusions

This site is very minimal but has so many hidden gems throughout the design. An excellent portfolio site for showing a few select items of work.

Rating: 8/10.

Fresh imagery

Upon first glance, I like the new rotating banner. It provides a much needed uplift to the old imagery (which showed the building still in its development stage). It really does sell the building well.

I was a fan of the older version. It was super minimal and possessed a very clean and elegant feel. Now however, I feel the new version of this site brings with it some awful design traits and some rather baffling design decisions.

Hyperlinks

First of all, by default, the main body hyperlinks are black and bold. This is an issue for one main reason – they also use the same sized and weighted font for headings. A person with a poor quality monitor or anyone with colour impairments will have difficulty distinguishing between the two. On a further note about the hyperlinks is the visited state (i.e. what a link looks like if the user has been on the target page before) – they are underlined. If anything, the links should be underlined by default, then maybe have no underline after they’ve been visited (an underlined link stands out a lot more, and is obviously a link). On a final note about hyperlinks, the use of ‘click here’ links baffles me. It’s bad for SEO and is just generally an outdated practice.

Use of Flash

The rotating imagery on the website is powered by a Flash script. I don’t have anything against Flash on the web, although it may be departing us in the not so distant future. But for such a simple effect, a bit of JavaScript would suffice – and would be iPhone/iPad friendly – which quite a few tenants use.

Contact Form Submission

On submission of the form, when unsuccessful, the page is reloaded and the browser skips straight to the top of the page. 2005 called – it wants its lack of form validation back. End harshness.

Some other tiny little gripes

You may notice down the bottom of the page some irregularities with the pipelines and the Colour Creation link. The anchor tag has been placed in the wrong place within the text. I feel this reduces quality by showing lack of concentration.

Why is the address separated by pipelines? This will be an interesting experience for people who depend on screen reading software.

Why have HTML lists not been used for displaying lists? I haven’t seen this done in a while, and I’m quite amazed people still do this.

Last but not least, the amazing badly photoshopped team photo on the about page. I won’t give this away, but what do you think is wrong with this photo?

Conclusions

With a bit of care and attention, the beauty and simplicity of the original design could have been maintained – but all the little issues add up, and result in a poor quality site. The beauty of web design is the little details that most people overlook.

Rating: 3/10

Browsing through the likes of Zoopla! and rightmove I noticed one major thing in common. Poor content. Whoever the information is submitted by (likely to be estate agents), they need to take a step back and look at what they are publishing. Some listings have little information about the property, some have lots (which is good) – but most listings fail in one area. Photos. We are superficial creatures, and as much as we’re told not to, we do judge a book by it’s cover. It seems that I’m overlooking the properties that do not have internal photos (some don’t even have an exterior view). Does this mean the publishers of this content are lazy? Or are they trying to hide something. Most people are working full time jobs and cannot spend their time looking at 20 or 30 flats that aren’t suitable for them; judgements which could have been made via simple photographs – Christ, there’s just no excuse for not being able to take some photos when every modern mobile phone has a camera on it. I want photos!

Maybe I’ll just start my own property website and do it right. Yes, that sounds slightly arrogant, but I’m frustrated.

My first website to be reviewed in Site Focus is Line25.

What is Line25

Line25 is a web design blog written by Chris Spooner (I’m sure many of you in the web design industry will have heard of this cheeky chappy). The main focus points of this design blog is to give ‘inspiration to web creatives’.

The Content

Possibly the most important factor in any website is the content. Line25 divides its postings up in to three categories; Tutorials, Inspiration and Articles. Tutorials can cover anything from Styling Up Your Twitter Profile with a Custom Design to a more technical post about Coding Up a Web Design Concept into HTML & CSS. A wide array of material is covered in the tutorial posts, but the scope is still narrow – which remains key for targeting audiences.

Every Friday, Chris posts a ‘Sites of the Week’ post, showcasing 5 websites that he believes posses outstanding design qualities that may potentially inspire your next design.

Finally, there is the articles category. This is where only gripe about the content comes in with the content categorisation. There are many informative articles such as interviews with designers or tips about design. However, there are a few entries such as 35 Creative Examples of Doodles in Web Design that have crept in to the articles category. Maybe these should be best kept within the inspiration category.

The Design

Upon first glance of this design, you can instantly see a connection between the name and the design – how important this is, is a debate for another day. But I liked that connection – clearly some thought has gone in to it. The design is very minimal, which gives focus to the content. Content is king, and rightly so in a design blog. The header is small, meaning the reader can skip straight to the content without scrolling.

Each individual post sticks out of the content area by about 50 pixels or so – breaking convention, but creating interest. Also, when scrolling down, it’s so easy to see where one entry ends and another one starts. Simple, but so effective. Each post also has a subtle image behind the title, further emphasising the content that is to be found within the article.

Ultimately, careful consideration has been given throughout to make this a light and airy design. Plenty of padding between elements makes this pleasant and easy to digest blog.

There are however a few things that bug me about this design. Firstly, the sidebar is very dark compared to the rest of the design and seems a bit overwhelming. It definitely is distinguishable from the main content column, but maybe for the wrong reasons. Secondly, the alignment of the ads in comparisons to the 3 links (RSS, email and Twitter) and search box is a little uncomfortable. Perhaps if the padding between the ads was increased by about 4 pixels, it would make for a much more flush design.

Finally, something that appears to have been overlooked in the design is the contact form. The elements have not been styled, thus do not fit in with the rest of the website.

A few little tweaks would make this design as good as it can be.

Conclusions

Overall, I’d say a lot of focus has gone in to the layout and presentation of the content, but a few subtle things have been overlooked within the design.

Rating: 7/10.

• A free .co.uk address
• Free updating and customisation
• Access to new customers
• Traffic monitoring
• Website-enhancing Gadgets

So, why am I writing about this? Surely it would be a bad move on my part to publicise such a service. I am posting this in an attempt to inform people about why they shouldn’t go with such a service – and my clever post title will become clearer.

You get what you pay for

This statement is true. It is a very rare occasion in life that you’ll get something you really want that’s really good quality for free. In my post early last month, I wrote about why you should leave it to the professionals when getting your website designed. In summary, it outlined why you shouldn’t just let anyone build your website.

Web design is a profession. We are skilled and trained (sometimes self-taught) and the best of us know what we’re talking about and why we do certain things in design.

Building your website through the GBBO service may well get you online quicker and for free – but this isn’t a good thing by any means. It rules out the careful consideration of viewers, site goals, important traffic analysis and marketing strategies – all of which are important to a successful website.

GBBO only offers the basics

Want something a little more complex? GBBO doesn’t offer it. In the help section of the GBBO website, there is a question entitled, “What if I want a more advanced website?” The answer to that is:

Our step-by-step tool will help you publish a basic website for your business, and Google Sites will let you improve and expand upon this later. If you’d like something more advanced we recommend you speak to a professional website designer who may be able to create a more sophisticated home for your business.

Unless you want a basic information page with who your company is, then GBBO is going to come up short. Want a blog on your website? Want a shopping cart? GBBO fails.

What’s this about marketing strategy? Getting number 1 on Google is easy!

In a perfect world, you would just be able to type whatever you want, and everyone will magically find your business online. Sadly this is not the case. Careful consideration must go in to every part of a website build, all the way down to the wording of simple sentences.

But it’s free

This is true. But free things may come at a cost believe it or not. Most people know nothing about marketing, or the effects of bad marketing. If you publish a bad website, giving your company a bad image, it will reflect on you as a person or a business. If you go in to a scruffy looking clothing shop, will you buy a nice pair of shoes from there? Or will you go to the nicely presented looking shop down the road that’s offering the same thing?

For basic websites such as these, especially due to the recession, you will be able to agree a feasible price with many professional web designers and developers who are looking for smaller projects. GBBO is not a good solution in my opinion. In this day an age, most businesses do have websites, and a free website isn’t going to get you seen or set you above the rest.

Getting British Business Offline

Offline? No, the intention is to get businesses online. Ok, so what about professional web designers and developers who rely upon contracts from small and medium-sized enterprises (SMEs) to live. Suddenly, all of these businesses can get their new websites for free. Ok, so you’ll put 10 plumbers online, but you’ll take out a web designer. We’re already at an all-time low for the unemployed in the UK – this service isn’t going to help that.

What are your thoughts and opinions on GBBO?

I had several issues with the first form. It goes in order, ‘first name’, then your’ last name’. So when it gets to ‘Most Recent Employer’ and then has the field ‘Website’ next to it, is that the employer’s website, or your own? It’s not exactly clear, but why would they ask for the company’s website? They’re actually asking for your own. Simple solution, rename the label ‘Your Website’. My other issue with this section is the ‘Career Status’ drop down menu. The three options are ‘Actively looking for a job’, ‘open to new opportunities’ and ‘exploring careers.’ The meaning of these isn’t abundantly clear until you click the little question mark above the form section. Why not just have a little tooltip when the field becomes active?

The next part of the profile form is your address. It has the fields ‘Address 1’ and ‘Address 2’ side by side. When you write an address, each line is always underneath one another, so I instantly assumed it meant a second address (which I’ve seen on many application type forms). Simple solution, change the field name to ‘Address line 1’ and place ‘Address line 2’ underneath it. As for the location, why is it in this day and age of the web, can the backend not deduce the town and county from the postcode?