Paul Matson Graphic Design

A series of articles introducing web design to students of graphic design.

For the past three years I’ve delivered a presentation on web design to a class of graphic design students here in Bristol. This is always an intimidating prospect, not just the thought of presenting to a design-savvy audience who have grown up with the internet, but also considering what level to pitch my talk at.

Too simplistic and it may appear condescending. Too advanced and it ceases to seem appropriate or stimulating to a room of visually-minded people.

With this in mind, I have chosen to share some of my points in a series of articles. These are aimed at mid-degree (second-year) graphic design students who have been tasked with creating a web presence for the first time. If the articles have broader appeal to a wider audience - print designers considering the transition to the web for example - then even better. Over time I hope to open up discussion and comment on the articles so that the presentation can be improved for next time.

A personal point of view

All the usual disclaimers apply - this is my personal take on the subject and is intentionally narrow in scope. While I will try to draw on real-life experiences, I’ll respect the confidentiality required for the many client projects. I’ll also try to avoid geekspeak wherever possible, although introducing a small amount of technical jargon will be necessary, though I hope not discouragingly so.

What is a ‘web presence’?

First I’d better discuss what I mean by a ‘web presence’. Traditionally this refers to a small number of web pages linked to one another and typically comprising of an about, portfolio, contact and home (or front) page. This structure - which covers any visitor’s checklist of who, what and where - can still hold you in good stead at the start of any website design.

For a self-promotional site of the kind students may produce, an ‘about’ page expresses some of your background, experience and personality perhaps with a downloadable CV; The portfolio is often a gallery space with a reasonable amount of photos, illustrations and layouts; ‘Contact’ should enable visitors to get in touch with you easily and the home page is probably the first thing they see, so should be a summary of all the above - as well as an pleasing expression of your design sensibilities.

Everyone is a designer now

While that all sounds reasonably straightforward, let me throw in the following thought. The ‘classical’ outline above is the best place to begin but is by no means the only sort of effective web presence. Chance are, if you use Facebook, you already have one that is updated on a frequent, perhaps obsessive basis. MySpace pages can also be styled and ‘designed’ to a degree that only a few years ago would have been beyond the capabilities of many a web design guru. It’s getting easier and easier for anybody to publish and maintain impressive websites without the apparent need for a designer. And if that sounds scary enough for your future job prospects then print designers should take little comfort either.

That said, I think that while web design exists in a constant, healthy state of flux and change, design thinking is invaluable. Combine solid, fundamental visual skills with a curiosity about the new mediums and you should weather any technological storms. I believe this is the most exciting branch of graphic design to be involved in right now, and my commitment to work more on the web side of things (with the occasional print commission) demonstrates that I’m putting my money where my mouth is.

The proper definition

So that’s my upbeat spin on things - time for an ‘official’ definition of web design courtesy of premier online encyclopedia, Wikipedia:

“Web design is a process of conceptualisation, planning, modelling, and execution of electronic media content delivery via Internet in the form of technologies (such as markup languages) suitable for interpretation and display by a web browser or other web-based graphical user interfaces (GUIs).”

Hmmm. While that sounds very authoritative I’m guessing it doesn’t help most of you. Let’s take a deep breath and a moment to break it down:

“… is a process” - So we should know design is a process - it doesn’t just happen - and one that requires care and consideration to do well. Breaking a complicated process down into stages or bitesize chunks - which I’ll attempt in later articles - makes it all feel much less daunting.

“conceptualisation, planning, modelling” - More than just visual graphic design then, however important the look and feel is (and I regard it as very important).

“electronic media delivery via Internet” - Delivery is the key word here, but for now let’s say we are publishing on the web to an potential audience of millions (note italics).

“Markup languages” - The programming DNA that makes the web work so wonderfully. As designers we can learn these intensely and become fluent speakers or we may just pick up enough to get by. Put another way: you can spend a weekend in Paris without knowing any French, but you’ll have a better trip if you can chat with the locals. For a tangible example look for a ‘View Source’ option on your web browser to see the underlying code that makes this webpage tick.

“interpretation by Web browser” - Many designers are shocked at first to see their carefully crafted websites look different on other people’s computers. You may be using sleek Safari on a Mac with a gorgeous screen, while someone else is stuck with an old version of Microsoft Internet Explorer on a clapped-out PC. What’s more it may not even be on a regular computer, but a mobile or iphone.

“Graphical user interface (GUI)” - And here, right at the end of the definition, is our first mention of graphics. Icons, buttons and layouts have all have been carefully designed to make online life easier and, sometimes, more beautiful.

When I first quoted Wikipedia for this definition to use in my presentation, the following footnote appeared at the bottom of the page:

“This article may need to be rewritten.”

While meant as an invitation to improve the user-generated encyclopaedia entry, it also carries a neat relevance to web design itself. By the time a second-year student graduates, the working landscape for digital designers will have changed considerably.

In future articles, I will look at the elements of web design in more detail (time-permitting) and open this series up for much-valued feedback.