Adobe XD Tutorials

UI Design & Animate a Smart Watch App with Adobe XD & After Effects

all right so this is what we are going to be designing and animating today all right Gary Simon of course etro so just a few days ago I did a tutorial based on

one of the XD daily challenges that Adobe's having and it's basically a daily challenge is running for eight days I think they're on day for today and today or the one I did was Friday's

challenge which is design a weather app and a Smart Watch essentially so this is what I came up with right here so I figured I would do a tutorial now the animation part was not a requirement I

did that on my own I thought that would be cool to cover so what we'll do is hop into Adobe XD to design the actual interface of this weather app and then hop into Photoshop using a free

smartwatch template as seen here I'll show you where to get that if you want to create kind of like a presentation mock-up of the user interface and then use Adobe After Effects if you actually

want to take it a step further to show how the interface would respond based on like a swipe left or right gesture alright so what I will also do is show you how to export that into you know an

actual video format and as well as an animated gif that you can use to embed into you know you like your Behance portfolio alright so I this is based again once on this Adobe XD creative

challenge I if I could find that real quick it's at XD Adobe landing comm forward slash daily challenge this thing I get out of here you put in your name your email and they will email you

during the weekdays I think it ends this week any of the future challenges you can also do the previous challenges as well so make sure you subscribe here if you enjoy this which I know you will and

also check out corset euro comm let's get started alright so here in Adobe XD I we're going to use a custom size for the artboards so a pretty typical size for a smartwatch design

is 3:12 for the width and then 390 for the height alright so once we have that we're we're now ready to rock here so the very first consideration after you have your size and your ear your art

board here is the background color so I'm it's the same thing for smart watches you know just so as with phones if you're if you have a lot of bright colors it's gonna drain the battery

faster so you know it's not a requirement but it is definitely a consideration so we're just gonna choose a black background for this let's go ahead and rename this and I'll just call

this watch or I just call it home weather very initial screen and this you know once again this is based on just a fictional weather app alright so it's going to have just a Fahrenheit and

Celsius and as well as some type of icon to represent the current weather and then also we'll have a little bit some other information at the bottom which we'll get to in a second so the very

first thing is going to be the current day so we're gonna use a text field here left click and drag out all the way to the left and right and then we'll Center it all right and then we'll just say

this is Wednesday all right and hit escape and we'll make this white and I'm going to use montserrat font and I think that's probably pretty good maybe just a tad bit larger for the size the font

size alright so I now underneath it we'll go ahead and have the Fahrenheit so we'll just say 72 we want this to be larger because this is one of the most important elements that a person would

want access to so 72 here to just get our little degrees indication we'll have a little circle here with no fill and white and we'll make this side – all right cool

yeah right that looks good all right so well position it here for now and we'll duplicate that control D and we'll scale this down both of these down just a bit and this will be Celsius all right so

we'll go ahead and let's skellies down morning shift all right so you know one way to de-emphasize a lesser important element is through scale but also through contrast or colors so what I'll

do is take this one and and we'll put it kind of like in a mid area writer from a mid gray right there let's add that to a swatches and then we can also do the same thing with a little circle stroke

here so there we go now this is 72 in Celsius from Fahrenheit to Celsius would be 22 I believe and then over here we'll have a just an icon that represents the weather so you can do one custom

yourself but I'm not going to do that so instead on my icon fighter comm I can just type in weather and we'll make sure we have free and no link back for license type and choose um let's see

here this one right here and this also has some other weather icons that are free to use so you want to use a different one go ahead well let download SVG I'm going to show this in the folder

all right and then we'll minimize that and we'll just drag this sucker right there all right now depending when it comes to SPG's in your importing it depends on the source because sometimes

the The Strokes will scale down sometimes they won't or sometimes as you can see this the stroke is just remaining the same so we need to scale this down quite

a bit we'll make it white by the way but also the stroke becomes too big so we can just scale that down to around six I think six will work well and we'll just

scale it down a little bit more here and you want to make sure that you know when you're right aligning some content and you kind of have two columns of data you're paying attention to equal margin

padding on the right right and left as well as the top up here my scale is down there's just a bit more all right so things are looking pretty decent right around here now remember one of the most

important things I haven't even mentioned is the fact that you know you're designing on a very small device something that fits on your wrist so having real small tiny bits of data and

especially when it comes to text is a major no so I wouldn't go much smaller than this that is for sure all right so now underneath here I wanted to do something unique so I just kind of

thought of all right well let's say there's a seven-day forecast and we could represent in a real real quick visual manner the temperature from day to day and we could do that through a

vertical bar chart of sorts and so here's how we can do that obviously there's a lot of ways that we could do it but here's what I came up with zoom up here we'll take the rectangle tool

and starting again from the very left of the text just to keep things consistent drag out something like that will make completely rounded corners by pulling those in border goodbye and we're going

to go pretty pretty you know very light contrast here so pretty dark here and then don't worry we're gonna symbolize this a little bit more or add some more elements to them I'm going to

have let's see up here we're gonna duplicate this so ctrl D drag this up now we're going to we're going to have like a primary color we're not just gonna stick with black and white

although you could but it wouldn't hurt to add color so I'm gonna do like a purplish so that's c500 FF we'll add it to the swatches now let's scale this down just a bit

here it'd be kind of like a dot at the top of this little bar I'm also going to make this one just to get this eye this color in more the same color here so for that as well alright so now we have a

little bit more just a unique appearance so also beneath this eye we're going to have the circular the page pagination sort of you know the law I circle is down here sorry my brain is not working

well today so I'm just gonna drag these down and actually I do want a perfect circle for this although this is pretty close that's fine and then once we have these three elements we can take these

all three repeat grid pull to the right so we want seven of these there's six and here's seven all right so you can just drag these in all right so maybe up a little bit higher I'm just looking at

the margin at the bottom right left and top all right so that looks pretty good for now once you have these of the right eye distance from each other we can ungroup it and then we can I just create

kind of a a mock representation of just you know potential data for these so I'm going to take all of them over the last six rather group them then I can just easily change

the height of some of these so this day is going to be quite a bit hotter this day will be a little bit less hot and I'm just gonna do this real quick I'll pause it cuz you don't need to see me

doing each one of these alright so then even to even further reinforce and create a another visual cue of the data we can take the pen tool and just go in the center of each one of these and left

click and your eye and not drag rather we could create a Bezier curve actually between these initially I didn't but let me try that so I left click and drag like this actually maybe I'll back up

and I'll create more of a Bezier between these alright coming down here alright space bar drag if you need to see more of the interface oops keep going and then just end it right

here so now hit escape will come out and it obviously looks ugly ugly so let's go ahead and we'll thicken it up a bit maybe the two and make it our color

right here alright so now I we have kind of a nice just visual representation of you know the temperature from day to day and we'll also sim will take this one for instance and we'll say this is the

current day so to symbolize that we'll take this little block right here and make it our primary color but then take our circle there make it black and then we'll make this page indicator white

there alright so I think that right there you know any more than this would be way too much I so I think this is good for just the the interface we can consider it complete alright so what

I'll also do I'm going to take this once we're happy with the design we're gonna duplicate it and I'm gonna create just what a different day would look like so for instance Thursday change that now

Thursday right here's a little bit cooler so we'll say 68 I don't know 19 or something and then you can use the same I cloud icon assuming you know they're the same day or you can just go

back to that icon finder calm or any other you know wherever you're getting your sets at and just use a different one I'm not going to do that a little bit redundant so we're going to use the

same one here but then we all we will change this so this one will now become the active day this right here is black this right here is white and then we'll just make this

consistent with the other one so oops yeah that's right and then um this one becomes primary color and one more adjustment right there alright so now we have our two days of data and at this

point you definitely when I save now if you go to google and you type in a SmartWatch mock-ups for Photoshop or whatever you're gonna find a bunch of results this is one of them these are

free this is a free mock-up that I the one that I decided to use so if you click on there it'll automatically download the zip for you and once you open it up let's see this is what it

looks like so we simply have a sketch file if you want to use sketch for this or PSD for Photoshop so let's go ahead and open up the Photoshop version alright and here's why the actual PSD

document so here in the lay section this is where your artboard goes in this smart object layer so you can toggle on and off you double click there is the design so whatever you put in

here and save it's going to automatically update to there right here so for instance let's go back to our Adobe XD and then you can either just select one of the artboards if you only

want to export one or just don't select any and then go to your file export all artboards and we're going to choose PDF because we'll be able to import that into photoshop any type of resolution so

PDF here and then that seems good and then not a single PDF file though we'll just do multiple so export all artboards replace that we'll go back to photoshop and we'll go to open select our two

files and then right here relieve resolution at 300 make sure mode is RGB sometimes by default it puts in a grayscale and then hit OK and ok alright so we'll take this one or the first one

copy this so ctrl a ctrl C we'll go back to our smart object and hold shift the scales down this is quite a bit larger but we're going to want those original sizes anyways for when we import into

After Effects for animation and then you just I you know scale it up save it and there you go so if you just wanted a static you know non-animated you know way to present the design and an actual

watch this is how you would do it so now you could save you can also change the background color here by double clicking you know do whatever you want all right but for us we're not going to do that

we're gonna actually hide this and also get rid of the background so we now just have this watch here with a blank screen and we're going to save this and import it into Adobe After Effects for

animating the interface so I'm gonna get hit control shift & S to save this and um let's see here or watch design we'll call this I I'll just leave it the same name and I

will hit okay here and then now we'll open up let's see After Effects so now I'll just hit new project here if it'll go all right and I a new composition so our

composition settings are going to be will say 1920 by 1080 the framerate you know 60 fps is real smooth if you are actually going to have a video file that's what you want to use but if you

want to use an animated gif it's best to match it up you know gifts go at least for Adobe Media encoder when you go to export it the highest gift that we can get is 50 so 50 frames per second will

work well as well duration down here I wouldn't anticipate using emissions being any more than about 5 to 10 seconds I'll leave it at 10 though and then hit OK

alright so you can use your Alt key and your mouse Kruger well to size this up and down 50% seems to be pretty be pretty good here so now we're I let's go back to photoshop real quick though and

we're just going to save both of these actually I haven't tried importing a PDF and after-effects but um you know just to save ourselves some time I don't want to really experiment I'm just gonna save

this so ctrl alt shift + S will save for web PNG 8 will be fine for that this the image size is 1300 by 1625 that will definitely be large enough so that we

don't get any blurring so we'll save that and I'll just call this green one I already did new and then same thing for Thursday save that screen to new alright now

we'll go back to After Effects and we're going to import those three files so we have our screen one new and two new and then also we have our PSD file so we're going to import these and now

we're going to get our our huge Photoshop document here now we need to scale this down quite a bit there we go alright so let's see here right there looks pretty good you can

probably even make it bigger that way you know the screens more in view seeing the entire watch doesn't it's not that big of a deal alright let's go ahead and save this by the way let's call this

post all right so now this part says it's just a tiny bit tricky to get this right because we could see that this is at a perspective view it's not 100% flat so we have to create a 3d layer of sorts

that will work well so what we're going to do we know that did the dimension of our document in XD is 312 by 390 so the first thing we want to do here in after-effects is well actually we could

just I take our screen 1 let's see here yeah that'll be fine so this already has the dimensions that we need and so once we drag the screen 1 on here we can go ahead and create a pre composition so we

can go to layer with it selected of course precompose and this basically just it's kind of like creating a group if you never heard of a pre composition it's kind of like a layer group in a

sense so we'll just call this UI hit OK and now it's a pre comp so it changes the appearance down here and you can actually access it because it comes its own composition this is a composition

here that we created first double click on this we'll see now we have this pre-comp where it's just this screen UI and it happens to be in the exact dimensions that we need for the user

interface so we go back to comp one we can go ahead and scale this and get this situated as we need to be all right so right around there work alright and I what we need to do is I make sure that

we have this this right here if you see this view we're just showing you the mode hit f4 and you toggle between that and we're gonna use both but for now to make it 3d we click on this little

checkbox underneath there so now it's 3d and we have access to some 3d controls so that we can rotate it on a 3d axis so you can see that it's the perspective is the watch is pointing this way so if we

open up our transform options we'll see when we we check it to be 3d we gain access to our orientation X Y Z right here these rotations so if I move this one that's obviously the wrong direction

I we wanted to rotate on the Y and it's just very slight alright so we still need to scale it down though so I'm gonna hold shift well left clicking and dragging and notice how because we have

the background baked into the image just I mean it looks okay but it doesn't look good down here the way we can make this more seamless so you can see the whole the phones maybe you can see this

gradient that's applied the way we can do this is to with it selected hit f4 and under mode and this is just like layer blend modes and the very top is showing off my screen but there's normal

dissolve dark and multiply etc if you select select around darken that's obviously not the right one we can scroll through these by holding shift in the plus button until we get one that

looks like it's going to work well and I think this is it and this is ad all right so it but zoom up we can see this basically has removed that black background and now we can see the

full watch and I'd say that this is pretty good right here and so if you want to make any further adjustments like it's scaling it up maybe a little bit bigger you can

alright so now we have that I of course we have no animation we haven't added any keyframes yet so let's go ahead and start working on that part so I'm gonna go back to hit f4 see if we can scale

this in well I'm working on a 1920 by 1080 resolution so this uh-huh normally I'm on a 4k but for this video it's making a little bit hard to move around so here's what we have in our UI

we have our screen one new and we're just going to simulate what it's like just white between two different days for this app now I there's a lot of different ways that you you can tackle

this and these transitions and animations one thing to note here is it would be really cool to recreate the whole user interface here in Adobe After Effects so that we have access in a

layer for each one of these little bars and all these different elements and that way you could really add a lot of cool animation but that's gonna take a long time so we can still make something

that's cool just by using a whole flattened graphic as we're doing so we can just you know animate one screen in and take the other one out alright so what we'll do is go back here and this

is where we place the animation essentially in this pre composition so we can see here we have our ten-second time line so just we'll see right around here after about maybe maybe around two

seconds we'll go ahead and we'll push this over to the left and we'll also scale down and also make the opacity go out so to do that we hit I with it selected T that gives us

access to opacity that's a shortcut for that also hold shift input and hit P now shift will also add to our selection here for position and then also will to shift and scale so s alright so now we

have these three properties and we can add keyframes right here on all of them then we're gonna fast forward just a bit maybe right around here a little bit less than a second and then

we're gonna need to start moving this over so I'll hold I'll left-click drag hold shift move it over right around there and then also scale it down hold shift and then we'll

also take the opacity zero well take all of these right here oh and by the way since we're already on here we'll go ahead and yeah let's just take all these keyframes right click this is showing up

off my screen but at the very bottom it'll be keyframe assistant will choose easy ease all right that'll change how the animation takes place in terms of speed between the keyframes and then now

if we go ahead and go back here drag this over here and hit zero on the number pad there we go so pretty simple and that's probably even more time than what we need so I'm going to move this

back over here and get these a little bit closer so we'll make a faster animation all right cool all right so now once we have that we can go ahead and make the

second screen show up which would be Thursday so we already have let's just go ahead and hit ctrl D to duplicate this and then take our screen to hold alt and drag on top of this and that

will automatically replace that and it also saves your keyframe settings here this one is gonna be reversed though so we're all and we're also by the way going to move this right here kind of in

the middle of where this transition is taking place and move these over the very first one will be right there now this one for the position it doesn't make sense to make it come from the same

way it should be coming from this direction so if we go back here we want to make sure we're on these keyframes so you can take this little right or left arrow and now we're right on there for

the position that's the only element that we want to change so we can push this over right here so now there we go so let's go ahead I'm going to hit zero and there we go

so it starts over awesome so we're not done yet though let's go ahead and go back here and we'll simulate kind of one of the you know when a person drags our finger across will kind of make some I

like a little shape that kind of follows the finger a sense and we've seen this I like on Android when you're you're pushing something down on an app and it refreshes so let's go ahead and do that

real quick we're going to create a just a custom shape with the pen tool the the dreaded pen tool and I'm gonna left click up here left click right here and then we're

right around here basically at the furthest point you want it to reach out we'll hold shift left click to drag out a Bezier curve so now we kind of created a half or a semicircle that went a

little bit too far I think there we go okay so now I we go back to our select tool at V I think it would be cool to make this fill color this the the primary

color that we're using so we'll take the eyedropper tool and we'll get this right there we don't want to stroke either so make sure there's no stroke and so when this happens we want it to start like

right around here so we'll take this will make it begin right where our current marker is so to do that alt in the bracket key the left bracket key you see that it starts right there now and

then we're going to move right to the center of this animation or so and we're going to by the way to get a closer up view hold alt in your mouse scroll role we can get a finer view here a larger

view and what we'll do is here in the middle we're going to add a keyframe so we're going to drop this down to get access not to transform but the content so shape one the path the path itself is

what we're going to be animating the actual anchor points so we added a keyframe here and then over here when it just begins that's when we can adjust the path so you double click it and you

gain access to the the anchor points that we added so there's three of them one is right here you click on it now we can use the keyboard to just put it yeah right around there so now it

automatically adds that keyframe because we changed the path so now it does this with us and I know it doesn't look good here because the background and such is white but we also wanted to

to kind of just snap back into place afterwards so we can do that roughly right around here and we can just copy this original keyframe and just paste it and so it

goes back and we'll also get rid of the end of the layer right here by holding all in the right bracket so let's take these will do easy ease right click keyframe assistant easy ease and now

let's give this a go let's let's tidy this up a little bit closer so we don't have to sit there waiting all right so that's pretty cool yeah can I like it so now if you wanted to reverse that

process the whole animation so it's a seamless loop then we would just die let's see here we'll go here we have this and then this one we're just kind of we would just reversed what just

happened so we would take these keyframes maybe right around here and we'll paste them and now I will reverse what's happening so what we want to do is take this put

them here right around there and then this one right here is where it's going to go to the right or yeah it'll go this way instead so make sure we're on these keyframes push this over here all right

and so let's I let's take a look and see what this looks like so far so it comes in then it leaves and as it's leaving the other one needs to come back so coming down here copy this these

keyframes and as that one's leaving this one is coming back so again we're gonna have to reverse these alright so this will come over here all right around there or so so let's

see and then we'll go back to these keyframes and this is going to be coming from the right this time a little bit confusing so they're they're swiping

here to the left and then they're swiping to the left again maybe I had that the wrong direction yeah let's reverse this real quick or not reversed but if it's starting here

we won't actually want it to go back so let's do this no big deal no big deal I'm kind of messed up sorry about that guys all right so then this one down here will be coming from let's see here

the left all right so now we do it all right so cool now we can do is take this duplicate it and position it let's hide this real quick so we can see what's happening here position this

right when the animation begins right there and then we're going to rotate it so we hit our and get access to rotation and I believe we can do written 180 right there yeah okay and then something

like that so now let's go ahead and see what this looks like oops and that's because I didn't give this long enough right here the time line to find out where it's at right

let's see it starts off so right around three seconds I think when the other screen shows up after a swipe it it's happening a little bit too late like it should be a little

bit quicker I think so to fix that what I'll do is um we'll just make them in line with each other there we go and then if we check this out but I gonna have to update a couple things there we

go we must make these even with each other so now okay let's give that a final shot here awesome let's try playing that again here real quick

just so it's bigger on the screen now it's going slow because it was I loading but now it's as more smooth appearance awesome alright so now I you know you could also simulate the little cursor a

little circular representation of a person's finger swiping I did that originally but it's getting a little bit redundant at this point so now let's say you're happy with this you have our

three second animation yeah and you want a you want to make it a video just go to composition add to Adobe Media encoder queue it'll load up here alright and you would just take you know h.264 is a

fairly popular so that would be an mp4 saver where you want right here is where you adjust the settings but if you want an animated gif for instance to embed into like a Behance portfolio or

something you choose animated gif from here and then under animated gif for match source you can gain access to these settings by clicking on this preset button alright and then under

video you definitely want to make sure that their frame mate is at 50 and so if you want to make custom adjustments to this you just uncheck these checkboxes and then you know 1920

by 1080 for a gif is huge I mean that's gonna be a large file so you would definitely want to scale that down quite a bit I'll just try 720 for the height so 1280 1280 by 720 is still large 50

frames per second obviously the higher you have larger the file but still you want it to be smooth so 50 would be great for that and then everything else is pretty much fine so now we can just

go ahead and let's see hit okay down here at the bottom it's not really showing up there we go and then hit play and it's going to render real quick I'll just pause all right it's finished for

me I can open this up let's see we'll double click on it and showed up off my screen and here we go so by the way one of the things I think maybe confused about why is the background black when

and after effects it's white and it's because we didn't have a background technically so to control the background we can go to composition or no layer new solid just make it the same dimensions

you could change the color here and then push it to the very bottom and now it will render that and when you get a composition add to render queue and if you want to change the background after

the fact you go to layer solid settings then you get access to the same panel you can change the color there and you know all that good stuff alright so hopefully you enjoyed that I had fun

doing it so basically again just the process of designing the user interface and then you know optionally if you really want to take it a step further to showcase your work you use Adobe After

Effects to create the animation of sorts alright so make sure you subscribe here if you haven't yet check out Coursera calm and I'll see you real shortly

As a part of Adobe’s XD Daily Challenge, participants were tasked with designing a weather app for a smart watch UI. In this tutorial, I will show you how I designed my entry and also animate some interaction design using Adobe After Effects.

Adobe XD Daily Challenge:
https://xd.adobelanding.com/daily-challenge/

Smart watch mockup:
https://360mockups.com/free-mockups

Enjoy!

– – – – – – – – – – – – – – – – – – – – – –

Subscribe for NEW VIDEOS weekly!

My site: https://coursetro.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/coursetro
Coursetro’s Twitter: http://twitter.com/designcoursecom

Join my Discord! https://discord.gg/a27CKAF
^-Chat with me and others

– – – – – – – – – – – – – – – – – – – – – –

Who is Gary Simon? Well, I’m a full stack developer with 2+ decades experience and I teach people how to design and code. I’ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.

Now, I focus all of my time and energy on this channel and my website Coursetro.com.

Come to my discord server or add me on social media and say Hi!