 Started because there's not very many other seats there Okay, can everybody hear me okay because the microphone seems to be a bit dodgy Okay, cool So this session is about visual design principles for people who aren't designers if you have done any kind of art Qualification that you probably will recognize these things But maybe you need a reminder and it's always good to be refreshed If you have never done any design before then this is really great If you're one of those people Where's many hats in your company and you have to kind of dip in to do some front-end work or you're a one-man band and you make You mostly site build sites and you want to kind of level up a bit and do a bit of theming So firstly I want to say that you already know this You can tell the difference between a good slide and a bad slide you You can instinctively know when something is a good design and when something is a bad design Even if you don't necessarily know the rules you can feel it in your gut our brain actually Moves us to things which we find beautiful So if you make a website that is beautiful, then it will keep people on your website for longer so today we are going to learn the rules like a pro and It's basically so that we can be more mindful about what our users are going to see and If it's we're conveying the information in a clear enough format We're going to look at four core principles There's lots of different design principles out there from depending on where you get them from but These are kind of like four of the basics which I was taught at school They're obviously not strict rules because they're principles but they Are There'll be enough to get you going a little bit further with your design work We're going to start with proximity And the purpose of proximity is to arrange content into a format that is easy to read at glance Drupal is really good at Making Drupal is really good at making information architecture really good, but what it doesn't do is And which your design is for is to separate things so that they are clearly divisible from one to the other If you have two pieces of information and lately they are too close together Then they might look like one piece of information So it's kind of like So it's kind of like a cutlery drawer as well if you have a cutlery drawer, which doesn't have a divider in it These list divider the drawer is messy and there's You when you open the drawer, you can't tell where the spoons and the forks and things are and it's harder for you to get the Tool out that you need quickly It's the same if you put the divider in and you have clear defined spaces between things Then it's a lot easier for you to grab the information that you want quickly so I now need to make some apologies and I double checked and Alex Burroughs isn't in here, which is good Because I needed to pick a website, which you've all probably seen That hasn't had hundreds of design hours spent into it and that probably could do with a bit of work He knows I'm doing this So like this It is true and all Drupal camp websites Quite historically are quite bad because the people that volunteer for Drupal have to do so much And they have to volunteer in so many different ways that when it comes to Doing things you might not pick up something that's your skill set So this talk is perfect for Alex and I'll give it to him later Let's look at the site so The first thing you see when you come to this site is a very large box that says March 3rd 2015 and it's at City first University London 17 I'm in the past and And I don't know what's happening, but I'm very excited that something is happening because it's massive and There's a reason as to why it's so big because historically Drupal camp London has forgotten to put the date on the front page, so At least they've got it right this time, but it's probably not the best idea to have it where it is so we're probably gonna address that and also It's filling quite a lot of that image and there's people there at this thing I don't know what it is, but I don't know it are there no Is there like nobody where that white box is and that's why it's that big So are they just trying to make the event look bigger than it actually is and I don't really know because it's blocking all of the important information from that photograph And the other thing when we scroll down we have scheduled buy a ticket and become a sponsor And then we look down to the second section and we've got tickets so why do we have buy a ticket and tickets so That's not keeping all of the things that are the same in one place So we're gonna change it a little bit And I'm just gonna do it really fast This is exactly how I code And it's gonna get messy before it gets better obviously and we're doing this retrospectively as well So if you make these design decisions whilst you're making the site You probably end up with something very different to what this is So we're gonna remove that middle button and we're going to There we go turn it into a h2 because we don't need buy a ticket and the tickets So that looks a little bit better because it's a little bit more uniform We don't have three buttons and then two buttons and we're kind of the proximity between The things that are different and the things that are the same are is greater So we're getting that it still looks ugly If we go up to the top we've moved the When and the where over to the logo and now actually we see the Drupal camp logo Because everything's over there in almost like a business card format. You kind of your eye jumps towards that White big white block. So we know that we're going to Drupal camp is in March and it's the City University of London But obviously we're not quite there yet. It's still pretty weird. And so let's add some repetition Repetition's purpose is to create familiarity and add visual interest You see a certain HTML like it's meant to be used You if you have a language that's quite simple then use it simply And I think Tim Berners-Lee said a language which is A language which uses fewer basic elements to achieve the same power is simpler So that's here what he said for HTML Pretty much works for design too a design that uses fewer elements can be very powerful So you don't have to add all of the CSS in the world to your site because you can that's something that then makes it quite cluttered and becomes quite Visually distracting and you don't actually get the information out of What you're looking at so that's I like to call that selectoritis where you just get a bit carried away and Use all the things and there's a talk about component-driven design after this in here and that would be a good step into that So to be repetitive it's not just it's like if you had a list and you had a bullet point and then a Square and then an arrow and then the number one and then a number two You'd kind of like well, that's not are they all the same list points? So that's you know, it's a very simple Example of repetition, but it works everything between Border styles and buttons and quarter actions making all of your court actions throughout your site the same and bringing in some some familiarity to your site So here we go We are going to make the buttons look similar and what we're going to do is actually remove the corners because The heading in the top corner is square and the buttons are rounded And actually if you scroll down the website even further the images of the speakers are in a circle So it's like the website kind of blobs as it goes down the page Warb and so here we go. It takes me a little bit longer students. So we're going to This is about four hours work whilst recording and having to redo it because it didn't press record. So it's not So it's not too much It's not too much work that we've done to the site of doing these four principles So it's a it's kind of like a good a Good way to polish something that you've already got doing it retrospectively So here we go So we've made the button square so that they match the business card type area at the top and We've changed the color so that we don't have that purple because the purple's not actually used anywhere else So let's be lazy with our colors and stick to a More concise palette We scroll down a bit. We've got we can see a bit more clearly that by turning that heading into the headings that look lower Down, we've got a little bit more uniformity in the site Then the next principle is alignment and the purpose of alignment to unify and organize Basically, we align every single element with the edge of another element Align all the things It's a lot like a messy bookcase if you have or a messy house if your house is messy if everything's kind of a little cluttered up and you quickly go along and you line everything up then Instantly you feel a little bit more calm a little bit more peaceful and it just kind of sits nicer with you So that's kind of what we want to do on our websites. We don't want to be like manically trying to search for information Grid systems help here. There's lots of different varieties of grid systems bootstrap CSS wizardry grids and then CSS has also bring in our brought out grid layout, which I think is pretty much Use usable in most browsers these days. It's pretty new, but it's cool and the thing to remember with alignment and CSS is that it's like playing Tetris You have to get all the shapes to line up in a solid row and then you're winning as soon as you start to get gaps in the places, then it all starts to kind of get jumped up and messy So the problem we've got now is that the buttons at the top aren't the same width as the bottom the body to take now Buttons, so that actually kind of adds visual disruption to us scanning the page So we're going to change that and we're going to kind of at the same time Look back at the things that we've already learned because you kind of have to add as you go Here we go again I should have put some like comedy music in Yeah, it's quite a lot in this one. We're going to Remove some things Spend this up quite a lot Okay, give me a little there we go. Okay, so we've done quite a lot We've made the buttons so they are all identical to each other Which gives a bit more clarity we've made the space between them a bit bigger and by taking out the background color We've got more it more visual space to make them look like they're more separate it's still not perfect and there's still more things we can do to make it better and But take it heading by take it it looks a bit floaty and and is it really necessary anymore so let's Go back and like make a few more small Iterations on this and see what we can do to hide the floatiness because the the bike having the bike now the bike tickets centered kind of Distracts and you don't have a strong enough alignment going down Okay, so by moving those two buttons which were quite Separate items to the top They they're still important and they're still something that when you come to the site You read straight down that left-hand side so you read what it is where it when it is where it is what's going to happen and then give them some money so you're You're hitting that like the core principles of what they want you to look at but we can now really clearly see Let me move that now we can really clearly see that the ticket prices and buttons so actually I think we're We've got a much more engaging site and by moving the menu over as well. It's not floating in the middle anymore and It becomes one menu instead of a main menu and then an add-on random user menu so the last principle we're going to look at is contrast and Contrast is to create interest and to catch the eye It's all about making things super important stand out so Pretty much. This is where you get to break the rules if you Fill that something is not exactly the same as something else then change it and make it look different a really good example Is sticky items on lists? You made it sticky and you've pushed it to the top of a list because it's important So you need to make it visually look important because it might not be very clear Especially if it's say an event listing that the ones at the top are the important promoted events and that they actually aren't the most recent events So by making them look a little bit different putting different icons on them or styling them out in a different way Add some contrast and obvious and simple solution is to Use color and reversing out the color and making quarter actions the opposite of things But you don't actually have to be That dramatic when you're creating contrast and definitely only do it when it actually really matters Otherwise you then end up back to where you started with a site that's crazy all over the place So here we go So I'm going to remove that heading because it's still quite floaty. It doesn't really do anything and make the The titles bigger and I think if I would have spent more time doing this I probably would have Re-engineered that whole button. So the content so the weekend ticket and the price they were inside that button But for trying to get some quick wins in this is good enough, okay? so if we take a look then we've added a Background color to the video so that it doesn't stop right at the end And that then makes that we've got a nice strong border going across for our ticket section So that makes the ticket stand out really more. They're more important. So they need to be a little bit more bold making the Headings a little bit larger. So it's quite clear to see that and also I've broken the grid a little bit with making the logo bigger and moving it over I've still kept it within a grid, but not The dimensions that it was and that means that the logo stands out a little bit more and it's a little bit more a Little bit more eye-catching. So if we compare it to the original On our flick back and forth It's just a little bit more polished a little bit more considered and a little bit easier to read we've got Less information in the DOM structure, but we can see more as we look at what we're doing. So That's quite useful. We've made things simpler Okay So let's recap we've got proximity and proximity is to embrace the white space and photographs and To group related elements together logically and with hierarchy. Cool We've got repetition repetition are things that are the same should look the same list buttons headings elements on your page the talks in here next will help with that and Limit your styles and be consistent. So almost be lazy when it comes to repetition Alignment not just about the text and aligning things left and right We're visually aligning and having solid edges to your design to make it really stand out contrast Make elements stand out and get noticed It's not just about the color, but it's about getting things right By making the few odd bits eye-catching So always remember that contrast repetition Alignment and proximity will make your websites look better And I didn't come up with that somebody asked it But it's it's really easy to remember and it just when you're making a website of some kind It's quite easy to think does this line up right? Am I using a new style? Should I use an existing one? Is everything? far enough a way that it becomes acceptable everybody's taken a photograph big word crap right now And Yeah, if you would like to read more into this this basically comes from the book called design for non-designers so I'm responsible for non-designers by Robin Williams not the comedian but a woman from America and Yeah Okay, yeah, so a Good way of doing that would be not using every element of the grid So really narrowing it down to using a few Sections of your grid because it's so wide and they're and sticking to those but then breaking it occasionally Which is where the contrast comes in And then using full width background colors is a really good way of breaking it up Rounded quarters is a bit of a weird one like it's not the 90s anymore We don't need we don't really need those But Visual elements like putting in extra photographs because the content of a photograph is very fluid very natural and that will help break up things quite well, and there's actually a good example of a This is actually a really good photograph and it's very clever because everybody's facing Towards that and it's a really good print tip if you in books if you've got a double-page spread Then everybody on the left hand page would be looking into the spine and everybody on the right hand page We'll be looking into the spine and it's Subcontinently just dragging your eye to the left-hand side of the page. So little twins like that are quite clever And maybe that's another talk Yeah, so just think about contrast there Anyone else hi No, it's fine Um start with your information start with your content because then you can get your information Architecture right that's obviously most important and then start by going very Basically through you could probably work the other round and start with contrast So to make sure your headings are definitely a lot bigger and change the change the font from headings to body text and things but To make things look quite simple is proximity the gaps between and breaking up the content So it's quite clear and easy to read between that That's really what gets a good simple simplicity. Yeah, the proximity I would say there Hello So I work at George box and so UK agency and we don't necessarily don't always use No, we don't ever use any contraband things, but I think if you start with a good I think what's the cost Remember the name there is there's a quite there are quite a few good ones But I think when you're just flicking through if you try and see does this have Does it have crap and then and then you'll be able to make that judge call But just by looking at the screenshot, and then you can also obviously quickly go in and go right Okay, this is a really good design, but maybe it just needs a little bit more space Maybe the contrast needs to be a little bit bigger So they that's not really too much time. It's not going to eat too much into your design budget or lack of design budget Hello Yeah Yeah Yeah I Don't really want to say that but I think that's right like so using flexbox and things like that really help CSS grids is also quite useful at that So flexbox is very good to go all the longest thing in this row is this big will make all the other things that set that size And that keeps that alignment looking lovely. It keeps the space between things looking great And and that's actually I think most front-end designers have been waiting for something like flexbox to come along for some time and And that really solves quite a lot of problems because otherwise you'd have to use things like match height J s to get those things right and also Because we have the same problem at works. We've got a plate a Client that does a lot of publications and some of their articles are very very long and then other than other Them's like war on Syria and that doesn't even fill a full line and you're like So much going on and sometimes you have to say is this 12 line heading actually What this content is about and get them to edit their words and to have proper web manage like editing management to To kind of find the middle ground there War in Syria hello Yes, no, it's still works the same way so I don't have that to Minimize it, but it still works the same way you still have to kind of consider things When they become smaller But then does anybody have ever get like HTML emails where you've got it comes in lots of boxes There's an image a title and some text and you start throwing down and you get halfway through and you're like Oh that text looks good and you have to click the image To get read further and you've clicked the wrong image because you've forgotten the order of what whether it's Title image text text title image and then you're like, oh, I don't know which one's which and I had it happen the other day with a transport for London Email and it's just making that proximity the gaps between things Really quite clear when you've got narrow screens So if you if on a narrow screen obviously most things are normally full width of the screen So having a big gap between things but not enough not so big that you obviously you've got white space That you can't see there's anything below makes it quite a big difference That kind of answers your question if you want to talk more about like responsiveness we can go into that. It's not quite It depends really um, I normally will start mobile and work up. That's kind of bit of a Current trend, but sometimes we've got sites at work where we've had to retrospectively add mobile in and then We've had to go back to the other way And it's normally a case of find a breakpoint and make everything below that hundred percent wide and flow down below each other Hello That depends. I'll say that's not normally my call. It normally depends on the designer and the Normally the client also help has a say in that because maybe they've got quite a cutting edge site And they've got younger users. So they've got bigger monitors or maybe Yeah Yeah, hopefully you're making a responsive site. So that actually doesn't make too much difference when it gets to different sizes So it's basically say if I get to 1,400 pixels wide then we'll just have white space at the side But anything below that would should be nicely responsive But we're doing sites now where they just seem to get wider and wider and they can go on for eternity It depends. It depends. It's true. It depends on really what On what the clients is and what kind of site you've got you wouldn't want that for a heavy information site because obviously then your reading line Would be too long So, yeah, hello again. That's all right um, I Haven't used bootstrap very much actually at Torchbox. We either decide to find a new one or Don't use a grid and you don't have to use a grid It's just a nice tool to be able to if you if you've got a solid design or a designer That's capable of understanding how a grid works without needing one, then you don't necessarily need it Actually really like the CSS wizardry Grids Which is Harry Roberts his thing is quite old. Yeah, I really like that It's a really nice lightweight grid and it's not too over complicated I think if you're quite new to grid systems and stuff you can look at bootstrap and be like There's so much stuff and get bogged down in it But when you just focus on a grid system, then it's nice to have just a grid system Cool, is there anybody out there is hello That's a different story That is a different story. Um, if you start going into colors and fonts and things then There there's other like rules that you can follow and other things they kind of cover it in that book But basically don't have too many Yeah You