 So we've got 30 minute talk of Tammy and I'm not gonna do any introduction for Tammy And instead I'm going to hijack that and say as a co-organiser of the just approved word camp Brighton with Tammy I just like to say keep your eyes peeled and Follow us on the the word camp Brighton website and please do come this summer in Brighton and make our first word camp a success And without further ado, I'll pass you over to Tammy Thank you Everything we make has a design pattern underneath it can be broken down and distilled to patterns And when you think in terms of patterns, well the design process starts to kind of make sense There's lots of different words that are used and you hear them in every article from atomic design to components To pattern libraries to style guys. There's just so many terms. It feels like there's a new term for the same thing coming out every day But what it is it's actually about looking at common elements and distilling down a design into smaller manageable parts and That's what I'm going to be talking about today The first little quick introduction about myself Actually look at automatic This is a company behind WordPress comms on lots of other different things and what I do today today Is I actually focus on UX within the theme team and So thinking about things like design patterns is something really really important to me And I love watching users and finding out how we interact with the designs And we all as humans We are really the ultimate pattern Recognizing machines above anything we have this ability in us to recognize patterns and it's natural We don't have to learn that we're born with that ability and we quantify the world by patterns Because it's comforting to us. I don't know about you, but the world can be really really confusing at times And patterns they make things understandable our world is made of patterns From the smallest flower To the largest architecture nature has patterns that we then follow in creating our own world So at first we identified the patterns of wild animals and we use this knowledge to hunt and to also avoid being hunted by animals as well And then later we identified the patterns of the moon and seasons and provided us with the knowledge then by knowing that To be able to farm and do agriculture and our long-term memory Contains descriptions of many many patterns. It's not something we're conscious of but it's a fact and I find that incredible When we see or hear something We then compare it with that So I'd like to share a quote that I feel really Brings home the importance of how powerful we are and this this kind of skill that we have in us that we don't always recognize You are a creative genius Your creative genius is so Accomplished that it appears to you and others as effortless Yet it bar out strips the most valid efforts of today's fastest super computers And all you have to do to invoke it is open your eyes So that quote was by Donald Hoffman and I don't know about you But for me that brings home how powerful what we have up here is and how we should be tapping into that There's a theory that I think is relevant when we're trying to think about design patterns And that's the recognition by components theory by someone called Irving Biedermann Now he used it to explain object recognition So what it is is you separate objects into 3d shapes, which are also called deans and from that You can then recognize to build different objects so you can see you can build a telephone We can build a lamp, but it's the same shapes If anyone here went to art school, you probably remember when you learn to kind of draw You break a shape down You break an object down into shapes, and that's how you learn to recognize those particularly from life drawing And using this theory we can then build objects visually and recognize them So how does that apply to the design work we do? We have this natural ability How do we kind of tap into that and maximize that when we're designing? Well design patterns have actually been around for a long long time way before we were doing this digital design thing And Christopher Alexander originated the architectural concept of patterns And this was a way to describe best practices, good design and kind of capture the experience to reuse a way to formalize it and He kind of had this this pretty grand notion of a pattern language as a system Which the whole was greater than the past just like any language, but it would be about design and He would use it as a way of describing good design practices within a field of expertise And this is something that's that's a kind of a pillar of design and It's something I think sometimes we forget when we're starting to do digital design So as I said at the beginning in simplest terms it means breaking down to the smallest design elements and then building up And yet there are variations and all those kind of buzzwords and all those kind of terms So whenever I'm faced with quite a big idea, and then I find this is quite a big idea I try and relate it to something that I understand and for me in terms of design patterns Lego Because Lego makes sense to me when I think of it in terms of this because you have the bricks The components are built from bricks the patterns are built from bricks a Link that goes to others then forms a navigation block So walls to a house with Lego kind of makes sense, and you're looking at the interface patterns And the pattern library is a collection of patterns and it can contain a spec for each pattern But it's not just about each pattern in isolation It's about how it's connects with each other and each pattern then builds up to create the whole You can see this a little bit like Lego kits if you're like me and trying to relate it to something to understand And if we begin to use design patterns, how does this actually change our process? well The current work process of a lot of designers. I would generalize to possibly be a little bit like this Maybe some more to and froing maybe some even more complication It's very very hard to get from the start. It's varied. It's probably a different step each time. There's no Process it doesn't feel organized. There's no shortcuts. You're not learning. It's hard to try and get in It's a hard process and The ideal process would have less steps and be simple to follow for anyone So you'd be able to start kind of learning this process And then people be able to understand the designs that you're creating as well Which is really really important to us to get someone to buy in and to a design. They have to understand it so Entire sites if we bring it back kind of from the psychological from kind of design into The digital world and onto the web and what we create Entire sites have patterns Business sites have patterns So it's a restaurant. There's a pattern for them. If as I'm saying this You're probably thinking of getting a visual, you know a musician blog There's a visual that comes from these things a photography blog and Looking at these patterns and looking at the way these designs are formed Patent analysis is something we should be really doing to look at our place in the market before we actually create something Because there are these common patterns and we have this visualization when you say that I'd like to look at a couple Because by starting to see designs in terms of patterns you start to see the connections and you start to see these interaction patterns Reliable patterns that have worked over and over again navigation selection filtering sorting message messaging notifications and So it's so many different patterns So this is the BBC website and To one side you can see a complete view and then I'm kind of more zoomed out one. I Find when you zoom out you start to see the really obvious patterns like this This has a really strong visual hierarchy And if you're looking I would say for an easy example of a content-heavy site that works really really well This is it the BBC website and Then the Boston Globe site for example This is also a great example of how patterns that exist in the print world can then translate into the digital world a Newspaper it's a tried and tested pattern Do you understand you understand how to use it and engage with it because it's kind of part of a visual DNA now and Zoomed in you can then see the refinement of the design And part of starting to think in patterns is beginning to recognize them So how does that actually work in practice? Well, you can start with you starting to think in patterns by starting with research. I would If you do anything just start everything should start with research before you do anything before you design anything Start with some research What I do initially whenever I'm going to create a design is I look at the market I look at the type of thing I'm going to create I Focus on that I gather I cause the magpie stage because you know a magpies grab every shiny object They possibly can that's what I'm doing. I'm trying to get all the input I don't care where it comes from. It could be the material world. It could be digital It could be a bit of music that makes me think it's all those kind of patterns in even patterns of music that patterns I'm trying to get that input to then create So let's take an example Imagine I'm going to create a food blog So I look at common food blogs. What are the commonalities? What are the things that make where what do I think of? I see food blog. What are there in the top food blogs? What are there in the ones that I can see around me and I can do research on where does navigation go? What are the common patterns and from this I then look at why they are common so Some of them might have a lot of sense. They might make sense for common and some of them They might be because they were just recently in an article of trends and that's not what you should be looking at Those are kind of UI red herrings. Well, you want to be focusing on is do they really make sense for that type? Does that pattern is that pattern brings something to the users of that? And by distilling these patterns down you can further do prototyping and Also user testing can confirm your hunches and I'd strongly suggest you do this as a designer user testing and confirming your hunches even It's painful sometimes showing stuff at an early stage, but we need to do that. We cannot be a judge of our own work We have to get that input So it's worth mentioning I tend to kind of remove all design from patterns at least in analysis at the start. I Kind of call this is just a me term block fuse So what I'm doing is I'm just looking purely at the structure and then I'm boiling it down and refining it It's a little bit like looking at an out-of-focus picture and then really really bringing it in to focus and patterns are easier to see initially in blocks So going back to the food blog screenshots There are two distinctive patterns That I found I did a lot of research looked at a lot of sites So this featured image of a grid and then there's a traditional in many ways to column blog layout and this is the two-column blog layout reduced to blocks So for me, this is super helpful because I can see the pattern straight off right you can see where this is when you take away the visuals you take away all that kind of Visual fluff from the picture and focus purely on the structure you start to see it it's quite a strong structure and I found this in a lot of blogs was used there was a similar strong structure and Then this is the grid layout and Only by doing that magpie phase Do this grid layout come to kind of be something that would be for food blogs I would actually have thought this would be more common for something like a portfolio blog or photographers Turns out it's actually really common for food which kind of makes sense if I actually thought about it because People take pictures of food and there's a lot of gorgeous food photography We've got dinner coming up. So it's the kind of thing that makes you super hungry and you look at I Found this actually was a really really common pattern for food blogs and I not have guessed that without doing the research and You can also analyze this patterns further I kind of take a next stage what a group similar elements with similar colors So I know where what our navigation on the page maybe they're orange or maybe they're green in this sense And then I know where the footers are that's orange and then the hero image That's yellow and I do this so I then bring out the visual elements and I'm still not looking at the visual fluff I'm now I'm labeling it and categorizing it and then you can start to drill down and see the details and After this I start looking at the design But only after I've done this because I really want to get that pure analysis that kind of pure patterns so It thinking in patterns makes sense Which I hope I've shown it does that we do that naturally and They're doing pattern analysis. I've hope I've also shown that that that really makes sense for us. I Don't know if you're asking but perhaps you're asking Why would you actually go that next step and have a pattern library and it kind of is like a three-step? You know, why would you have that pattern library? Well? Let's first of all take a look at what pattern libraries are and then hopefully I'm going to show you why when you're talking about design patterns You really should be using pattern library So I like Lego, so I'll go back to Lego at any time. So let's go back to Lego You also have sets in Lego, right? For instance, you have a pirate world set. Well, that can make a pirate ship But that can also make an entire fleet can make a city for the pirates The entire pirate world you can make lots of different things out of that pirate set That's your pattern library I'd like to just clear something up when I'm talking about pattern libraries because this kind of gets a bit muddy Sometimes when people are talking about it a pattern library is not a design library design libraries contain typography grids color and code design pattern libraries or design patterns are not that It's purely focused on interaction and you act patterns Without what I call in my terms the visual fluff without that kind of extra stuff it can actually be part of the design library just like style guides and Generally, you would include it to be that but what I'm talking about here today And what I'm really trying to focus on and try and convince you to start using if you're not is the pure structure So why would you do it? Well? Let's think a few reasons first of all this to me is Above all the easiest for me to say to you and that speed we all are time pure poor We all need To kind of get better processes Quite simply when you use a pattern library, it's faster. You don't reinvent the wheel You're grabbing existing things pre-built and then using them as a solid foundation And there's a heck of a lot of speed increase in that You're going back to the Lego idea Would you really build every brick each time if you were going to build like lots of different houses? Would you carefully produce, you know do the walls and then? Break it down to parts. That's how you do it. You'd have a process that you do and Then iteration Iteration is something we don't always get a chance to do a pattern library also Allows you to build on the good work you've done and we don't get that enough. I don't think in digital work sometimes We don't get to optimize what we create and To not have to start from that dreaded zero every time I find is priceless It's a chance to refine To rework and stand on the shoulders of our previous work And along with that comes sharing you get to share the code amongst each other as if you're working in a team But you also get to maybe share the code because we're an open source community with each other and That's really useful as well and then consistency Consistency is really really important if you have a team Then you then you need to ensure that your code base is consistent. That's a priority But you also need to make sure that your design is consistent as well You can for example in terms of code have class names uniform and have a consistent coding style throughout your projects And you should be doing that But in terms of design not having like hundreds of different versions of red Have one correct version that you're using keep the design to the minimum and lean approach to doing it So it's focus If you're working in things perhaps for a network Maybe you want to have consistent UI elements for the same things across that network And you can do that by all using a design Library sales force as you use a pan library and the notion of a single source of truth I really feel sums it up You can filter this through to all platforms you use as well The pattern library is a one place to go The shining light The way everyone can understand and can be assured on that point. I think it sums it up perfectly for me It's that kind of uniting and you can be sure to say on brand and it keeps that unified experience for everybody I'm used to have understanding that's a great reason to do it Because we're designed we sometimes have a bit of a hurdle for people to understand what we're creating and get on board with our design And it also makes sure that everybody is speaking the same language no matter Whether they whatever kind of stakeholder they are they're all speaking the same language Maybe they're a developer maybe a designer Whatever they're all speaking they understand it and it's intelligent intelligible to them This one place allows that and it crosses the bridge between those different roles And also in terms of understanding the pattern library should also be easy to understand And usually it can be in a browsable form I would strongly suggest it should be in a browsable form because you need to be able to dip in and get the information If you've hiding stuff in a kind of big bucket of a pattern library, that's not a great approach so pattern libraries contain the foundations of What you're going to create and by recognizing patterns You are knowing the foundations of design And once you do that You can build anything Just like the deans the UI pans of our shapes Any design project can easily go out of control. Who's who's had a design project get out of control before? Like 50 different shades of blue loads of different things it happens it happens so easily you just put something in and it kind of maybe someone put something in sketch Put something in and then when you're coding put something in CSS it very very easily can get out of Control and one of the nice side effects of working with pattern libraries means you can fight that you start consciously Designing you're aware of the value of everything you're adding because you're putting it into that library You're aware of that And you're conscious of every single pixel every single line And then when you're in code every single CSS line and every single little bit that you put in you see the worth as it goes into your library as you check it in and this is incredibly powerful and Helps you create a lean approach to working and conscious designing means More optimal designing you're designing the best you can do because you are going for a process that makes sense to you as a human and You're being conscious about everything you're doing So you might be thinking and sometimes we've a lot of people do in fact mark Barton did when you're talking about This isn't this or a little bit mechanical Design is something you feel right and I'm talking about process. What about creativity? All this structure or the planning Maybe that doesn't feel that it feels right to us The thing is mark actually has a valid point What I'm actually suggesting you focus on is not a design manufacturing process I want you to keep the heart in everything that you create I want you to create the best designs that you do Because patterns actually exist and mark goes on this article to recognize and acknowledge that When you take the design away and you focus on the patterns You still have that process But you get all the benefits of the library and none of the repeated design issues And if you find yourself Blindly picking from the library or in this terms creating the same cupcakes over and over You're not being conscious about what you're designing. You're not being the best design. You can be any way I'd like to share an esauce fable. I love stories And this fable is of the fox and the cat So the fox Had lots of lots of different ways to escape and was pretty much bragging about this to the cat The cat knew one escape route the hunter came and The cat escaped straight off Because I had one escape route the fox was kind of going Deciding which way it went and got killed by the hunter not of a happy story perhaps. However It does have a moral The moral is it's better one safe way than a hundred on which you cannot reckon Because you cannot create in a paradox of choice humans just we do not work that way That's not the way our brain works. If we're given an open totally open playing field That doesn't help our creativity that really stifles it What this is about is knowing the notes of our music Understanding the hues of pain and having your tools laid out in front of you Because as I said before for far too long we started from that zero when we create on the web And part of leaving the door open for creativity Should come and see this is changeable As you do analysis, maybe other patterns need to come in and creating a pattern library is half the story You could argue that it's less than half It needs to be open alive and constantly tended to not just left to go stale And by seeing things in patterns we're starting to think of the future Components it's a word we keep on hearing it's becoming the norm in terms of breaking things down on the web boiling things down And dealing with an entire starter thing or framework Starts not to make much sense with what we're starting to create these small reusable lean Perfectly crafted components. That's the way things are heading And when it comes to themes Seems are close to my heart We tend to create a lot frequently, right? Who here makes themes? Do you make the same thing over and over again quite a lot of the time? Yeah? A theme shop usually has a relatively high turnover of work And there are common patterns these patterns that we use time and time again in themes And as a result of having one library that we use for all themes and generate sheet based form That starts to make a lot more sense And it becomes the central place for maybe your shop or maybe what you're creating So I'll just be obvious about it. I'm going to point out the framework elephant in the room when I'm talking about this Because that could be the next kind of logical step However Why would you not use a framework and I'm going to be super general in saying this because I'm perfectly aware That this is not the case for every framework or how you use it But a framework in general terms is everything It's not about picking from a library. It's about slightly crude term, but shoving the entire elephant into whatever shape you want to put it in I don't like squished elephants um so Nobody likes to do that A pattern library is similar to a well-stocked workshop You have as I said all the tools and materials are laid out to create an amazing piece To do your best work to do that conscious designing Use exactly what you need and nothing more no bloat no waste no time lost at automatic We are working on this now in the shape of our theme components And as of yesterday, we just launched a new version of this using json files and generation I'm super excited about this and I really hope you check it out This has no design. It's a really different take, but it's still at its essence Got that pattern library And currently this has types of themes and then generates those and over time This is going to go beyond those simplistic themes format And the next goes to have a generator that you can use checkboxes to basically roll your own and pick those components And then we will also have lots of different components that you can do that for It's based on underscore still, but it's a componentised version of underscores So it's kind of underscores exploded and then stuck back together using this generator So I'd really encourage you to check it out. We're just starting with this But our solution is going to be open source and I hope you can join us in the journey of this Pattern libraries. I hope I've shown you make sense and design patterns make sense for us to start using Because we think in terms of patterns naturally And learning to recognize this It improves our ability. It makes us do that conscious designing which means we create the best designs we can We create targeted and efficient Experiences Pan analysis and research should be our cornerstones of whatever we do Pattern libraries also should be at the heart of the work we do. They don't limit creativity They enable you to have more time energy and more enthusiasm to go beyond each time you create a new thing And designing this way makes sense Because we're human So thank you very much My slides are going to be up. I actually have at the end of my slide deck some hopefully useful links And I think I've got some time for some questions Thank you very much. Tammy. That was really good within 30 second window of the 30 minutes, so A pro um, so if you have any questions, can I see some hands? Any hands? We have a um We've got a hand over there Um, thanks. I mean that was great and really I'm here Do I go? Yeah I promised Elliot outside. I'd ask a question And I am Really excited about the underscores and the last project I built was that and it's it's amazing Just have something that you can run with out of the box And the way it's done in a way that it's not trying to be a theme that you make a child version of that You just go with that. So very excited to check out the components um, I was just at a previous talk um, and uh, I can't remember the guy's name He put together project Herbert and it was I think it was taking learnings from frameworks like larval and trying to implement More conventions or kind of larval style conventions into wordpress And I just wondering if you had an opinion on those type of kind of patterns that are used and other things I don't know And that's I would love to discover that. Um, so if you want to pass me any links to discover that that would be great um I I don't know what larval patterns are in particular. Is there any synopsis you could pass on to that? Yeah, I think my understanding was from working with myself was they had looked at what ruby and rails had done At what sorry ruby on rails Okay, yeah, so I think they were kind of taking it is that still design patterns though Was that code patterns because that's a different thing it was yes, it was more Code, okay. Yeah, so when I say design patterns, I'm thinking of uh object-oriented Which I know we're not discussing I'm more focused on the the front end Um, I'm all for coding consistency because it gives a better user experience But I will firmly be sitting more in the design user experience side But I'm all for code consistency because it means that everybody's having a lean approach Great, great. Thank you. Thanks gerald for that any other questions I've got a question at the front row here Great talk really enjoyed it. So besides the theme components What would you recommend as far as tools go for somebody who's not a designer to get started? In what Design pattern creating a pattern library. So hopefully I've got some useful links at the end. Um, I would suggest that I would also so I tools like Any kind of bookmarking or any kind of way you can get images is great Um, I use sketch to actually pull my visuals out So something like that so you can actually start doing if you're trying to start Learning about patterns some of the great ways just take like a screenshot of a website Put it into something like sketch or whatever is your choice of your And then draw the blocks over it and you'll start to see these patterns regards to tools there's also um some links, uh, there's Lots of different approaches to it. Um, I don't want to kind of read off all my links because that's um I can actually flick through that might be useful So pan lab.io That has lots of resources on there rather than kind of just reeling them off at you I'm all for everyone discovering their own journey of it as well, but definitely that block Patterns would be I'd start to do that if you want to start seeing patterns and recognize them then by doing that I'd I'd suggest checking out components. I know you said besides it Because I would love people to fork that and do their own thing with it eventually as well Um, so yeah Thank you any more Question I was just behind actually just on oh Hi, it's just a comment actually following on from, um, uh, the gentleman there I've used a website called wi-fi before and basically um, so what was that wi-fi? Uh, essentially whatever website you want it immediately takes a wi-frame of that site You can automatically see the patterns there. So is that like a browser extension? Yeah, it's browser extension as well So, um, check it out. It's very useful. You should tweet that out with like the w London tag because I'd like to see that and if anyone else has got anything else to pass on We've got time to do that as well. So, um, I'm all for like sharing information between each other Sure And Well, we see if there's any other hands. I've got a quick question as well. Um, that's what I was a tie jacket I'm not sure you're allowed The underscores components looked really good. Um, could you give an example of a component? Or I've I missed the point of the components. Uh, so components. Yeah, um Navigation navigation. Um, we've so we've done navigation the social menu Uh, so in terms of underscores, we the types have very specific components to them So we have blog magazines are blogs kind of but we have a like one page blog or traditional blog, which is like two columns Um, and then we have magazine for example or portfolio has the grid So component would be the grid portfolio in general terms a component tries to be the smallest design element Um, so it'd be like the grid of the pictures. Okay, fantastic. Thank you. And there was a I saw a hand Go up here. Yes, if we could get a microphone there Just want to make sure I understand. So would you say like wireframes are a little bit too detailed to be patterns or are actually Are they so A wireframe still is a pattern Okay It's it's you're showing the design pattern In a wireframe. If you're on about when should you show things? I'm trying to understand Why you would why do you think it's not a design pattern? That's probably a better approach to this No, I I don't think or not think Okay, just trying to understand myself because like when I saw the patterns that you showed So my wireframes are a bit more detailed So I was wondering if if already putting any context inside the blocks If you want to do pattern analysis, so for talking over you, I couldn't I can't quite hear people. It's awful If you want to do pattern analysis, I always suggest you pair a back from any detail at all But if you're trying to start to show the design patterns to clients and get them on board and trying to get that process Show them a block views probably not going to be very useful for you at that stage Showing a wireframe. Um, I tend to do super undetailed Because a wireframe is a very broad word Um, and then adding the detail in um as I iterate on I don't do freelance anymore But that was always my approach when I freelanced A wireframe still has a pattern in it. The pattern's under there. It's just with the design fluff for a me word On top of it. So it's still a design pattern everything a full site. It is a design pattern It's just about if you are trying to Recognize those removing that helps you with that if particularly if you're doing user research Does that clarify at all? Yeah, absolutely. I just wanted to know that actually you even strip it down even more to start with Yeah And a final question anyone Okay, doki. I'm not seeing any hands. So um big round of applause for tammy. Thank you very much. So very good