The BarbLog

Design, front-end dev and other random thoughts

good design

All of the posts under the "good design" tag.

3 websites with good typography

1. Chris Wilhite Design

http://chriswilhitedesign.com/

chriswilhitedesign.com

Chris combines the serif and sans serif fonts on this site very well, making it look cohesive but varied. I especially like his choice of fonts in the first picture – he is using 3 different ones but it doesn’t look like it’s too much. One of them, which is also used in the top navigation, is Grotesque MT while the serif is Pistilli.

2. Squared Eye (old website)

squared eye matthew smith

Unfortunately this site is no longer online – it redirects to Matthew Smith’s homepage which is nowhere near as fun and nice to look at as this whale-themed one! The slab serif is attention grabbing and slightly playful, so full of character that a simple sans serif to complement it is a good choice, plus a simple serif used on the buttons only. Looks like Verdana and Georgia for the latter two, but as the site is not online I can’t check.

3. Knuckles Industries

http://www.knucklesindustries.com/

www.knucklesindustries.com

The typography is what makes this site more than just some pictures with a bit of info – the typography is like part of the picture, complementing the vintage feel. Very apt to use that particular font for the word ‘tradition’, while ‘skill’ stands out due to both its colour and the font size to emphasise it even more. Here too, a combination of several different fonts, including the logo, works well but of course this is not a content-heavy site where such a bold combination wouldn’t work at all.

Barbara November 5, 2013 Leave A Comment Permalink

Colour schemes, Part 2: The Good

Now let’s heal our poor eyes by looking at some nice colours. A good colour scheme can be many things I think; if a site is properly legible with correct contrast ratios and colours adhering to colour theory, we can say it has a good (i.e. successful) colour scheme from a functional point of view. But I like to go beyond that and when I think of nice colours I think of something harmonious that pulls the whole site together and gives it personality – so things like news websites, Facebook and the like are out, because their colour schemes are purely functional as far as I can see, not particularly pretty. Whereas the below have both in my opinion:

1. www.cottoncandyweddings.co.uk

www.cottoncandyweddings.co.uk

This is just so so pretty. I love it. It’s just how a wedding photography site should look, with subtle, chic colours with a hint of vintage to complement the photography style (of course if the team took edgy modern photos this wouldn’t be suitable, but that’s not the case). The pale pink goes wonderfully with the cream and grey and I can read everything – the choice of that curly font is debatable but we are talking colour here, and that is perfect in my opinion. (the menu looks wrong but only because I took the screenshot on a tablet)

2. uk.escada.com

uk.escada.com

Escada is a luxury brand and the colours here show that – gold implies luxury in itself, and teamed with white and a subtle grey it’s all very sophisticated and sleek. No bright tackiness here!

3. www.csszengarden.com/?cssfile=/209/209.css

http://www.csszengarden.com/?cssfile=/209/209.css

I’m sure you’ve all seen this one – I think it’s my favourite out of the currently available themes due to the colour scheme. Orange and black go very well together, and here orange is used well to separate the left nav from the main content, and it’s also used as an accent colour in that section. White text on a black background is often hard to read, so here the designer used grey instead which makes it look much more pleasant.

Barbara October 27, 2013 Leave A Comment Permalink

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

INSPIRATION GALLERY

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

INSPIRATION GALLERY

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

INSPIRATION GALLERY

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.

3 Examples of Good Websites

For this assignment my aim was to choose three quite different websites so it’s not just about some well-known and ‘safe’ designs. I did go for one well-known one though, as there is most likely a reason it’s so popular.

Click on the screenshots to enlarge them and the section titles to visit the live websites.

1. Dropbox.com

Dropbox website screenshot Dropbox website screenshot  Dropbox website screenshot Dropbox website screenshot

Dropbox is a popular online backup and file sharing solution and if you look at the website I don’t think you’ll be left wondering why. It’s extremely clean and simple to use but still retains a playful touch (i.e. it doesn’t feel like a cold corporate style website) with the little icons it uses on tabs and the sketchy graphic advertising Dropbox for Businesses on the second screengrab.  After all, this is your backup space, you have your personal files on there so you don’t want it to feel too impersonal.

Even more importantly though, it’s very straightforward to navigate and helps you out with tips highlighted in light blue at the top of the page (3rd and 4th screengrab). It has a separate view for files and photos, makes it simple to access your upload history and remaining storage space, and lets you download whole folders as zip files – handy! Dropbox can be installed on your computer making these things unnecessary for many people since it’ll sync automatically, but for those who for any reason don’t want to install it and prefer to use the website (myself included) it makes life much easier.

To sum up, the main things the Dropbox site has going for it in terms of good UX and design:

  • Simple and clean layout that nevertheless retains a friendly touch
  • Lots of white space allowing for visual separation of elements
  • Navigation is self-explanatory and doesn’t have too many levels
  • Functionality is easy to detect (eg. downloading as a zip file – the command is clearly visible)
  • Right-clicking on stored files triggers actions (more intuitive as it’s similar to using your computer)

2. Howmuchtomakeanapp.com

Howmuchtomakeanapp.com screenshot Howmuchtomakeanapp.com screenshotHowmuchtomakeanapp.com screenshot  Howmuchtomakeanapp.com screenshot

I really liked the concept of this site: it takes you through the estimating process for a new app (or website, works for that too) and all you have to do is choose from the options it presents. The layout is extremely simple and intuitive, with graphics used as buttons to make it easier to skim your options. There is a progress slider that steadily moves as the estimated costs increase based on your choices so you  know where you’re at at every step. At the end it gives you a breakdown of what you chose and how much it estimates, with an explanation of how it arrived at that figure. Just like Dropbox, it’s very clean and functional but the graphics make it more interesting and engaging than if it was only a bare-bones text-only tool.

The call to action is very clear at the end in red: submit your project using the Oomf website! It’s promotion of course, but subtle and not too pushy; the user can still feel like they’re in control and not being forced to do anything which in my book is always a positive in today’s world of ads shoved down our throats at every opportunity.

Having discussed the function of the site I still think form is worth a mention (can’t help it – I like pretty things!). The jQuery flip/fade effects when you click one of the options to progress to the next screen are rather pleasing to the eye, providing an odd sense of satisfaction reminiscent of  your childhood when pressing buttons in lifts and on trains was something you loved doing. Well, I did… surely I’m not alone with this?

Good points about this one:

  • Clean and simple design
  • Straightforward user journey
  • Easy to understand functionality
  • Pleasing feedback (progress bar, flipping buttons)
  • Summary of results is clear and helpful

3. SamMarkiewi.cz

Sam Markiewicz porfolio website screenshot
Sam Markiewicz porfolio website screenshot Sam Markiewicz porfolio website screenshot Sam Markiewicz porfolio website screenshot

This is a portfolio site of sorts, trying to sell the services of its owner, and as such it has to stand out from the thousands of other portfolio sites out there. It achieves this with humour and interactivity. It’s a one page parallax website which may or may not be everyone’s cup of tea but I think that in this case it really adds to the experience – check the link out to see for yourself!

Starting off with the witty choice of domain name, creativity is all over this website in my opinion and this is the most important aspect of a portfolio. The home page makes use of plenty of white space to draw your eye to the text and the poor guy standing there without clothes: and you just have to scroll down to see the rest and dress him appropriately! Not only can you dress him in a pink basketball outfit though but also explore his environment by hovering or clicking the mouse over certain elements such as his computer or the Twitter bird (it even flutters around). Curiosity is one of the most basic human traits so he does well to engage the viewer in this way.

The copy itself is kept simple, approachable and friendly; I got the impression that Sam must be a nice and reliable guy to work with which is important from a client’s perspective. The typography is an easy to read sans serif, lending a clean and minimal look to the site.

Sam also provides guidance on how to best view his page in the form of an overlay when you first visit the page, accessible later on via a button in the top right corner, never a bad thing when it’s important to make sure your audience views your content as it was intended. Of course we could debate this in general but in terms of what he wanted to present here I think we can say it’s not a problem to limit it to desktops otherwise the effect would not be the same.

Good points about this site:

  • Creative use of parallax scrolling
  • Uncluttered design drawing attention to the important parts
  • Engaging and colourful
  • Designer makes a good impression on the viewer

Summary

I didn’t deliberately choose these designs based on their looks but in hindsight they all look clean and simple with only a few accent colours. This doesn’t mean I don’t like more ‘cluttered’ websites but I think the general trend these days towards flat and minimal designs has influenced my tastes as well.

Barbara September 30, 2013 Leave A Comment Permalink

3 Good Designs

The first task for this week was to find three examples of good design around us. I started thinking about what to use as my examples right after the class ended but took a few days to decide. This was because I was torn between choosing things that are pretty or things that are functional. It was established during the class that good design is about problem solving therefore if an object has a function to fulfil then we need to consider how it does that, and not how it looks. However, I like to have pretty things around me which were designed solely for the purpose of being pretty, for example a birdcage-shaped tea light holder I have on my table now. Sure, its function is to hold a tealight, but that’s very easy to accomplish; the rest of it is all just pretty and pleasing to look at. I wondered if we can count ‘looking nice in your home’ as a function too? I’m not sure of the answer so I’ve decided to omit such objects from my chosen items as much as I’d have loved to say ‘This is my tea light holder and I think it’s a good design because it looks cute and makes me feel better when I look around me’.

OK, so getting to the point finally: here are my three chosen designs.

1. Kids’ mug

Kids' mug with bear design

Functionality-wise this mug accomplishes several things we’d want from such an item. We normally use mugs for drinking hot drinks which can damage both your cheap Argos kitchen tabletops and your skin if it spills out. Kids are especially vulnerable to spilled drinks since they don’t have the coordination of an adult. This mug has an accessory that can be used as a coaster to protect your furniture, and also as a cover to put on top to prevent the drink sloshing around and getting onto the kid’s hand as they carry it around. It has a protruding circular area on the bottom that slots onto the top of the mug or, if used as a coaster, raises it off the table slightly and has a non-slip surface to prevent it sliding around. Apart from these practical considerations the mug also has a bear design telling you to have a nice day – always helps in the morning when you don’t feel like going to school!

2. Ferrero Rocher box

Ferrero Rocher box

The purpose of product packaging is to sell the product inside and this one does it very well in my opinion. The box is transparent in order to show off the product inside so the customer can see the sophisticated gold wrapping of the individual balls. Gold is used on the box label as well to strengthen the cohesity of the individual design elements, and the colour itself signifies wealth, high quality and sophistication*, another plus when trying to stand out from the many competitors in the confectionery market. While we’re talking colours, the other one Ferrero Rocher uses is brown, a more subdued colour to complement the gold and with a generally neutral cultural meaning* to prevent it distracting from the main message of the gold (high quality). The edges and corners of the box are rounded to make it look sleek and also to prevent the customer hurting their hands while handling it. Another functionality plus is the way you can easily peel the film label off the box to open it: it has a tab at the bottom you can pull.

* Source: Web Designer Depot

3. Egg timer

White egg-shaped kitchen timer

This is a very functional, no-frills item which nevertheless achieves its purpose perfectly. Of course we don’t have to use it only for eggs, in fact it’s probably better to call it a kitchen timer as it can count down from 60 minutes which is enough for your everyday cooking/baking tasks. For the first 15 minutes – when one minute can make a difference – you can set it accurately to the nearest minute, while for times over 15 mins you can still sort of guess but the scale goes up in 5s to make that area less cluttered and make the starting point easier to see. There is a red arrow marking the 0 point and the top half, which is the dial, revolves towards this as it counts down. This timer is a simple egg shape and has a non-slip silicone(?) coating to prevent the user’s hand slipping when they turn the dial. Needless to say the egg rings loudly when it reaches 0 minutes and there is a battery compartment at the bottom that allows you to reuse the item if the battery runs out, unlike some other kitchen timers I’ve seen that don’t have this and you have to buy a new one every time, which is a huge waste.

Barbara September 29, 2013 Leave A Comment Permalink

get_footer() ?>