How to create forms, checkboxes & buttons – UI/UX & Web Design using Adobe XD [8/42]

Articles, Blog

How to create forms, checkboxes & buttons – UI/UX & Web Design using Adobe XD [8/42]

How to create forms, checkboxes & buttons – UI/UX & Web Design using Adobe XD  [8/42]


hey there my name is Dan Scott and this is one video from my larger Adobe XD course which you can check out on bring your own laptop comm you can also go there to download the free exercise files and the free cheat sheet if you like alright enjoy the video hey there in this video we’re going to make some input boxes and some check boxes and a button and we’ll also look at creating our first character style so let’s go and start creating now okay so the first thing I want to do is I’m gonna grab the rectangle tool and just divide off a bit of space this is gonna be my onboarding box okay it’s above-the-fold it’s my most important it’s asking people to kind of become the member or at least test their course okay so what I’d like to do is I’m I’m happy with a white fill at the border here I’m gonna change a little bit to be dark you know I said don’t spend too much picking fonts and colors I can’t help myself sometimes but I’ve just picked a slightly darker gray and I’m gonna reuse this gray throughout the course so see this little plus button here I have plus and it means that it’s easily accessible maybe the same thing for down here I’m gonna click on there navigation okay I’m gonna click on the blue and I’m gonna add that just so it’s nice and easy to reuse what I’m also gonna do is see this little dot here he can be dragged around for your colors I’m gonna drag him to the top left so he’s fully white don’t worry about this navigation in the moment so I’ve got a white color at least there and a full black so I’m just dragging it all the way to the bottom left clicking and dragging past that corner so I’ve got at least some basic colors to start working with so I’m gonna set him back my navigation back to the blue now why am I using blue it just happened to be the one that was on the template and I’m reluctant to go pick the brand color to use maybe the green from the color I could start using no you could use black and white that’s fine okay so this is gonna be my onboarding box what I’m gonna do is just lock it in there command L or ctrl L on a PC actually a bit of type at the top here first this is gonna be where my onboarding message goes and okay it’s gonna be kind of a I’m gonna make this just a larger font okay so onboarding message goes here I try not to add any kind of like actual dialogue or actual kind of marketing material in here again just to keep it simple give an idea what the titles need to be used for so now all in a text field or an input box then I’m gonna go and get from my template okay so here my wireframe I was looking around and I have found on there’s a form section and then I guess it’s just picking kind of the style that you like the mo okay so I’m gonna grab this one here okay I’m gonna copy it jump it back into my option here okay and that works for me instead of interred okay I’m gonna put in name your course now kind of just going over my thing that said no marketing messages or no like actual type I couldn’t think of a better way to describe it without actually writing the text in this case okay so in terms of the text I’m going to keep everything gray just to keep our boring consistency through the or throw it on and I’m going to add a little plus sign here by just clicking once hitting plus selecting it I might make it a bit thicker so it can be seen bold okay size wise probably needs to be up that even all right black arrow moving into position next thing I want is a check box okay you can like dragging this thing around really wants to snap to stuff okay normally really cool what you can do is if you’re finding that a bit hard is they let go of it in just use your keyboard I’m using my arrow keys on my keyboard just to move it around you can hold shift and use your arrow keys and it moves in big chunks and without it just moves in small little pieces cool so now I want a check box okay so I’m gonna jump back into my wireframe okay and there’s one right there that’ll do okay really yep so I’ve got him copy it move it across okay it’s gonna be somewhere over there great and I’m going to double click him and I’m gonna say use sample video cope and I’m gonna use my color that I’m using throughout cool next I’m gonna put and equals okay equals and you’re gonna put in a button here so I’m gonna go find a nice plain button hopefully okay and it’s just a matter of looking around and going there’s a button there for me I’m going to ungroup these that’s what when you’re not gonna copy it move it across paste it and that’s what I’m gonna use okay in this one that’s going to be saying and this one says preview what I might do is select it make it centered now you’ll notice that actually it’s not connect its group with the outside box but it’s not kind of connected so ungroup it so that I can drag it into the middle here now in terms of the font size I’ve decided to go for a larger whatever got here 14 okay so I’ve got 16 and 14 so I might actually make this a bit more consistent so you you and you all gonna be 14 as well I feel like it’s a bit of font size there’s something weird they’re gonna get rid of them okay now one of the things that happens to me when I’m designing here is that you can kind of see I find out how to see both edges okay I want to stay at 100% okay so I’m designing at the right size but it’s hard to see both sides so you’re gonna have to turn this on and off if you’re working on like the screen here is a MacBook Pro okay and I guess that’s a 15 inch so the screens not quite big enough figure out of 13 you got a lot of trouble and that hopefully maybe you might be working on an external monitor and that’s what I normally do when I’m not recording okay I just have an extra bigger monitor 4k monitor that I plug into to work from and yes all right I’m gonna at least make this centered in there that looks nice ish one of the last things I forgot to do is you can skip on now we’re not getting any more exciting I’m going to add a little option and here that’s meant to say choose your file Plus come and I’m going to use the same font and stuff as this so what I want to do is I’m going to actually dive into a bit of style so we’re not gonna use styles too much at this level okay so with the selected okay I’m gonna ungroup it so I can select on just this type I’m gonna open up what’s called my assets panel so here in assets okay I can have something called a character style so it’s like character styles from other products like Illustrator or InDesign if I click on it it’s just like a premade size that I get to reuse really easily so I click on him and click on him now they all match and if I update this one by right-clicking it and going to edit and say later on I decide actually no I think 16 needs to be used you can see everything goes and gets updated you can see this one wasn’t part of that style but XD does some hoodoo magic where it kind of reaches into the document finds ones that are exactly the same and updates those as well so it’s over useful so actually I’m going to turn those 2:14 nice and one thing I might do to make it look like a link that can be clicked is do an underline weirdly you can’t do underlines yet in XD it’s kind of envision one okay so we’re gonna cut it a little slack bus kind of one of the important ones I’m gonna grab the line tool and fake and underlined okay and to kind of indicate a bit of hierarchy between that being the most important and there’s been like the kind of next bit I might actually use a slightly different size 14 and adjust this in can they can go underneath so it can use our sample video or choose our own file now when we get to our kind of high fidelity version I’ll be able to kind of show that a lot more and clear out kind of fighting with them like I really want to spend some time making this look as an option like a second option but hey ho we’re gonna leave it there for the moment alright so let’s get on to the next video hey there please like the video consider subscribing to my youtube channel as well if you want the full course for Adobe XD check out my website bring your own laptop calm that’s it bye now you

9 thoughts on How to create forms, checkboxes & buttons – UI/UX & Web Design using Adobe XD [8/42]

  1. Fantastic, one problem how do you make em work? kinda got the impression that's what this video was for but i guess it just taught me when to copy and paste from wire frame and be pedantic about text size. Cheers bro!

Leave a Reply

Your email address will not be published. Required fields are marked *