Category Archives: Site Design

Design of websites

Moonlighters Website

I sing with a small swing, jazz choir in Tempsford on a weekly basis for over a year now, after moving from Bedford Choral Society in search of a challenge. The Moonlighters sing mostly without accompaniment, and the smaller number of members requires everyone to hold their own.

As one of the members was emigrating, the existing website had to be replaced and moved elsewhere. So after some thought I volunteered to set up a new site (the existing code and content was wrapped up in a third-party CMS which was not easily accessible) with WordPress and on TSO Host, my preferred hosting company.

The website – Moonlighters.org now is a source of new members and enquiries to hire, and we have plans – new photography, some recordings, even a mailing list.

Online Forum Documentation Project

For a little over a year now, I’ve been a curator.

cu·ra·tor
/ˈkyo͝orātər/
Noun
A keeper or custodian of a museum or other collection.
Synonyms
custodian – keeper – trustee – guardian – conservator

It is an administrative role at a friendly online forum, with posts monthly from between 50 and 60 engaged members from around the world.  Historically several hundred have been members at some point, and it has been going longer than the three years I have been part of the community.

It has a challenge of conveying the rules of a collaborative writing game, everything from how a member conducts themselves in a chatbox to the boundaries of science in the game have been painstakingly discussed over the years, debated, disagreed, resolved and reworked by the members and their curators.

The curator team has changed regularly over time, adapting to a larger group of members, more activity, hundreds of questions and the considerations of making final decisions on some of these discussions.  All in all, it can be a mammoth task, especially when collaboration is entirely done through forum posts, instant messages and the odd Skype call when timezones allow.  Some days it can feel a thankless task, other days it is synonymous with an online pub where topics fall to cooking and discussing the differences in culture and daily life between us.

Last year, shortly after I made the ranks of curator, the team went through a period of ‘redux’ where the forum’s documentation had become sprawling and inaccessible to many, with contradictions and other matters.  The forum had a wiki, but it was generally only for the interested or involved, and the decision was made to keep the core documentation on forum pages, but reduce the number and simplify matters.  But where to start proved tricky, and without being able to be in the same room to draw it out or debate it, it was hard to visualise.

Then stepped up a beautiful piece of software I’d acquired for the Mac – MindNode, a tool to map out thoughts and ideas in a spider-diagram.

We were able to turn this:
ao-original-docs

Into this:

ao-revised-docs

From there we could revise each piece of documentation in turn, rewrite it, edit it, tweak it, normalise the language and terminology between them so we used consistent names and formatting. Suddenly from a mass of text, here came the visualisation.

The short story being, that visualising things ended up working perfectly for us. What seemed an insurmountable task was now tackled by people who had never met in person, and benefitted many (albeit a hobby pursuit).

It’s a technique I will follow whether with pen and paper, or on here, to map out everything from content for a site, to a plan for a fictional character or environment. Ideas link – they flow from one to the next in logical steps, and from one idea can link many. Using this technique I am able to create far more detailed, reasoned and rounded ideas and executions, in almost any reasoning.

Why I love the John Lewis website

Since moving into a new property, I’ve trawled website after website and spent long weekends in furniture shops sorting out appliances and furniture. It turns out I’m just particularly picky, and also as its my first home to furnish (I previously short term rented furnished places due to studying etc) I had a lot to discover and contemplate.

Landing on the John Lewis website was a breath of fresh air amongst other retailers (particularly electrical ones…) with their cluttered websites and confusing product comparisons. So, these are my top 4 reasons:

Clean & Uncluttered

The John Lewis brand has a lovely, clean, elegant look of it. Even in stores there are dividers in just off white with some simple sans serif font. Whitespace appreciation gives breathing space. Everything about the clarity in the JL site makes you feel relaxed. Yes, one could argue it was a bit boring but in honesty, its a lot easier to read and find things when a hundred and two things aren’t blinking at your or crushed together.

The home page has a clear focus on a top panel which showcases some great photography and interesting products. It scrolls at a rate that doesn’t make my head spin, yet commands attention. The space beneath is divided neatly with images and text that fits well in proportion, and beneath that, at least for those signed in, is a recently viewed products and a neat, functional footer.

Menus

I know some people hate them, but I appreciate a well executed drop down menu with large drop downs. With such a vast array of products, its one way to cut down on the number of clicks between your visitor and your products. The menus on the JL site are easily read. I especially liked the Home & Garden menu – I was looking for furniture at the time – as it has been split into rooms, furniture, home furnishing and shop by type.

The women and men menus have a neat little ‘highlights’ column to pick up on trends or ad campaigns, and the gift menu handily splits between type of gift, the gift recipient and the occasion making life a lot easier. Shop by brand is the only one to buck the trend as it leads to an enormous directory of all the brands the shop holds across all lines for the brand lover.

Advice

I can safely say I didn’t know much at all about fridges before attempting to buy one – other than they kept things cool. However, I discovered what frost-free meant and the different energy ratings, sizes and different styles with the advice guide John Lewis provides. This extra info may be missed by quite a few shoppers, but offers valuable advice and tips which I found impartial – rather like the partners in each store.

Product Filtering

The product filtering on John Lewis was severely lacking from most other sites I visited to compare fridge freezers. Each category of product has slightly different filters – the fridge freezers for instance have brand, price, energy rating, fridge freezer type, frost free (freezer), and then the additional filters of type, colour, width refrigeration and rating.

There are quite a number of brands, so JL have shown the popular ones and then provided a handy expansion to see all the rest of the brands if you want to narrow it down. Handily they provide a number in each category too so you know how far you’re narrowing down your options.

As you interact with the filters the products and thumbnails begin to refresh, and so do the filters below. This saves time on page loading, and allows you to change your mind quickly. Once you have the filters in place, you can reorder and compare up to four side by side which makes comparison shopping a breeze.

What do you like and dislike?

Do you disagree? Do you hate the big menus and find the filters illogical? What have you spotted that you think is neat? I’d love to hear different opinions, so leave me a comment.

The image in the header of this post is CC use of: Westfield Stratford City – John Lewis by EG Focus on Flickr.

Creative Network

One thing I love about working in web design is the community. From colleagues, to fellow university graduates setting up their own businesses, to contacts from conferences, other companies collaborated with, and chance meetings. Everyone I’m in touch with I admire for their individual talents and achievements within the community, and I’d like to keep this post updated with people I meet and admire, and hope to work with, if I haven’t had the fortune of doing so already.

Go here if you would like to link up with me on LinkedIn.

 

 

DigiPest – Chris Fairey

Chris describes his company:

We specialise in network and website testing for small businesses, we can also provide training if required.

DigiPest – security specialists is run by Chris who as well as reading the same degree from the University of Hull (2008) also went on to complete the EC-Council Certified Ethical Hacker qualification. I would recommend Chris to you for any security concerns regarding websites and networks, even if you think you may be safe as houses, he would be able to tell you.

LinkedIn | @digipest | www.digipest.com

 

ArtDeal Designs – Artiatesia

Artiatesia describes herself as:

I’m the Founder and Creative Principal at ArtDeal Designs, a boutique design studio assisting Solopreneurs and Small Businesses with their web & graphic needs.

ArtDeal Designs – US small business design studio is run by Artiatesia who not only has a passion for blogging and all things tech, but creates designs for small businesses and entrepreneurs. With strengths in social media (Facebook, Twitter) design as well as traditional website, blog and print design, ArtDeal is an ideal contact for any freelancer or small business.

LinkedIn | @artdeal | www.artiatesiadeal.com

 

DooBurt – Chris Laythorpe

DooBurt is a web developer, project manager and designer and a former colleague at Harmony Internet. With interests and surprising catacombs of knowledge in a number of obscure subjects including aircraft, air disasters (and building them out of LEGO), and World of Warcraft (I didn’t necessarily mean healthy interests). Chris was also part of the Audiostylists, and a DJ, and is still in his twenties, honest.

LinkedIn | @dooburt | dooburt.squarespace.com

 

Pete Hindle

Pete describes himself as:

I’m just some guy with a site who posts things

Pete Hindle is a creative soul from Biggleswade who blogs and tweets thoughts, writing, photography and insights from the creative community with good humour about Bedfordshire and its quirks. Pete is also an illustrator, juggler, and reads mountains of books.

@petehindle | www.petehindle.com

 

Creatingle – Sarah Francis

Sarah describes her company:

Imaginative, professional design and creative digital art (with a twist of quirkiness)

Creatingle – simple, beautiful design is Sarah’s freelance website, where she has great talents in print design, while also designing for web and more diverse outlets, including bar designs for big UK music festivals. Sarah is a very thoughtful, intelligent designer who I would recommend without hesitation.

LinkedIn | @creatingle | www.creatingle.co.uk

 

Albofish – Alex Hollyman

Albofish – musings of a clever web developer is Alex’s personal website, where he posts articles and advice from a developer perspective. He is a Harmony Internet’s senior developer, and my colleague. As well as turning his hand to classic ASP and PHP, Alex has a keen interest in jQuery, CSS and HTML and is a fantastic and creative problem solver.

LinkedIn | @albofish | www.albofish.co.uk

 

Diggersworld – Thomas Digby

Tom describes himself as:

I’m a web developer for Blitz Games Studios and have recently moved onto IndieCity.com – the one stop shop for all things indie games.

Tom is a gifted artist, designer and developer. A Flash wizard, he’s also pretty nifty at the guitar too, and is far too humble to agree with me on that. Blitz Games Studios is on the top five independent European developers of video games with titles on the Playstation 3, Xbox 360, Wii, PSP and PC platforms.

LinkedIn | @diggersworld | www.blitzgamesstudios.com | www.indieCity.com

 

Smartdog Digital – Illiya Vejestica

Illiya describes his own company as:

Smartdog digital is a specialist online marketing consultancy & training company helping business to measure their ROI online.

Illiya set up his own business, Smartdog and is a PPC and search engine guru, speaking at events, conferences and keeping up with a wide range of contacts. He blogs, tweets and is always right at the leading edge of what’s going on in the business. Illiya is the first person I look to for advice in online marketing as an expert, and he can provide insight and analysis to save hundreds of pounds from a marketing campaign.

LinkedIn | @illiyav | @smartdogdigital | www.smartdogdigital.com

 

BearOnFire – Sarah Carney

Sarah describes her freelance business as:

BearOnFire is a home for custom illustration and graphic design. Roarin’ good!

Sarah is a designer, illustrator and creative writer living in central Iowa. With a passion for dancing, Sarah juggles creativity in multiple forms along with managing a busy online forum and blogging about it all. Proud creator of a featured deviation on Deviantart, Sarah has been recognised for her contribution to the community and has many happy clients who have commissioned her individual talents.

LinkedIn | @sarahsellaphix | sarahcarneycreative.com | Thrive Art Blog

 

kNOELedge – Noel Gray

Noel describes his freelance business as:

Creative solutions to everyday challenges

Many of us have too much to read, reports, blog post, emails and probably many more. Keeping up can be a nightmare. I help you by showing you how to read faster and more efficiently. And yes, you read every word.

Perhaps you have problems at work that just don’t seem to go away, they pop up again not matter what you try. Costing you time and money and leading to frustration. I use creative thinking to identify the underlying issues and then give you a new perspective to overcome them.

Noel is a clever soul with a passion for problem solving! Not afraid to grace boardrooms and corporate environments, Noel brings his great experience and brings down barriers to progress. A great thinker, academic and listener, Noel’s services have been sought by GlaxoSmithKline and The Chartered Management Institute amongst other high profile names.

LinkedIn | @kNOELedge | kNOELedge.com | kNOELedge.net | Facebook

How to Exterminate Customers

I am toying about putting together content for a comic, yet lessons learnt article. So this is a bullet list of ideas for an article entitled “How to Exterminate Customers”.

Any ideas of what to add are welcomed.

  • Inconsistent site structure.
    Yeah, the home page link was there a minute ago, but its over there now.
  • Broken site
    Broken images, broken links, designed for IE4, huge error messages, crashes your browser
  • Slow to load
    You could have a cup of tea before this loads.
  • Low quality photos
    Images of products that are itty bitty small and really don’t help or detract from the product
  • Excessive adverts
    Google ads plastered left right and center, and worst of all, inline with the content. Particularly bad when you’re in the checkout.
  • Using a tiiiiiiiny font
    Where’s my magnifying glass?
  • Using horrible colours
    Red text on green, or on very stripy background anyone?
  • Out of date, incorrect advice or information
    Bad advice is worse than no advice?
  • Flash loading screens
    Where’s the skip…
  • Breaking content into lots of needless pages
    Just let me read the article, don’t split it into lots of two paragraph pages so I have to keep clicking
  • Only works in one browser
    So I want to book my cinema tickets… in firefox. What do you mean I have to use Internet Explorer?!
  • Using massive forms
    I don’t want to tell you my life story, all I wanted was to register with an email and password.
  • Don’t display contact details
    I want to phone you, where’s your number, where’s your email?!
  • Sending Spam
    I just wanted to use your site, you made me log in to use the forum, now what is all this SPAM you are sending me?!
  • Large blocks of copy
    Paragraphs, quotes, formatting
  • Bad spelling
    American spellings exempt, but if you can’t spell your company name, you fail.

What puts you off from using a site, or shopping on it?