Posts tagged with Web Design

Web design eye-candy: 24 ultra-colourful user interfaces

Much has been written about the use of colour in web design. Back in the day there were stark warnings. Pick as few as possible, seemed to be the general advice, and be sensible about your choices.

I covered the main points when I wrote about colour and web design five years ago. A lot of that advice still stands up but there has been a definite shift, and nowadays it seems that more and more designers are embracing colour like never before. The polychromatic web is upon us!

The combination of flat design and blocks of saturated colour is certainly a winning combination from where I’m sitting. It's a trend that is perhaps underpinned by the growing number of devices with retina screens in circulation.

A strong, clever use of colour can be great for branded web experiences, web apps of various flavours, and agency websites. That said, I’m not fully convinced that this design trend is ideal for retailers with hundreds or thousands of product pictures, as too much colour can be overpowering, but no doubt there are some good examples out in the wild.

So then, here are 24 websites and apps that are not remotely afraid of colour. See what you make of them, and be sure to share your views in the comments area below!


22 more reasons why I’ll leave your website in 10 seconds

A few years ago I compiled a list of things that I find abhorrent when using websites. Things that I cannot tolerate for more than a few seconds, and which invariably cause me to press the back button.

What am I referring to? Autosound, for starters. Pagination. Pop-ups. Slow loading speeds. And a whole bunch of other crimes against the user experience. You'll still encounter these things most days, unfortunately.  

Now, let's get this out of the way: our own website leaves a lot to be desired, from a user experience perspective. I reckon that at some point or other we have been guilty of about half of the points on my original list. It's very much an area that we're working hard on to improve. In order to do so it's important to know what not to do, and to understand what users hate.

With that in mind, and given that web usage habits have evolved in the past three years, I thought I'd aggregate a few more pet hates, so we can steer ourselves away from bounce rate hell. 

By all means add your own reasons for bailing out early in the comments section below. Ok, here goes...


14 brands that increased conversion rates via responsive design

Every month more than 100,000 people visit Econsultancy using a mobile device, but we're yet to launch a responsive site. This isn’t because we don’t want to make the user experience better for mobile and tablet users. It’s simply that we’ve had to prioritise other things, and tech resources are limited.

It’s pretty straightforward to make a business case for mobile-friendly design if you have a transactional but non-responsive website: simply look at your conversion rates by device. They’ll probably be fairly woeful for tablets, and even worse for mobiles (certainly if ours are anything to go by). Add a dollop of simple maths and you’ll have some idea of the opportunity cost of not making the customer experience better for mobile and tablet users. 

I first made the case for mobile about three years ago, when about 5% of people used a smartphone to access our website. That wasn’t enough to make it a high priority, but by the end of this year around 20% of visitors will be browsing via a mobile device. That changes things considerably, and more so as our visitor numbers continue to grow.

In our case I reckon we’re missing out on six figures worth of annual revenue, and as such we’re busy working away behind the scenes on a number of initiatives, including a fully responsive website.

I have yet to hear about a decline in conversion rates following the roll-out of a responsive site. In fact, I only ever hear amazing things.

So, if you're making a business case and need some examples then here are a bunch of companies that have benefited from significant uplift in the key metrics following the implementation of responsive design. 

Flat web design

Flat web design and skeuomorphism: the pros and cons

Flat web design and skeuomorphism are two design approaches that could not be more different. In terms of opposites we’re talking a level equal to Take That vs. Slipknot, Barcelona FC vs. Accrington Stanley, The Godfather vs. Legally Blonde, basically, they are not similar!

Microsoft and Apple have been at the centre of this design battle and fans of both companies have been equally passionate in their arguments for the pros of their particular approach for more than a year.

However, in terms of the future, short term at least, one 'team' seems to have been victorious. But is this a defeat, or is the supposed defeated team actually happy to lose the battle knowing that they shall win the war? I’m talking profits! 

This blog post attempts to answer that question while looking at what exactly flat web design and skeuomorphism are and the pros and cons of both.

It also discusses the recent shake up at the top of Apple and whether the actor Chevy Chase prefers flat web design or skeuomorphism (yep, you read that right!). 


17 delightful micro UX effects and transitions for your website

After a bit of a break I'm working on a new side project. It is in a very competitive space and I have decided that the user experience needs to be the core USP, for it to attract the kind of crowd - and content - required to establish a presence in the market.

This has made me think once again about what makes for a good user experience. Broadly speaking, it is pretty much all about reducing friction, to help people get from A to B in the most straightforward way possible. 

But is 'good' what we should all be aiming for? Why not aim a bit higher?

So what makes a great user experience? I'd say it was all of the above - a friction-free journey - as well as a smattering of pleasant surprises along the way; surprises that delight the user. They say good design is invisible, but I think that great design can leave quite an impression on people.

I'm constantly amazed by my own reaction to the little details in life. The smallest of things can have a disproportionate influence on how I perceive things, both positively and negatively. I'm a stickler for detail, and have been looking for examples of micro design, as a source of inspiration for my own project. 

To this end, two sites in particular have been particularly useful: Codepen, and CSSDeck. Many of these 17 examples can be found over there, and some are very lean indeed, using just CSS to achieve the desired effects. 

Ok, let's check them out...


Picture this: web design is no longer 95% typography

A decade and a half ago Jakob Nielsen announced to the world that people don’t actually read websites in a linear way. Instead, they prefer to skim read, scanning the page to find what they’re looking for. 

As such, content creators were advised to format articles in a way that encourages readers to avoid reaching for the back button. This meant using bullet points, meaningful sub-headers, and highlighting key phrases / words in bold. 

Roll things forward a few years, and Oliver Reichenstein published an article that contains one of my favourite quotes: “Web Design is 95% Typography.”

In his article he says: “A great web designer knows how to work with text not just as content, he treats text as a user interface.” This still resonates so strongly with me, as a creator of content, as somebody who is deeply interested in web design, and as a heavy web user. 

But does the 95% quote still stand up? I fear that recent design trends have stomped all over text and typography, and that pictures have deposed words.


10 hotel websites that autoplay sound to delight visitors

I read a brilliant article the other day... one of the very funniest things I have read in ages. It was all about how companies in the hospitality sector should play sound to make visitors feel “secure”. Sound, it says, “can help your website achieve major impact”. 

Here’s another quote from the article in question:

Website audio can make your website stand out from your competition’s site while reinforcing the marketing and customer service strategies you’re already using.

After pulling myself together I decided to reconsider my views on autosound, which I have up until now considered to be one of the worst user experience mistakes you can make. I set about to find some examples that would make me - and you - see the light (and, ahem, hear the sound).

So then, here are 10 automatic audio experiences on hotel websites that will presumably make you reach for your bank card to book a room. Make sure you have your sound turned up, especially if you’re in the office. 


18 wireframing tools and resources for responsive design

You’re probably growing tired of the phrase ‘responsive design’, but it isn’t one of those overly-hyped buzz phrases that you can ignore, and it’s not going to go away anytime soon.

The reality is that many sites – ours included – still need to figure out how to deliver a consistent user experience that adapts to devices with different screen sizes.

So, I thought I’d compile a few resources, and some lovely tools, to help you (and me) to go down the responsive design route. 


The anatomy of a perfect restaurant website

Top restaurants are all about ‘the experience’. It’s not just the amazing food, or the wonderful service, or the charming ambience, or the table with a view. As such, it is somewhat ironic that restaurant websites are serial offenders when it comes to bastardising the user experience. 

There can be no excuses for it any longer: it is 2013, not 2003. The age of animated Flash websites is long gone, yet many top restaurants persist with awfully wacky loading sequences and the kind of ‘innovative’ navigation that requires superhuman levels of patience, and a degree in particle physics to work out how to use it.

I thought I’d cobble together a handy A-Z checklist of dos and don’ts, for anybody interested in revamping or building a new website for a restaurant, or for restaurateurs that need to know what to ask for.


Q&A: Patrick Burgoyne of Creative Review on what makes a great designer

Good design is the cornerstone of web interaction and most of today's designers also understand a great deal when  it comes to digital marketing.

On the heels of Econsultancy and Creative Review's recent training course announcement, we caught up with CR's Editor Patrick Burgoyne on what makes a great designer. 


Interactive design? Do it with murder in mind

There are a lot of websites out there where you can see the 80/20 rule at work; when a website has a good look but just a small proportion of the site’s features and content is doing all the hard work. The rest is maybe distracting, irrelevant or even getting in the way of the customer journey.

Why does this happen? We all know that great stuff just works and consequently great design often goes by unnoticed - simplicity wins hands-down over complexity.

Twitter shows us we can all say more with less, and pictures engage us better than words. Look how image-based Facebook quickly displaced text-based sites, such as Friends Reunited. 

I suspect that cumbersome or over-designed websites are often the result of the designer loving what they do… maybe just a little bit too much.


Dear silly web: 20 things to banish in 2013

Two years ago I wrote about the 25 things that will make me leave a website in less than 10 seconds. I covered pop-ups, autosound, and a bunch of other user experience face palms. Sadly, most of these things are still used by perpetrators of various shapes and sizes.

In addition, websites can baffle and perplex users in equal measure. I have compiled a list of 20 things that need to be cleaved in two by digital professionals, in order to make the web a better place for all. 

No doubt I'll have missed some of your pet hates, so do leave a comment below.