 This is microphone on. Can you hear me okay? Brilliant. Thanks for making me feel old Mostly I'm also Come all of this way and now I feel like some kind of I don't know decrepit relic Something like that. Good afternoon Good afternoon. Thanks very much for coming. It's absolutely fantastic to be here. Thanks to Chris and everybody for the invitation I've been to Singapore dozens of times But this is the only time that I've ever left the airport It's some Singapore's a lot bigger than I'd experienced before so Last year I actually moved from the UK down to Sydney. I took over as head of design at a company called and Sarada and We're actually making some really Exciting designs that are a kind of combination of kind of editorial Product work. We're actually building our design and development team So if you are interested in Sydney, then and send me an email or send me a tweet And I also consult at my own company do designs for clients Stuff nonsense is our new design this week meet Errol my new gorilla and Our goal for the past 20 years has always been to make Distinctive creative work for the web work that kind of goes beyond just making a digital product or a website easy to use Because to me Design is much more than just problem-solving. You know, it's about communication It's about inspiring brand loyalty and encouraging affinity And that's why you'll meet Errol on the website. You don't see pictures of me And a good deal of my work over the years has Involved designing systems and pattern libraries and style guides worked for clients like Greenpeace and And WWF and style guides these tools have become incredibly fashionable. You know, we've got articles Talks even entire conferences like Clarity in San Francisco that have been devoted to them And perhaps the most well-known design methodology Today is Brad Frost's atomic design. I bet there's very few people that have not heard of atomic web design Brad wrote a book about atomic web design. He was kind enough to mention me in the acknowledgments. He said To Andy Clark who's been talking about design systems and atoms before it was the hip thing to do Thank you for all your writing and thinking, but you're still not getting my dog Which which is a real shame actually because my my Instagram feed is full of pictures of Brad's dog Ziggy And other people's babies, I'm not sure that's normal And that's because in 2012 oh my god, that's such a long time ago before atomic design I introduced this idea of designing atoms and elements and it's this process that separates what I call the atmosphere of a design from the layout and if you fast forward to today We'll find that style guide has become this umbrella term for several different types of design documentation You know they might be static PDF style or visual identity guidelines They illustrate how a brand should be presented and how those assets should get used across different media this is a an example from Audi which Includes how to use their fonts and colors and their logo. I'll come back to Audi a little bit later Because I'm hoping that if I mention them twice, they'll send me a free one Chris can you pass my water, please? Cheers So voice and tone guidelines they describe how a brand's personality should get conveyed through the way that it speaks to customers a Mailchimp's voice and tone is a fabulous really well-known example of how to imbue a brand's personality Through the language that they use Front-end code guidelines for developers. They stipulate coding standards to encourage better collaboration across teams So we've all seen examples like this. This is IBM's carbon design system And then finally component or pattern libraries which commonly contain examples of how to style The atoms and molecules and organisms and templates that Brad Frost talked about in atomic web design This is from the Guardians paste up and it's a typical example of a pattern library that's been developed for developers by developers and In my work and I suspect in most of yours when we talk about a style guide We mean a combination of visual identity guides and a component or pattern library and these all offer something slightly different But more often than not they all have something in common. Can you guess what that is? They all look ugly enough to have been designed by someone who really enjoys configuring a router Or Raptor depending on which part of the world you're in okay, that was a bit mean because an An unattractive style guide is not going to be a problem for everyone I mean people say as long as it contains the information that people need how it matters shouldn't look or should it You know, this means that Here's the thing right? beauty Compliments functionality doesn't detract from it Creative design enhances someone's engagement with the style guide and it should Amplify the content and that means to be effective a style guide should present that content in appealing and engaging ways and recently Interest in design systems has meant that we've had reproductions of Corporate design manuals. These have become really popular. This one's from British Rail. I Ordered mine online And it came late The NASA graphic standards manual describes the design of everything from a business card to the branding on a booster rocket You got the New York City Transit Authority graphic standards manual It includes the most comprehensive guide to how to use Helvetica that I've ever seen Not making this up finally. This is a mouthful the official Symbol of the American Revolution Bicentennial graphic standards manual Explains that only how this symbol should be used but also how it was created. This is important. I'm going to come back to this later And now there are collections of Design guidelines online including this one which includes work from Apple and IBM and Microsoft The problem with Inspiring style guides is that not everyone needs to take the same information from them You know if you're looking for markup and styles to code up some form of media component, you're probably going to be a techie type But if you need to understand the balance of type sizes across a type of graphic hierarchy You're more likely to be creative. So what you need from a style guide is Different and yet so many style guides follow the same patterns the slides aren't broken by the way. That's intentionally blank okay Intentionally blank because I like to fuck with the AV guys So I'm actually going to start off by looking at color which to me is one of the most important Ingredients in a design because it it communicates enough enough it communicates personality and creates mood and it's vital to an interactive Understandable vocabulary Okay, so now it actually has stopped. Oh, here we go. Right. No, no, no, we were okay so you think right if we talk about color you think that style guides would present color in any number of really imaginative ways, right, but you'd be really disappointed because Generally the most expiring you'll find looks like a collection of paint chips from a DIY paint chart This is lonely planets riso. It does a great job of separating design elements from UI components But you're going to struggle to get a feeling for lonely planets design just by looking at those color chips This is green pieces worldwide Style guide it uses the same approach as the sky's old web toolkit and the times is functional palette Gov UK gov.uk. Have you heard of this website? It's not well known for its creative flair It varies the approach by using circles Which I find Really strange because circles don't feature anywhere else in the branding or the design On the plus side though the designers have provided some context By categorizing colors like links and text and backgrounds that kind of thing Google's material design offers an embarrassment of colors Most hopefully though it does Advise people how to combine these primary and accent colors into usable pallets But few style guides actually offer Explanations and even less in the way of inspiring examples. Most are extremely vague when they describe color. I love this Use color as a presentation element for either decorative purposes or to convey information The government of Canada's web experience toolkit states rather obviously Um Apparently I didn't know this we can say this inside Microsoft I can't say this inside adobe but adding more colors to their palette has apparently made adobe a rich Dynamic and multi-dimensional company who knew it was that easy I'm not sure at all what makes the draft us web standards guideline colors a Distinctly American palette, but it's gonna have to work bloody hard to achieve its goal of Communicating warmth and trustworthiness after a year of fucking Donald Trump We're gonna build a great style guide People won't believe it. It's gonna be so great Mexico's gonna pay for it Right the University of Oxford is much more helpful they explain how and why to use their colors they say in a British accent the dark Oxford blue is used primarily in general page furniture such as the backgrounds on the header and footer Beautiful the designers are open table. They've considered how to explain the hierarchy of the colors that they use by Presenting them and the supporting colors in different size chips So it's really obvious which are the primary and supporting an accent or neutral colors They don't have to say so for square They helpfully prescribe the percentages of colors that make up their marketing materials But there are much more imaginative ways that we can describe color. I Love this steel toolmakers brand book which itself is a really good example of thoughtful graphic design It could not be clearer when it says Use this color Fantastic You know it presents It's information clearly and it's in a way, which is consistent with this no-nonsense steel brand The designers at Alberta's corporate identity manual they cleverly combine colors with imagery of the Region that inspires them and these larger blocks of color give people a stronger feeling for the design without making It difficult to find information about those colors You know finally a style guide should demonstrate the interplay of color and typography just to make sure that People understand what's acceptable in terms of color contrast and accessibility So for some companies organizations brand books have developed into a bit of an art form If you find these things as inspiring as I do it's important to remember that we shouldn't just simply Copy the appearance what we should do is to turn this inspiration into designs that work for the web You know for example this page from the garb from the Barbican's brand book to me suggests things like SVG shapes and CSS blend modes all that cool stuff This is the distinctive McMillan cancer support visual identity and they've brought the design to every page of their brand guidelines You know their color chips match the style And we get a much better understanding of their visual identity when those same colors are used in other kind of imaginative imaginative ways You know of course living style guides and pattern libraries They need to present information about color values, but this is such a fabulous opportunity to be creative You know perhaps we could design some kind of Interactive UI that helps people in different audiences get the information that they need This is the Royal Mail which is one of Britain's most recognizable brands I Managed to leave Brexit Island just after Christmas So I had to put on a French accent to get across the border in fact when I put on a French accent They basically asked me to leave Which was funny didn't mention Brexit in the introduction Yeah, honestly, don't get me started Think I've got myself started This is a page from the Royal Mail's brand book It's really effective because it brings color and iconography and typography together into this single page that gives us an immediate immediate impression of the brand You know, what's more iconic than a van I Color chips can be used in other kind of imaginative ways to present color information. You know, they don't have to be rectangular If you fill playful shapes with colors, you can better connect them with a brand This is the designer designer to be the frozen yogurt. You say yogurt or yogurt here Yogurt yogurt it is yogurt yogurt Yog and fruze they did exactly that what they did was that they don't just explain Their colors they tastefully display them Inside these silhouetted tubs of frozen yogurt And this conveys personality as well as color information, you know style guides can Make a bigger impression when they have personality. This is a page from from Bing's design guidelines and again it brings color and typography graphic styles and their logo together to describe how Bing's visual identity system is constructed So I think that Style guide should inspire people as well as to inform those who use them and I was keeping that in mind when I designed a series of what I call inspired guide design templates and These are style guide templates that I hope are as beautiful as they are Functional and I made six sets of these things And they all contain pages of design principles and colors and logos and typography and form elements and buttons All of the stuff that you would normally put into a pattern library or a style guide and CSS custom properties, I was going to drop some CSS in here at some point These now have really really excellent browser support and they're fabulous for using inside style guides because they make it so quick To make color changes Across different pages and make it so quick and simple and if you don't want to use node.js or NPM or any other complicated solutions to get in the way of a of making a style guide You can just make these things with a good dose of semantic HTML and some plain old CSS SVG possibly a little bit of native JavaScript Whatever that is You know, you should not need a framework people always say well, you know, can I use this thing with bootstrap? You shouldn't need a framework or any particular software or tool set to make a living style guide You know, what we should be doing is removing as many dependencies as we can And you know, if we want to improve the way in which we present color inside style guides There's plenty that we can do, you know for a start. We needn't confine color information Just to the color palette page in a style guide You know finding imaginative ways to display color across different pages and then show it in context With all the other parts of the design that could be really effective. This is a six different cover pages That I packed with color. Yeah, they make a really bold statement You know a visual hierarchy can be easier to understand than just labeling colors as primary or supporting So we should find creative ways to display that hierarchy, you know, you might use Panels of different sizes or you might arrange boxes on a modular grid and then fill that whole page with color You know, don't limit yourself to rectangular shapes We can use circles or we can use other shapes that are just made with CSS And if irregular shapes are part of our brand then we can fill SVG silhouettes with CSS and then we can wrap text around them using CSS shapes All really fun stuff You know for the style guides that I've designed I try to go beyond just documenting color and type styles And I want to describe what they mean visually for the brand This was a project that I did last year for Sunlife insurance in the UK And I described their colors and how to use them across a series of art directed pages, which Reflect the kind of lively personality of the Sun Life brand And there's information about hex and RGB values and SAS variables And when to use these colors for branding or interaction or messaging You know, it's all there, but it's in a format that I hope will appeal as much to creative as well as technical people You know, and I included information about color contrast accessibility because you know understanding Why certain combinations of color are inaccessible that can really reduce testing times You know, it can avoid a lot of arguments about color choices And then I try to find distinctive ways to present color that better reflects the brand So for Sun Life, I made these header graphics That really show that their brand personality has a fun side to it You know, I experimented with ways to communicate color hierarchy through different sizes And quantities of their circle device So alongside color Typography is probably going to be the most defining aspect of any design. So we're really fortunate Now to be able to use any number of Different fonts on the web. We're not limited to using fonts that are just installed on a person's device So you might imagine that with so many beautiful typefaces available Style guide designers would constantly be creating inspiring ways to present these types of typefaces You know, you'd be disappointed. This is adobe Again, even adobe they own typekit numerous typefaces, but they failed to make the most From the fabulous fonts in their own style guide You know, most pattern libraries offer documentation, but they don't offer Inspiration, you know, while information about type sizes is important. So is the context in which that type is used The treatment of type at different screen widths and the way that type elements interact with each other is vital to communicating a design You know, many style guides fail in demonstrating this even the best examples including this gel from Westpac It only shows a typeface's basic set of characters. It doesn't show the context Doesn't show any other elements. It doesn't show white space You know as it's a publication which is written With mostly written content I think it'd be more inspiring and informative to see examples of actual headings. This is from This is from the times of london Instead of this kind of greeking text You know people use this quick brown fox jumps over the lazy dog because it contains every letter in the english alphabet But we can use our imaginations to better demonstrate the characteristics of a typeface You know over the past few years i've been Rediscovering the work of accomplished art directors and graphic designers. You know, I studied fine art I didn't study graphic design. So, you know 30 40 years on this stuff's all still new to me You know learning about this work has convinced me that there's so much more that we can do To communicate our use of type within a style guide You know looking at inspiration from other medium including print We can learn ways to combine color and typography together to better communicate the spirit Of a brand and then how to use those assets So we'll go back to the the new york city Transit authority graphic standards manual, you know it immerses the reader in the details of helvetica more than any publication that i've Ever seen And it's showcasing not just the letters, but those all important often fascinating numerals And these so often get forgotten When we're making a style guide You know when we view characters up close We can get a much better feel for what gives them their personality And when we illustrate type we should also explain how those characteristics of Size and thickness of weight should then inform the design of other elements on a page including things like symbols or icons And understanding how to design typography so that it's legible and readable when we present it light on dark This is something that's often missing from most of the style guides that i've read as is How typeface is working combination with other icons and their symbols So this is a page from the new york city graphic standards Authority graphic standards manual and it just does this fabulous job Of demonstrating how helvetica's numerals and letters combined to create this design that just Feels at home on the new york metro And style guides should inspire designers by demonstrating other potential applications for typography This is the nasa graphic standard manual. It does just that you know it starts with their iconic logo And i really really enjoy how the designers have explained the background to the typefaces they've chosen You know i know from experience that including explanations like this can really help people to realize Um the importance of good type You know these things are not just commodities that come Installed with windows In nasa demonstrates how to use typography on signage vehicle livery You know and it's important to demonstrate how Typography can affect even these most kind of mundane items. These are paper forms from nasa But they could just easily be an email newsletter or a web form Yeah, these all benefit from better typographic design And in a style guide Typography pages can include examples of the cases and the weights primary and supporting typefaces information about white space It should demonstrate how different type treatments should vary when they're presented light on dark And as a design often includes supporting and primary typefaces We should devise ways to show the relationships between typefaces You know many contain really distinctive Characterful letters or numerals or symbols so we ought to make space in the style guide to showcase them You know rather than overlook those numbers We should design pages to show When and how and why someone should choose to use numerals for maybe a supporting typeface Rather than the primary one You know that can be fun. You know we should find ways To display them as that are as attractive as they are useful And to give people a better understanding of how to use them as well as breaking type down into component parts You know, it's really important to show the combinations of different type elements For example, you know large images with captions And we should provide this extra context by demonstrating a type Element alongside let's say a typographic scale and then provide information about using color at the same time You know, we can use this process of designing a style guide to kind of expand our repertoire of designs for Little elements that often get forgotten like block quotes and pull quotes And we can take the opportunity to bring designers and developers together around the style guide To talk about the creative possibilities without sacrificing let's say performance or responsiveness So when I was designing for wwf I had to think very very carefully about how to use the typefaces that they'd already chosen So I started off by making some simple kind of html type sheets And then I tested them across different devices So that I could understand what the minimum and the maximum sizes should be And then the style guide that I designed for wwf it includes these organisms It even includes full page templates So that it gives the fullest kind of impression of my typographic design And I took a similar approach when I was designing for sunlight. This is demonstrating how they're Vag-rounded typeface how that sort of personality gets conveyed through interactive uis And we've included the modular scale Included information about color And this sunlight style guide even includes big larger organisms, you know banners and common navigation elements Just to ensure that everything's presented as part of a consistent whole You know to be effective A style guide's typography shouldn't just be reduced to its component parts We should see typography as an ensemble of type elements that all play their part in a typographic design Finally, I want to talk about imagery Because graphic icons and graphic images are another important element in the design of a lot of digital products and websites So let's have a look at how many style guides routinely display this iconography The code for america style guide it presents these icons at different sizes, but The designers at clear left who we saw earlier They haven't explained how the design of these icons should adapt When they get reproduced at different sizes You know, they've also really missed a trick. I think an opportunity to demonstrate adaptability And responsiveness they could have, you know built this style guide for example using picture elements so that we could see What those icons would look like on different device widths I just I really wish the designers of the mapbox style guide had thought just a little bit harder About designing some kind of imaginative interface to make the most of these icons. I don't know. Do you have your binoculars? It's beautiful icons reproduced tiny tiny size And sadly at lassian style guide says absolutely nothing about how to create new icons That match their existing set This is an important omission You know meanwhile over at gov.uk. I've actually found those circles Which we were missing earlier, you know, it's really easy to poke fun. I know that it's really easy to poke fun Especially at gov.uk But it's really hard to get the design of a style guide right because Designers and developers need something different from them You know developers might need file names and css class attribute values Designers might need to learn how to create new icons With the same visual style as the existing ones You know satisfying both needs can be really tricky, but the challenge isn't any more difficult than the work that we all do every day You know, I'm convinced that we can do a lot better You know, you might feel more than a hint of nostalgia When you look through british rails corporate identity manual Mine arrived late and now I can only read it standing up British rail jokes don't go down well in Singapore I'd have the rolling in the aisles if we were in skunthorpe You know, it's visual identity this iconic visual identity Extends to the trains it extends to the uniforms of the people that used to run them very attractive dapper looking chap there You know the best style guides explain the why As well as the how and this is especially true when it comes to designing things like logo marks or symbols You know, I'm fascinated as someone that didn't study graphic design as to how these symbols are created You know understanding the thinking that goes into designing a symbol can help people appreciate how and then when to use variations of it You know, this matters now more than ever before I think because This symbol can be reproduced at any number of different screen sizes across this whole array of devices And it's especially important when we think about reproducing symbols against dark color backgrounds So color Icons and type they should all complement each other within a design And style guides should really demonstrate how to combine these elements to achieve The most effective result. You know, I really love The precision that's gone into designing this signage. Is it only me? Who thinks that this is like the best website button you've ever seen? You're knowing how an icon has been designed goes hand in hand with understanding how to use it and fully appreciating Proportions makes working an icon into a design at the right size and with the right Amount of white space around it much much easier. Of course, not every icon or symbol needs Precision I'm always amused when I I read that to make the skype cloud We can use circles any size and placement and shape but make sure it looks cloudish This You know for this style guide that I designed for Sun life I went beyond simply documenting the icons and tried to use those icons themselves to add personality to the style guide and With almost all of their style guide pages this icon page was, you know, thoughtfully Art directed I wanted to include the anatomy of an icon and how to design one with the correct proportions You know, actually I adjusted the proportions of the circles in the Sun life logo so that each one was like 75% Larger than the one before in the sunrise and then built The grid around that so he explains how I use those proportions To create a grid that then became the foundation for all these future icon designs And then I described how to use those same principles to create graphic illustrations so that every graphic illustration every graphic element has a relationship back to the proportions in the Sun life logo And explaining these processes clearly to future designers is really going to help to maintain standards and hopefully consistency Especially as the collection of these icons and illustrations grows And I think because it's always better to show something rather than tell I use those same kind of graphic illustrations right the way across the style guide to bring that to life So in all of the work that I do I try to use creative design to improve not only how something looks but also how effective it is And style guides should be much more than just guides to a library of patterns You know, they can inspire People to make better designs. They can teach people the importance of good design and why it's important to keep our standards high You know style guides also the perfect place where we can experiment if you've been aching To try out a new design or layout technique like css grid You can do that away from the normal constraints of browser support You know, and I want to stretch Expectations about what a style guide that's been developed with html and with css can look like You know, I want to I hope to inspire people to learn more about those technologies through the style code You know, it's also the perfect perfect place to document the history of a design these these stories often get lost Really easily in the fast paced environment of today's design and development You know, so instead of showing finished work in the case study Finish working as a case study in your portfolio Write about those thought processes show your designs evolution. This is really important to documenting the history of the web You know the best The best systems are based on a solid set of principles So it's really really important that style guide explains these. Well, I promise that I would mention Audi again They've done what many people haven't yet achieved and that's make this tool that's as practical for Designers as it is for developers, you know, they've really succeeded in letting the soul Of their brand shine through in the style guide. I'd like to think we can all learn a lot from that example Design principles are something that Shopify's Polaris describes incredibly well You know hats off to these guys. I think this Polaris is the best style guide. I've seen for the last couple of years It does a lot of things right You know, it starts with accessibility um, and Polaris makes a really good case for making usability for everyone and building inclusive Experiences part of its principles You know it's showing really what to do and what not to do um Not just documenting a set of guidelines, but showing graphic examples And I suppose because a design system is never finished Polaris also makes it Really easy for people to collaborate on its development You know, and why not bring those design principles off the screen and into a three-dimensional world these posters were designed by an intern at sales force And now they're everywhere Around a sales force organization to remind their people of their design principles every day You know, you might choose to break the model altogether You might combine all of these elements of your visual identity and patterns into a single sheet poster For your designers or developers or maybe even third party agencies that you work with to Hang up on their wall You know the possibilities are really endless So I hope that I've inspired you to think a little bit more creatively About the design of your own style guides and component and pattern libraries And also why creative design Can inspire and inform people better So thank you very very much for listening Unfortunately, we've got a really tiny schedule, so we are holding five questions