Hey! I'm Hunter from Skillthrive and in this tutorial you'll learn how to create this weather app
prototype in Adobe Experience Design.
Before we get started,make sure you download the course files by becoming a free member on Skillthrive.com.
Not only will you get instant access to today's course files, but you'll get instant access
to all of our current free courses on our site.
There's a link in description that'll take you to a registration page where you can join.
So, with that said, let's go ahead and jump into Adobe XD and get started on today's tutorial.
So, once Adobe XD loads, this is the screen that you're going to see.
Now, what I'm going to do is come over to this 'custom size' and set the width of 1200
and a height of 800, and then hit 'return', and what Adobe XD is going to do is open up
with this artboard already made for us in the size that we set.
So, let's go ahead and just double-click and rename this to 'Weather-app', so we know that
this is our first version of the weather app, and what I'm going to do now is drag in the
image that I included in the source files.
Now, this is just a free image that I grabbed from Unsplash of downtown New York City.
And I also went ahead and resized this to 1200 by 800, so it's going to fit perfectly in this artboard.
So, what we can do now is, go ahead and lock this image or this layer, so we don't accidentally move it later on.
And to do that, what we can do is come over to this layer here and you'll see that you have this icon.
Now, you can click on this icon, or an even faster way of doing it on a Mac is Command-L.
But for now let's go to just click on this icon, and now, if I try to click here and
drag this around, it's not going to move because it's locked.
And the next I'm going to do is create a rectangle that's going to act as an overlay, so the
UI components we're going to add later will be able to pop out off the screen.
So, to do that, hit R to bring up the rectangle tool.
I'm going to come up to this top corner here and just drag this out and just do something
like that, turn off the 'border', come into 'fill', and then on this drop-down.
Where it says'solid color', I'm going to select 'linear gradient'.
Now, with this white point selected, I'm going to type in a color here of a hex code of #00061A,
and then hit 'enter' or 'return',63 and what I can do is go ahead and click this plus button
to add it to my palette.
I can set the alpha here to 0, click again, set that point, set that color-set this one
to-let's do 20% on this one.
We can go ahead and select this color and then select this down to something like 60%.
And then I'm going to come down to this point here and just drag this to the horizon.
So, something like that looks good, and what we can do is go ahead and lock this layer
as well, so Command-L, and now you can see that this one's locked as well.
Now what we can do is create another rectangle, and to do that I'm going to come over here
to this edge and drag out, do something like that.
And let's come into 'border' and then 'fill' and then back into 'linear gradient'.
We can set this to 0 as well, add another point, set that color, set this to 20%, and
on this one, set it down to something like 40%.
This one's still set to white, let's go and do that, set that back to 0.
And then we can come into this point, maybe drag it down just a little bit and then Command-L
to lock that layer, and there we go.
Now what we can do is start focusing on the top section, and to do that I'm going to use
primarily just the text tool.
And to get to that tool quickly, I can hit T on my keyboard, and then I'm going to click
and then just type in 'New York, New York' to signify the location.
I'm going to select that text and then come over here to this panel here that says 'text',
and I'm going to just go ahead and click on this drop-down and start typing in 'source',
and you'll see that I have this file here called Source Sans Pro, which is a free open-source
font that you can download off the internet or you can–it's also included in the source
files for this course, so you guys can upload it if you don't already have it.
And I want to set the size here to 60, and then I want to set the font-weight to 'light',
and then I want to come in to 'fill' and set a hex code here of #F8F8F8, hit 'enter/return'
and then add that to our palette as well. Cool!
Now what we can do is–with this layer selected, I'm going to Command-C, Command-V, come down
to this one here, and with the move tool I'm just going to drag this down, select that
and set that to 30, something like that.
I'm going to make sure just to align to the bottom of that layer and on this one, let's
go ahead and set a date to March 28th, 2018. Cool!
And then we can select both of these layers, I'm going to Command-G, call that 'location-date'. Alrighty!
And now I can come in and duplicate that 'New York' once again, so Command-C, Command-V.
I'm going to drag this outside of our 'location-date' grouping, and then, with this layer selected,
I'm going to hold Shift and then drag it to the right, and that's going to drag it without
moving it up or down, so let's just do something like that, and then we'll type in a time here.
So, let's do 09:45, and then I want to type in 'AM', and then I want to select 'AM' and
then change that down to 30. Alright!
Now, what I can do is go ahead and just select this grouping and the time, Command-G and
just name this grouping 'header'.
And now what I can do is go ahead and just space out these individually.
So, I want this to be 40 from the top, make sure I have the entire grouping, move that
up 40, then 95 from the left.
Then I want this one to be 40 from the top as well and then 95 from the right.
So, what I'm doing is, I'm holding Alt, and that's going to give me a quick preview of
the spacing of this element relative to different elements on the page or even the outside walls of the artboard.
So, while I'm holding Alt, you can see that I'm 40 from the top and 95 from the right.
And on this grouping I'm 95 as well, I'm 40 from the top, and the entire 'header' section
is going to be 40 and 95 on both sides as well.
So, that's going to wrap that up for the 'header' section.
So, let's do Command-L. I'm not going to touch this again, so we can lock that bad boy up.
And what we're going to do now is focus on the bottom section here, which is going to
show us our current temperature for the day, as well as the rest of the days of the week.
So, let's go ahead and hit Z on our keyboard.
I'm going to click here to zoom into this part of the artboard and the first thing I'm
going to do is create a rectangle, or like a rounded rectangle that's going to hold the
dates or the days of the week in them.
So, go ahead and hit R on our keyboard.
I'm going to drag out and actually set a custom width here to 63 and a height to 32.
Then you'll see that there are these like bullet points here, and what I can do is,
I can come into these and click and then drag it towards the center, and that's going to
round the edges of all of the points here on the rectangle.
So, it's going to give it this little pill effect.
Then I can turn off the 'border,,' come into 'fill', I can select this hex code here and
just go and just drop this down to 60.
All right, so, let's go ahead and just move this up a little bit.
Then I'm going to hit T on my keyboard to switch to the text tool.
I'm going to just click here, and let's go ahead and just type in TUE in all caps for Tuesday.
I'm going to set this to a size of 20, and actually on the the weight, I'm going to that
back to 'regular'.
And what we can do now is, with our move tool, we can go ahead and just move this in.
So, you can move it in and it'll center it like that, or you can–let's say this is
off-center–and I can select both of these layers, come up here, and it will center it
for us automatically.
So, let's go ahead and just group these together–so, Command-G, call this 'date-box', OK.
And now what I'm going to do is create a sun here, which is going to show us that it's
going to be a nice sunny day.
So, let's go ahead and hit E to bring up the ellipse tool.
I'm going to click, and hold Shift to draw a perfectly rounded circle here.
I'm going to turn off the 'border', come into fill', come down back to this drop-down, and
select 'radial gradient' this time.
And let's go ahead for the white one, let's set it to this hex code here, which is #FFC84F, and then...
Actually, I meant to set that one on the white one.
So, let's come back and copy that and then paste it here.
And on this one, on the outside color, I want to set that to #FFA74F.
There we go!
So, you can see that that is created.
What I'm going to do now is add this, like, cool glow effect.
So, with this eclipse selected, I'm going to Command-C, Command-V.
Now I have two of them.
I'm going to come to the bottom one here, and where it says 'background blur', I'm actually
going to click on this and do 'object blur' and just blur that out a little bit, and then
just drop that down just a hair.
So, now we have this cool blur effect.
Then I can just select both of these, Command-G to group them up, and just call this, like,
'sunny', so we know this represents sunny weather. Cool!
Now, before I move on to the rest of this, I'm actually going to turn this into a symbol.
Now, if you don't–if you're not familiar with what symbols are, they're basically UI
or designs that you're going to use multiple times throughout your project.
So, instead of copying and pasting them and–or doing it all over again, you can create a
symbol, drag that symbol in again.
Let's say for instance, two, that you want to update it.
So, what you can do is update one symbol, and they'll update across your entire project.
So, it's a way of working really efficiently in tools like Adobe XD or Sketch.
So, to do that, all you have to do is click on this grouping and do 'make a symbol', or
Command-K is even faster.
Then you can come over to here, on this icon, and you'll see that you have this symbol.
And what I can do later, and I'll do later in the tutorial, is just bring this in, and
you can see that this symbol has been duplicated, and if I make a change to it, it'll be reflected
down here as well.
So, let's just go ahead and just delete this symbol for now.
I'm going to come into this and move it about 15 pixels.
Then I'm going to hit T on my keyboard to switch back to the text tool and just come
back into our layer view here, and just do that–just click one more time.
Alright. Let's go ahead and just type in a temperature here, something like 83, even though New York
City is not 83 right now, but that's OK, it doesn't have to be accurate–this is just a prototype.
And let's go ahead and make this a little bigger.
Let's set this up back to 40.
There we go.
Then I'm going to hit V to move that somewhere like this.
Then I want to hit E to go back to my ellipse tool, and hold Shift, and just drag that out,
turn off the 'fill'.
And I almost forgot, I need to come into these and change that to the FAFAFA.
I think right now they're select to solid white, but for now let's go ahead and come
into this border here, select this color and we can increase this.
Let's try to see what that looks like.
So, it's a little too thick let's actually go back to 1, I think that was fine, and just
make it a little smaller.
So, something like that. OK.
And I can zoom into this really quick, if I do Command-3, it'll zoom in just to that
element, and I can work here a little closer, so I can see what I'm doing a little better.
So, let's move it about right here.
Let's go ahead and group these two, so call this 'temp-small'. OK.
So, I still think that looks a little too big, so let's go ahead and just make that
a little smaller.
There we go.
I think it looks good.
I can center that to the sun, and maybe just move it down 5 pixels.
Cool!
So, that kind of gives us that look that we're going for for each date, to represent the
temperature for that day.
And what we can do now is go ahead and just group all of these together.
So, I want to select 'sunny', 'temp-small', and you can see right now this is expanded.
Now, if I click on this folder, it's going to collapse, and I can go and just do this,
Command-G and call this 'date-weather'.
Cool!
Now, here's a really cool feature that I was really impressed by when I used Adobe XD,
and that is the option to use something called 'repeat grid'.
So, with this date layer selected, I can come over to this 'repeat grid' option.
You'll see that I have this option here to drag this out.
What that's going to do is duplicate that in a grid fashion, so it's going to be equally
spaced from each other.
So, this is really cool.
I'm going to click, I'm going to drag it out.
So, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday–so, that's all the ones we need.
And I'm going to just let go and then you'll see that we have these little pink bars here as well.
And what I can do is come into this and drag that out to space it out.
Now, I'm not too worried about how these are spaced right now–I'm going to actually come
back and do that later, but you can see that I was able to duplicate this pattern really quick.
I just thought that was a really innovative and cool feature when I came across it.
So, now what I can do is come into this and start editing all of this.
So, let's come into the day here, and then I'm going to Command-3, zoom in, change that
to WED, zoom out just a little bit.
Then I can select both of these elements and my date box, center those.
Now, here's another thing that I forgot to mention.
So, if I change this, as you see, all of it's going to change.
So, I need to Command-Z and actually, with this date weather selected, ungroup this grid.
Now, when I makechanges, it's not going to update across the entire thing.
So now, let's go ahead and select that again, then center it, and now you can see that this
one's just centered.
I'm just going to go through and just update all of these at once.
Alright, so, I went ahead and I updated the days of the week and...
Let's actually come in now and just start changing the temperatures here, because that's
going to be a really easy thing to change as well.
Alright, so, that does that.
And now what we can do is come in and start updating some of these.
So, to do that let's go ahead and just change Wednesday, let's go ahead and just delete
this artboard and create a new shape here, and what I want to do is actually create a rectangle first.
I'm going to round these corners.
And let's come into the ellipse tool here, and then I'm just going to create a couple
ellipses and–actually, let's go ahead and turn off this 'border' first.
And then we'll create a couple ellipses here, something like this.
I can hold Alt and drag this out so you duplicate that, hold Alt again, create something like this.
So, once you get this in a spot that you like, and this isn't the most beautiful cloud in
the world, but what you can do is select all of these shape layers here, and I can come
over to this icon here, which is going to combine that shape, and I can go ahead and
just name this 'clouds'.
And what I'm going to do is use this symbol, so let's come in and actually bring in this
symbol, drag it here, and I'm going to right-click and then do ungroup symbol'.
That way, when I make changes to this, it's not going to make changes to all of my symbols.
And then I'm just going to come to this edge, hold Shift and resize that, come back to my
layer view', and you can see that this is currently here, and it needs to be way down
here into this one.
So, let's go ahead and just select these and move it down here, and then move behind the
clouds, and then move it over.
And we me make it a little bigger.
Alright. And now we can group all of this, so Command-G and name this, like, 'partly-cloudy', and
then I can go ahead and make this a symbol as well.
So, now we can reuse this, if we want.
So, go ahead and just make this one 'partly-cloudy' as well.
So, I can just delete that symbol, come in and reuse that, something like that, 16 from the top.
This one's...OK.
Just making sure that these are...
Alright, so, let's go ahead now and delete this one as well.
Let's bring in this symbol.
Then I'm going to ungroup this symbol and then delete the ellipse here.
So, if you come back into our layers, you'll see that we have this path, and we just delete that.
And now, what I'm going to do is, create some rain here.
So, it's going to be a rainy day.
So, let's go ahead and hit R, I'm going to create a rectangle, turn off the 'border',
come into 'fill', and let's go ahead and just pick a rain color, so like this blue.
I'm going o Command-3 to zoom in a little bit, and then I'm going to come into this
and just drag that out, so they're perfectly rounded.
And then just come here and just turn that a little bit, and then I'm going to hold Alt
and move this out. Oops!
Hold Alt and then move this out.
Then select all three of those, I'm going to Command-G, name that 'rain', then just
move that over.
Then come into this one, I'm going to Command-G as well and name this 'rainy', and then make
that its own symbol as well. Cool!
So, let's move this one up just a little bit.
Something like that.
Let's zoom out.
Alright, I think that looks good.
Let's actually move it down one more pixel.
Alright, so, let's go ahead now, and we'll reuse the sun here.
On this one, we'll create one more icon.
So, let's go ahead and just zoom in here.
We'll delete this, come into our symbols.
I'll use this cloud 1, ungroup that, delete the rain grouping here.
So, let's delete that.
I can Command-C, Command-V, so now I have two clouds, and what I can do is drop the
opacity here of this bottom one, and I can just, kind of like, overlay it a little bit,
something like that.
Maybe drop it just a little bit more.
And then I can just group this now and call this something like 'overcast', and make it
its own symbol as well.
So now, if we come back in here, you'll see that we have all four of the icons that we just created. Cool!
So, let's go ahead to make sure that looks good.
So, let's do this one about 14.
Let's come and zoom out here.
Alright, and that's going to wrap up this section.
And now what we can do is go ahead and space these elements out nicely.
And to do that I'm going to select all of these here.
So let's go ahead and just collapse all of these groupings here, so we're not seeing
this massive layer and...
Select all of these, I want to actually move it all 40 pixels from the bottom.
Then I'm going to select this one and hold Shift and move it to the left, where it's
95 pixels from the left.
So, it's 95.
I'm going to move this one, hold Shift, move it to the the right, make sure that one is
95 pixels too.
And now you can see that this one is the first one here, and then this one is the last one.
So, what I can do is just select all of these in a row and then come over here and distribute
them, so they distribute evenly.
So, just like that, now they're all distributed evenly.
But it's important to make sure that this–the layers that you're using to distribute are
in between the ones that need to be added space to.
So, what we're going to do now is just go ahead and group this whole entire thing, let's
call this just 'weekly-weather'.
Now, there's just one more thing to do, and that is to create a section up here that's
going to represent what today's weather looks like.
So, to do that, let's go ahead and come into our symbols actually, and you know it's going
to be–say it's going to be a sunny day today.
Then we can make sure that we ungroup this symbol, and this is going to stretch this
out, we want this to be pretty big.
So, let's make this something around here, we can always come back and play around with the spacing there.
And actually, what I'm going to do is come into this–this temperature here, Command-C,
Command-V, drag this out, and then I can move this out and then just scale this up.
So, something like that looks good.
And I need to do the same here with this pill, so let's go ahead and just Command-C, Command-V
on this date box, drag that out, move this on top as well.
And on this one I'm going to set the rectangle here to a custom size.
So, let's set this to 79, and then 32, and then change this, instead of Tuesday, change
it to say 'today'.
Then we can select both of those and center them.
Boom, just like that!
And let's go ahead and just look at the spacing here, make sure that's centered.
Go ahead and just Command-G, name this 'today'.
I'm going to center it to the sun here.
So, that says that's centered, but it looks like it needs to come down, just eyeballing it.
So, it looks good, just go ahead and just group these together, Command-G, call this
'today-weather', and then let's go ahead and just move this up a little bit, so 40 pixels.
Zoom out, take one more good look here, and let's make one more change.
It's kind of hard to see the temperature and the location up here.
Click into here, just come into this rectangle, unlock it, then come into the 'fill', and
on this one let's–let's turn it up to something like 10%. Cool!
So, that makes this stand out a lot better.
And that's it, that wraps up this tutorial.
Không có nhận xét nào:
Đăng nhận xét