Web design is no longer a single discipline, but actually draws on a combination of design and digital development skills, including:
- Graphic design and corporate identity
- Branding
- Information design and information architecture
- Programming and coding (‘front end’ and ‘back end’ development)
- User experience design
- Interaction design
- Video and animation design
All but the simplest website design projects now use some combination of these skills. A separate graphic designer and code developer would typically be the minimum needed on a design and development team, but user experience designers and information architects are increasingly important in web and digital design.
The disciplines listed above come together to plan and build the elements of a website in a way that meets the client’s vision, strategy and objectives. A site is designed and built around a number of core components and considerations, including:
- Words and language – copy (‘1D’ elements)
- Graphics, images, icons – visual identity (2D elements)
- Rich media – sound, video, animation (4D or time-based elements)
- Information architecture
- Navigation
- Interaction mechanics
- Accessibility
- Overall usability / user experience
The text, or copy, is a very important component in any piece of written communication, but one which is often overlooked in the web design process. Consideration of the tone, length and structure of the words and language used throughout the site would ideally occur during the design process in conjunction with a professional copywriter. For more information about copywriting for design see the ‘Careers in design ... the designer and beyond’ section on this site.
Accessibility
Ensuring a website is accessible to people of all abilities and disabilities may be an important consideration in the design process and is considered to be general good design practice. Guidelines for website accessibility have been developed by the Worldwide Web Consortium (W3C) and a guide can be found on the Directgov site.
There are a number of ways that sites can be made more accessible. For example, sites built from semantically meaningful HTML and featuring text-based descriptions of images can be read by blind or partially sighted people using text-to-speech or text-to-Braille software.
One of the key culprits in poorly accessible design is the use of Flash to create web pages. Although Flash can deliver visually beautiful sites, and has been very widely used in recent years, it is not based on semantically meaningful text which means that blind and partially sighted people may be essentially locked out from Flash-based sites.
Achieving full accessibility will probably restrict the range of design approaches which may be employed, so ultimately it is up to clients to decide where their priorities lie. On the whole, public sector websites tend to adhere to accessibility guidelines more than private websites.
Design for mobile devices
‘User behaviour continually changes how we design interactive and digital systems,’ says Ben Tomlinson, a creative director at digital consultancy Poke. ‘Today it’s websites, tomorrow it’s mobiles – we’ve moved very quickly from desktop to mobile. And digital and interaction design have so many different job roles to fulfil: user experience, information architecture, graphic design, interaction techniques and so on.’
Because more and more people now access the internet while on the move, all website design has to take into account mobile devices as well as desktop or laptop computers. There is a wide range of mobile devices – from the Apple iPad and iPhone to an Android powered mobile phone to a Blackberry – all with different operating systems, differently sized screens, varying processing powers and different basic user interfaces. Some mobile devices support certain browser plug-in software or text rendering systems, while others may not (the same is true of web browsers). Designers must consider all these possibilities and either develop two versions of a site – one for computers and one for mobile devices – or one site that is as mobile friendly as possible.
As an example, The Guardian site looks like this on a desktop monitor screen.
But the site has a completely different design for mobile device screens.
As mobile internet access becomes more embedded in our behaviour new design responses to this challenge will emerge. The website of design group Hicksdesign, for example, cleverly senses the dimensions of the screen or browser window that is displaying the site and adjusts the graphic layout and content accordingly, ‘on-the-fly’. Here’s the site at 1680x1050 pixels.
At this size and screen ratio the content is distributed amongst one wide column and four narrow columns. But here is the same site with the browser window re-sized to roughly the proportions of an iPhone screen.
Notice how the menu options, images and number of columns have automatically adjusted their size and arrangement so that they fit pleasingly and legibly on the smaller, narrower screen. Unlike The Guardian example, which is essentially two different sites, the Hicksdesign site adjusts accordingly for all intermediate screen sizes and dimensions as it goes. This ‘stretchy screen’ is a design and coding implementation that caters for all screen types without compromising visual clarity or available content.
Beyond the website... the rise of apps
As mobile devices grow in popularity and processing power, they are starting to perform many tasks previously reserved for desktop and laptop computers. Email, mapping, chat rooms, photo sharing, reference tools and so on are just a few of the functions that people now regularly access on their mobile phones or PDA devices.
As a result, digital design for mobile applications is a growing area. This is fuelled further by the open access to retailing platforms such as Apple’s App Store and the Android Marketplace, which gives anyone with the skills to develop mobile apps a route to sell their product in a global market.
Although app design differs significantly from website design, the boundaries are blurring, just as they are between television and the internet and newspapers and online news.
Increasingly, digital and interaction designers are charged with reaching all of these platforms, as well as understanding and predicting how user behaviour is likely to change with further technological developments and device convergence.
For more detailed discussion about interaction design, see the Interaction Design section on this website.