Tag Archives: design

Swimming School Website

Just made Janes swim school website live. Its a small simple site built in WordPress for her swimming school in St.Albans, Hertfordshire. Hopefully it will help her business attract more learner swimmers. She wanted to stand out from other swimming schools and look professional yet friendly.

Jane started off with nothing so we worked out a structure together and what she wanted to feature and what parts of the site she wanted to change. Jane wanted to feature testimonials from her customers so I’ve added in the ability to add more testimonials as and when she gets them and the will appear scattered throughout the site. She can edit all the pages so it should keep her costs under control and let her phrase things as she wants. Its a starting point we will see how the site moves on in the future.

As well as print style sheets it has some pretty simple mobile styles so that it is moving towards responsive design in a small way.

It uses my sitemap plugin to create her sitemap.xml dynamically so it will be updated everytime a page is updated or new content is added.

Its also mildly minimized with my minify plugin it doesn’t go all the way and remove all the line breaks but it cleans up a lot of the white space so it should reduce the amount of data transferred when you request the page thereby making the pages load faster.

I’m monitoring for errors so we should sort out any issues that visitors bring up.

Web design – Don’t Make Me Think

I’ve finally got round to reading “Don’t Make me think” by Steve Krug. Although its now quite old, I was reading the second edition from 2006, I think much of it is still relevant.

Don’t make me think

“I should be able to just get it”, the purpose, how and why of each webpage should be obvious. It should be obvious what is clickable, what’s the navigation what the purpose of the site is and where you are in the site. To someone who has never looked at the website before and isn’t a webling. Anyone who has used a web browser before should be able to work it out.

How we really use the web

Designers think that people carefully look at their pages, they spend ages designing them after all. But people don’t, they just bash on through until they can’t figure it rather like blokes do with instructions. They scan pages just picking out what they need to accomplish their aims.

Billboard Design

So we need to design websites in the same way you think about billboards on a motorway. Something to be skimmed at speed. This is why headings are so important it gives a quick clue where to go in the page and how relatively important things are. So create a clear visual hierarchy and make it really, really obvious. In the same way conventions are great every designer wants to create this new/shiny navigation. To show how smart they are but that’s all rubbish. If thousands of other sites on the web use a similar navigation to your site then nearly all your users are going to just get it. Simples.

Animal Vegetable, or mineral

Make choices obvious don’t assume great knowledge of the subject. As long as your correct your not going to annoy an expert by making it simple.

Omit needless words

Omit needless words most people don’t read them anyway. Steve suggests removing half the words on each page. With the aim of reducing reducing noise, getting more content above the fold and making the aim of the page more obvious.

More…

He goes on to talk about navigation, why homepages go wrong and most interesting for me user testing on small budget. But in the spirit of “omit needless words” I’m stopping here.

References

Mobile web design

Android have published a guide to developing applications, despite being an advert for Ice Cream Sandwich, it is quite useful and provides good tips for how to design any small screen based application be that mobile apps or web sites to be viewed on handheld devices.

I’m trying to get my head around how to design things for very small screens at the moment so I found it quite useful.

  • Size of your fingers – aim to make usable bearing in mind the size of the end of your finger is 7-10mm, and you need to maintain a clear gap between each item.
  • Feedback – on interaction to try and indicate that something will happen, they suggest using percentage shades of the same colour.
  • Consistancy – across interface of the same visual clues if touching the arrow makes you move from screen to screen on one part. It shouldn’t suddenly switch to being a edit cue on another screen.
  • Describe only what is necessary – you only have a small screen and people don’t want to know the details. If you have an error message they don’t want to know that you have a parse error or some such.
  • Headline first – “Aliens have landed and you have 6 messages” rather than “You have 6 messages and Aliens have landed”.
  • Be familiar to the devices interface – don’t try and make your android app use iphone design elements, or vice-versa you should be taking advantage of your users familarity with their own device.
  • Pictures being more obvious than words -Real objects are more intuitive than buttons and menus, for icons I guess this comes down to not making people think.* They extend it into pictures being more obvious than words. Guess there is less brain action needed to go from picture of steve > steve! than from “steve the monkey” > oh yeah > steve > steve!. **
  • Only show whats necessary – don’t show whats not needed for that screen. This is ok as long as items are placed in familiar locations. You don’t want everything shuffling position when you go from page to page.

Most of this is the same as its always been but its always good to remind yourself. Sometimes I’ve ignored design reading this made me wonder how much of this is really about toys for adults.

* Never really been sure about using an envelope for an email icon but I suppose if that is what everything else uses then its the right thing to use.
**Wonder if this is the logic behind a visual search engine like Oolone.

References