Nico Macdonald | Spy   Communication, facilitation, research and consultancy around design and technology


     
 
 
 
Cousins but not siblings: the relationship of Web and graphic design
24 February 2005
Talk at University of Reading Department of Typography

Spy
102 Seddon House
Barbican, London
EC2Y 8BX
United Kingdom
[was 103 Seddon House]

 Online map

 

Who am I?

Writer

On interactive media since mid-90s
Author of What is Web Design? (RotoVision, 2003). Image: book cover
And chapter in Communicate: Independent British Graphic Design since the Sixties (Laurence King Publishing/Yale University Press, 2004). Image: book cover

Facilitator

1996: Designing the Internet, with Central Saint Martins College of Art & Design (Eric Kindel facilitating)
2000: Design For Usability, with Jakob Nielsen
2000-present: AIGA Experience Design London (please sign-up to the announcement list)
Also bringing discussions of editorial design and mass communication into world of HCI, for instance CHI2003 Development Consortium on Mass Communication.

Consultant

In design strategy and management
Worked with many publishers, including the Guardian
Working with small companies to help with online communication and marketing

Roots of British Web Design not in graphic design

The backgrounds of early designers ranged from the rave or club scene to the arts and television production, and their skills ranged from programming to architecture and human-computer interaction.

These first movers came to their new discipline with a less restricted view of its boundaries or possibilities

Though graphic design did have an influence it was indirect. See Communicate chapter.

Graphic design’s influence on Web design

We need to understand the influence of graphic design at three levels:

Aesthetics and typography

For instance:

  • Commitment to addressing the “the tiny details that are so easily overlooked” Nykris co-founder Nikki Barton, inspired by Cartlidge Levene
  • ‘Municipal design’ Matt Jones

Conceptual ways of thinking

  • Seeing the big picture
  • Working across media (‘media neutrality’ as the advertising folks have it)
  • Complex problem-solving
  • Use of grids and other devices. Image: Society of Typographic Designers (STD) site by Poke [may not have launched] [06journal.tif]
  • Information design, eg: Nigel Holmes, Richard Saul Wurman, Edward Tufte – though the latter two are not British. Image: Nigel Holmes [racunalo_tx.jpg]
  • Humour. Image: Nykris mobile phone-based toilet finder [WAP image.jpg]
  • Story-telling

Processes and methods

  • Sketching and iteration, multiple solutions. Quote: We would typically present clients with two to three design pathways – “way out, sober, and middle-of the-road” Frances O’Reilly of Recollective
  • Methods. Quote: “I came in when there was no process”, says Bill Galloway of The Butterfly Effect. “We learned process, and drew some of this from the technical side.”
  • Working with clients

Graphic design’s problems with Web design

Lack of critical understanding

In designland UK we still don’t have widespread critical and practical engagement with design for interactive and networked media”

In many ways this lack of engagement and enthusiasm is surprising. Britain is home to some of the best designers in the world, and excels in the design of advertising and editorial, corporate identity and brands, products and packaging, fashion and interiors.

Just another design discipline

Design for interactive media is just another design discipline. This is a key theme of What is Web Design?.

The Designing the Internet conference I co-programmed reflected this, with its subtitle “when digital design demands analogue thinking”

Imposing a caricature of graphic design on the Web

Many people bring a caricature of graphic design thinking to Web design. This is seen in:

  • Desire for fixity in Web interfaces
  • An over-emphasis on the use of imagery and traditional typography
  • Imposition of the page metaphor onto the screen
  • A perception of the Web as a static or linear medium. Image: Brandchannel.com Books [BrandchannelBooks.jpg] uses screen grab of text, which is slow to load, inflexible, can’t be searched, and doesn’t work on small displays
  • Failure to be ‘true to materials’. Quote: Florian Schmitt, German-born co-founder of Hi-ReS!, believes that British designers “didn’t consider the Web to be as precious as print”, though, he adds, “it is getting there”.[i]
  • Branding: Although branding is understood by some, such as Wolff Olins, as being more than visual – delivering experiences rather than things, extending through the company’s identity and its services – this has rarely been translated into interactive media.[ii]

What is missing?

Significance of interaction

Understanding that interaction design needs to convey what a system can do, what state it is in, how to interact with it, and the outcome of the interaction (including how to correct errors). Image: nice interaction in the Sacramento Bee newspaper online [SacbeeFloatingTools.jpg]

Separation of content and presentation

It is important to understand that content may be presented on different platforms, for instance using Cascading Style Sheets (CSS) to allow it to be formatted in different ways. Image: Usability News on a computer Web browser, ‘Pocket’ version for phone- and PDA-based browsers, and RSS version for ‘news readers’ (in this instance shown on a PDA). [UN_AllTheLatestRSSPalm.jpg/UN_AllTheLatest.jpg/UN_AllTheLatestPalm.jpg]

The role of tools

The lack of confidence and clarity about how to approach the design process diverted some designers into an obsession with tools. Quote: [E]stablished British designers fetishised tools to the point that the first question many graphic designers ask when confronted with a Web project is “What software shall I use?” rather than “What is the challenge and how shall we go about addressing it?”

Importance of client and implementation

In relation to graphic design, projects are often:

  • Larger,
  • Cross-organisational, and
  • Key to the businesses they are for

Importance of user research

New media is still a new field where we know little about how people use it.

Thus we need to think carefully about them, and not project our own experience onto them.

And context of use

Understanding where someone will need the information or service, how preoccupied they may be, and their orientation (standing, sitting, etc).

The place of usability testing

An appreciation that in the early days of a medium the ability to design successful solutions is not a given, and designers will learn important things from any testing that is done.

Influence of Web design

Improvement or not, the Web and Web design have also had a profound influence on graphic design.[iii]

Vector aesthetic

In illustration and graphical time-based media.

Use of Web fonts and Internet nomenclature

From Verdana to lower case and dot-everything

Web elements, such as navigation

Presenting print as hypertext

Reaction: emphasis on tactility

Designers are stuggling to understand what print is best for, and often settle on its tactile elements and the designer’s hand, eg: Graphic Thought Facility’s work, Visionaire magazine

In fact, we can gain a better understanding of the graphic design process by examining it through Web design spectacle. By applying some of the processes and techniques made explicit by Web design, it may even be possible to help graphic design improve further.

The need for graphic design

If British designers are serious about making a difference with design, as well as bringing design to centre stage in society, they will need to get to grips with interaction design.

Things are (finally) getting serious

These developments will be facilitated by technology innovation; greater adoption of the medium by business, government and other organisations; and the lowering cost of devices and access.

Just getting interesting

Ironically, [the early noughties] is when the sector really started to become interesting, as new platforms, including mobile devices and interactive television, came of age; Web technologies matured and stabilised; millions more people came online and real services – from both business and government – started to be delivered via the Internet.

Stasis a product of success

In many respects these disciplines [Web design/interface/interaction design] are in a kind of stasis, an ironic result of the enormous success of the personal computer and the Web. It is perhaps surprising that graphic design, founded in systems thinking and focused on the visual communication of ideas, has not had a more profound influence on Web design. But it is not too late. Graphic design thinking may be able to give momentum to the next leaps we need to make, particularly as we take the necessary steps of grounding these technologies in the physical and social worlds.

Directions for graphic design

Good typography

Better quality, larger and lighter screens (as well as ‘electronic paper’).

This will demand a better understanding of typography, particularly readability, and of design for time-based media. It will also demand better editorial design.

The general possibilities for typography are expanding and will continue to expand. Image: Hyphen Press site, designed by Eric Kindel [hyphen_ftp.tif]

Information design

The proliferation of (high quality) screens will also facilitate greater use of information visualisation for data presentation and analysis, as well as for the more mundane but equally useful presentation of structured information such as timetables and financial data.

And interactive infographics with Flash.

Information visusalisation

Making the most of our visual and mental capacities.[iv] Image: mSpace Music Browser [mSpaceMusicBrowser.jpg]

Design for greater bandwidth

Designers will need to learn more about the use of imagery and photography, and designing around time-based media.

And presence

Knowing the availability of colleagues and friends. An application that requires very little data, but that connections be ‘always-on’.

Image: iChat window [iChatFullOfPeople.jpg]

Semantic information rather than Web pages

Designing around element of information that carry information about themselves. Image: LinkedIn ‘six degrees of separation’ tool [LinkedInContactsList.jpg]

Breaking out of the browser

Desktop ‘widgets’ that are designed for one task and fit into your information environment. Image: Konfabulator [KonfabulatorDesktop.jpg]

Internet-enabled applications

And software design. Quote: Durrell Bishop “Why aren’t graphic designers involved in designing tools, such as phones and software. Graphic designers are supposed to be communicators. Someone who communicates well should be doing this, not engineers. What offends me is software design is so bad.” Interact1: Mentor/Curator discussion of work [October 7, 2004] (LCC) [Not to be directly cited.] Image: the Internet-enabled iTunes Music Store [iTunesTrackListing.jpg/iTunesQueryCDDB.jpg/iTunesMusicStore.jpg]

New user interfaces needed

We also need new user interfaces.

The world has moved on and GUIs need to move on, too. Computing is now used by a wider variety of people, in more varied activities – for Web browsing, email reading and instant messaging more than document processing. Computing power is orders of magnitude greater, more portable and pervasive, embedded in a wider variety of devices, and used in an amazing diversity of contexts. But we are stuck with the same interface, which can’t be adapted to support these new uses.[v]

Deliver and print

Delivering information, for instance a personalised newspaper, to an Internet-enabled printer in the home, for reading in transit or at the breakfast table.

Portable devices

Such as phones and personal digital assistants, with small and low resolution screens. Image: Palm screen for Vindigo [VindigoPalm.jpg]

Design for desire and delight

Learn a greater appreciation of the qualities of interactive media, bringing desire and delight as graphic design can do in print

Build on design patterns

Designing to support updating and creation by non-designers.

As general rules and patterns for the design of interactive products and services continue to be become established it should be easier for graphic designers to build on this solid foundation and work, as they are used to, based on intuition and lateral thinking. Image: Movable Type publishing tool [SpyDesignAndSociety.jpg]

Independence of thought

Importance of the “independence of thought that is bred in colleges” and the need for “problem solving and thinking beyond the aesthetic or programming issues” Patricia Austin, a course director at Central Saint Martins College of Art and Design[vi]

Modes of thinking

The modes of thinking of graphic design will enable designers to adapt to the twists and turns new media will take.

Thank you and Questions

[i]In with the New’ Nico Macdonald, Creative Review, September 2004, pp49-52 http://www.creativereview.co.uk/

[ii] ‘British Evasion’ Nico Macdonald, PRINT, LVIII:VI, November/December 2004. How they missed the boat in yet another revolution led by the Americans. http://www.printmag.com/ [Not published online. To be published at http://writing.spy.co.uk/]

[iii] PRINT, ibid, p213

[iv] See ‘Information visualisation’ Nico Macdonald, Eye, No 49, Vol 13, Autumn 2003 http://www.spy.co.uk/Articles/Eye/DataVisualisation/ [Includes PDF of article. Article on Eye site at http://www.eyemagazine.com/feature.php?id=71&fid=470]

[v] See Second Sight ‘Interface design and innovation’ Nico Macdonald, Guardian Online, 9 September 2004. http://www.guardian.co.uk/online/story/0,3605,1300747,00.html [Documented, with link to comment facility, at http://www.spy.co.uk/Articles/Guardian/HCIandInnovation/]

[vi] Creative Review, ibid

 

Last updated:
© Nico Macdonald | Spy 2005