Hii welcome back to HiiQ. In this series we're gonna be covering Adobe XD also
known as Adobe experience designer. this program was created to help web
designers create experiences that are more easily creatable in the web
development side. So if you know from way way back there used to be a program
called Fireworks by Adobe that was very similar where it was meant for designing
websites but websites have changed in recent years from going to responsive
design and being very flat with fewer images so Adobe wanted to set out to
create a design program tailored to web developers and designers to make sure
that they designed things that will be scalable and usable in multiple formats
such as iOS, Android or web. So to start the series we're just gonna be doing the
very basics by covering the artboard tool and in later episodes we'll get
into other tools as well as how to create some really fancy designs and
into a little bit of UI theory and UX theory also known as user interface
versus user experience design. Let's get started. So I'm just starting up
Adobe XD right now and right in the Welcome panel we can immediately select
what device we are going to be designing for so whether it's iPhone, iPad or for
web you can also click on these little dropdowns to select different device
types so such as our Android mobile now there's also new add-ons that are going
to be changing the way Adobe XD works so these add-ons we're not going to cover
them today but just to give you a brief little look it allows you to add new
features to Adobe XD making this program very extensible for the future. We'll be
covering a few of these later on but right now we're just gonna be running
completely vanilla version of Adobe XD. So for this I'm gonna start with a
simple web layout someone's gonna click on the web layout and this will start my
project. So to begin let's just look at some of the actual settings of our
artboards so in the center of the screen this would be what we refer to as our
artboard. You can also see on the left it will
list any artboards that you have currently to see the settings of the
artboard I'm just gonna click on the top bit of text here and I'll select the
artboard over on the right in our properties panel we can see the
artboards actual width height settings as well as the ability to switch it
between landscape and portrait below that we do have this option for
responsive resize we're gonna be covering responsive resize in a much
later episode so I wouldn't worry about it just as yet for scrolling this
feature is very good for when we want to make sure that we are designing all of
our content to be above the fold of the page as its referred to. So on my
artboard to show how this works I'm going to scale it up just by selecting
the bottom little handle here and dragging down so you'll see there's this
dotted line in between that just shows where my screen area ends so if I was to
design all my content put in some sliders and things it's a clear
indicator of where the monitor is and where the user will have to start
scrolling so you can choose whether this artboard is a vertical scroll and if
it's mobile whether it is a horizontal scroll for instance and then the
viewport height itself below that we have the appearance of the actual
artboard this allows us to change the fill of the artboard so I can just click
on this little color picker here and I can select any color I want now if any
color picker in Adobe XD you can save your swatches since this is an area
where we want to make sure that we are saving all the colors that are gonna be
utilized within our project. It's a very good idea to keep the swatches so if I
select a background color here that I'm gonna be using later, right below I'm
gonna just click this save color swatch and there we go. That color swatch is
saved and it will show up in any other color picker throughout Adobe XD you can
also select from existing colors on your artboard by just clicking this pick
color from screen this allows me to select any color I want. Perfect.
Now I'm gonna switch that back to white and the final setting for our artboard
is the grid layout. So this is extremely useful as a lot of websites these days
are designed using some kind of a grid layout also referred to as a column
layout. So if I check this on as you can see it immediately adds in my standard
twelve column grid layout and you can customize it a bit here. So I can choose
how many columns I want so I'm just gonna click inside the field here and I
can type in a number or I can even use the arrow keys just to go up and down to
select new columns you can change your gutter width which is the white space in
between each column. I can increase that or decrease and you can even set your
column width though it's automatically being set because I have an exact
measurement here of my columns and then it's just separating them by the gutter
width but you can also manually change this. And then the final settings down at
the bottom here this allows me to set whether this is a left-to-right margin
based or if I want to put margin along all sides of the screen so just by
clicking on this little option here I can raise the actual top margin the top
margin the right margin the bottom margin and the left margin whenever you
see for values like this it is always going to be in that order top right
bottom left just think clockwise. I'm gonna keep this as a left-to-right only
and there we go now when it comes to adding more artboards we can add them
for multiple devices or just have multiple screens for a lot of our
websites that we design here we like to make sure that we design every single
page in a single document that way the developer can go in and see all the
pages or a client can even go through and actually navigate the website. We'll
get into how to use prototyping in a later episode. So for now to add in more
artboards over on the left here we have our tools
panel and near the bottom there is the actual
artboard tool. If you hover over the tool you'll notice that it has a little
tooltip that tells you the actual hotkey to activate that tool. So I'm going to
just select the artboard tool here or click a on the keyboard and then you're
just gonna scroll over to the right of the artboard here and I can click and
drag and draw a new artboard there we go. So if this new artboard I should start
naming them to make sure that I don't get too confused. So I can just double
click on the actual title of the artboard and I can rename it so this may
be my about page so this also means I should probably name my first start
board. So I can go to that artboard and double click the title or over in the
artboards panel I can double click the name here and just write in what I want
the name to be. I can also for organization click and drag these
artboards just to rearrange them like so now this artboard isn't exactly the same
as my previous one I probably want ones that have the same screen size so
instead of drawing a new artboard as long as I have the artboard tool active
over on the right I can select from any of those existing artboard sizes. So I
can roll down and I can see that there is that same web layout that I used
before so I'm going to click on that and you'll see it'll automatically add that
new artboard in at those dimensions. If you want to design the same exact
project design but at different device resolutions you can select a completely
different resolution to pop it next to it so that the client or developer can
see what you want your project to look like in a mobile view. If you want to
just duplicate a complete artboard and all of its contents select the artboard
once again using the artboard tool and you can just use copy/paste or my
favorite is holding the option or Alt key on Windows and just dragging the
artboard down and then I'll let go and there we go. I've just created a new
artboard and once again you can also use copy/paste. So I can go edit
copy or command+C and then command+V or edit paste and it will paste the
artboard it's a next step here. So that's the artboard tool in Adobe XD. In the
next episode we're gonna get into how to draw shapes in Adobe XD in all of their
settings. So until next time! HiiQ is filmed in Hiilite Creative Group studio
in Kelowna, British Columbia and is made with the help of our creative team. If
you like this video subscribe to the channel and check us out at
Hiilite.com
For more infomation >> ¡Ana Bárbara habló de su "relación" con Christian Nodal! | Suelta La Sopa | Entretenimiento - Duration: 2:34. 
For more infomation >> ¡Confirmado! Lorenzo Méndez se casa con Chiquis Rivera | Suelta La Sopa | Entretenimiento - Duration: 2:07. 
For more infomation >> ¡Anahí nos contó si se comió su propia placenta! | Suelta La Sopa | Entretenimiento - Duration: 2:52. 
For more infomation >> ¡Grettell Valdez aseguró que no mantiene a su marido! | Suelta La Sopa | Entretenimiento - Duration: 2:32. 
For more infomation >> ¡Trump le rinde tributo a George H. W. Bush! | Suelta La Sopa | Entretenimiento - Duration: 0:27. 
For more infomation >> Ni Messi, ni CR7, ¡el mejor es Luka Modrik! | Suelta La Sopa | Entretenimiento - Duration: 0:33. 
For more infomation >> Eşkıya Dünyaya Hükümdar Olmaz 119. Bölüm Fragmanı - Duration: 2:01. 
For more infomation >> NUEVO DISEÑO,Sorprendente Messenger black 2018 - 2019 / MESSENGER BLACK APK ANDROID - Duration: 5:50. 
Không có nhận xét nào:
Đăng nhận xét