Creating a UI Style Guide with Adobe XD

hello everybody today I'd like to do a little tutorial with you on how to create a you are style guide and talk a little bit about the importance of creating you are style guides for a website and app design or any kind of interactive application so what is it you our style guide well in a nutshell it is your roadmap when you design a website or an app it is your roadmap to explain all the particles that makes up the actual interface and the design so you our style guide contains many aspects it contains things like color palette it contains very important elements such as typography the headlines the sub headlines the H Tuesday threes h3 s what type of look and feel a paragraph is going to have what does a text label look like the all-important UI elements forms form inputs what is it what does it look like when there is an error in a form input things like pagination how your social media icons are going to look like the system icons that you're going to work that you're going to use and then obviously very important how your navigation is going to look like your style guide is important for good UX because any web developer will need some guidance as to how he is going to develop the site by looking at your style guide you'll have a very good idea of actually how to proceed with the big build of the app or the actual website there's a lot of examples on the web I'm gonna show you two that I found very inspirational this one called cost that I found online to me was was one of the most comprehensive style guides again it has primarycolour secondarycolour the typography the paragraphs paragraphs to a text label as I showed you button small buttons large buttons radio buttons the switches etc etc another one that I found that it wasn't as there wasn't as comprehensive but also very but also very good another example that I found was this one from pat pat which is a little bit a little bit smaller but then also it has very important components such as the primary colors the secondary colors it laid its type out a little bit differently it's got all its icons the UI elements and what does the button actually look like in its normal state in a harbor state in a place state again the forms etc etc if you go to Pinterest or you go to dribble you will find a lot and that should help you to guide you in what is necessary but the most important thing that is necessary is obviously what are my color palette whereas my main fonts that I'm going to use and what is all my elements and what are they going to look like what are they font families one of these size what are they then leading all right I found a very interesting article that I might that I want to share with you and it's by Brad Frost and it's about atomic design an atomic design is actually very simple but fairly complex okay every design is actually built first it's made up of rather from atoms and then we put a lot of atoms together we get molecules and from molecules we get organisms and from organisms we can get templates and then obviously from templates we can get pages and that is kind of like what it actually should look like so an atom is your simplest part and then together to two atoms form a molecule and so on and at the end we get to build a page I love this periodic table of elements which actually show you all the specific elements of HTML and there is your form set screen your document sections your meta tags and then are your ticks semantics etc etc but in in building a UI what does this actually mean so what is an atom so an atom for instance is a text area in this case where you can actually enter a keyword and then there is a button and these two together actually form a very important part and they make a molecule so a button by itself is an atom together with a text input area is actually a molecule and if we put a few other things through other atoms together we will get an organism and if you can think of what an organism could be well it is a navigation so if you think of a UI always think of what is the simplest component that I need and that I need to define what goes with that component that also needs definition and what is the element that I'm actually building because an enter keyword area takes text input area by itself actually means nothing all right it needs a button or it needs the trigger that will actually activate the search by itself a button home means very little together with four or five other elements it makes navigation which is a very powerful thing with regards to a website or an app design so just keep that in mind keep in mind that we working with these small components atoms we put them together with other elements they make up molecules and in the end we can therefore start to design or organisms which will give us enough or information to start building templates which in the ends will give us actual pages okay for some color inspiration I thought I will just go to my favorite place and that is actually colored Oh be calm if you just click or if you go there for the first time I love the fact that yes you can create from scratch and click monochromatic you can choose a color by actually just drawing through it and then you can choose whether you want a triad you want to split complementary you want to square just remember in web and and any interactive design we do need a lot of contrast so when you actually look at monochromatic just make sure that you have a high contrast color with a low contrast so that you that you can actually create accessible design and then what is obviously very nice is if we actually just click on shades we can just kind of like move move our little color picker around and it gives us amazing shades but what I do like even more about color at a Derby is if you click on explore you can you can click anything this is obviously the classic blue of this here you can click on on anything and also if I want to look at ice cream I can get I can get a color palette that would help me to actually look at a beautiful ice cream color so in this case I quite like quite like this one and what is nice about it is that you can copy the CSS but you can obviously copy every color as it so if you just click on it just copy to the pasteboard and you can use it so very very useful color doll adobe.com alright so so without any further ado as they say I'm going to quickly take you through the steps of designing a UI style guide again take in consideration that you have to show color palette typography super important you've got to cover UI elements and forms those are things like buttons primary buttons small but since larger or smaller of mediums you've got to do your inputs what does it takes input actually look like what does an error look like your imagination what is your social media buttons look like any of the system icons I didn't do a lot and then finally your navigation okay so what I'm going to do is I'm just going to create a large web page in NXT and I'll just double click and I'll just say it's UI style guide and I'm just going to enlarge it by actually dragging down or putting a very big height in alright I'm also going to save this file choose my folder and I'm just gonna call this UI delle guide okay I'm starting always with a little background color just so that white actually shows up because otherwise you know it doesn't always you always have to use a border if white is your color whereas if you have a little background color then it's fine I'm just gonna take down the border I'm going to just choose it off kind of like blueish gray and not too not too in-your-face it's supposed to be very very soft also just plus it so it's there and then I will just align it and I will save it so what I thought what to do is to create a style guide for a new ice cream parlor called cravings the original uncle is very original so I'm just going to go UI style guide and I'm just gonna make this as a headline just gonna make this 4800 maybe 36 all right I'm going to use for this I'm going to use Roberto but then cravings let me just double-check but then cravings is going to be I'm going to use Montserrat for it my favorite and I'm also gonna decrease the coning 4 and I'll just increase the size and this is going to be medium no medium is okay for this color I am I will choose a little bit later but for now this is focusing this is fine and I will just give it hello it's just giving a line underneath one is fine okay so first we're going to start off with our main headlines are we going to use I'm going to start off where this is color palette and I am going to use most right for that and I'll use regular for now and then it's I'll drag it and I'll do the next one this is primary make that a bit smaller minus 20 and this time I'm going to use light remember also when you choose fonts for our web or an opera or any actually online at design piece make sure that you choose a really nice big family a family that has fun family that has a lot of variation that has lights that has mediums that as yet that has polities in in in HTML you can go from what is it hundred to a nine hundred but still it just gives you a lot of options while you're designing now when do you actually do you I you ask okay for me I normally designed the site the home page and I kind of then present it to my client and once I kind of get the go-ahead of the lock the look and feel I would start to build the style guide I do do not design a style guide normally right before I've designed anything alright obviously you're gonna scam something out but for me a style guide kind of comes after the client has approved it so I now really know yes the client lives Roberto yes the client loves Montserrat but not not kind of right before anything is done okay so now I'm gonna go to I'm gonna go to my Adobe color I'm gonna copy this color and I'm gonna start by actually just drawing my little color blocks now I like to do this is I find the the inspiration of that one really really useful so I'm just going to kind of use the same so now I can just paste and that color has come up okay if I enter it's there okay and I now can also plus it so it it is in my I'm XD library okay alright so I'm going to take that I'm going to create a little white over so to take the border off I'm going to duplicate this bring it to the front take the full off and then mask these two and they don't have my then I have my color block now I hope they're gonna fill in fit in I'm sure they will right I'm sorry I'll give it but 35 whoopsie No and I believe that 30 is I love this feature in XD that's really really helpful okay so now I can go back into my I'm going to copy my second color back into color Adobe paste it there it is plus it go back copy this one paste it + enter + next paste it inter + last one copy they look like paste it enter in + ok alright so when that is done we are just going to I mean we can group them it's probably probably best if you're not a hundred percent sure what they are you can you can actually just save then give them a name which is better but you just to speed up time I'm not going to do that just yet so now if I click in my fill I can click on that color and I just can just copy it so I'm gonna paste it in here this I'm actually going to now I'm going to choose two colors or a color that I'm going to use for my takes color now takes I quite like to have like a grayish blue to me that is always quite nice so I'm just gonna choose a kind of blue I'm gonna plus it I'm not happy then yeah I'm gonna just choose one alright and this is going to do this is medium and take down the side so let's do this is 22 probably 20 okay and then we can just add that there I'm gonna just all drag this and then the same story I'm gonna double-click in the pink copy and paste paste it next copy obviously than the next numbers are super important yes you can do RGB is as well I have seen a lot of style guides that have got both but it's super important that you at least obviously have the hex numbers because that's how we that's how we code love this color okay so this is kind of your primary your primary color now from there on you need tints of that okay so very important now also you must you must decide which is going to be your your main battle colors and for your main battle colors you will have tints and shades which is really important because as I say hoop race normally as a little bit darker you're disabled could be a bit lighter so you do need you do need a set of shades and a shade of tints on your colors so you have to think about it so and I think if you look at the one that I've done before you don't have to call them anything they are still part of your primary so you don't necessarily have to give them a name they are just they are really just your your tints so I'm going to take that I'm gonna take that block and I'm just going to all drag it now what's gonna happen now is just make sure that you have the right one and I'm just going to kind of drag three hope they fit in yeah just a bit okay so in this case I am going to go a little bit lighter so again I'm just going to double click inside and now you just got to move your little color picker ever so slightly same so that you get tense of that color and then the same with my brown so I'm just gonna group that one and I'm just gonna all drag it here oopsie so line it nicely same story you're gonna click in and whoopsie you're gonna click in and until you only see your fill and then you need kind of three on this one same story you're gonna click in your fill and you want to just draw draw it up and just remember that you don't want to get dirty no you don't want to get dirty you just actually want to go up because you want a tent okay happy with that and now we can look at a so you can go if you want to label it you can do tents now we can and some have also seen amazing gradients so yes you can even do gradient so I'm gonna again I'm gonna take take that color my pinkish color and I'll do two gradients because gradients are kind of like you know very very sixteen so it's gonna go in [Music] linear gradient I'm going to just change my so I didn't I'm going to do this one obviously is going to be from the lightest color to the dock to the maybe even do it yeah let's do it cream and mean the second one then we can take out there it's gonna kick in solid color linear and I just turn my darker color is now going to meet my brown and the lightest color is going to be my light pink or maybe probably that and then we can obviously also move it across a little bit so let's just change that it looks a bit weird let's keep it it like pink and we just move on the points across okay so now we've got no we've got two gradients alright and you can always put your on your hex cup number there so that people can actually know that it is that it is those two but I'll leave it out for now alright I'll just save so the next is that I want is a text color so as I said what I like to do is I like a dark grey for my text color so I'm just gonna choose a new color for my text color and again double click in and I'll just choose one of these dark grey and copy the hex number and paste it and then obviously we have the light color sorry and that could be this one you don't need that oops okay alright so that's your first part and as I say now you can do secondary colors if this more colors or you can choose a you can choose a tertiary color complementary colors or in this case as I said you can you can have colors just for your just for your switches okay so this is color palette done happy happy with that I have my primaries I have my turn so I have some gradients there and looks like there is a little border there but anyway and I have my text color so okay so then the next that I'm going to do is I'm going to start with my typography I'm gonna do typography and now we are going to set our different phone styles and as I said quite important the typography must be as self-explanatory as you possibly can show as much as you can all right you can draw the show too much then show too little because the developer do not want to think his job is not to think about your design his job is to is to actually take this to our style guide and just go and develop and code the site that you obviously not designed every single page for you've designed components you might have designed for pages of thirty-five because you do not design 35 pages all right again you design atoms you put the atoms together to form molecules and these molecules then become organisms and datecode organisms so that is why it's really important for you to understand the nature of atomic design okay so I'm going to make a little block and then I'm going to start to actually work on my work on my actual design it's the same story I'm going to take the the border both now I'm going to use that dark color just to show don't really have to what is this in height it's two three five I can use the same two three five which two three five and that is 110 this is 115 110 okay so I'm going to use that dark color just so that I can see what my ticks will look like when it's on reverse so again I'm taking my border off darker color and now I can start to type so we're just gonna start with a big a and an a big a in a small a and the first one always starts either from light to bold or from bold to light so the first that I know that I am going to use actually is a veneer semi bow that's the boldest that I will go for the specific design and now I am going to make it the right color and then I'm going to state what it is so this is headline and do this in 20 so this is headline underneath you can do font is Montserrat and you can do semi bold maybe 16 and again the right color in this case is that balloon and you can always say this is headline and h1 okay so I'm just going to group this and then make a new block and then another one okay and now this one is going to be Monserrat regular this could be headline h2 and we can call this this is a sub headline and again can do it regular this could be our sub sub and h3 no I'm not putting sizes on this because the sizes will come here after this is just kind of the look and feel alright so and this is going to be light okay so we need I need more need a smaller font so I'll just do that it's 14 it's a very wide font so 14 and it's changed that to light as well and here you now also show what it actually looks like you know when it is in fact just move across okay alright and if you just zoom out that's what we have now I mean those blocks can be can be bigger we can add some some stuff in there on the side but for now it's fine okay so then I'm just going to actually start by by typing them out so again I would say this is headline and I am making the this is not the actual headline so now I'm deciding what is my actual each one's going to look like so I'm going to make them say 38 for now and 48 for my leading and I'm also going to play because this is so wide I'm gonna play with my curtain now just remember the kerning or tracking is very difficult to actually to do inside of web design because it's very fine it's like point 1 a.m. so just make sure that you don't confuse the web developer okay so by my headline or my or my h1 is then going to be semi bold so now you set it in what it is okay so you replicate it okay so this is my this is my headline and then I can underneath that doesn't have to be in the same font no I mean in the same size now I can say it is sorry font family goodness backup my family I'm just going to make this to say 14 points 20 this is not a font family and it's monster right size and then we can do font weight one size and and fun to it you might need more space here okay so then our let's do a font wait sorry a font weight is actually been low so they just take that I don't put it there so this font weight is semi bold and then our font size as we said is four thirty eight and forty eight and now it is 38 px and forty-eight px okay now what we can do is as I said we can actually set a line of text or in this case the very specific the brown fox jumped over the lazy dog just to show how it is but I'm going to finish all of them first so then this one is going to be my age too and it is a sub-headline now if you also have gone to type scale you will see how beautiful type scales really useful you'll see how beautiful it can actually work but in my case I'm actually just going to roughen it up a little bit so I am now going to say this is 30 and 40 and it is regular so now we just can change this to regular as well and then 30 and 40 okay this is then say 24 and 30 so this is and this is no light and this is sub sub headline and this is our H threes so again set it in the correct font weight this is light and double check it is 24 and 30 remember that and web you always need a little bit more or any interactive design you need a little bit more lady no it's not 120% section hundred and forty percent because of the thumb so you need to have enough space there for somebody to pray something so yeah so I'm just gonna move this slightly alright and there is my there's my headlines now so now as I say now we can go and find that line and actually it is the lazy Box jump over the lazy dog well the quick fox yeah so we can just copy that line from Wikipedia because that is the line that we need to use so then I'm literally just going to I'll drag that and we will set it and then you also see what it obviously looks like with the lady so once you've said if you can say no I probably need probably need a little bit less learning so because it's a headline this can go list unless leading so I'll go 42 that looks better okay so yes 42 it is okay and then I'll drag this one same story now the other thing that you could do is you can obviously select your headline to you can go here on on your assets you can go and click on the character assets and then it's safe so if I then click on so much easier okay so yes you can you can do that as well so same story here in fact it's a headline I don't need such a big such a big leading so I'm actually going to minimize that too let's do that 36 this one also I'm going to select it I'm going to plus a style because they know if I just I'll drag it it's just easy to do oopsie it's just easy and just in case let's just see what that lady looks like yeah because it's so small it does need um more leading all right okay so now we've got our now we've got our headlines now we can go to body text or our paragraphs so I will just sorry I'll take I'll do a new sub headline here just drag ones down a little bit hitting's remember also that you can get the guides in XD if you just hover you just kind of like harbor outside of your place board or your you get your guides so happy with that hitting's yes and then we can do this one and we'll just say paragraphs I mean the same we're going to do four four paragraphs so I can just do a very simple sorry not that one and do a very simple saying paragraph one and this time I am going to do it in regular and it is 16 and 22 regular and 16 and [Music] 22 and I will just save it and again let's take that let's do a character style plus and now we will see now a lot of time so it's also nice if you actually put some lorem ipsum in there if you have a plug in for X T you can get you can get otherwise so we'll just go to your Epsom and my favorite Epson Lauren and we'll just copy a little bit and now you can also see you know if if it is too big so in this case I would probably say no I can actually make this 14 and I can make this 20 so make this 14 and 20 much better okay so that's a first paragraph and then we can have a then we can have a paragraph two way we might want to go see my Bold but you won't use a complete paragraph or but maybe you want to do like an intro paragraph so a few lines so I'll do a semi bold and a semi bold and then you have your there you have your paragraphs okay so you've got your headlines you've got your sub headlines you've got your sub sub headlines you've got your paragraph so now the other thing is our text labels so what does it actually look like when we have text on or in an input or as a button so that is what we do what we need to do this so I'm actually just going to do this here so we'll just do a text label and again we just want to say this is text label and in this case I am going to do a semi bold and and I literally just need to taste it okay no that looks okay that looks cool maybe we want to do it a little bit bigger so maybe we want to do it 16 and never gonna have more than one so just do it do a normal eating right but you may want to increase that increase your tracking so just do 15 so that's great there's a little bit of space there okay so one other thing on the headlines that I like to do is then to actually look to look at what it looks like when there are caps so I'll just draw another line and I'll just make it four caps and then you also sometimes see that you need some some kerning alright so then you can fix the kerning and you can you can obviously add it's enough with a text label we've got a paragraphs and we are good to go alright so I will just draw my little divider there that's grand ok next area that we need to cover we've got a paragraph we've got headings we show what our headings look like next is we've got a text label we're happy with that and now we're gonna get to our UI elements so that's what we're going to do next all right so I'm just gonna drag my little headline there and you know just do this number 3 and I'll just do UI elements and what did I say forms okay so I'm going to use this block again so I will just copy it in here and I'm going to paste it so don't just start with I'm just gonna ungroup it it's just gonna start with a just lock this just lock this background I'm just really irritating so I'm just gonna what is then gonna rock it okay so I'm going to just group that so going to start with my largest buttons so I will do something like a 235 yes at about a 65 so that's a nice and a hundred percent let's just look at it at how 2 percent always look at it kind of saying yeah that's a really nice really nice large button alright so I'm going to I'm gonna start with my large but now I know that they are going to have at least four states so I have an active state I might have a hobby state I have a praise state and then I have a disabled button so sometimes you don't need or sometimes people say you don't need and disabled but it's always good to have a habit disabled so I'm just going to again what was this was 30 want remember now you just want to drag a goddamn dudududu yeah so one snap and snap all right so I need just gonna take this I need this is active don't take this 24 yo I don't like the up in lower case I like I like upper case it's just so much cleaner so much greener what was this this is no 24 sorry I just wanted to fix this because it's irritating me 15 yeah yeah it's this cleaner cleaner sorry but yeah it's just irritating me nicer much better much much better I mean really even the style guide it needs to be designed I mean that's your resigner so you need to design these things they can't they can't look and crafted they have to look professionally crafted so yeah so that's why it takes time okay so headlines paragraph text labels the other one so let's just fix that that's also 24 and it's 50 and it is up okay beautiful much better okay so we've got an active state then we've got a hover state then we have pressed and then we have disabled okay all right so now I'm gonna take my text label and I'm just gonna bring it to the front and my text label now you can also test the size and I will just say this is button text and we said that that color is the light all right so happy with that happy with that so let's look at the look at the color usage so hover I normally like a shadow for my hovers okay just remember that if you do remember material design is very soft it's not in your face it's not 50 it's really just a soft soft harbor and it's also and not that big okay so this is my this is my hover I don't like to have my hover that different in color I think that's a little bit it's a little bit old but maybe that's just me but there might be something so I'm just going to give it a kind of an inside line inside border so and I'll just use my lighter color for that that's my that's my hover and then for my pressed I'm going to choose a darker color so then I'm just gonna go down I'll just plus that as well maybe we need to add that to our color scheme and then again I'm just going to add a shadow now if it doesn't remember it just double check if it doesn't remember it it should but if it doesn't just make sure that it's the same and then disabled normally is just the text just lighter so we can just take the text opacity down okay so there is mine there's my different button so I have a slide over in my my hover I have a slight change in color we can also do that lighter if you feel like it that's why you want to do a lighter 10th in it's fine it's just go up then and it's just choose these colors and they just add them to our color palette and then if we feel like our hover needs to be that lighter color then we can okay maybe this border is then a normal color right so that's all that's how harbor so it's a slight color it has a drop shadow price this darker and disabled T's just take all right so this is our first set of well let's just label this properly so I'm just gonna drag this down and this is going to be let's say our large large buttons dear Amy just fix it there's our large buttons okay group this did I not okay all right and then our then our second is going to be a different color and again that could be our prom so I'm gonna choose my brown same story let's go up and just save this color plus it plus it alright so now if we go and we select our hover then we know it's that one and that is then the darker one pressed is then a darker brown and again it's brown and our button text is lighter so it stays the same so beautiful beautiful very easy large buttons both now we can do exactly the same for our smaller buttons okay smaller buttons so if I go back here what you need is you need some smaller buttons and then you need maybe you want some switches as I said and you need to do your inputs table and imagination is super important and then lastly decide on how your social media is going to look like and then obviously your your navigation so what does it what what does the harvest look like in your navigation again you have to use the same kind of rhythm the same kind of let's call it color system that you've used across your style guide so if we look at ours comes it looks really cool it is we just move this up and it's it's taking shape yeah our a UI style guide for pavings is taking a really nice shape I think I I like it so yeah so I hope you found this useful hope you now understand how I'm important to you our style guide is and actually how big it is and and how much attention to detail must be placed in a UI style guard for it to be really really useful all the decisions that you need to make for your design needs to live in this document decisions about button sizes decisions about the spacing around buttons or the spacing around the text these are all because remember they padding so you need to actually show that so if I can go back to this really great example there's table data cards if you're going to use cards or you know you're going to use cards or your system icons and then as I said this is really important so what what is the actual spacing in your website going to look like what is your margins going to look like what is your actual what is your padding going to look like those are decisions that you as a designer must make and that must live in your UI style guide so that is why it is super important then when you start to design it you really pay attention to every pixel that's also why we call it pixel perfect really every pixel makes a big difference but this document is your is your road map to a very well-designed website or any interactive element so you need to pay attention to it and you need to do it thoroughly alright I hope you enjoyed it I hope it is insightful Adobe XD is really great for sitting in this up and yeah I remember Adobe color alright that's it for now chat soon thank you bye

Channel: Anka Joubert

Views: 2,959

Keywords: Adobe XD, UI Style Guide, UI Design

Id: L3NPtkW3bKo

Length: 62min 30sec (3750 seconds)

Published: Mon Apr 27 2020