 Ok, rym ni'n rhaid i'u wneud am ymdano. Rwy'n rhaid i'n rhan o'r Serer. Serer yn y designer, y developer, ac yn y self-convestigle. Mae'n gwaith i gynnugol o'r oedd ymwneud. Bydd o'r hyn a'r gweithio'r thymau. Fy enw i'n mynd i'n gweithio'r hyn o'r hyn. Serer oedd mewn cyd-oedd o'r hyn o'r hyn o'r hyn, o'r cyd-oedd o'r hyn o'r hyn o'r ffordd ac oeddennydd nhw. a dyna ei wnaeth a gwneud i mi'n gwlad i gael'r ysgrifennu. Felly, rwy'n gweithio chi'n gweithio'r tynnu i'r bywyd. A ydw i'n gweithio'r mwy o'r gweithio'r tynnu i'r bywyd. Felly, mae'n bwysig i'r gweithio'r bywyd. Felly, mae'r techniclu'r bywyd. Felly, mae'n gweithio'r tynnu i'r bywyd, sydd wedi gweithio'r bywyd. Ydw i wnaeth chi gweithio'r bywyd. Website 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 sans serif type, usually white, and a big flat button that's used as a primary call to action. Below that, you have a column of featured items, often three, and always illustrated 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. So 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 five years? Okay. What about the past ten years? 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 future, of the past. The internet has been in development since the 60s. But what we know nowadays as the modern web is the worldwide web, and that really came about in the early 90s. And when it started, it was just text. The first website was published using HTML in 1991. It's still up, and it's 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 92, there were 26 web servers in the world. That's it. By the mid-90s, our browser technology had advanced a bit. And we could do more. Nope, sorry. We could do more. We could embed images in our sites. We could use colours, not necessarily good colours, but colours. And 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 component 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 other tables. You ended up with something that was a lot like code soup. And if you think that the code looked bad, the designs looked even worse. This wasn't a great time for websites. And 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 used frames, we had hit counters, we put animated gifs everywhere. 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. And this is a really powerful thing. And in all that excitement, we sort of didn't develop any restraint. But things move along. And by 96, 1% of the global population was online. And 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 bar properties to make it three times its original size and change the lighting effects and make it purple and yellow. And you can turn your user's cursor into a robot unicorn or have it shoot out sparkles or rainbows. There are actually multiple WordPress plugins that still do this. Don't look them up, please. Let's not forget the lessons taught to us by Spiderman. With great power comes great responsibility. But at this point, usability and accessibility wasn't really 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 anymore. 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 the Grunge trend. It used distressed textures, layered patterns, and lots of 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 a different implementation. So it mimicked real-life objects as well. It used shadow and light effects. It used lots of gradients. Every button was either glossy or bevelled or both. And there was always a mirror effect, even if objects weren't sitting on a mirror. So both of these techniques were very image-heavy. And again, mimicked real-life objects. The iPhone built on these ideas. The first iPhone came out in 2007, and it presented a new challenge. Suddenly we had this new kind of 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. So we saw the rise of skewmorphism. Skewmorphism is a derivative object that mimics design elements 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's what skewmorphism is. It's an affordance that links a new interface with an object that you already know how to use. And 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 suddenly we were reading the web on phones. And 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 anymore. 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 all-gradients, shadows, and it just used flat blocks 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 that users miss things, important things sometimes. If your buttons don't look buttony, people won't realise their buttons. So a lot of flat design today isn't totally flat. Material design is a good example of this. It's mostly flat, but it does use some shadow and light effects 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. Now, it allows non-designers to easily make something that looks good, but the trouble is it's rather prescriptive, and it's not intended to apply to everything. Bootstrap suffers from the same problem. For a long time it was a most-starred repo on GitHub. It's now, I believe, second most, so maybe it's waning in popularity. Bootstrap was originally called Twitter Blueprint, and it was just built as an internal tool for Twitter to use to rapidly prototype sites. So if you had an idea and you wanted to test if it had worked or not, you'd use this tool to get something up and running really quickly, and then if you decided you wanted to go further with it, you could go through a design phase. You can do lots with Bootstrap, and it's very easy to use it and make something that looks different and is individual and unique, but oftentimes people don't take that time to customise it, and the result is you can oftentimes see when something is a Bootstrap 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's easy to build something that looks good without ever using a graphic editor or having a knowledge of the underlying design principles. And while ultimately that's a good thing, it can also contribute to the homogenification of the web. In order to build something that's great, you do 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 you 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's also about solving a problem. It's about understanding the needs of your client and your audience and communicating a message. There 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. But more and more this isn't the case. It's rare to find a web designer who doesn't know HTML anymore. 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'd 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're designing a site, even if they don't do the implementation themselves. That prior knowledge of the technical constraints I think might be holding us back. 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. 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 was a study done where they looked at Amazonian tribes who didn't have any exposure to Western music. Scientists had assumed that we had a biological preference as humans towards harmonic sounds, but when they played music for these Amazonian tribes who hadn't heard any Western music, they found that there wasn't any preference for harmonic over discordant sounds. And so an understanding of the world and its current aesthetics and your culture is vital to remaining relevant. The flip side of that, of course, is that an over-reliance on trends means a design becomes dated very quickly. Think about the swish logos that were ubiquitous in the 90s 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's worth noting. A standard UI conventions aren't the same things as trends. This is how users find things. It's 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 in my slides, so that's exciting. Nope. Cool. Sorry. UI conventions, the same goes for accessibility. Ultimately, it's better to have a usable and accessible website than one that's really creative. But I believe that we can work within those constraints to build creative sites while still maintaining usability and accessibility. Much of design is driven by trends. Slavishly following those trends doesn't 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 a language. They have meaning. Think about what you're communicating. What's trendy isn't always going to be what's 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. Now, it's all well and good saying be different, be unique, buck trends, be a special snowflake, but how do we actually do that? How do we design websites that don't look like every other website out there while still accounting for current 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. Design and trends tend to be cyclical, but flat design is going to look as dated as those swooshy logos in a couple of years. So try playing with texture and pattern. When used well, they can add dimension and visual interest to our design work. As human beings, we respond to natural organic objects. It's why we feel an emotional connection to hardwood floors, but not so much to steel girders or glass windows. These subtle imperfections humanize what can otherwise be a very sterile interface. For the same reason hand-drawn elements are effective, particularly if you want to impart an emotional reaction in your audience. Play around with typography as well. Don't just use Proxima Nova and call it a day. It's beautiful, but it's really overused. And beware of distinct but commonly used typefaces. Some Google fonts can fall into this trap. Lobsters one, play fairs another. It's beautiful. It's one of my favorite typefaces, but I've 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. Instead of using a song for everything, try serifs or slab serifs. You can get really crazy and use a script or a display face for headings only. You can get really creative with typography these days. Try using oversized type, or type that's broken out of the box. This can add interest even if you're using a plain or typeface. Blowing type up really big makes it become an illustrative element. Drop caps work on the same principle, but it's really easier and easier to do them in CSS. There's a property called initial letter that is getting more and more browser support and allows for really fine grained control over a drop cap. 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 that you want to align every element on your page to an underlining grid so it's 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's 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. We can 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 that's 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... It's not going to move because it's a PDF. But in theory, this site would have been animating and it would have looked really great. It's very easy to go overboard. When this site moves, it actually animates every single element as you scroll down. As you scroll down, they start popping out at you and things jump out and they move. It's absolutely madness to look at. It's really easy to go overboard. So as a general rule, try to animate elements that are interactive and animate on the 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's everywhere. It's an airport signage, it's in packaging, on billboards, on restaurant menus. You cannot possibly escape it. So go ahead and experience it. Viewing design through a wider lens will improve your work and bring you new ideas. Look at packaging design or hand lettering where typography and illustration converge. Read fashion magazines. Photography and 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 WordPress.com. It's super old, it's not responsive, but the sort of soul Basi style means that it does some interesting stuff which makes it look different and interesting. Look at interior design. There's lots 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 expire you out there. Embrace a multidisciplinary 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 inspired, 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. Make furniture, paint stuff. Make time for creative play, even if it's 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, and more interesting. So go out and experiment. Thank you. Is this on? Yeah, there we go. We've got some time for questions. We've got a couple of mic runners 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. Oh, have you got it, Matthew? Anyone? It's how I look at the front there. What have you been inspired by lately? 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. Any of this? Hello. Do you have any sort of thoughts on what you think is next in terms of web design from what you're thinking about or what you see is going on at the moment? So I've been starting to see more skewed lines, which is a start. It's a sort of a small step, but it's a start. So oftentimes when things used to be like very straight lines, sometimes people are now using skew to actually move that. So I think that's the first step, and I'm starting to see that crop up a bit more now. Really good to talk. I have a question about where do you keep the, in a sense, the line, the boundary between experimenting and keeping the interface usable? Could you maybe elaborate a little more on that? Well, I think it's worth considering your audience there. If you're building something that is more experimental, 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 always a great way to find out if your experimentation will work or not. So I thoroughly recommend testing all your designs, even if it's just giving somebody in a coffee shop and seeing if they can use it. Any other questions? Nope. Thanks again, Sarah.