We’ve all been to them, those websites where you land on it and within seconds wish you hadn’t. They are the sites we never want to design, the sites that if we had anything to do with it we would sacrifice them to the gods for their own good.
I’m going to look at the good, the bad and the downright ugly of web design, the various aspects you should keep in mind, from the earliest storyboarding stages through to hi-fi screen development.
Web design, just like any other type of design is about fashion as much as anything else. Yes, it could be argued that there are different types of constraints compared to clothing fashion for example, but even clothing has constraints like social expectations. Before we start on the elements of good design, let’s have a wander through the annals of time, using the WayBack Machine to look at web design through the ages.
[m2leep]
The mid 90’s: Apple Website 1996
What’s interesting about this version of Apple’s site is the need to choose your geographic area. This was commonly used in websites of this era to tailor the message. It shows a highly structured grid layout. Of course bandwidth restrictions meant that images had to be kept to a minimum.
2000: Apple’s Website from 2000
Big change in the layout of the website 4 years on. Tabbed structure of menu items and the layout has the content centre stage on the screen (Apple were an early adopter of this design trend of placing the content in the middle of the page)
2015: Apple bang up to Date
Apple has a fluid graphic heavy site, using high res images and video throughout the site. General menu buttons take you to a targeted page with clickable sub-menu items. Scrolling on some pages
What is Good Web Design About?
If you break it down into the really basic reason you create a website, then you have your first clue about what good web design is about. We create websites for the simple reason of communication with human beings (I’m not including in this web services, or specialist websites for cats, of course). This basic reason must be at the forefront of our minds when designing a website. Fashion and trends will play a part in that design, we all tend to herd, but great innovation comes out of breaking away from that herd, whilst retaining the core reason of web design – communication of a message.
With this in mind, we can look at some of the elements of design that done well will make the difference between a site done badly and one done well.
Too Much Info!
There’s a general rule in desktop publishing, which encourages the use of ‘white space’ to allow the eye to ‘breath’. By white space we simply mean the absence of text and images. By having white space, you actually emphasize any content on the page. If you cram content into a page it has the opposite effect of communicating that content because it confuses the reader and makes them have screen fatigue. Modern web design encourages this – see Apple’s current web design as a great example of the use of white space – the text and images are given focus and emphasis by the lack of clutter around them.
Layout
Layout is central to handling your white space, whilst ensuring the content is accessible and easy to read. Layout is part science and part art. You need to be able to stand back from your design and look at it with an artist’s eye and ‘feel’ that it looks right, as much as know from following a formula. Experimenting with layout at the early mood board design phase will not only allow you to bring stakeholders in agreement, saving time and resources later on but also give you an opportunity to make your mistakes early – it’s also a lot easier to move elements around on a piece of paper than once you’ve started coding, or even creating lo-fi mock-ups.
Choosing a good layout comes down to a number of things:
- What type of content does your site need to display (is it heavy on images, or text, or a mix of both – what are the proportional sizes of images and content)
- Remembering that it is highly likely your readership will come into the site from varying browser sizes and screen resolutions, the latest statistics from Stat Counter show that a laptop screen with resolution of 1366×768 is the most popular
- Preferred relative position on the screen – this is definitely down to taste and trends, but can have impact on responsiveness
- If you’ll use static or dynamic design
Laying out your website can be done using a grid layout or in a more organic way. The Grid layout method is the most prevalent and long standing. Whilst organic is more of an ‘outside the box’ creative approach. This doesn’t mean to say you shouldn’t experiment with innovation around design, after all, even an organic approach can show elements of organic layout within it. Take inspiration from the art world; the masters of layout, the poster artists of the 20s and 30s for example and check out the Russian artist Rodchenko from the same era, you can see how they used a basic grid based design with some organic aspects, for full effect.
A current design trend that has become popular is the Pinterest design approach using a web grid structure. This approach is heavy on the image, so perfect for ecommerce shops. There are a number of JQuery and JavaScript based libraries that can help you build this type of layout.
Flow
Your site flow will be guided by your layout choices. I like the current trend that uses scrolling to build up a story about a product or service. Como.com is a good example. Sites like these make it easy for a reader to be guided through your most important sound bites about your product or service. You can build in call to action items within the structure of the page, making it interactive and helping to build a sticky experience. Scrolling pages allows you present videos and graphics in a way that makes them stand out but not dominate the space, something decent bandwidth in at least the developed world, has allowed us to capitalize on in web design.
Como.com’s scrolling web pages
Menus and use of them
This ties on with site navigation, which I’ve not covered here, but I want to concentrate on the type of menu, rather than the underlying navigational structure they represent. Menu type is one of those contentious areas that really get people frothing at the mouth. We all get irritated to the point of screaming by hover based, drop down menu items that disappear as soon as you go to click on them. There was a particularly bad era (about 5 -10 years ago) in web design, where this seemed to be almost a design principle of many sites, it made them almost unusable. Hover menus are a particular dislike of mine, so I am being biased in writing this, you may love them. One aspect of hover menus that I really dislike is the aforementioned ‘hover tunnel’ where you are forced down a menu route and if you waver at all from that path, even by a tiny mouse movement, the whole thing disappears and you have to start again – as I write this, I am silently screaming in my head. I have left a number of websites purely because of this issue.
As an antidote to hover menus and if you can’t use a main menu heading alone, then offer links within a page as shown below, your user clicks the general menu item, then the sub menu item and these can’t just disappear like hover menus. The user will be placed in the right spot and you can focus messages around that part of your site to encourage interaction.
Example of a clickable menu that takes you to sub-menu items
Compared to Apple’s general menu item with page based sub-menus
Error messages
Error messages are the sad, lonely and oft forgotten parts of UI design. They are often left till last; those unhappy paths that you will get to eventually, after you’ve done the nice stuff. But error messages are a very important part of web design, because a bad one will lose you a customer, but a good one will create forgiveness, making an unhappy path, not so bad after all. Error messages are finally coming out of the staid old techie back room and being updated and made more human. The Etsy (an online shopping marketplace) ‘Uh Oh!’ error message, the Elance (online freelancer site) extended coffee break message, all give a user information about what has happened, with a little bit of humanity and humor and relevance to that site’s audience.
Colour
Don’t make colour an afterthought. Great sites often have one thing in common, they use colour wisely. Colour choice is a whole area in it’s won right in terms of web design, which I don’t have the word count to talk though, however suffice to say that you should try to spend some time thinking about this. You may already have a remit to work with your clients company house colours however look at which colours work well together and use these to empathize areas of our site, or to colour code sections. A great online tool for helping with colour aspects of design is Paletton which allows you to check out various colour combinations to see how they work together.
Cross browser support/Cross Device Support
These items can seriously affect your design decisions. Cross browser support can sometimes mean supporting browsers such as IE7; I mention Internet Explorer, as this is the worst offender in terms of how it handles html compared to other browsers like Chrome and Firefox. If you find that you have a contract which stipulates support for IE8 or below, all you can do is to make sure that the important information and content on the site is accessible on those browsers. Your beautiful web design may well go out of the window if a user accesses it using an earlier version of IE, but if they can access the information, then at least you can get your message across, albeit in a less than ideal way. The term used to describe this approach to web design is ‘progressive enhancement’ as it allows for browser upgrades, whilst still giving some support to older browsers. There is a number of add-ins available that can help you to support older browsers, if you are using HTML5, you can use a polyfill which will (usually) use JavaScript to retrofit older browsers with some of the features of HTML 5 / CSS 3. They fill in missing pieces of functionality, for example HTML5 ‘local storage’ and an example being Modernizr. However… just for the record, it doesn’t always work perfectly.
Closing Words
Good UI design takes many things into account. Ultimately it should be a mix of a creative process with some understanding and acknowledgement of certain technical constraints. However, technical constraints should not dictate how you work, you should always work towards a site that offers content that is easy to navigate, flows well, read easily and gets your message across, whilst at the same time looks gorgeous.
