Web design is all about pleasing two masters: the human beings looking at the website, but also the software web-crawlers that spin the World Wide Web, and make it possible for those humans to see your site. Web Design is also an ongoing tussle between the ambitions of the Designers and the limitations of the end-user’s computers.
The early days of web design
The history of Web Design so far has been very reactive – a matter of finding the simplest work-arounds for limitations in the software and hardware.
If you checked out the film, Captain Marvel, you may have noticed that its promotional website resurrected the corpse of mid-90s Geocities – and reminded us all of the cluttered amateur aesthetic that introduced an entire generation to the web.
Back then, if something was on a computer – it had to look and sound like it was on a computer. Every inch of screen space had to be filled with something flashing or sparkling or changing colour. Even the cursors were animated. Like the code behind it, the internet was cluttered and clumsy! The medium was inextricably linked to the message.
If you’re long enough of tooth to remember Netscape, you may remember those “This website does not work on this browser” notifications. It’s fair to say that, historically, some of the solutions have lacked elegance – but they were the best we could do with the tools we had.
Fortunately – we’re always inventing new tools.
The age of white space
Mozilla’s Head Designer, Jen Simmons gave a great presentation in 2018 – which you can watch on YouTube – in which she breaks down the history of Web Design into several distinct eras – most of which overlap each other.
The present epoch in Web Design is, of course ‘Responsive’ – where dealing with the different size demands of smaller, portable gadgets has produced images which resize as well as text which wraps around and flows. This is by-far the most intuitive solution we’ve developed.
And it has allowed, for the first time, for the design aesthetics from the real world to make their way in to the Web Designers lexicon. A website no longer has to look like a website – it can look like a magazine.
Which means it can employ tasteful uses of white space.
The careful use of nothing has always been important in traditional Graphic Design and Typography. The inclusion and aesthetic use of white space – of areas where there are no images and no text – has long been a signifier of elegance and affluence. On paper, space is a premium, so wasting it is a statement of decadent luxury.
In Web Design, active white space (that’s white space which is deliberately employed as a design choice, rather than the passive white space of margins, gutters, etc) helps keep the pages clean of clutter.
It’s also a sensible solution to the problem of different screen configurations. A column of text down the centre of the screen, with nothing significant either side, is a format that works with little adaptation on a landscape computer monitor, and a portrait phone.
Space is not in short supply on the net – but attention is.
The age of ecommerce
Web Designers need to communicate the most information possible, in the least time possible. This has led to sites which are aesthetically pleasing… but familiar.
Web Designer Dave Ellis identified this trend with his ironic ‘We’re Unique’ template.
His point was that a preponderance of the themes available for Website Designers follow this basic form. It’s what users have been trained to expect. It’s what clients recognise as a safe option for their business website.
And that’s because, in a wide world where the internet is now the engine driving the economy – and users take less than 15 seconds to decide whether or not they’re staying on a website – utility has trumped pure aesthetics.
But it works. It ain’t broke, so why bother to fix it?
Well, if there’s anything that the last 25 years of Web Design has taught us, it’s that it is a restless endeavour. New tools are being developed all the time, new toys are being made for Designers to play with.
The development of smartphones and then tablets led to the age of Responsive design. How will Web Design respond to the opportunities offered by foldable phones? What about those Tony Stark phones that everyone wants – the transparent ones? They’re only a few years away! What about VR and Augmented Reality? Googleglass failed, because it was too soon. Give it another five years, and maybe …
The age of science fiction
So, the Internet is a constant work in progress and those brave souls chipping away at the inter(coal)face, already have tools that are changing the look of the internet, in small ways, day by day.
Flexbox, CSS Grid, Multicolumn, Flow, and Variable Fonts are all making subtle but significant changes right now – such as intuitive side-bar navigation and 100% page-width.
Wander over to a site like awwwards.com and you’ll see a cavalcade of futuristic web designs, using these tools in new and revolutionary ways, to create startling, extravagant, full-screen visions.
But one has to wonder about the practicality of some of these designs. Most of the active websites you’ll find here are business-to-business sites operated by Designers and Design Agencies, and used as portfolios to show off their design skills.
Are these experimental (some could say ‘gimmicky’) interfaces designed by Web Designers for Web Designers? Will these designs ever cross over into the world of hard-nosed commerce and 15-second attention spans?
The age of digital storytelling
Digital storytelling could be the way forward.
Websites have been typically journalistic in form. The demands of SEO and of ‘click bait’ have entrenched this – with the key information being packed into the text and, even more specifically, into the opening paragraph and the title – so that the Search Engines can reward your journalistic nous with clicks.
Sites that tell stories can get away from this. Emergence Magazine, for example, has pushed journalism in the direction of multimedia, employing a montage of audio and video clips, with floating text, to create stories which use the existing tools of Web Design to create intuitive, visually engaging and dramatic journalism. Look at their report on NASA’s first flight to The Moon, for example.
This is a cutting-edge example of how a scrolling one-page design can use the limitations of the viewport – the web browser – to deliver information in a narrativistic way. Information can be revealed by scrolling, which means that a sense of narrative form – a beginning, middle and end structure – can take hold.
Sites that have been composited – like video games or movies – employ sophisticated animations in order to tell stories. These stories can be interactive – involving gamified choices and branching – but the beauty of these sites is that they are getting away from the columns and boxes look that websites have had since … Well, since forever.
Look at Oat the Goat. Seriously, do; it’ll blow you away. Produced by New Zealand’s Ministry of Education, it’s an interactive animation for children learning to read. It has options for readalong, or you can just watch as the text is read to you, and there are points where the story stops, while the child deals with a moral dilemma. The UI is an absolute delight, but the real joy of sites like this, is they don’t look or feel like websites. There’s some mad Java skills on show here!
Of course, there’s very little text on the homepage (at least on show to the human user), so the Search Engine spiders will need to hunt for different prey.
We are all subject to the tyranny of the Search Engine algorithms. Until such time as they start valuing metrics other than the words on the web-page, good, challenging and experimental web design will remain a competitive sport between web designers, for the purpose of impressing other web designers.
But new platforms, and the new uses people find for their gadgets, will demand that the Search Engines respond. We can’t wait for them to lead the way, Web Designers have to head out into the wild frontier of new design concepts, so the Search Engine spiders can follow.