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