-Theme & USP: To draw people back to the highstreet this business would need to compete with large supermarkets. Therefore I think it is important to emphasise the independent expertise of the owners as well as the community aspect.

Local, seasonal eating as part of a holistic lifestyle has a market so I will push this too.

-Pages:

Home – The intent of this page is to make it clear what the site is for and to try to drive people to order veg boxes online or to sign up to a newsletter.  Prominent phone number featured for those who would rather resolve queries by calling. It also includes a description of where information can be found across the rest of the site, an appealing image of the shop and its produce, and a link to a news article to give the impression of action on the site and events happening at the shop.

Products – An informative page to provide details on what is supplied along with further mention of ordering boxes. A recipe link intends to show the passion of the business for its product and get people involved and using the site more, and therefore the business more.

Philosophy – Details on where the stock is sourced from and what the business stands for. Important to appeal to the market that will be enticed by what this shop offers over supermarkets. Inclusion of a staff photo to make it more personal. Mentions the expertise and friendliness of staff to encourage people to visit.

Community – A page dedicated to enticing people to sign up to a newsletter, Facebook and Twitter. Also providing further evidence of community spirit and reasons for people to return to the site with seasonal tips, local news and recipes.

Find us – map, address, contact details and opening times.

Forms - Form for quick contact to make it as quick and easy as possible for people to start a process of interaction. Form to take orders for veg boxes. Form to sign up to newsletter.

News Articles and recipes – updating of site content so that it feels relevant along with attempts to draw people back to the site, and get them involved in events or suggesting recipes.

-Tagline: “rooted in Hastings” brings together the location and community aspect, along with the product being sold and the family business element. The design of the logo is also linked with this concept.

 -Typography: I’ve chosen a decorative, but handwritten font for the logo and navigation for friendly, personal feel. I used Helvetica for the main content as it is quite text heavy and needs to be readable at a small size. It also has a sophisticated, neutral yet friendly feel to it.

-Shapes: are rounded and decorative to add to friendly feel.

-Content: Written in first person to add to personal feel.

-Colour Scheme: I tried to use neutral tones on the site so that the colours of produce in images would be brought out.

I originally wanted to use the traditional red and green as they are so easily associated with a greengrocer but to update them by using a more subtle hue, to make it a little more modern and sophisticated.  These would serve to highlight links and important features and be compliments of one another.

I also wanted to make use of traditional stripes, updated to add to the modern but retro feel.

I don’t think this is quite there in the design at present, so hopefully I will improve this before the completion of the project. Other elements of the design will need refining also.

Here is a draft layout for my web site so far. Sadly, no coding completed yet!

Sketchbook pages planning my small business website:

When choosing which sites to look at, I found my inexperience with coding making it difficult for me to ascertain what methods had been used to display text.

I picked out three I thought worked well, but after looking in more detail, found that they may not be using the best methods in terms of accessibility and search engine indexing. Having said that, I still wanted to use those I picked, to try to work out why I felt the design itself worked as I feel this will be useful for the future.

Of course, when implementing my own designs I am aware that the best method would be to:

-Use live text wherever possible instead of images, and particularly for important keywords on my site and with links.

-Always supply alt text for anything text which HAS to be rendered as an image and use image replacement techniques so that the markup is still semantically correct and accessible for screen readers and robots.

-Use web safe fonts and font stacks to ensure the text can be rendered by any machine a user may have, or, use a font embedding service so the font can be downloaded and is not required to exist on a users machine beforehand.

http://vignettebrandcommunications.com/

This very simple text-based site, does unfortunately fail on the account of techniques, as it has been created using a single image, which is obviously not great as per the reasons above.  It also means that when you zoom in on the page, the text becomes pixelated and fuzzy.  There are also a couple of issues with inexact alignment of the ‘sign up’ graphic.

HOWEVER, despite all that I want to use it as it shows how differently the styling on my first bad choice example (http://www.rossbridal.co.uk/) could have been.

The site uses two fonts – one for the logo and one more for the body text. No other styles are needed as content has been adequately distinguished with italics, and use of different sizes and weights.

The logo works well as the font is different enough from the body text to be easily recognizable and distinguished, yet is not so drastically different it looks out of place. The whitespace around the name does a good job of enhancing its importance.

The text is extremely easy to read as it uses a font large enough to take advantage of all available space, and is thin sans serif with high x-height and large counters. It also uses high (but not too high) line spacing making it easy to follow each line. It looks slick and neutral, but has a more of a sophisticated rather than friendly edge (in contrast to, for example, Arial or Verdana), which I think suits the content.

There is a very clear hierarchy going down the page which draws you from the top of the text to the bottom. Important parts further down they want you to act on such as the newsletter sign up, Facebook and Twitter) are picked out in dark and bolder text.

http://eighthourday.com/

Again, I have found it a little difficult to pick out different parts of the HTML and CSS on this site to see how the look has been achieved. But it combines two different fonts in the way another of my ‘bad example’ sites did (http://essentialbeautyrugby.com/) but with much greater success.

In the logo, the company name stands out boldly in a sans serif font whilst the script style font next to it is clearly less important yet noticeable, decorative and fitting for the meaning of the words.

Within the portfolio of work displayed, other fonts are featured, however,
the site retains its consistent identity by using one simple sans serif font throughout, which provides a solid structure for this content.

Consistent styling in size and colour are used for different elements such as titles, paragraphs, dates and links.  Therefore there is no confusion as to the meaning of the content at a glance.

Text has also been properly aligned on screen, giving it a well organized look and making each section clear.

To highlight and distinguish different links in the top navigation, various techniques have been used, such as grouping together content links away from action links, and highlighting in black the actions they may wish you to take when using the site.

http://www.kccreepfest.com/

The typography on this site is completely integrated with the illustrations creating a very distinguished whole.

Admittedly, the legibility isn’t the highest I’ve seen but sensibly, the hand drawn style is only used is a style large enough to be read.

The style of handwriting is decorative and nicely done, and doesn’t suffer from the associations of something like Comic Sans but gives the handcrafted friendly feel that uses of Comic Sans are perhaps aiming for.

The colours of the text are of the same limited and pleasing palette used across the whole site, and are consistent in terms of their use.

Overall it looks fun, creative and casual whilst being, well designed organised, and professional which is surely the impression those hosting the event would like to get across.

It’s still a little difficult for me to make out the coding techniques this site uses, but every line of text is also present and semantically correct in the mark up for this site.

http://www.helveticons.ch/

This site uses just as bright and vivid a colour as the first couple of examples of sites with bad schemes.

Here, however, the bold graphic look is appropriate to the subject and intended audience, and has been restricted to just one hue, so is not overwhelming.

Use of white with dark and light grey help the colour appear even more vibrant, and do not compete for attention. For long sections of text, the dark grey has been chosen to render the type, which is of appropriate contrast to make reading comfortable.

Different shades and tints of yellow have been used to create the effect of a 3D folded sheet and add to the interest and sophistication of the design.

I’m not always keen on use of gradients as I have sometimes seen them used without any real purpose or sense of consistency across a site, however here it is nicely done, and adds depth to a limited colour scheme.

Another site using subtle shading to add depth and create a more sophisticated feel is: http://bluepixel.net.`

http://undergrad.biola.edu/

I found a fair few examples of sites that use a fairly limited palette well

e.g.

http://steinway.com – A monochromatic scheme using gold tints and tones to indicate prestige and provide clear navigation and consistency.

However, I also wanted to examine a site that used a lot of colours, to see if I could work out what made it attractive. I bookmarked this site a while ago purely based on the fact that I thought the colours looked pretty. Clearly there is some personal preferences going on, but if you take a look at the examples of bad design I have discussed, random colour choices do not result in an aesthetically pleasing outcome, so there must be some internal logic.

The general feel is of an analogous colour scheme using the full scope of the colour wheel – not normally recommended, however, they have used the same light tint for each colour in the background which I think keeps it hanging together and stops it being too much.

There is a slightly more restricted palette of more vibrant hues used to pick out links.  A split-complimentary scheme on the cubes with red, green and purple is added to on the top navigation with a blue which could be seen as either analogic with the purple or as a compliment to the yellow/orange of the background, bringing the whole thing together.

The site is aiming to attract undergrads so I imagine they are aiming to look creative, fun, exciting, adventurous and young.  Most other university sites seem to use the ‘white background and one or two colours’ type of scheme I mentioned and can appear a little dull and dry – I think this would be successful in standing out from the competition.

Another example of a site using a lot of colours in a harmonious and well organised way is http://thesearethings.com/

 http://whoisleon.com

This site uses colour in quite an interesting way – design and portfolio sites often use black and white or other neutral colours to allow their work to stand out, but I have never seen another site using this distinctive grey and sepia.

No other colour is used on the site, except for when you scroll over one of the portfolio pieces – another usual feature that helps each design to stand out and stops the colour schemes of other designs conflicting or distracting.

http://www.joshsullivan.me/

The head and body of this page are divided (at what looks like golden ratio height) on this simple page with a large block of green on white.

Warmer and cooler shades and tones of green on the whale look beautiful together and create the effect of it being above and below water.

This is complimented with flashes of orangey red, whilst the use of grey above and below the line hold the two parts together.

As a showcase for these designers, I think these sites use colour successfully, in innovative and skillfull ways.

http://www.drivinglessonsmanchester.com/

The colours on this site seem to have been used quite randomly, with little concern for how the design would work overall.  The creator has used bright primary colours, which look quite unsophisticated, and has added in a bright green to join the cacophony.

The colours are completely different hues but are of the same high saturation and are used in the same quantity, resulting in total confusion. There is no relationship between each block of text to the next and no hierarchy of importance – all simultaneously scream for attention. Your eye flits around the page and can’t take ANY message in.

The site also lacks consistency with colour over each page and over the rest of the site, which adds to the chaotic feel. Overall its looks very poorly planned and executed – no doubt the user takes away a similar message about the quality of the services offered.

Another example with similar issues: http://www.realwritingjobs.com/index_new.php

http://www.serroscottycamperenthusiasts.com/

Background and foreground colours have simultaneous contrast in some cases and not enough contrast in others, making reading somewhat uncomfortable.

The colours also seem entirely unsuitable – they do not reflect the content or themes of the site, and there has been no attempt to marry the photograph used for the background with the rest of the design.

The site logo features shades of blue and red which are more discordant than complementary, and ugly to look at. Whilst the blue and white have been used across the design, the red has then been abandoned in favour of random shades and tints of blues and greens that aren’t harmonious, being neither appropriately monochromatic nor analogous with one another.

Again there is a lack of uniformity to the styling across pages, adding to the general lack of coherence.

http://www.bluenileindianrestaurant.co.uk/

This site uses an inappropriate colour scheme for its content. Although the business is called the ‘Blue Nile Restaurant’ they seem to have taken this too literally without due thought. The colour blue is known to make people less hungry, and with the inorganic white stripes it looks cold and clinical – these are colours most often used for medical or cleaning websites – not really appropriate or inviting here.

Branding online need not be so obvious –whilst having a very well known brand colour scheme, the Tesco website (http://direct.tesco.com) does not use the colours in such a straight forward way – the logo is grey so as not to distract or confuse the content. White is used as a clean background, and blue and red are used to highlight different aspects, making the content easier to navigate and calls to action obvious.

Context is also important for colour choice and could have made a difference – a restaurant site that uses blue better is http://www.deepbluerestaurants.com/.  Here the blue conjures up an appropriate fresh sea feel, which promotes the product. The particular blue chosen forms a split-complimentary scheme with the orange and yellow of the food –and makes it look vibrant and appealing.

Primary Health – a private healthcare company based in London

I would expect someone seeking private healthcare online would be looking for a site that contained excellent detail on what services and facilities were available as well as comprehensive details on payment.

They may not mind taking some time to do this and would be more likely to spend time looking around a site in its entirety than in many cases, as they would consider it an important investment for themselves and their family. Contact with other patients would be useful in helping to make people feel they are making a sound choice.

They would also require it to be expertly built and maintained with a clean and professional, yet reassuring and not impersonal look. Engendering trust in the potential client would be of the upmost importance.

https://www.bupa.co.uk – I think this site creates the right feeling. They use the classic blue colour often associated with medicine to convey a sense of calm reassurance, but use a more unique images of people than some healthcare sites. The photos focus on family and on life rather than on hospitals or illness. There is a very clear call to action with the ‘get a quote’ button positioned above the fold and features such as apps and health assessment quizzes and calculators.

http://www.spirehealthcare.com/ – Again a use of clean looking white, but this time with a slightly more unusual green. This site contains a lot of information, which whilst sacrificing simplicity, can reassure a user on the level of expertise, and help them to find out more about a particular issue that is relevant to them. Even using the website purely to find information may well lead on to them making a purchase on a future occasion. The search bar is important to help navigate through a site of this size, and it has the facility to search for particular consultants or facilities in your local area.

http://www.lexmed.com – I thought it might be interesting to look at some American sites as there is so much more private healthcare there. I don’t especially like the overall look of this site but I think the focus on positivity and life is interesting e.g. details and images of sporting events and a newborn baby galley.

http://www.londonbridgehospital.com – Very clearly laid out, with a virtual tour of the hospital and a prominent phone number, which makes it easy to contact and speak to someone for those who don’t like or are unfamiliar with looking around a website.

Beech Farm – a homely bed and breakfast in Cornwall

Surprising how many B&B’s official websites let them down in terms of design – despite being beautifully furnished within.

Many locations undersold themselves with very amateur and outdated looking design whilst others looked too busy, with information scattered throughout crowded pages which would make searching a tedious job and would not exactly inspire relaxing holiday feelings.

I think the most important things to aim for in a design for a B&B site are firstly a good quantity of images of the interior and exterior of the property. Secondly, easy to find specific information that may be of relevance to customers not wishing to read all known history of the property and so on. Room rates, availability, contact details and directions are all essential. Thirdly, a personal touch you might not get with a hotel – a personable style of writing and information about local culture and events.

Points to further convince might be prominent featuring of awards and customer testimonials. Some sites I looked at also had Trip Advisor reviews and rating embedded on the page, which would be helpful as it appears to be an endorsement from an external source. Online booking services seemed rare but would definitely be an advantage.

http://www.rosevidneymanor.co.uk – The nicest looking site I saw. Fresh looking layout, easy to navigate, lots of nice images of the accommodation and area, and very informative whilst remaining concise.

http://www.hsdown.go-plus.net – Perhaps not the most professionally produced site, but I think the colour palette, images and style of writing give it a very personable friendly feel.

http://www.redboscastle.com – Simple to browse through and availability and prices are listed alongside specific rooms which could be useful.

http://www.ennys.co.uk – Calm and airy – a good feeling to inspire in someone seeking to book a relaxing holiday by the open sea.

The Dead Sea Squirrels – an upcoming indie rock band from Sheffield

I think the most important things to concentrate on for an upcoming band would be on the one hand to promote them to those who know little about them, whilst also providing interesting content to existing fans to build up their following. Style-wise I would say that the look ought to compliment the bands sound (which could be variable within this genre) and show their creativity.

Many of the sites I looked at for established bands I found unhelpful as they seemed to focus on driving sales of the latest album on the homepage, which may not be relevant if the band themselves is not yet well known enough. I also felt some of them looked a little too slick for an emerging indie band – I think the spirit of the genre lends itself more to a slightly DIY aesthetic.  Having said that, many sites take this a little too literally and are styled in such a way as to reference music zines with a rough collage look featuring cut out text and so on. I wouldn’t pick this for a new band as whilst zines were once the way for young people involved in a music scene to be creative and communicate with one another, people now share video, sound and images online and with social networking sites. Merely referencing the attitude with this zine look is therefore somewhat kitsch and not new and raw enough.

http://www.batforlashes.com – attractive, creative looking site, just on the right side of the zine style, and with enough content for a fan to spend a while on.

http://grizzly-bear.net – Another good looking site with interesting scrolling and varied layouts as well as a lot of music and video content (which people will find free online themselves these days anyway).

http://www.pixiesmusic.com – They’re not exactly up-comers but the Pixies site features loads of interesting content features such as apps, downloads of live shows, and an archive for fans to add images, videos and tweets to an online gig archive. Purchasing tickets is really emphasised and easy to do on this site, which is important now in terms of how bands are making money.

http://olofarnalds.com – This site could be improved a lot, but I quite like the simplicity and lo-fi look as well as the way the video plays as soon as you go to the homepage – it made me stop and watch anyway, which would be good news for a band trying to get more exposure.

http://www.adem.tv/site – A simple but creative feel with a focus on direct communication from the artist which could be good in terms of attracting involvement from potential fans.