At the beginning of January we launched our very first website of 2012 for Thanks and Recognition.

Thanks and Recognition help to create an environment of trust where people feel empowered to thank one another for good deeds they have done in the day.  It works very simply, if somebody does something that you value and want to recognise, you send an email thanking them for what they have done. Thanks and Recognition can then calculate how many times you say thank you in a period of time. There’s lot of theory around the subject and you can find out more on their website.

The site is built in HTML/CSS and has a WordPress blog. We used fading statistics on the home page and also embedded Thanks and Recognitions “Yum Yums & Employee Engagement” video which is a big hit in the Top Left Design office! There is also a blog feed integrated on the home page.

Thanks and Recognition were also kind enough to provide us with a nice testimonial too! Thanks guys!

“We are delighted with our new website. Top Left Design were friendly, helpful & professional throughout the process. They made sure we stuck to the schedule to get it finished by our own deadline and gave us very good advice. Tina was brilliant to work with, she guided us through the build with ease and professionalism. Thank you.”

Are you wanting to shout your services and great work to the world? Want to advertise without actually advertising? But what you do is SO fantastic how will prospective clients ever believe that you can achieve what you are shouting about?

We need proof they say…

Proof? you want proof? I’ll show you proof!

Please navigate to my case studies page…

Before you can have the perfect case studies page you need a few perfect case studies. Here are some tips on how to create a perfect case study.

5 things your case studies should include:

1. Break it down – be sure to include a brief breakdown of the case study as an intro. It makes it easy for visitors to find the case study they are looking for quickly and without getting frustrated
2. Images – images always make things more interesting, if you haven’t helped a client with anything tangible that you can include photos or screenshots of, then you can use stock images, just make sure they are well chosen, match the look and feel of the rest of your site and they aren’t cheesy! Fish Financial used some great quirky images for their case studies.
3. Headings – breaking your case study into sections is a great idea – but make sure you include headings. Your visitor should be able to easily see who the ‘Client’ is, what the ‘Project’ is, where the ‘Challenges’ lay, an ‘Overview’ of how you planned to help the client, the ‘Work Required’ to achieve satisfaction, the ‘Solution’ and the ‘Result’ where you can say how everything was achieved and also how it has helped the company or client. Try using headings that actually help tell the story – such as “Helping a pet food company increase their earnings by 72%” or “Probate advice for a family of 8”
4. Testimonials – these are the life of case studies. Testimonials give a name and occasionally a face to the case study – this helps people feel a connection to the client in question and can build trust. If you can convince the testimonial giver to let you use a picture of them, then that’s even better – CWB is a great example of this.
5. Give me more! – if you have chosen to take our advice and have an intro to begin with be sure your site visitors can find the entire case study easily by either including a link to the full case study or a link to a downloadable PDF of the case study (something that visitors can download and read at their leisure). A Business Innovation makes use of downloadable PDFs for their case studies.

7 reasons to have case studies:

1. It’s a great way to advertise without actually advertising
2. It can help evoke emotion by discussing situations that other people may also be in (for instance financial case studies are very important as there will always be website visitors who are retiring, have been retrenched, or just want to save for a better future)
3. People get a much better idea of what you do by reading real life stories
4. It’s a lot less “salesly” to tell a story about the services you provide and to let the results and testimonials speak for themselves. You can list statistics to show how a company has grown, become more productive, or made more money. Numbers are always a great way to show how well things are actually working
5. Everyone likes a good success story
6. If your clients are also businesses they will get free exposure and SEO benefits
7. By showcasing a variety of different types of clients, you have a greater chance of the reader identifying with ONE of them and understanding how you can help THEM.

Below are some examples of case study pages that we have done:

A Business Innovation

A Business Innovation is a company we regularly partner up with on projects. Together we have worked on some great websites AND case studies pages!

This page features all case studies on one page – company name, brief overview, and an image of the websites home pages. If you hover over the images of the home pages the image border changes to red and the website home page image is replaced with the company’s logo. See the cool feature here.

A Business Innovation also makes use of pages dedicated to each case study with a downloadable PDF.

Fish Financial

For the Fish Financial website case studies page we chose a fresh, clean layout to match the rest of the site. All 6 case studies are easy to navigate between with them listed on the left. When on a specific case study the left navigation boxes change colour to show you where you are.

The case studies themselves all have their own individual quirky image to go with them. They include a brief overview of the case study with a quote from the featured client and a PDF download to the full case study.

The Bespoke Wedding Company

The Bespoke Wedding Company has a great reason to have a case studies page. Being a wedding planning company there will always be lovely stories to share, but more importantly loads of amazing photos to show off.

The main case studies page shows all case studies with one large feature image, intro text and a link to the specific case studies. The specific case study pages include a full write-up on the event and the services they supplied. It also has a testimonial from the bride and groom and a lovely gallery to showcase the event and services rendered.

Prescience

Prescience is an integrated media company who focus on film production, financing and sales. They have helped fund movies such as ‘The Kings Speech’, ‘Chalet Girl’ and ‘Horrid Henry’.

Their case studies page needed to show all the projects they have helped fund, the projects that are soon to be released and even ones still in development. Their main case studies page just features the movies name and a recognisable image of the actors in the films, if you click on any of the movie names or the magnifying glasses a cool lightbox pops-up to give you an overview of the movie, from there you can navigate through them all.

Karen Haller Colour & Design Consultancy

Being a colour and design consultancy means that there will always be lovely pictures to feature on the case studies page. The main case studies page features 4 case studies – large images, intro, and a link to the full case study.

Each case study has its own page which features a full breakdown of the projects (using those fabulous headings), a testimonial from the client, clever links leading into other parts of the website and a lovely gallery to showcase the colour and design consultancy that was supplied.

OWL Regulatory Consulting

OWL  is a Regulatory Consultancy who have helped many clients. They chose only 3 case studies to feature on their website. It’s a very simple layout and the full case studies all appear on one page.

Based on the fact that the case studies are quite small we used a great drop-down feature. So arriving at the page you see the 3 case studies, headings and images, and if you click on the ‘More’ link then it drops down to show the whole case study.

Clarkson Wayman Ball

Clarkson Wayman Ball are a finance company and have many success stories to share. As we mentioned earlier – adding a testimonial from the client is a great way to get your visitor to connect with the story. CWB managed to get their clients to tell their personal stories and was even able to convince their clients to pose for pictures for the case studies. This really gives a whole other level to them.

They have an individual page per case study which includes the full story, a photo of the client, a downloadable PDF of the case study, a testimonial and a brief introduction to the team members that worked on the project – this is a fantastic way to allow your visitors to ‘meet the team’ and also gives the visitor an idea of who could be working on their specific case. Brilliant!

Here are my top 11 so far (in no particular order):

Get yourself out there!

Networking, blogging and social media are the way forward! At Top Left Design Keren and the team frequently update followers and clients with the latest events, offers and daily office going-ons.

Through this constant contact with people, TLD are continually establishing new contacts, friendships and exciting new ventures.

If you get yourself out there and approach marketing with confidence it will reflect on your business and also your own personal confidence – don’t be afraid to be the boldest of the bunch!

Shortcuts

Designing can be a very long process – unless your equipped with the magic shortcuts!

I’ve learnt a countless amount of shortcuts whilst working at TLD for a range of programmes, shortcuts don’t only save you time but also give your mouse a well earned rest.

*Please note we never take shortcuts when thinking up the brilliant ideas behind your designs, and also recommend to never take shortcuts in life!

Design is where the heart is

One of the best things about working at Top Left Design is being surrounded by a team that are passionate about design! Without this passion and drive we wouldn’t be able to produce the beautiful, professional and unique designs which we’re known for.

Size does matter

When designing it’s always important to have a balanced hierarchy of text and images. We always make sure that all elements work in harmony with one another creating a well balanced design.

The size of text, and fonts are fundamental in establishing headings,  subheadings, and  body text. The key is to use font styles, colours and perhaps two different fonts consistently to represent each section of text, it’s also always important to make sure the text is legible and balances well with images.

A good eye for balance whilst designing really does make a difference  – so you see, size really does matter!

Attention to detail

Good design requires a meticulous eye for detail. Its no use creating a beautiful design with those awful mistakes which make your head feel like its going to pop!

When designing we always check that the line height of text, and alignment of different elements is consistent, it’s also important to allow your design to breath. And of course we always look out for those dreaded spelling mistakes, missed full stops and bad grammar!

The importance of presentation

At Top Left Design we’re always presenting new ideas and designs to clients so its important that these designs are presented clearly and professionally.

Creating storyboards is one way which we present website designs. Live storyboards allow clients to view their designs in a browser, they can then compare each design and are also able to see what their site could look like live.

It’s also a handy way for them to get feedback from a friend or colleague, they can simply forward the link for a second opinion.

How to communicate with clients

Communication is key in any business and here at Top Left Design we make sure we’re always able to communicate clearly with clients through emails, phone calls, and meetings.

I’ve learnt how to structure emails which effectively communicate to clients any changes that have been made to their designs, quote for design work and have also learnt how and when to include polite suggestions for further changes/work – its always nice for clients to have input from the designer to help them along the way with the development of their design project. Phone calls – of course I mastered on the first day! (the traditional – Hello Nichaela speaking, how can I help-pen-paper-message) although the in-depth discussion and meetings are still yet to come…

When approaching a new design project it’s essential for both the designer and client to feel comfortable in developing the forthcoming designs. Its important for us to know the style of design the client desires, so we can feel confident in delivering the designs and making changes. Good communication is what makes your design perfect.

How to spot a good image

When including images on websites, in blogs, newsletters etc. its always important that you choose images which are eye catching, attractive and don’t look ‘clip arty’.

Below are three different types of photography, and two tips which will never fail you – what to look out for when your sourcing images :

Bokeh Photography
Bokeh is an adaptation from a Japanese word meaning blur. Photographers create this effect using lenses to adjust focus in the foreground or background, essentially highlighting one object and blurring and expanding areas of light. Just type Bokeh photography into your search engine and see what comes up – the images are amazing!

Macro Photography
This close up style of photography is always good if you want to show attention to detail. For example if your a restaurant or food company this type of photography will effectively show off your delicious food, or if your a florist it will highlight the beautiful detail of  your flowers in a very sophisticated way.

Tilt Shift Photography
Tilt Shift photographers cleverly create ‘toy like’ scenes using a special lens and movement of their camera. This type of photography creates an interesting and dynamic picture, turning your everyday scene into a miniature world.

Image source: www.smashingmagazine.com

Image source: www.hongkiat.com

Photography with interesting perspectives, arrangements and use of focus
Images with objects or people just plonked in the center aren’t very interesting and don’t draw in peoples attention. An interesting perspective, and arrangement of objects or people and use of focus will always catch someones eye.

Photography with ‘good’ backgrounds
Try to avoid images with white backgrounds as these can look very clip arty – unless of course you need an image with a white background. A nice scenery or textured background is always a great choice.

*remember its always good to think outside the box when choosing  images, make sure they’re interesting, but also relevant to the message you’re trying to convey.

How to mask!

For all you non Photoshoppers out there masking is a very handy tool which can be used in Photoshop, and other Adobe software which I recently found out exactly how to use it!

A mask can be made of one object e.g. a box for an image slider on a website. This mask can then be applied to another object such as an image, this will effectively make the image fit within the exact same space as the box – very handy in maintaining a precise and consistent design! See my example below:

Finished! or am I…

Its important not to get ahead of yourself. At Top Left Design we always encourage clients to let us know of any changes they want to their design work. We do whatever we can to create a design which reflects what they envisioned and recognise the jobs only finished when the clients are happy with their final product.

And last but not least… How to make a good cup of tea (I think)

One of the very first things Keren taught me! I’m petrified of making tea for people in case they don’t like it, but no complaints so far! Looks like Keren’s magic paid off.

Here is what Julien wrote

Hi everyone! I’ve just finished my 10 weeks internship here at Top Left Design. Usually I work more with the programming side of things, and have never really learnt much about the design process. I like coding because I’ve learnt a lot about how to do it, and so now it’s easy for me. But during this internship I saw that design is not so different from coding, you have to always keep in mind some key rules and guidelines to create a good design.

Here are the 7 most important rules I learnt at top left design during my 10 great weeks:

Composition

Align, align, align! Well-aligned elements within your layout make your website look tidy and organized. You can see an example of this on the Performance Resolution website.

Colours

Choosing the right combination of colours in reference to the client’s brief, and referring to the colours of their existing branding, is a difficult and important task in order to create visual harmony within the new branding and website. It’s also good to have some contrast between different elements to highlight important sections of the website, you can do this by using a combination of bright and dark colours, and this can also help to guide the reader through the site.

Visual Hierarchy

You should highlight things important like the services offered by your company, and keep less important things more simple. You can see on the A Business Innovation website that there services are highlighted in boxes making this section stand out to people.

Consistency

The website should be consistent, each page should be identifiable as part of the whole.

The little things matter

Details are very important in any type of work. It is the same with the design: details are the difference between a good design and great design.

When I started working on design layouts, I realised that every final site produced perfectly reflected the final design. This means the margins, padding, backgrounds and borders have to be perfectly consistent through your designs, it’s also important that the colours and fonts stay consistent throughout the site.

At the beginning of my internship it was very hard for me to follow these rules, I found it easy to make small mistakes in a layout, such as remembering to make sure everything is aligned exactly, making sure the right colours are used throughout, and ensuring the titles are consistent sizes. And the fact is I didn’t understand why it was so important because by definition, it was only small details… But now I know why.

Looking out for the little things whilst designing and remembering your ‘rules’ whilst designing really does have it benefits:

• The most obvious: The work looks more professional, if you always make small mistakes your reputation will suffer.

• You don’t waste time explaining these little mistakes when the client is viewing your designs. Everything is perfect and so you can focus spending time discussing the things that really matter.

• It makes you more organized. If you’re organised and have named each of your layers in Photoshop, and grouped these into folders it means when you come to making small changes you save a lot of time. Naming your layers in Photoshop is really important when you are working in a team as it’s not only you that will be working on those files.

• Faster development. For example if you design a blog which is not correctly aligned and you send it off to the programmer to be built, the programmer doesn’t have to waste time figuring out if you made a small mistake or if it was intentional.

Check your work

This tip is linked to my previous point. The final design has to be perfect to avoid a dissatisfied or disappointed client. Everything is double checked to be sure the result is as expected. Sometimes when you work for a long time on a design you can’t detect mistakes easily. That’s why it’s important to have someone else in the team to take a look over the design, and see if there are any little tweaks which need to be made.

Keep it simple

A design can look sophisticated and professional without many design elements which may just prove to be useless. Personally when I’m looking through a website for information about a company, I prefer to see a clean and minimalist design where it’s easy to find what you want, and not be distracted by things that are not as important.

Caroline and Julien are two french students who spent 10 weeks with the team at Top Left Design on a summer internship. 10 weeks have flown by! They have sadly left and will be truly missed by all of us at Top Left Design. In this blog post Caroline shares a little bit about her experience at TLD and the new things she learnt.

Here is what Caroline wrote

Here we are: 10 weeks have gone by, and it’s already the end. When I look at the pieces of paper which I wrote all of my tasks on each week, I think we can say that it’s been amazing. From tasks which took me several days to complete to some which only took me a few minutes, each week has been a new experience.

Of course at University I’m used to working on many projects at one time. But the big difference between school and an internship is that here, there is always somebody to help you to improve your work, and also to explain to you why it could be improved and above all HOW. It’s not just a mark at the end of a semester; it’s a real explanation – a great way to learn how to improve your skills, so each time you design it gets better and better.

Is 10 weeks too short a time to have a well-rounded vision of the world of work, and significantly develop your knowledge surrounding design? Do you really think so? If so, I hope I can persuade you to change your mind…

The 3 common mistakes that I made at the beginning of my internship:

1.  When designing I either made the line spaces too big or too small, but never the size they were supposed to be.

Solution: Be patient and analyse carefully existing designs to find the perfect spacing for yours. You always have to check what size the font is and adapt the line space accordingly. It’s the same for the spacing between the different design elements e.g. image sliders and boxes. The spacing needs to be consistent throughout allowing your design to breathe.

2.  Designing without enough individuality or character!

Solution: Add colours to the design and noise to the background, this makes the website background look textured and helps to make the website look welcoming. The best way to be inspired whilst designing is to have a look at great examples of website design which already exist on the web.

3.  I would sometimes design using too much text – nobody wants to read a page like that!

Solution: Put 2 or 3 colourful boxes to catch the viewer’s attention, and always try to find good images to space out the layout, this will make the page more harmonious. Plus you can always add a read more link.

The 3 types of tasks at Top Left Design which helped me to learn more about design:

1.  Creating a homepage layout using the brief filled out by the client

Even if you have never met the client, you have to be able to understand their brand and brief to be able to create a design which is fresh and new, but also very personal and relevant to the company. It’s important to include all of the design elements which the client has asked for within the layout, e.g. a blog feed, image slider and side navigation.

2.  Design all of the inner pages of a website even if you didn’t create the homepage

When designing inner pages it is important to follow the final design of the homepage. You have to make sure the style of design throughout the rest of the site is consistent with the homepage. It’s important to be really conscientious to ensure that the fonts, colours, and small details such as borders of boxes and so many other things are the same across all of the pages.

3.  Working on the creation of a logo

Such hard work! Of course you need to create a design which suites the clients brief and brand, but you need to have THE idea which will make the logo unique. It’s important to create something recognizable and also distinctive, however with a small amount of intricate details ensuring the logo will remain legible when used at a smaller size.

As you can see, you need much more than simply just knowledge of software to be able to create a great design. University taught me technical skills; Top Left Design gave me the opportunity to go beyond that.

To conclude, my first impression was that the team seemed to be so friendly… And now, the last thing that I can say about Top Left Design is that the team is definitively, extraordinarily friendly!

Good professional photography is essential for this genre of website, and thankfully, our clients recognise this with the beautiful images they have supplied to us in the past.

Read our blog post on professional photography in web design for more about that.

So without further ado, below are a range of fantastic food business websites that have been designed by Top Left Design.

Carmen Bar De Tapas

Carmen Bar De Tapas is an intimate tapas restaurant located in Clapham, London. The decoration and the friendly attentive staff create an atmosphere that will make you feel right at home.

A perfect venue to enjoy a romantic dinner for two, while also catering for larger groups of family and friends – It is a place to come and relax, and enjoy food as it is meant to be.

Goo Goo Gourmet

Goo Goo Gourmet offers an innovative delivery service for baby food. They understand that parents are busy, and offering this service takes away some of the pressure that comes with parenthood!

The Nut Hut

Nuts – the perfect snack! And with The Nut Hut, you can order customised selections of various tasty nuts and dried fruits online. They also do hampers for special occasions, and have a couple of physical stores set up in shopping centres throughout London.

Caldesi

Caldesi is an authentic Italian restaurant and cooking school based in Marylebone, London. Their website reflects the historic character that also comes across in their restaurant and food!
We had the pleasure of attending one of their cooking classes recently, and were shown how to make pizzas from scratch – delicious!

Limoncello

Limoncello are a catering company based in East London’s bustling Shoreditch area. They make and deliver lots of nice food, including but limited to sandwiches, buffets, canapés, breakfasts and packed lunches!

Having good quality images on your site can set you apart from your competitors in a big way. Have you ever been to a website and thought “those pictures are awful”? How did that affect your impressions of the company? I’d be willing to bet that your perception of the company went down some – the quality of your content is directly linked to how your visitors perceive the overall quality of your company.

There’s nothing worse than having a great website designed, only to populate the pages with low quality clipart style stock imagery, or dodgy team pictures.

• If you are a venue – people will want to see the venue in all it’s glory
• If you have a physical product – then show off the product with high quality pictures
• If you have people in your business – (yes we know this means everyone!) – adding team pictures creates trust and transparency

Professional photography really does add a sophisticated and unique feel to your company and products. Below is just a small collection of  professional photography used throughout websites TLD has designed – now you’ll be able to see why professional photography is a must!

Venue Photography

Caldesi

Caldesi uses high quality photography to showcase their elegant restaurant interior – allowing any visitors to their site to see exactly what they are in for!

Product Photography

Goo Goo Gourmet

The Goo Goo Gourmet website has stunning product photography, cleverly placing the raw ingredients of the food next to the finished product. In times where we are all very conscious of what is put into our food, the images here combine peace of mind with beautiful pictures of food.

Photography by Studio Erameri www.erameri.com

The Nut Hut

Product imagery can sometimes become bland and repetitive – but not on The Nut Hut’s website! The food has been arranged in different ways almost like a sculpture, showing that even the most basic types of food can be displayed in an innovative way.

Photography by Studio Erameri www.erameri.com

Caldesi

As well as being a restaurant, Caldesi is also a cookery school, and the images here create a classic kitchen feel – freshly cut bread, raw dough covered in flour, and well prepared finished meals. If looking at these images doesn’t make you hungry, there must be something wrong with you…

People Photography

Olim

Olim have used clean, well composed images of their staff to show that their company has a face – visitors to the site establish a bond of trust when they see the people behind the name.

Photography by Nigel Charman www.nigelcharman.com

Caldesi

Again, Caldesi is a prime example of well taken photography – pictures of their staff are up on the site to let you know who will be teaching you to cook in their cookery school, and who will be cooking the food you eat in the restaurant itself. You don’t get that kind of exposure at McDonalds!

Disapproving llama does not like your use of 90's web design

When it comes to making websites look good, there are a plethora of ways to set a design apart from the rest, without needing to delve into the pit of cliché doom.

A strong design does not need gimmicks, just as it does not need uninspired generic content. The tricky part is finding the balance!

Here are some common culprits, steer clear of these or you might end giving people a migrane – or worse – they might steer clear of your site completely…

Full Text Justification

A website is not a newspaper. Even websites owned by newspapers don’t justify their text. Print layout is very different to web layout, and besides the accessibility issues, it just looks messy:

The 'River' in all it's glory. Yellow = bad.

When you justify text on a website, you can end up with large gaps inbetween text, called “rivers”. You see, when a newspaper with justified text is edited, the designer can determine exactly how the text will look as the material will be printed. This means they can remove any “rivers” and compensate for any ugly spacing. However, there is simply no control over this on the internet. People use different browsers, different screen sizes, and can change the font size for accessibility – so fixing a gap for one machine might mean that it looks terrible on another screen. Don’t justify text on the internet.

Splash/Intro Pages

Websites don’t need waiting lobbies! I’m busy, you’re busy – we don’t have time to mess around when it comes to accessing the content you’re after. So why would we want to add an extra hurdle for the visitors of your website to jump over before they can get to the goods?

Why am I not entered already?

The 3 click rule states that users should be able to access any part of your site in less than 3 clicks (the clue is in the name) – so why tighten the vice on an already inflexible usability golden rule?
Instead, make sure that your website homepage contains teasers of your most valuable information, acting as a hub to all of your marvellous content.

Flash

Don’t get me wrong, I’m not dissing Flash. Nothing pains me more than to see a product get shunned, when I’ve personally put many, many hours into mastering it. Flash is a very controversial subject in the web design community, and unfortunately, for a good reason.
The mere fact alone that Apple refuses to support Flash on it’s iPhone and iPad devices is reason enough to banish it from your site completely. Your site needs to be accessible to everyone, and in case you hadn’t noticed, those iThingymajigs are rather popular. Build a website in Flash and you suddenly close it off to countless hipsters.

Flash doesn't work on the iPhone, the iPad, nor the iBike

Also, text in Flash websites can’t easily be picked up by search engines, so not only will nobody using an iPhone be able to view your site, they won’t be able to find it, to discover that it doesn’t work.
It’s also bad for accessibility, as it does not support use of the browser’s back button, or resizing of text for users with sight impairment.
Flash is not without it’s uses though – it’s a great tool for presentations, animations, games, advertisements and application development.

Further reading on this controversial subject:

Is Flash dead yet?
5 reasons NOT to use Flash on a website
What is Flash, when and why should you use it?

Scrolling Marquees

Oh snap, is it 1999? I’d better start making plans for New Years, I hear the new millennium is going to be off the hook! Wait – It’s just that your website LOOKS like it hasn’t been updated since 1999 because you’ve got a bar of text flying across the screen. I shouldn’t need to explain why this is bad for accessibility, but it’s like clay pigeon shooting with your eyes. Text marquees are the cheekiest text of all – always trying to get away while you’re trying to read it.

NEE NOOR NEE NOOR – Catch me if you can! This text looks unprofessional and belongs back in the nineties with Saved By The Bell – NEE NOOR NEE NOOR

Alternatively, use content sliders, and let the text stay still for a second so people can catch a glance.

“Helpful” Video Assistants

Do you remember the annoying paperclip from Microsoft Word? Well he evolved, became self-aware, and (like the Cylon) developed more advanced paperclips, disguised as human beings.
At least that’s what must have happened, I can’t think why any rationally thinking company would want this on their website:

This classic gimmick makes me wish my mouse cursor could slice.

They are rarely helpful, and always annoying. Especially as the vast majority start speaking immediately and usually it’s salesy gibberish with no real value.
A well thought out FAQ page or help section is much more effective, and much less likely to make someone rush for the back button. The only sites that should autoplay video/sound are YouTube and memes. It’s just bad user experience all around.

“Click Here”

Who would have guessed! Buttons are supposed to be clicked?

It’s the easy way out, and very, very common across the Internet. But a link saying “click here” is not only unimaginative, but also bad for SEO and users with visual impairment using screen readers. Get your creative juices going, and think of a better way to get your users to that content. The link should be on the name of the product or service, not on the verb of how to get there.
Instead of “Click Here” – use “View the full explanation” or “See some of our latest inventions” and make those the link. Your users will have a much better experience all around.

Are you guilty of any of these website faux pas?
Are there any more you can add to the list?

Aprirose

With this site we made a super cool script where you click on the person’s face and the box expands to show more information – check it out:

Fish Financial

For each member of the team, there is a unique testimonial which you get by clicking on the Read Testimonial link – genius!

Long Way Round

We kept with the textured postcard look and feel on this page that you can see on the whole site, and included nifty little “more” links.

OLIM

The profile pictures taken by their photographer were a unique landscape shape which makes this one a little bit different. And we have the little “More” link as well!

Petrus Financial

A cool little rollover script allows you to meet all the team by rolling over their heads!

Prescience

More outdoorsy shots of the team here.

Professional Financial Centres

The team here each have their little note card which we think is a nice touch!

CWB IFAs

Close up shots for all and another rollover script for support staff.

Association of Women Art Dealers

This allows an at a glance look at the current members of AWAD

Along with being a lovely lady to work with, she also gave us a fantastic testimonial here at Top Left Design to share:

“Top Left Design exceeded my expectations ten-fold. I wanted a new website because mine was old, outdated and didn’t represent the style of weddings or clients that I typically represent. Plus, I had done the website myself so the fonts, designs and SEO was not up to par. Top Left Design finished my website in record time and within three weeks I had two new bookings and four enquiries- a huge increase in enquiries from my last website! Top Left Design have kept my brand consistent by designing my twitter page, and they sat me down for an afternoon to teach me the etiquette of blogging! I highly recommend them for any website or graphic design project. Thank you Tamlyn, Keren, Tina and team.”

The site has a gallery displaying some beautiful images from weddings that Erika has organised, as well as a blog she regularly posts informative, wedding related articles on, keeping the Flutterfly Events website regularly updated.