The BarbLog

Design, front-end dev and other random thoughts


All of the posts under the "inspiration" tag.

Talk Web Design 2014 – 7/5/14


Talk Web Design is a conference primarily aimed at web design students, organised by my MA course tutors, David Watson and Prisca Schmarsow and now in its third year. I was asked to photograph the event which was a great experience for me, but I engineered it so that I could still listen to the best part of each talk after taking photos during the first few minutes and between talks. I had been looking forward to being inspired by all the speakers, some of whom I’d already seen speak and others of whom I’d heard a lot about and wanted to finally see. They didn’t disappoint – the day was packed with all sorts of inspiration and information.

Read more →

3 new websites: Inspiration and suggestions

My approach to this task was as follows:

  1. Look up similar bands’/businesses’ websites, observe any recurring elements
  2. Consider what messages my client would want to convey/what the site should do, based on the above and my own assumptions (in a real situation of course this would be replaced by actual discussions with the client)
  3. After establishing key functional elements, consider the aesthetics – also based on point 1 and my own assumptions.

Please note, I viewed and screengrabbed all the below sites on a tablet so on a desktop they might look a bit different but hopefully not too much.

Client 1: The Dead Sea Squirrels, an upcoming indie rock band from Sheffield


The trend I noticed after looking through around two dozen indie/rock band websites was the abundance of white type on a black or other very dark background. I can say that in around 90% of the cases this was the design and often it resulted in a visually far too busy home page due to all the information they had to cram on there; white on black is not the best for that in my opinion so I would not take that design direction. I did find The Offspring’s website better than most though, as it was relatively uncluttered with clear sections and a more organised look and feel (score! I love The Offspring). Muse’s isn’t bad either apart from the dotted lines separating the sections and the repeating background which are both visually distracting for me. Again, too much bright on black results in this for me. The RHCP’s site was the only major band’s that steered clear of the white on black trend and it was very refreshing and interesting – I would take elements from this design to spice up and distinguish my band’s page from all the others. However a good example of a mainly black and white design was InkedMag’s one which I would probably use as a basis for my layout if the band did want a more conventional colour scheme.

As for the elements to include on the site I found RHCP’s tour location map a great idea, if the band plans to go on tour, the pins let you see straight away if the band’ll be near you instead of having to scroll through simple lists on a page. Going back to the Offspring and Muse, what they do right is show tour dates on the front page, as this is one of the most important reasons you’d visit a band website. Recent news and merchandise also feature, as do social media links. The RHCP also have the option to listen to their latest release then and there on the site, in a toolbar at the top.

Looking at the band name it comes across as slightly playful, a band that doesn’t take themselves too seriously. As such I imagined a grungy, cool header graphic with a squirrel and their name incorporated in it that could be the header image on the site and used as a further branding element later on. For this I found Design Shard’s and Misprinted Type’s header images to be a good starting point. For typography Von Dutch is also one to look at, as well as for the eye-catching colours on their site – although for squirrels I would think of more red than orange the way that orange pops is something to consider – look at the saturation level?

Client 2: Beech Farm, a homely bed and breakfast in Cornwall


This was the hardest of the three. I browsed B&B and guesthouse websites all over the UK to find some inspiring ones… most of them were awful! But this means Beech Farm will start out with an advantage, because we’re aware of what we have to do better. Many sites were cluttered, not visually pleasing and therefore didn’t look trustworthy – something that I find very important for a site advertising such services. Therefore I was pleased to come across Park View Exeter’s page that was closer to getting it right: contact information clearly visible in top right corner; concisely worded navigation instantly accessible on top of page; and a nice image to show off the location. I particularly liked their Find Us page that had a downloadable PDF of directions to the accommodation and had a map and clear directions on the page itself too. Every place should have this, especially rural ones where you can get very lost and don’t have anyone to ask for directions in the middle of the countryside, possibly with no mobile reception either.

Woodbine Guesthouse has a slightly less obvious menu bar on the left but the home page contains a Book Now widget on the right making it easy to check if they have rooms on your chosen dates. They also have a summary of what they have in all of their rooms without you having to check the rooms page separately. Contact details are also visible below the left hand nav, though I would put them into the header as Park View did. Woodbine has further good elements that should be included on Beech Farm’s site. Their rooms page is clear and lists room facilities and that room type’s availability in one place. Their Things to do locally page is a nice plus and something that could put them ahead of competitors in SEO terms: it contains local information and activities so if someone was looking for things to do in Exeter first then deciding on the hotel, they would show up in search results and might get a booking straight away.

Design-wise we need to consider the ‘homely’ aspect of this B&B – I’m thinking muted neutral or pastel colours, to give a cosy cottage feel to it, with some green in there to signify the countryside and the fact that it’s a farm. The typography should also be friendly and not too modern, and we would need some professional-looking images to go in the header and rooms sections (not photos taken by the owners, those tend to make even the best design look bad). We need the customer to trust this place to provide high quality service and the site needs to reflect that professionalism in every aspect. I found a couple of blogs that had imagery/colours/typography to use as a starting point, although of course we need to be aware of making the fonts easy to read and make the site accessible to all users.

3. Primary Health, a private healthcare company based in London


To be honest I find healthcare websites extremely boring so this part of the assignment was the most tedious to write up… Of course I understand that these sites are more geared towards usability and good information architecture than prettiness and once design conventions are established in such industries it’s not easy to break away for fear of coming across as unreliable (because you’re displaying something in a way the user is not expecting you to) and that’s very important for healthcare. But I tried to find elements in the sites I chose that would make Primary Health stand out at least a little, to make them more personable.

The child’s drawing and slider text on Bupa’s homepage is a good example of this; it aims to reassure the viewer that they are important. The CTA button is very clear and the navigation layout presents not too few and not too many options. The ‘contact us’ link and the search bar are where you’d expect them to be. The only potentially misleading thing is the carousel where the list of slides on the left looks very similar to the top navigation so it could result in someone clicking on one of them thinking they’re using the navigation, so I would be aware of this when creating my design. Otherwise Bupa’s homepage does a good job of presenting various options, contact details and the daily health feature in a way that is easy to skim and read. Their footer is useful as well, listing quick links to the most important pages under each section heading.

Blossoms Healthcare has a simpler layout and quotes and imagery appearing to be from real customers, to build trust. The calming green colours are nice although the contrast looks like it might not be high enough for accessibility guidelines. Their bookings and contact details are very clear to see, as are their locations at the top of the page. This layout was the one I like best but this site has much less information than Bupa. Depending on how much info my client has, I would not necessarily be able to simplify it as much as Blossoms did.

Spire Healthcare is in the list for their ‘Find a hospital’ widget on their home page which is very useful – but only for people who have Flash! I would integrate an interactive map using alternative technologies since as we know fewer and fewer mobile devices support Flash (Android 4.something has stopped too, in addition to iOS). BMI Healthcare has a similar tool for searching for treatments which we could also consider adding to my client’s site depending on whether it applies to them. BMI’s patient information page was also a good idea – large boxes for the most common queries and smaller ones for less common ones, all with friendly photos of people to make the experience less impersonal for the user.

The last screengrab, Clinica’s site, is in there because of their header advertising their prestigious address (if you’ve got it, flaunt it, as they say!) and their photos of high-tech equipment – both, again, creating the impression of reliability.

get_footer() ?>