The 8 Disciplines of Successful Web Design

‘The words on their own are perfectly respectable words, and understood in their more general sense, but when combined they make an unholy matrimony bringing disrepute to design, and a whole industry of cheap, low quality, badly executed sites to the web.Web Design is design without the user, it is the web without the technology. Never has the word design been so misrepresented than by those that call themselves web designers.’  A.Designer

And thus spoke a designer I met at a recent networking event I attended. I found myself wondering why Web Design, as a branch of design, is so maligned, misused and so misunderstood. Why is this? Why has the web not been capable of implementing a definitive set of heuristics across the board? Why is it that from SMEs to Fortune 500 companies there is still such a ignorance of how to successfully translate offline branding and experiences to the web?

The answer is this: in our opinion Web Design as a discipline has been too narrowly defined and overly simplified. In fact, ‘real’ Web Designers are very rare because one person cannot hold all the necessary knowledge and skills. ‘Real’ Web Design is not one discipline, it is in fact a unique and complex multi-discipline incorporating no less that 8 complex and distinct disciplines.

Web Design is often described as a purely Graphic Design discipline with some coding tacked on in the background, but this is not correct because the web is an interactive medium. Web Design is sometimes described as a purely programming discipline with graphics tacked on the front, but this is not correct because the web is a visual medium. Web Design is much much more than these two combined for it must also include User Experience, Usability, Behavioural Economics, Branding, Marketing, and Digital Strategy. Web Design, in some degree, incorporates all of these human and technical disciplines to create a product that must attempt to bridge the gaping hole between human beings and technology. Successful Web Design bridges this gap in the most intuitive, accessible, appropriate and beautiful way.

Below we detail the 8 key disciplines that in our opinion make up successful Web Design.

The 8 Disciplines of Successful Web Design

1. Graphic Design

What is Graphic Design in relation the web? It is in many instances just print on the web, a visual communication to be taken in. However, in relation to websites and digital interfaces it must be a lot more. It must still be visually arresting and visually in sync with its viewers, but it must also be responsive to the users of the website, it must fulfill their wishes and desires, forgive their errors and lead them to a predetermined action. It is of course obvious that Graphic Design can not do all this on its own – it needs programming (code) underneath it to create interactive elements, it needs usability information to make sure it is understood, it needs empathy and branding information to know how the users need to feel when interacting with it, and it needs marketing and strategy to know who the users are, where they can be found and where they should be taken.

In short, offline Graphic Design is a one way communication – from Graphic Designer to viewer. That is no longer true online, and a Graphic Designer producing work for the web must incorporate and cooperate with the other disciplines in order to produce work that will successfully bridge the gap.

2.Software Engineering

Software Engineering, otherwise known as programming or coding, is what the web is built on. It is both a craft, an art form and an engineering discipline. Where as Graphic Design on the web can determine how we feel and experience the online environment, programming determines how we interact and what we produce through our actions. However, programming on its own will not elicit the necessary feelings, experiences and therefore actions interfaces try to enact in us. Programmers on their own cannot bridge the gap between the machine and the person. Programming is in some respects an accomplice of the machine, and needs the disciplines of UX, Graphic Design and Usability to humanize it and make users feel understood and empathized with.

Software Engineering is determinedly action orientated – do this, click here, fill this in. Human beings like narrative in their experiences in order to give them meaning and therefore making sure websites have a narrative is key.

3.UX

User Experience (UX) is the creation of controlled and understood experiences and feelings through the interaction of users and technical systems. The key to UX is in its attempt to create consistent brand experiences across all channels. UX helps programmers and graphic designers understand customer’s experiences of a websites and how to make sure these are positive and in line with expectations.

Due to the low barriers to entry in markets on the web, one of the only differentiating factors when price and quality are equal is the online experience. This experience is translated by customers into a feeling which then creates either positive or negative action.  UX makes sure that the feeling is true and right by understanding and empathizing with the customer, and therefore creates the right conditions for the positive action.

4.Usability

Usability can be defined as the simplicity, clarity and intuitiveness of a tool’s design. Web Usability is the ultimate test of whether a user can use a website in order to achieve their goals in an efficient and elegant way. It is a key measure of success in the digital medium and large component of a user’s experience of the interaction.

5.Behavioural Economics

Behavioural Economics is the understanding of the factors that motivate users to make certain decisions. On the web it is used to understand how the positioning, look and wording of elements on pages can affect what decisions users make. There are emerging heuristics from this discipline backed up by solid research which should not be ignored when creating digital products. For example, through research it is now known that different colours cause different emotional responses in users, and that different typefaces can change the perception of a user to a product or service and therefore change how they act.

6.Branding

The identity and personality of a company, product or service is the key for users to unlock how they feel about the company, product or service. It is generally one of the only ways users can differentiate and choose quickly between a myriad of products and services offering the same thing.

On the web continuity of branding from offline to online is crucial. Any disjunct between the two can cause confusion and ultimately lost revenue and brand value. The ‘digitalization’ of brands online is the one of the most important aspects of web design because it is crucial that the experience is similar, true and simple enough to be understood. How this ‘digitalization’ happens, and how the brand is translated into a digital experience which  mimics and enhances the offline one is the most challenging and often ignored aspects of digital design. A high percentage of Fortune 500 and FTSE 100 have failed to successfully do this.

7.Marketing

Without users navigating to a site, there is no point to a site. And without the necessary marketing, no users will ever find the site. Offline marketing can be used to push customers online to the site, and online marketing can be used to pull customers in. Both Programming and Graphic Design must keep a careful eye on Google’s algorithm in order to make sure the platform for successful Search Engine Marketing is set. If this is not done the site will not rank, and no customers will find it when searching. The adage that if you build it they will come is dead. Whether you build it or not they will not come if you do not get ranked in Google. Ignore SEM when programming and designing and the customer will miss out of the biggest sales channel of them all.

8.Digital Strategy

The first question to ask before building a website for a customer is – why? Without a proper digital strategy, like a house without architectural drawings, the design and programming will have no form, no aim and ultimately an unsuccessful end product. Digital Strategy is the process of identifying the digital goals, aims and objectives the company has for the website.  To maximise the benefits of a foray into digital for a business these must be known and discussed until the needs of the customer, the market, the technology, the competition, the financial aims, benchmark stats and the budgetary constraints are scoped, understood, documented and incorporated in to the brief.

Create The Bridge

Web design has many levels – from Mr.Site off-the-shelf website creating tools for £39.99, to husband and wife companies offering web design and a year’s hosting for £499, to programmers offering thin technology driven websites for £999 including the ultimate flash intro page, to cookie cutter web design agencies that offer template websites for £3000, to Graphic Design lead collectives creating beautiful print-like brochure sites for £5000, to Digital Agencies delivering £15,000 ecommerce systems designed around homegrown CMS’s,  all the way up to well known creative agencies charging over £50,000 for the kudos of using them while behind the scenes they pull in a pot pouri of digital professionals to enable them to understand and deliver it, and finally to large multinational advertising agencies charging £100,000k plus and using every trick in the book to justify their fees.

At all levels what seems to be missing is the empathy for the human being using the website. Of course, at the lower levels of the scale it is impossible to incorporate all the 8 disciplines described above, but what should always be kept in mind when designing a website is the key to all interactive interfaces – the human/machine bridge.

A website is the bridge between the user and the web (maybe to be superseded by the app in the future?), between complexity and simplicity, between problems and solutions, between unsatisfaction and satisfaction, between incomprehension and comprehension and ultimately between us and them, and you and me. Do it right and you build something new and original, and create some joy and change. Do it wrong and you block and frustrate.

If a picture is worth a thousand words, then a good digital interaction, how ever small,  is worth a whole lot more.