Transcription

MARK:  I want to introduce Sarah.  Sarah is a designer, developer, and self-confessed introvert.  She works for Automattic, and designing and building WordPress themes.  When she’s not busy making things, she likes obsessing over typography, collecting impractical footwear and going to new places, and she’s going to talk to us about the unbearable likeness of design.  So, Sarah.

SARAH:  I spend a lot of time on the Internet.  Over the last few years, I’ve started to notice something.  Everything kind of looks the same.  Sorry, technical issues.  If you spend a lot of time on the internet as well, which I’m guessing you do, you’ll know what I’m talking about.  Websites that look like this.  And this, and this.  They all sort of follow the same pattern, at the top you have a logo on the left, and navigation to the right.  Beneath that, you have a full-width hero header image.  On top of the hero image there’s san serif type, usually white, and a big white button that is usually a call to action.  Below that, featured items, often three, and always illustrate with an image, photo or icon.

And this looks nice.  It works well, but it’s so common as to have become a cliché.  These are websites for different things, they’re communicating different messages.  Education software isn’t the same thing as a water filter.  When everything looks the same, how do we distinguish between them?

So the web didn’t always look like this.  We’re going to take a look and see how we ended up here.  How many people here got into web design relatively recently?  Over say the past 5 years?  Okay.  What about the past 10 years?  And has anyone been doing it for longer than ten?  Wow, that’s a lot.  Okay, so for some of you, this is going to be a blast from the past.  And for others, this will be a chilling vision of the past.

The Internet has been in development since the sixties, but what we know nowadays is the modern web is the worldwide web, and that really came about in the early nineties.  And when it started it was just text.

The first website was published using HTML in 1991.  It is still up.  And it is just text, as well.  There are links to other sites, but there are no images, no colours, just text.  It’s still very early days here.  In November of 1992 there were 26 web servers in the world.  That’s it.  By mid-90s our browser technology had advanced a bit, and we could do more.  No, sorry.

We could do more.  We could embed images in our sites.  We could use colours.  Not necessarily good colours but colours.  We could use tables to start implementing layouts.

At this point, the best way to design a website was to build a layout in Photoshop or in design or cork, and then slice it into components images, every header text, every line needed to be its own image, and then you’d put all those little bitty broken up images into tables.  Invariably, to do more complicated layout, you’d need to nest tables inside tables inside tables inside other tables, you’d end up with something a lot like code soup.  If you think the code looked bad, the designs looked worse.  This wasn’t a great time for websites.  We still didn’t have CSS, so everything had to be declared manually using HTML tags, so in order to make every link on that page yellow, you’d have to define the colour for every single link individually.  It was a lot of work to make something that looked this terrible.  But everything at this point was quite new, and even bad tools are better than nothing.  So we used everything we could get our hands on pretty indiscriminately.  We had frames, animated gifts everywhere, and hit counters.  It was a new and exciting time for the web.  The concept of building a personal site was completely new, being able to communicate with people on the other side of the world.  This is a really powerful thing.  In all that excitement we sort of didn’t develop any restraint.

But things moved along, and by ’96, 1 per cent of the global population was online.  CSS was introduced.  And CSS afforded us more tools to control the way things look.

This wasn’t always a good thing.  So you can change the browser’s scroll-by properties to make it three times its original size, and change the lighting effects and make it purple and yellow, and you can turn the cursor into a unicorn and have it shoot out rainbows, there are still multiple WordPress plugins that do this.  Let’s not look them up.  Let’s not forget the lessons brought to us by Spiderman.  With great power comes great responsibility.  But at this point usability and accessibility wasn’t a big concern.  We just wanted to make stuff that looked cool.  Flash came out around the same time, and this allowed us to experiment more and also to have more control.  We had a fixed box for our layout, we could use any typeface we had on our computer.  We could position elements visually rather than manipulating them in tables, and we could play with animation.  So this allowed us to design in a more visual way.

By the early 2000s things started to change again.  The web was no longer a new medium, and with increased knowledge and awareness of what we could do versus what we should do, this led to a refining of tastes.

At this point web design starts to feel like a thing.  Websites begin to feel like they’ve been deliberately designed, like they’re a cohesive whole.  And we begin to see the rise of new and distinct trends within web design.  One of my personal favourites was a gringe-grained used textures, pattern and handmade elements to give an imperfect and tactile feel to sites, and the web 2.0, one of the most poorly named trends in existence, was effectively the same idea but different implementation.  So it mimicked real-life objects as well, it used shadow and light effects, it used lots of gradients, every button was glossy or beveled or both, and there was always a mirrored effect, even if objects weren’t sitting on a mirror.  Both techniques were very image heavy, and again mimicked real-life objects.

The iPhone built on these ideas.  The first iPhone came other in 2007, and it presented a new challenge.  Suddenly we had this new device that was being introduced to a lot of users who maybe weren’t that technical.  So we needed a way to introduce, to teach those new users without alienating them, to teach them how to use the interface.  We saw the rise of skeuomorphism, a derivative object that mimics designs of the original and what that means is this: if you understand how a book works, when you read a book, you pull the bottom right-hand corner in order to get to the next page, and then you build an interface that looks like a book.  It has pages and a spine, and maybe a ribbon down the middle, and when you touch the bottom right-hand corner of that interface, you move to the next page.  That is what skeuomorphism is.  It links a new interface with an object you already know how to use, this allows users to intuitively learn an interface without having to read a giant manual.

The popularity of the iPhone led to the adoption of many mobile devices, and we were suddenly reading the web on phones.  This led to the rise of responsive design around 2010, and another shift in design practices.  Ultimately, as our technology changes, so does the way we design.  And we needed now to scale our designs to lots of differently sized devices and different resolutions.  We didn’t have that fixed box any more.  It was hard to use a lot of images, and so we saw flat design come around.  Flat design was actually pioneered by Microsoft with their metro UI which is now Microsoft design language.  Metro ditched old gradients, shadows and just used flat-box of colour for everything.  This approach makes it a lot simpler to adapt any design to different devices and resolutions, but in testing, they found users missed things — important things, sometimes.  If your buttons don’t look buttony, people won’t realise they’re buttons.  So a lot of flat design today isn’t totally flat.

Material design is a good example of this.  It is mostly flat, but it does use some shadow and light effect to differentiate important objects, like floating action button.  Material design is a design language intended primarily for use in Google products, but I’m seeing it cropping up everywhere in themes and frameworks.  It allows non-designers to easily make something that looks good, but the trouble is, it is rather prescriptive and it is not intended to apply to everything.

Bootstrap suffers from the same problem.  For a long time it was a most styled repo on github.  It was originally called Twitter blueprint and it was built as an internal tool for Twitter to use, so if you had an idea and wanted to test it, it would work or not.  You’d use this tool to get something up and running really quickly, and if you decided you wanted to go further with it, you could go through the design phase.

You can do lots with Bootstrap, and it is very easy to use it and make something that looks different, and is individual and unique.  But oftentimes people don’t take the time to customise it, and the result is you can oftentimes see when something is a Bootstraps site.

So the rise of flat design, and all these new tools and frameworks, gives non-designers an easier entry than ever into design.  It is easy to build something that looks good without ever using graphic editor or having a knowledge of the underlying design principles.  And while ultimately that is a good thing, it can also contribute to the homoginification of the web.  In order to build something great, you need to have an understanding of design.

Now you may think I’m not a designer, this doesn’t apply to me, but if you make websites, if you pick out a theme for your site, if a hire a designer, if you choose colours or typefaces, you’re making the web, you’re involved in design decisions, and design isn’t just about making stuff pretty.  It is also about solving a problem.  It is about understanding the needs of your client, and your audience, and communicating a message that isn’t any one-size-fits-all solution for every problem.  Historically, designers and developers have been very different people with different approaches, priorities, and goals.

More and more, this isn’t the case.  It is rare to find a web designer who doesn’t know HTML any more.  I like to think of web design and development as more of a spectrum than a binary.  Most people in the field fall somewhere in the middle.  It used to be that you’d have designers with a print background who would build a layout in Photoshop, and then they’d hand off the final files to a developer who would be responsible for implementation.  But now, most web designers are aware of the technical constraints while they are designing a site, even if they don’t do the implementation themselves.

And that prior knowledge of the technical constraints I think might be holding us back.  Now, constraints often engender creativity.  We devise clever solutions to work around them.  But with web design, we literally think inside the box.  The technical constraints of the web require box-shaped elements and so we build box-shaped sites.

Modern web design is very literally stuck inside the box.

Now of course, to stay relevant as a designer, you do need to follow trends to some degree.  What we find beautiful is very much shaped by our culture and by the zeitgeist, the spirit of the time, and this is evident in all forms of art and design, from fashion to music to architecture.  There is a study done where they looked at Amazonian tribes, and scientists assumed we had a biological preference as humans towards harmonic sounds, but when they played music for these tribes who hadn’t heard any western music, they found there wasn’t any preference for harmonic over discordant sounds.  So an understanding of the world and its current aesthetics and your culture is vital to remaining relevant.

The flipside of that, of course, is that an over-reliance on trends means a design becomes dated very quickly.  Think about the swoosh logos that were ubiquitous in the nineties, or those glossy buttons of Web 2.0, and following those trends really closely is fine if you want to redesign a site every year, but most of us don’t have time for that.

It is worth noting standard UI conventions are not the same things as trends.  This is how users find things.  It is how they make sense of an interface.

Don’t rewrite convention just for the sake of it.  The Nielsen Group found that if you moved a logo from the top left-hand corner of the page, it was actually six times harder for users to navigate to your homepage.

Only break the rules if you have a good reason for doing so.  Don’t alienate your users.

I definitely got lost on my slides, so that’s exciting.  Cool.  Sorry.

UI conventions, the same goes for accessibility.  Ultimately, it is better to have a usable and accessible website than one that is really creative.  But I believe that we can work within those constraints to build creative sites, whilst still maintaining usability and accessibility.

Much of design is driven by trends.  Slavishly following those trends does not account for your project’s needs.  Design is about communicating a message from your client to your audience.  If your audience can’t distinguish between a hospital and a music festival, your meaning is lost, and understanding is diminished.  Visual patterns are language, they have meaning.  Think about what you’re communicating.  What is trendy isn’t always going to be what is right for your project.

All fields of design need innovation to drive forward.  And the web is no exception.  Web design desperately needs new ideas and thought leaders.  We need to buck trends in order to make new ones.  It is all well and good saying be different, be unique, buck trends and be a special snowflake, but how do we actually do that and design websites that don’t look like every other website out there while still accounting for UI conventions and modern tastes?  I have some ideas.  First of all, not everything needs to be totally flat.

I expect we’ll move away from flat design at some point anyway.  Designed trends tend to be cyclical, and flat design is going to look as dated as those swooshy logos into couple of years.  So try playing with texture and pattern.  When used well, they can add dimension and visual interest to design work.  As human beings, we respond to natural organic objects.  It is why we find emotional connection to hardwood floors but not so much to steel girders or glass windows.  These subtle imperfections humanise what can otherwise be a sterile interface.  For the same reason, hand-drawn elements are effective, particularly if you want to impart an emotional reaction.

Play around with typography as well, don’t just use proxima Nova and call it a day.  It is beautiful, but it is really overused, and beware distinct but commonly used typefaces, some Google fonts can fall into this trap.  Lobster is one, Playfair is another, it is beautiful, one of my favourite typefaces, but I have seen it used for corporate sites and it doesn’t fit.  Think about your message and choose something that suits.  Take inspiration from classic typography, try unusual combinations.  Try serifs, get crazy, you can get creative with typography these days.  Try using oversized type or type broken out of the box.  This can add interest, even if you’re using a plainer typeface.  Blowing type up really big makes it become an illustrative element.  Dropcaps work on the same principle, and it is becoming easier and easier to do them in because CSS.  There is a property called Initial Letter getting more and more browser support, and allows a really fine grained control over a dropcap.

Try getting creative with your layout to avoid that boxy syndrome.  The concept of breaking the grid is very traditional to print design, but we don’t really do it on the web very much.  If you’re not familiar with the concept, read Making and Breaking the Grid, which talks about building grids and then breaking them.  The basic concept is you want to align every element on your page to an underlining grid, so it is nice and orderly and feels well structured.  You can then pull an element outside of that grid.  This gives it more visual weight and adds dynamic tension to your page, so it is more interesting to look at.

You can also try working with non-boxy shapes.  You can break your text around objects.  We have more tools to play with now.  We can use Flexbox or CSS columns, we can skew and rotate elements and use SVG clipping masks.  Even something relatively simple like using a squiggle shape instead of an underline or using multiple borders around an image can add character and visual interest to a layout, structurally, otherwise the exact same as every other website.

Animation is also a great way to add visual interest.  Again, these tools have been improving and expanding.  We can do a lot of animation with CSS alone these days.  We don’t even need to learn Javascript.  This site does a lot of — that’s not going to move because it is a PDF, but in theory, this site would have been animated and would have looked really great.  So it is very easy to go overboard.  When this site moves, it actually animates every single element as you scroll down, so as you scroll down, they start popping out at you and things jump out and move.  It is absolutely like madness to look at.  It is really easy to go overboard.  So as a general rule, try to animate elements that are interactive.  And animate only interaction rather than on the scroll.

All fields of design need innovators and the web is no exception.  So get outside your comfort zone.  Interact with design in a new way, and bring that passion and learning back to your web work.  One of the neatest things and the things I love most about design is that it is everywhere: it is in airport signage, on packaging, billboards, restaurant menus, you can’t possibly escape it.  Go ahead and experience it.  Viewing design through a wider lens will improve your work and bring new ideas.  Look at packaging design or hand lettering where typography and illustration converge.  Read fashion magazines where colour can be amazing, look at film titles both modern and new, they’re a great source of inspiration for animation.  This is a theme on web.com.  It is super old, not responsive, but the sort of soul bassy style means it does interesting stuff, which makes it look different and interesting.  Look at interior design.  There is lot of pattern and textile inspiration that can be found here.  Magazines are a great source of layout and breaking the grid.  Get out and go to museums, not just art and design museums but also science museums, history museums.  Displays are a great way to understand interactive design, experiencing design in the real world and interacting with it is a great experience.

Read print media.  Book covers are a great source of inspiration for illustration and conceptual thinking.  There are so many things to inspire you out there.  Embrace a multi-disciplinary approach to design, don’t just look to the web for inspiration.  This is a vicious cycle that means everything keeps looking the same.  Look outside the web for more inspiration.

Once you’re expired, experiment.  Try taking a magazine layout and recreating it in CSS as an exercise to learn new tools.  Try your hand at calligraphy or hand lettering, build furniture, paint stuff.  Make time for creative play, even if it is only a few minutes a week.  And not just with code, but also with other disciplines.  Experimentation is how we discover new things.  Bucking trends is how we make new trends.  So take risks, don’t be afraid to make mistakes.  You can make the web more diverse, better and more interesting.  So go out and experiment.  Thank you.  [applause].

MARK:   Thank you very much.  Is this on?  Brilliant.  We’ve got some time for questions, we’ve got a mic runner in the middle there, so if you want to ask Sarah a question then please raise your hand and we’ll get a mic to you.  There we go.  Anyone?

FROM THE FLOOR:  What have you been inspired by lately?

SARAH:  That’s a great question that I don’t have an answer for.  Clearly that’s a sign I need to go out and experience more design in the real world myself.

MARK:   Any others?

FROM THE FLOOR:  Hello, do you have any sort of thoughts on what you think is next in terms of web design from, you know, what you’re thinking about, or what you see as going on at the moment?

SARAH:  So I’ve been starting to see more skewed lines, which is a start.  A small step, but a start.  Oftentimes when things used to be very straight lines, sometimes people are now using skewed to move that.  So I think that’s the first step, and I’m starting to see that crop up a bit more now.

FROM THE FLOOR:  A really good talk.  I have a question about where do you keep, in a sense, the line, the boundary between experimenting and keeping the interface usable?  Could you elaborate maybe a little more on that?

SARAH:  I think it is worth considering your audience there.  If you’re building something more that is more experimental, you can push the boundary a bit more, but if you’re building something that people need to use, you probably want to gear yourself more towards the sort of usability aspect.  But testing is a great way to find out if your experiment will work or not.  So I thoroughly recommend testing all your designs, even if it is just giving it to somebody in a coffee shop and seeing if they can use it.

MARK:   Any other questions?  No?  Okay, thanks again, Sarah.  Okay, we’ve got a short break.  We’re back in here at 11.20 with a talk from a cartoonist, which should be interesting.  Don’t forget if you haven’t collected your WordPress T-shirt, please do so.  It is downstairs in this building.  The Happiness Bar is open at ten to 12 today, so if you’ve got any questions about WordPress, anything you want to ask the experts, I’m sure they’ll be happy to help you so head down to the Happiness Bar just downstairs, and go say hello and ask any questions you can.  We’ll see you shortly.