 So this is on basic design principles for developers so sort of enabling developers to do a bit more design or be a bit more Adventurous About me I am I studied my name. Sorry. My name is Ricky I studied graphic design and I've been got a job as a web designer in 2007 and then I've Learn front-end dev and PHP just sort of on the job and and so now I sort of consider myself a front-end developer more than a designer I don't really design anymore And I've been a Drupal user since 2009. I have one Drupal module up proud of that So I just wanted to know a bit about you how many front-end developers do we have in the room? Yep, okay, and back-end developers Okay, cool Any content editors or just non developer people? Yeah, cool. Good mix. All right So why learn about design Essentially we want to be able to communicate better with designers and to have a smoother sort of working relationship together As well as being able to educate them about some of the responsive pitfalls that if anyone in words in the last talk Milly's talk you would have heard about them and Then sometimes you you'll quite often be handed in complete designs by Designers whether their budgets run out or they just haven't considered all of the pages Or the features you're doing. There's maybe a new feature to put into a site So in in that case you should be able to ideally be able to do some of it yourself based on the other designs that you've got and then Just I hopefully save a bit of time have a have a go yourself. Yeah So the start of it is typography I think typography is the most important part of web design All websites are type essentially. It's all information So optimizing that type and making it really readable and really accessible to people is a big part of design Fonts we've all got great web fonts to use now Ideally you can just follow Existing branding when you when you're coming up with these things you shouldn't need to choose new fonts from scratch You might be finding a web font that matches a print font or something like that. So just and Then just seeing which fonts you should use in your site. So here I've got the different types of fonts We've got so sans serif fonts are generally modern clean fonts Always good for body copy because they're really good at a small size Serif fonts are sort of a more classic look and they're really good for headings They can be a bit harder to read at small sizes But you could if your body copy was like 16 pixels or up you could use a serif font Handwritten fonts are like really decorative and Should just be used for headings really and in certain use cases same with script fonts that they're much harder to read at small sizes And then monospace fonts, which is just equal character width. It's very tacky font Easy to read for developers because we're used to looking at them Shouldn't use more than three fonts in in a site or in a design This first blue example here is just two fonts and that's probably the easiest just have two different fonts You can you can do three fonts in this case I think it's really good to have three fonts when there's like you've got a serif font for your body copy you've got a Decorative font for your headings and then you could use a sans serif for smaller fonts like a meta Sort of information like dates and stuff or or UI labels Sans serif fonts are really good for them So that's a good example of having three different fonts in us in a site Star signs for fonts and you just it's hard to do It's really hard to do even for a really experienced designers to make four different fonts look good in the site So it's you just don't need to worry about it just avoid doing it You Can do a lot with the weights and and sizes of different fonts rather than needing a different font family altogether You can just create that same hierarchy and that differentiation through higher through font sizes and weights So you can see how I've just got four different font sizes and two different weights So it's not hard to do Some things that designers to sort of design a vocabulary letting equals line height to To them and us so it's sort of again the communication between you so you understand what each other are saying Kearning is the same thing as letter spacing for us type setting this stuff is is a big part of what a traditional print designer Spends a lot of their time on it's it's very important to them And it's not necessarily as applicable on the web, but there are some cases where it's relevant Orphans are as it says a single word on its own line at the end of a sentence or paragraph so paragraph in there being the orphan and That's yeah, so that that one's a really hard one to control on a responsive website, but places where it might be worth Focusing on that is in like a positioning statement or One sort of thing that you do have a bit more control over and it's less likely to change And you can at least make it type set it well for the major break points of of a design The last one's really for content editors. It's just that people skim So use your heading weights that you've got all set up and and break break up your paragraphs So it's really easy to read So last one is CPL which is characters per line and it's sort of there's a there's an ideal number of characters or words for each sort of the width of column of your text and it really helps with readability So you can see this first example. It's too short. It's Disjointed to read and it's just sort of just chunky a bit and then this other one is really too long So by the time they get to the end of that line there I has to go all the way back to the beginning and They'll quite often lose the line that they were on what so what was the next line by the time they get back So that's a so there's just sort of a middle point in between those two is what you what you're aiming for and font size it relates to CPL as well so you can see this Second line here if that was a big font size like I've got up the top it would be fine But it's just that it's so small and it's such a long line. It's hard to read These guys personified.com Four slash typography. That's a really great calculator for this so you can either just put in The column width that you that you've got and it'll tell you what font size To use to have that optimal sort of size or you can just put in the font size And it'll tell you what's a good column width to use And it also goes into other heading levels as well So you can have your base body size and then using the golden ratio It'll tell you what a good heading sizes as well to use so you don't need to make it up. It's all online Space and proximity refers to White space vertical rhythm and the proximity of elements so it's all sort of relationships between things White space isn't necessarily white. It's just empty space. So it's it's a term designers use And it can be confusing to people they sort of think it's You you say you want a really white lots of white space and then someone will think that you're just wanting them to have a really white website It's not the same thing It's used to break up the site into digestible chunks So it's sort of a really good example is your Your main column of text from your side column and you can have white space in between those to differentiate them and separate them You could use a line to differentiate them in in your design, but that just adds noise You often don't need it. You just add a bit more white space and then it's simpler and easier to read A lack of white space is cheap. It is intentionally used to make something look cheaper So you'll get it in those Catalogs that are crammed full of stuff and they're they're a low price point product and that's what is That's what you use lack of white space for And then on the flip side lots of white spaces luxury. It's like I Can afford to waste this real estate It's fine So if you want your product to look really expensive then use lots of white space Vertical rhythm is quite a big thing and I'm not going to go into it too much, but it's basically the consistent pattern for the reader so it's the like the lines I suppose um if You had like two columns of text Next to each other and then if you had a good vertical rhythm It wouldn't matter how many words were in each column or how many lines of text They were all where the breakpoints were in those columns in those paragraphs. They would always still line up Next to each other. So just have a consistent line. That's your vertical rhythm It's quite a big thing and you can read a lot about it online Proximity of elements is the relationship between elements demonstrated by the use of white space So you can see here this date This is probably like in our side column It's some news articles and we've got a date and it's got the same amount of white space on the top as it does on the bottom And it's hard to see what news article this date might belong to in this example So you can easily fix that by adjusting the white space to to create that relationship with something and To give it proximity color Color is a really big thing. It's it's hard I suppose you all saw the blue dress that wasn't a blue dress. Yeah, so it's perceived differently by everyone and then it's also There wasn't blue dress, yeah and so it's also Exasperated by different monitors. We all have a different screen that's calibrated differently. So it's hard to have The exact color that you choose be the thing that is what's seen So and especially for people that are colorblind. Is there anyone colorblind in the room? No, okay Colorblind people see different colors to what we see The next slide is a bit offensive So these are these are really bad color combinations So sorry, I'll just go back to the first point. Follow the branding again. Just use what's already been designed if you can Yep, so these particularly bad color combinations and this is what someone that's colorblind will see so it's really sort of low contrast Really sort of they wouldn't get the message if you were using color in that sort of way and so for accessibility reasons they say To never just have color as the differentiator So if your hover states are just color then they won't necessarily be seen by people that are colorblind So they they always say to have an underline as well as a color change in those examples But you can use color To make certain things stand out from the rest of your design So if you've got a color part that like largely blue And you want everyone to see that that button on the bottom and you want everyone to click on it It could be blue. It would fit in with the design, but you could also use a contrasting color and Have it stand out a lot more against the rest of design and it's much more likely to be clicked on in that case Orange has poor accessibility It's just one of those colors that has a pretty low contrast despite what it looks like to us a lot of time And these are some sites that will help you choose color It's just to be accessible. So the first one is for choosing your whole color palette. You can basically say I want every blue color at this font size to be Triple A accessible and then it'll spit out every possible blue That you could use in your in your design and it's really cool And then the second one I use a lot to test Existing colors, so it's just it's a calculator again. You put in a hex code You put in the so the foreground and the background color and it'll tell you how accessible how much contrast that color has I'll put these slides up online Mobile design going way too quick So Mobile design is basically reducing things and increasing other things So ideally you'd want to start small and enhance as the space increases so headings and text sizes would would be Initially done to that smaller carrot CPL column width So you can have your based on your mobiles with thingies And then as it increases you can you can calculate up from that what what the bigger sizes should be up to your desktop size Buttons and links are the only things that you wouldn't that was sort of the opposite So they need to be increased on a smaller screen than on on a desktop screen and it's to allow for fat fingers Basically, so there's a big hit area for buttons and links And Apple recommends a 44 pixel by 44 pixel Sort of size so whether it's like At least 44 pixels high and then they say you can do like 30 pixels in the opposite way Just so that there's enough space And that's it I think I did that way too quick I turn that so much longer at home Yeah, lots of questions Yeah, yeah Um I suppose just repeat it for me again Yeah, like I I'm all for Sort of making it more of a Closer thing like I think designers and developers should work a lot closer together And I think managers should Encourage that really yeah, I think it's it just makes everything so much smoother like My own experience coming from a design background and then moving into development that design experience has really helped me in my job and Just made things better. I think it's a great thing and everyone should do it Yes, yep, okay, so Well, I've I've done it here obviously So there's certain sort of weights of text you can use and then having a drop shadow like I've got here is a really good tool Just to increase a bit of contrast It can be done It's just sort of it's not a one-size-fits-all thing like you have to adjust it for every background image You have to have different position of your text to be on the most clear part of the image it's a fiddly thing and And Yes, there are screen size changes. Yeah, it's much harder to do on the web But it can be done. Yeah. Yep. Yeah, things like that. Yeah Yeah, yeah Yeah, yep I actually don't but someone else might Yeah Yeah Yeah, yeah, I think it yeah paid ones Yeah Yep Yeah Yep Yep I Think they're a really good starting point for people when they're not necessarily as Experienced in in doing things from scratch. I definitely do As far as I've always done it from scratch myself, but yeah, it's Yeah, I think it is important for developers to do it from scratch at least once I mean, they might not like it and they might want to go back to their original way of doing it But I think it's a good learning curve for people to do. Yeah Exactly Yes, yeah Yeah Yeah, it is it is frustrating. Yeah, even like I say if you can speak their language You can you can explain things better to them, but it's still It depends on the person really and how how much of an ego they have I guess yeah Yeah, yeah Yeah Yeah, yeah, and then redo it. Yeah. Yeah Mmm early break then I guess