Designing a Gift Wrapping App with Fergie - 2 of 2

[Music] [Music] hello again friends welcome back to adobe live i'm jack and i am here again today with fergie fergie's been working on a fun and festive gift wrapping app in adobe xd uh we've got a ton of people coming back for day two sarah mabes annika kathleen's in the chat kathleen was just live with the photoshop daily creative challenge every day this week 9 a.m pacific time it's been a lot of fun the designs that um kathleen's been making have been super cute if you're joining us over on youtube come on over to be hands that's we'll be reading the chat answering any questions that you have let us know where you're joining us from and let us know what kind of names you have for this app we still need a name for the app we had some good ideas yesterday so come on over be.net slash live and say hi um after the stream today we will have the illustrator daily creative challenge with julia vodka so be sure to stick around for that and uh put that out of the way welcome back fergie uh why don't you give us an introduction uh let us know a bit about you and what you're gonna be working on today for those of us who are joining for the first time sure awesome thank you so much so excited to be here again for day two thank you first of all for having me it's uh yeah such a great opportunity uh hey everybody if you don't know me uh my name is fergie and i'm a ux designer based over here in london in the uk um i have been in the ux world for about 11 years now um so i've been doing this quite a while i work in tech consulting so i get to go and help a lot of clients problem solve whether that's building uh internal software and solutions for their employees whether that's building their customer facing apps i do a little bit of it all and i'll just play a little show reel in the background here whilst we have a little chat so you can see a few examples of my work um i am on pretty much every social media possible so if you want to connect feel free i'm on instagram at fergie.design i am on youtube uh design with fergie is the name of my channel and i share a lot of tutorials with of course adobe xd um and some other tools such as uh no code tools and just other cool design stuff and portfolio reviews and speaking of which i have a really special offer for the audience today um because i actually mentor and do that a lot online with different platforms and you can find me over on super pier let me just go over here and this is where i offer portfolio reviews um costume you know if you want to have any lessons in xd or if you just want to have a chat a mentoring chat you don't know what to do you want some advice we can do that we can hang out and have a chat and i have a let me get this screen up so you can all take a screenshot have a special offer so if you use the code gift wrap 25 then you'll get a whopping 25 off of the things i offer over here um and this will last until the end of january so don't worry about it now enjoy the festive season but if anybody needs a portfolio review in the new year then you know where to find me so yeah that is that i like to just give back to the community um i'm also over on behance obviously where i'll be hearts now um i do a lot of my own live streams so you can always catch me over here doing fun little projects be it my own little passion project ideas or client work a sort of stream to share process and i also have a subscription zone where i share my most popular design project files that people are always asking me for because sometimes you know having a tutorial is nice but having that file to work on and do it yourself and have that as a starting block it's just a little bit nicer so for the low low price of seven dollars you can get access to all of the content that i put here there's no limit to the number of times that you download it or anything like that um there's also a private discord server so you can talk to me a little bit more one-on-one a lot more privately and very direct not going through kind of all these different platforms to try and get a hold of me um as well as a few other things including hopefully once it's finished a sneak preview of my ux book that i'm writing so uh that's a little bit about me again this is kind of everywhere you can find me feel free to connect i love to meet new more designers and uh have a chat so yeah but on with the show we are here to design a gift wrapping app so yesterday we went through and planned our screens and we did some lo-fi wire framing you know we're kind of working out okay what screens do we need what do we roughly need to put on there um and it was very you know put a few boxes put a few bits of text roughly do that kind of information hierarchy ask what's the journey going to be like type activity and then we started to design it so we started to add more of a ui layer to that today we will be finishing off that design we're going to look at adding some lottie animations which is one of the fantastic new features do you like lottie animations oh yeah of course yeah i love it i've been having so much fun so yeah i'm excited nice i love them because it just saves so much time and effort and work doing them yourselves because animation takes a lot of hard work and dedication and time but they're not difficult to if you have any experience in after effects um it's basically animating in after effects and then exporting using the lottie plugin so they're they they're not as intimidating as they seem i didn't know there was a plugin that's amazing yeah yeah there's a plugin for after effects you can download and it um exports your animation in the proper format so you can pull in your xd file i know what i'm playing with this weekend so once we're happy with our design we've added in those lottie animations we're going to go through and prototype it and i've got something exciting and special lined up we had a little peak of yesterday um then we'll also be sharing this to be hunt so i'll show you show you a couple of ways by which you can take your prototype from xd and share that online in a behance project so yeah we'll get going very cool first little present of the day we started off yesterday with our flowchart so this was this is typically kind of how i'll start a project when i have this idea just to help me focus um and really kind of work out what exactly is it that i'm trying to do so this is kind of roughly the journey that our user will go through in our app they're going to select the gift box shape then they're going to add what color they want it to be they're going to overlay a pattern then they might want to add a bow at the end and then to finish it off it's all going to animate and build and be beautiful um and the idea being this could be for you know potentially an eco-friendly uh gift wrapping business whereby they're going to use a you know uh recyclable cardboard to create these gift boxes use vegetable inks to print them for us and then kind of flat pack it and post it to us through the letter box so all we have to do is pop it open like some origami magic and then put the gift inside and it looks like we've put a lot of effort into our gift giving to our loved ones so let's have a look at the screens that we went through as well you can see we've got a few there's not loads of screens which is quite nice it's not an overwhelming sort of app this is our first page here um what i did do offline is if you know me you know i am team name your layers yeah okay there's this is no excuses for me to not name layers i have to go through and do that so that i know what is what because i cannot look at my layers panel and see rectangle 4001 4002 i don't know what that is that doesn't mean anything to me and when we're going to do auto animate we need to make sure things are named exactly the same otherwise it just won't work and things are going to break and that can be really underwhelming and really frustrating because then you have to go through and you find that it's because one of your shapes is called and forty four 4444 one is four thousand four hundred and forty five um just because of how xd will do that kind of incremental number when we're not naming the layers especially shapes so yeah that's gonna be important for prototyping if we're doing any kind of auto animate we want to make sure that they have the same name on both artboards so that the transition happens kind of as you expect yes yes exactly so i went through and named the layers offline because you don't need to watch me do that we all know how it's done um we have our first screen here whereby we're going to today turn this into a bit of a bit of a slider kind of select component type object and so they can pick which shape box they want to have and then we'll continue the journey with this square just because it's easier um i don't think there'll be enough time to duplicate everything to make it for one of the other sizes but that's kind of what i would do next so once they've selected this they can hit customize and then we come on over to pick our color and our pattern so we have our little baubles that we drew yesterday very you know just with the path tool with a pen tool to make a path sorry um and with the ellipse we just put a few quick ornaments together yeah yesterday fergie went through and did all of the all of these illustrations um of the box and and the i'm gonna say ornaments um we're all done in xd it was really cool so be sure to go and check out uh the replay not now after the stream be sure to check it out yeah i just quite like well in fact i love a lot of things about xd you heard me say i love xd many times yesterday we'll get that out of the way folks i love xd i'm also an ambassador so kind of the two and two go hand in hand together really it works out quite nicely um i really like that i can draw all of these graphics here in xd using the pen tool because obviously xc is all uh vector-based you know so i could open even if i had an svg i had drawn in illustrator i could bring that into xd i don't necessarily have to jump between the different softwares i can do everything just here where i'm really very comfortable to be honest um especially because i'm doing something that is really really really very basic i've basically just drawn a shape with a pen tool it's nothing crazy um and then giving it a different fill color that's that's all it is for a little box and we just drew it with some perspective um now you could do this in illustrator with the perspective grid is that what it's called yeah there's that or like the free transform there's a couple different ways you can yeah but so many ways you can also do it in xd yeah we could do it here it might not be as perfect or as you know straight and level but that's fine we're not here for that it's okay we like little imperfections sometimes mvp exactly mvp um we were also adding in the patterns after that so we have started to put together our components so if i show you our component here for the color we can turn our box what did i do when i renamed my layers i think i didn't turn the opacity back down on this one there we go here we go so that was our little trick to get the shading in and just add a fill kind of over the top we can have whatever color box we like we have a few more to go in and add and then we did the same sort of component for picking the pattern so uh i have these super cute illustrations that i can take zero credit for they're by a fabulous artist that i found on adobe stock um if you don't know me i'm i love pink my brand is very pink uh purple orange bright colors uh very vibrant so i fell in love with this the second i saw it um because it's not necessarily the traditional christmas colors but there's nothing wrong with that either i just thought for this we'd go with something a bit more bright and fun so we've put our illustrations kind of within these little circular windows the users can select and we've put the pattern into the box that we were painstakingly creating a grid for against the clock at the end of the day yesterday um let me scroll down here and i did kind of actually tied it up a little bit last night um after the stream just to make sure we had um these easy templates that we could use to fill in the rest of the patterns today so don't worry if you missed it yesterday i will be doing a couple more of these things again today just to finish them up um but basically uh there's no there's no maths or numbers in this um i did it by eye i don't do maths here okay um and i just used the rectangle to kind of draw roughly what looks like might be kind of halves to get our little template here again i just use the pen tool to create paths because what we can then do with this is take one of our pattern illustrations and drag it into the shape here multiple times and when we put that over our colored box we get one of our patterns so just like that yeah you basically made your own little like perspective grid inside of your pretty much it's not perfect but it works um and then i also added in this kind of like colored edge around the lid of the box to kind of contrast and match the pattern so whatever color you choose for the box um this will just help tie it in with the with the pattern a little bit nice so yeah um what we have to finish off is adding on a bow or a ribbon so we were talking about potentially doing this with again another nice kind of swipe interaction or something like where you can kind of click through them and then select the one that you want to have and then i did give you a little preview yesterday but we have an animation here of our box uh coming together this is with auto animate again love because why wouldn't you so we have our box coming in the lid goes on and we've built our box so what we can do later is we'll probably put this on the uh time delay and have it all build for us and yeah that's that's where we're at nice very cool thanks for sharing a walk you know walk through of what you worked on for everybody get caught up up to speed yeah hey chris hey shawn shawn um you'll notice that i intentionally avoided the word oh gosh baubles today because yesterday i thought of you when we were streaming and i could not pronounce her and i was like oh this is shawn was having the same problem on his stream so it can be there are so many words that are like that like there's words i won't remember them now but there's so many that i trip over on the daily it's uh yeah quite funny so i'm just going to finish adding a few of our colors here also i want to remind everybody that we also have the artist spotlight today so at like about an hour and a half into the stream it should be 11 a.m uh pacific time we're going to be showcasing an artist from the community and looking at their amazing work feel free if you would like to submit your own recommendation to the artist spotlight there is a tab along the top above the chat you can click on and submit either somebody whose work you really admire from the community or yourself and you can be featured on a future artist spotlight cody and i are on the same wavelength cody just shared this artist's spotlight info awesome love it when that happens i think it's such a cool segment just to see new artists or just anyone just more people in the community oh yeah i think it's so fun i love um seeing you know new behance profiles that i might not have you know stumbled upon on my own i'm like oh gonna follow that one [Laughter] okay so you've seen i've just been adding extra states to our component here for each of the colors and this last one is supposed to be gold but i think i got it really wrong yesterday it's a bit too peachy um so i'm going to go back to the default state because it's going to help us and do a little bit of a bit of a christmas magic trick for us christmas so yes here for all the magic tricks i'm going to share all the secrets guys take note so i'm on the default state of the component and i'm going to just double click on it so that i can go in and edit and i'm going to select the color just this the ellipse shape that i have here and i want to start playing around with this color to try and find something a bit more sort of gold which i always find is quite a hard color to yeah it is it's tricky the metallics just without it looking yellow or mustard or anything else but i mean that looks pretty good it's not bad here that's what if you like color picked the gold for the the top from the top of the ornament and just like dragged it a little bit lighter that's a good idea let's give that a go just a little eyedropper and then hey look at that yeah that's okay that was a good idea i didn't think of that at all good tip i like so now what the magic trick hopefully has done in the spirit of christmas is because we've changed this on the default state it actually kind of um i want to say filters through but it basically applies it to all of the states afterwards so i've not had to go through all nine of the extra states we've created for the different colors just to change that one bauble color so yeah if you ever are building a component and you realize ah there's a typo in a label or i'm not really sure about that color go we always go back to the default state unless it's something that is only in one of the states but if it's something that is in all of them always go back to the default state change it there and it will kind of like push that update to all of the other states for you so very very handy tip there also really good if you're working on a um i think we touched on this a little bit yesterday fergie if you're working on something and the color palette needs to change the same thing if you've got that component on all of your artboards for like a website or something you can easily change that color across the whole site yeah that's something i love about um libraries so you'll see you'll see that i have this you know libraries panel over here with a few of the things that we're using like the illustrations um and a few bits that we've added in a few things we found in adobe stock and what i love is with the colors so if i zoom out you can see we've got the kind of teal color the pink if i decide to come in and change i can do it from this library no i need to go back into the documents one so if i go to my document assets you see i've got some of the things here as well but if i do a right click and edit wait why not let me edit a regular one but if you've just added it in like i just did there you can edit this and if we decided we don't want to use pink we want to use purple we just move this and it will change or it should change everything there we go you can see everything's now this kind of purpley color instead of the pink that it was before so it's always quite nice to if you're thinking about changing the color of something use this to do that because it will change it everywhere which is saving you a lot of time a lot of energy and if you don't like it you can just press undo so yeah and i'm just going to do control z i've got got a pink back and if i don't want this anymore because i want to make sure i use my linked color because that's coming from my library that i just showed you that i can just remove it and go back into one of my many many many libraries it's really such a useful feature because they they work across all of the different adobe creative suite apps which i just think is great so if you've done these illustrations in illustrator you can add them in if you do some photo editing or anything in photoshop you can add it there and then use that photo wherever you want so yeah it's really helpful yeah i love libraries they're super handy for making sure that everything kind of stays on brand across all of your all of the different you know software and that you you know might be using um yeah it's super handy i'm just gonna finish off a few of the patterns that we had so i made my little grids here components so that uh we could make many copies of them and just just in case you know it's always good to make a component just just in case so we're going to create the pattern for this second row here of the pattern so i'm just going to quickly drag and drop in the matching illustration and you see because i'm just dragging and dropping into that shape it uses it as the fill so this has been so easy to to create quite quite frankly rather than trying to just place it i mean you can do there's nothing wrong with just placing them a bit more organically um you could do that too but this is just the route that i went down so we have many many nutcrackers we could even or or wise men or kings or whatever they might be um we can even kind of click into them to go to our image and use the reflect tool if we want to add a little variation yeah so it's kind of tilting one way tilting the other way and do all sorts really so we could just do that to make it a little different yeah and then what we're gonna do with this let me just cut this and then come to our component here make sure i'm on nutcracker three and the first thing i'm gonna do is just take our little selection oops selection highlight where are my layers selected there we go see i name our layers so i know exactly which one it was make sure we're selecting the pattern that it is i'm just going to remove that one paste the one that we want in i'm pretty much just lining up i'm lining it up centrally and then to the bottom here and for the lid maybe we could use one of these greens so it's not as pink let's go with the dark green and just like that pattern got another pattern down voila so we'll just do a couple more of these not just three more of them so let's do the horse um yeah yeah so let us know in the chat if you have any ideas for a name for our app yes somebody yesterday mentioned rapid so i used that for now rapid is the name to beat so and it could be punny if you're only all here for the punny names so fergie i don't know if you i don't think you've mentioned this yet but how how did you get into um you know user experience design what led you to this on this journey oh good question um i had studied uh graphic and digital design um when i was at university so i was quite lucky that i got to do like a little bit of everything um from you know super difficult animation things to after effects movie making um which i love and admire but definitely don't have the skill for all the patients for um and i had really gotten into doing sort of web design and app design at the time um i knew how to sort of do some website coding with html and css so um you know the iphone was out so that kind of i think really pushed this kind of apps space and i thought oh well this is kind of kind of fun um and when i graduated was applying for those kind of uh web design and mobile design roles because ux the term ux wasn't exactly a thing yet it was i mean it was but it wasn't as widely known um in the industries so i became what was then i guess uh i'm just a web designer type person um can't exactly remember the job title doesn't i don't really get caught up on those kind of things it's it's the role going to do what i want to do yes cool i'll take it um which i think is a good thing to keep in mind when you are job hunting don't worry about the job titles um [Music] and especially since they're always changing so much like i feel like that you know job titles change so often yes they really do um so that yeah that was that was kind of it um and i've always sort of been mostly in consulting and agency kind of world um i had a couple of years when i was in doing ux design in investment banking so for one of the big investment banks in europe and and that was that was great fun um but just for my personal style of working it was quite um i just realized i've overwritten that one uh not a problem we have an undo button for this um so the the style of working like in-house to me was a bit repetitive um so i did a couple of years and then decided let's go back to consulting um and i've not really looked back i really love it because i can work on all kinds of kind of client challenges and everything so yeah that's kind of how i got into it and i just love it so stuck with it yeah it's always nice to have to be presented with different different challenges different work um kind of the same way i like uh having a variety of different projects to work on so i can totally relate because you you were in um illustration before right jack yeah my my background is i've had a very interesting career path um yeah i started with medical illustration um and i've done a bit of animation and eventually meandered my way across to um now my role as a ui ux designer so yeah i started in illustration um i still do a lot of illustration but i find that i really enjoy solving the you know the problem-solving side of things it's very satisfying what was the coolest thing or the the thing whatever it might have been that you enjoyed illustrating the most doing medical illustrations like that to me sounds like that must have had to have been yeah do i am i allowed to like say the clients i worked for i i have worked on the the younger i would say audience so mostly what i did was hire at higher education textbook publishing but i really enjoyed working on um the younger age group stuff i just found the style to be a little bit more like i had a little bit more creative license i guess in that world than that work so those were more fun for me oh cool that's been so much fun oh this responsive resize go away don't need you right now love you don't need you just get dancers so they're not headless dancers tanya's saying you both just answered a bunch of questions that i was wondering about well feel free to ask them ask away tanya let us know if you have any questions we are happy to answer them for you yeah happy to answer anything i always find it really interesting to find out like um when talking with other ux designers like how do they get into the field because it seems like something that it always is like everyone's like so how do you become a ux designer it's like you know such a hot topic yeah and really it's just you could come from any any uh discipline any field you know you don't have to have a design background um right and you'll have transferable skills to do some part of the ux process you know whether that's you've come from doing market research you'd be a great ux researcher it's the same activities but just you know in a different space um yeah you don't have to be an artist to be a ux designer just a problem solver exactly yeah i think i always kind of had even though i was i graduated with a degree in medical illustration i think i always had those tendencies um towards problem solving that was what i really enjoyed the most i guess that's what i enjoyed the most about medical illustration i think and the projects i enjoyed the most is when i had the chance to like use my skills to solve like real education problems which it wasn't as often as you would think but i really enjoyed that side of it nice melinda is saying i love the font you are using which one is that i think maybe the rib anyone i have everybody want that is uh it's called that baggio yeah b-a-g-e-o um i'm pretty sure i bought that from um creative market oh okay yeah a bit of a bit of a font order chocolate oh yeah i know i know the feeling i mean show me a designer who isn't i mean right if you didn't hold fonts i'd be worried i'd be like you're a real designer sure look we all have the same bad good bad habits ah let's take a look at red to match the lipstick or something tanya's saying i went to college for the last two years for graphic design but i thought i wanted to do wanted more in to animate and special effects wanted to do more animation special effects but i don't like it as much as i do designing and figuring things out yeah i mean that's really you know you try a bunch of things and see what you know what kind of areas you like and don't like i mean you can still apply those skills um to whatever you choose to do right i mean i think that's what fergie's kind of saying is that like anything that you learn still has an application in whatever career you choose i think i did one of them twice how overly enthusiastic of me i think it's because i did the horse yesterday and i've done it again let's just delete that state that's fine there we go no big deal another nicely in order which if you like things named and in order cool all right so we've got our color picker finished our pattern application done let's move on to the bows okay now this i think we're going to have a lot of fun with let me delete these we don't need them anymore we got some really fun bows i've got one that i've used before i buy a pink one so i'm starting there of course you do so this came from a cupcake project which for anyone who wasn't here yesterday oh yeah show this it's so good i love this project this was basically the inspo so i set myself a challenge i wanted to make this cupcake builder but i wanted to challenge myself to do it on one artboard okay just one and i'll even open the xd file for anyone who doesn't believe me um there might even be a screenshot in here because with components it's just so easy to create this kind of sliding picker kind of thing um with just one art board so i made all the components so this top one here is for picking your topping there's one for frosting one for the sponge bake uh sponge bake sponge base the the the sponge face what can [Laughter] always something to trip over and that wasn't even a hard word uh a magic sprinkles button um and i didn't do the whole flow because i don't want to design a checkout or anything like that you know it's pretty pretty standard um but you can go through select the different toppings that you want say what would a frosting you might want to have um which base so maybe we want to do like a red velvet with the cream cheese and some chocolate biscuits on top maybe we want to add some sprinkles that's my favorite part and they're just raining um but yeah this was all on uh one artboard so if i just scroll here we go the evidence people i have receipts this was uh this was the insight for this gift wrapping project um but i had kind of decided doing this on one artboard would be tricky ish um you could do it if you really wanted to so it's a really nice challenge to set yourself um but for the things and the cool animations that i want to be able to do here we do need like the different art boards for that so yeah that's why we're doing multiple multiple multiple things here didn't want to limit what we were up to we're just just color on just a bow at no bottom pattern let's liven it up a little bit so this bow actually came from a version of that project where you'd select your cupcake and then it would you'd say like purchase or build and it would put the cupcake there and then kind of go into a box um so yeah we design a box um all right bows so we did find some on adobe stock yesterday and this was a new thing that i learned that you know jack showed me yesterday because i didn't know this was here but on libraries panel you can type in your search so if we search i don't know ribbon it's going to search my libraries but i can click the button to search adobe stock and that's going to go and find me pictures of ribbon brilliant yeah to have that right in xd like where you're working so you don't have to go into the browser or go anywhere else um and you can add the previews to your library where you could purchase it straight away so yeah i thought that was really really clever so we've got one bow here let's let me just unlock these and move out tanya is asking how do you know how many boards you need to do an app cool so this is kind of part of my planning that i started with yesterday um because this was this literally has just been this idea in my head like i'm just praying it all works out how i picture it in my head this is this is really live this is live [Laughter] so i did draw out this um this flow chart and for anyone who wants to draw these kind of things the fabulous plugin that i use for this is called whiteboard it's been my favorite for a number of years now especially i can highly recommend it's so good i use it all the time as well it's so handy so you can pull in a flowchart um like just example or mind maps they have all kinds of things so especially if you're part of like a remote agile team a lot of these will be really familiar to you um but you can pull it in as like a base and then you edit and move everything around it has all the different elements like sticky notes and smileys and the different parts of the flowcharts that you can just drag in and the nicest thing is if you haven't done a flowchart before and you're wondering why is that a diamond why is that a square it tells you because a diamond means you have to make a decision and a square is just an action so yeah it helps us so because i had planned out the flow of okay well i want the user to uh choose what shape box they have then choose the color then choose this we started off by just adding artboards for these stages so we've kind of had those four and then because i want to do some sort of animation at the end when we've kind of got our final selection ready kind of do a nice animation of it being built and put together um i've just started to add those few on the end um but i think most of the time the beginning of a project you don't really know how many art boards it's going to take um and there's you're not really limited by that either i mean look look how big the the pace board is in nxt we have we have all of this space to fill up with uh with artboards so imagine if you're doing and we're using the large iphone um artboard size as well we're using the iphone 12 pro max size so you could design literally a whole whole app with multiple flows and everything um in the one document which is really nice to have that kind of space um let's go back here i'm gonna pull this in from stock let's have a look so many options yeah we had that one that looks really nice as well so i think what i'm gonna do is show a little trick so if i click on this little shopping basket it is going to license this for me uh it's popped up in my browser oh i thought it was just going to do it straight in the app oh so let me show you all so it's just opened it for me and i can just hit license because it's part of my credits that i have i can just click it will do what we need it to do just like that um it will add it to a library i don't want it in that one i want it to go in our gift wrapping one so then it's going to move it over here for us um maybe we could do the other one whilst we hit two let's do this big bow just license this one cody just shared a link to the whiteboard plugin tanya said that makes things much easier definitely cool there we go we've licensed them now so we've just licensed those two and you'll see straight away we pulled this in when it was a preview and you know something is a preview because it has the adobe stock watermark on it that's not there anymore because it's all synced through the library so it knows we've just licensed this and purchased it you know we've paid for it now it's ours so it's given us the actual uh full rendered image without the watermark and the same with the bow a little ribbon one here you'll notice that little shopping cart icon that's on like this one for example isn't there so that's how we know we've actually purchased it so and if we hover over we can see what type of uh asset this is so this was from illustrator this is uh an image so you know we can um open up these things in illustrator if we want to but what i would love to show everybody is can i do this with this uh no okay so let's take that one away let's use this one because it is an image we can do a right click and edit in photoshop that will open up photoshop for us i've got my library here see it's just it's it's everywhere can't get away from it but what we can start to do here is edit our image so we know i know that we don't want a white background on it so the first thing is i can use the wand i can get rid of that and i can hit save and because we've taken it from our library and into xd when we go back to xt just like that it syncs so quickly magic yeah even if you're working with a visual designer or another member of uh you know another team member it they can work and do what they're doing and you don't have to pull in the photo again or do any updates like that everything just syncs um which is just really nice so then what i'd like for us to try and do is if i open the library we've got pinks and turquoises we want to kind of change the color of the bow so what we could do is do uh we could do a hue and saturation change here so we're not like overlaying a color layer or anything like that we're just playing with this oh yeah that's pretty close really nice now all i'm gonna do is hold down um oh you know what i didn't turn on yet today oops not that one let's put the keystrokes on so you can all see the shortcuts that i'm doing on the keyboard so i'm going to hold down command select the image and then i'm just going to say image crop because i don't need all this space around it um and then what we can do is go to libraries and we can add oops i probably need to select it so if i select both of these here we can add our graphic and then we have our pretty little turquoise bow and we could make an adjustment here again so if we want to make this pink let's go along and try and find how we get pink maybe purple do we have any purples in ours not really but it might be nice so we could do a purpley one so again go back to my layers select both library panel plus graphic purple bow and since we're in photoshop let's can we open this from here i just want to open the image of this guess we're going to go to illustrator then to do that one just so that we have a few different ones so i'm just going to close this one now i'm not going to save because that's our original red bow we do want to still keep that we can see we now have our purple one and our kind of turquoisey teal coloured one i'm going to go ahead and open up illustrator going through all the programs today learning a little bit of everything doing it all and i'll show you how you can literally just take something from illustrator and drop it uh right into xd so we could skip that library the adding to library part if we wanted to um really easily let me just open it from over here shravel's asking do i need a degree to get a job as a ui designer in any company i have a finance background tell you what the finance industry uh is always crying out for ux designers so there are definitely times where having the domain knowledge of being a specialist in a particular domain like finance um is actually more important to a business and a company than having a degree in in the you know the creative skill because the design is something you can learn you can pick up and i would say you don't need a degree for necessarily yeah you can i have a design degree i didn't need the design degree i just i just did it um and then paid off the debt for many years afterwards because it's not it's not cheap it's not free um but no i i would say you definitely don't need to go and get a degree there's plenty of other ways of um learning to be a ux designer picking up all the skills with without paying an absolute fortune for that you know there's there's courses there's free youtube videos there's plenty of books you can read um there is uh so much um online content that i would say you don't have to get a degree for it's my opinion and i've never seen it damage somebody in in interviews i actually do a lot of interviews for my clients that i work with when they're trying to build teams and yeah we look if somebody has a degree sometimes but to be honest we're more looking at um what is their what's their background what are their skills in what we need them to be able to do you know it's not a hard and fast thing i would have said let's make this blue nice so you're just using uh recolor art in illustrator to change the color of the bows yes yes sorry i was too busy chatting about it just letting everybody know glad you got my back there jack yes so we thought we'd just make a few different shapes and different colors so we've got a blue one here um so i'm gonna select that and we can add it to the library um if we want to then edit and change it all over again but we can also this is all vector you can see all these crazy shape layers going on we can hit copy we can go back to xd and if i just move this make it smaller move it that way we can actually just hit paste and this is going to paste in the vector for us because xc is vector based as well so we don't have to do all the sort of fiddly other things we we don't want to so like we have a really nice collection of bows here that one's not quite loaded yeah nice set nice variety yeah so we can have some choice let's just do one more in a different shape and color i'm not sure why this one's oh no it's fine i thought it hadn't loaded into the library properly yeah it's just it must be the preview it's just doing a struggle a little bit it's just like oh you're asking too much it's on the struggle bus let's do i like this cute bow tie looking one that one's cute too so edit edit colors uh recolor artwork but i'm not going to change because i think all the shading and everything is is beautiful it's magnificent i cannot do any better so i'm literally just going to use the color wheel slide around if we could get a goalie color maybe it's ambitious it's not too bad maybe it looks pretty good you gotta be there's always like that fine line between like too much too much orange or too much green yes i think we'll go with this and we could add this to the library so for example we would do the exact same thing with it selected hit our plus button graphic and then it goes into here however we have yeah that's i think that might just be extra shadow preview see if it comes in right in xd am i just re previewing the alpha a little bit weird oh yeah yeah all right interesting cool good to know yeah all good all good all right we have a fantastic bunch of good looking i i get far too excited for all the the shiny colorful like ah extras [Laughter] honestly it used to have this i think you're gonna need a couple more selectors there yeah i might have done a few many yeah we'll probably do a few more so this is fine but we said we wanted to do a sort of slide in type um design here so let's move these artboards so that i can put these to the side this will make sense in a second so i just want to put these here so that i can get to them easily because we're going to need to resize them and place them so what we can do now is think about the size of it now this is obviously like way too big for the size of our box so we can just change it maybe we just want it to be a cute little sort of pom-pom style in the middle so we could do that as one and then what i'm gonna do is just use the shift key so it stays in that kind of horizontal position and i'm just going to move it just just just over here out of the way basically then we'll take our pink one which i think is we'll leave as it is and put that one over here as well but we might have some that we put in maybe a different position so maybe we put a bow on one of the corners we could maybe do it at a little bit of a fancy angle or something put it on the side probably a bit much the patterns maybe we could put it along the lid side of it like that oh yeah that might work nice so you're basically just setting these all up in the position that you want them to be when they slide in like final and then sliding them off so we can set them up to animate yeah just might try this little 3d transformer a little bit just to see if it helps you see how this works with the uh bow shape nice just kind of faking that perspective a little bit um i think that's pretty good so then again i'm just gonna hold shift and move that over here and i've got a big purple one i might only do one of these i don't know we'll see maybe not the maybe you don't need the red because you've already got the other colors kind of match your color palette i think so and yes cody is reminding everybody that in 40 minutes we'll be doing the artist spotlight so be sure to nominate yourself or somebody whose work you admire to the artist spotlight tab right above the chat and we'll be taking a look at someone's work and um show them all showing them off in about 40 minutes so okay it's good it's good i think we're gonna think we're gonna make it i think we're gonna we can do it you're doing fine plenty of time yeah and then let's do another side though because i think that was kind of nice so i'm going to command t to bring up our 3d transform or you can click the little 3d box over in the inspector panel i just love keyboard shortcuts then just make they make life so much easier i need to get better about using them i'm so bad that and like remembering the names of the tools and like you know that uh the one that does this yeah the names of things is that's that's a struggle then all i'm going to do is kind of zoom out take one of our bows put it kind of far away and then go to my layers panel i'll start to select all of them yeah that's all of them and i'm just going to space them all out equally so this is going to turn into a little slider carousel of both but i just want to make like i feel like this is already a party because really what i need to make sure is that only one of them is on screen at a time so i might need to put a little bit more space yeah more space but what we can do here's another trick of the day second festive magic trick we're going to group them and then we're going to turn on one of my favorite tools what this is going to do is allow us to control that spacing in between so it knows that this is a horizontal stack of items and not uh like this so this means that if i change that spacing from 77 i mean you can see it's all kind of odd at the moment we could um we can we can click into the stack and a little similar to repeat grid you can hover over the spaces and change them individually so i could put loads of space here a little little little space here but actually because i want them to be consistent um what i'm going to do is type here 100 pixels and we're going to see that's enough it's probably not quite enough so we can type in 200 and it just moves everything for us so that one looks pretty good pretty good oops nice no don't click the box that bug goes up there just so this one needs a little extra space so what we can do is just add that in because all the others fit fine um and then as we select that bow this one's off-screen so this is gonna be our nice little carousel swipey component i don't actually know what it's going to be called horizontal slider maybe that's what it's called and oh so we can go ahead and make this component what i'm going to do is mask it so we only want this to be visible my rectangle tool over our box so just do that about there then select our group as well and i'm just going to mask it so command shift add m and then we can do a command k to make it a component and what we could do is make it so that for the default state we actually don't show any of the bows so i could move that here just to be off-screen i think that should be about right and we can then go ahead and add in states like we were doing before so new state we can have gold i'm just going to name them by colors because i think that's quicker take the group move it over sound effects important sound effects are life there's always some there's always something some strange sound i'm going to make for something which one is next the blue one i might just number the bows that might be easier let's call this one one row number two let's double click get our stack group move that in so that goes up there row number three yeah it's really helpful to have your kind of all of your states planned out before you make your component it makes a little bit easier to like line everything up yeah i think so um it's good to have an idea of what it is that you want to do um everything is you know you can change anything and everything at any time which is which is really nice um [Music] but yeah just have an idea kind of run with it and see what happens change it later [Music] it's uh the nice thing about design it's not really with some things there's a little bit of i guess a rule and a right and a wrong but for most part not really there are no rules add a bow and maybe i could give our user a little bit of an instruction so swipe through i was like where's my spell check please to pick your way to pick the perfect oh yeah i like that but and then we'll make this more of a text box hold down alt then i'm going to want my grid here actually so i'm just going to turn on my layout grid because we had made sure that the buttons and the the box fit before i just want to make sure the text is kind of in the same column space that line height is ridiculously cool there we go and we can make this a bit smaller so this could be no size 14 and i think that's okay let's turn that off for a second and swipe through what size is our title we can make this a little bigger maybe a 20 just put that grid back on what's the shortcut for that this one this one no this one come on shift and apostrophe i'm like wait which grid do i want any mini money well um yeah we talked yesterday that that other grid's a little bit harder to to look at when you're working yeah tiny squares definitely especially if i you know have a day where i'm like oh i didn't do the contact lenses in it's like really really dizzy even with them to be fair um then what we can do is i made the buttons a component so we don't need a well make sure we do need a back button but we want this one to say finish because that's the last step um [Music] yeah let's add in our interactions though maybe we want to add a i want to add in an arrow to indicate that the user can swipe well you've already got the you've got the text down there but it's not a bad thing tab and arrow thinking that way we could make it so well we'll get test because i don't know if we can we could let them tap the arrows left and right or we could let them uh just kind of swipe on an ever looping kind of carousel which is the easier way to do it actually basically let's loop it through first so let's head to prototype mode and let's add an interaction and we're going to use the drag for the swipe and we want that to auto animate too i need it to go to a state no can we not could we not do that tap um we're gonna fake doing a swipe folks for the time being so we'll just use tap because we want it to auto animate rather than just transition i think that's yeah i mean if you did really need or want to have it do a drag gesture you could i guess theoretically have a whole bunch of art boards to have a drag through that would be like the old way to go about doing it so yeah yeah we could do it that way or we can just do a tap tap mvp let's see what the chat want to see what does the chat wanted yeah sure anybody want to learn which way around to do this um i could show both that's okay i think we have time uh from one we tap we will go to two two is gonna go this is why the numbers were easier three yeah that way you're not trying to remember which one comes next yes three to four four [Music] to five and then five is going to swipe back to the beginning of the default so we'll have a nice loop so now we just preview this you'll see we need to change the speed i think for them maybe if i like let's pretend i'm swerping [Laughter] i think the only thing is that one at the end five yeah that one goes back to i am going to set that duration to zero seconds because that way it will just do it and then we won't get that kind of spinning backwards uh effect that's just a cheat cheat mode coming in there we go there we go so now it looks like it's on on this kind of forever loop um rather than spinning all the way back to the beginning because we don't make anybody dizzy if you have lots of options there and i think yeah the duration was just a little too slow so i might just shorten that to about 0.4 let's have a look yeah that's about right [Music] chat what are you saying about the jack the drag animation you want to see it because we could do it yep let us know do we go through and make the artboards um to demonstrate how do you want to see how to do a drag i guess i'll do a drag animation i mean we can at least do like at least demo it maybe even if you don't end up going that route i'm sure how you might go about doing that in nxt yeah let's do that before i move on to that thing so what we could do alternative option let me just duplicate this artboard down here so if we were to have this one set with our i should have named the component rose so that's our default we can then duplicate the artboard and then what we're going to do is go in select our component select one duplicate put that for number two duplicate melinda wants to say wants to see the the drag option so all right for it here we go we're doing it anyway folks so here we go we've got it all on the different art boards so all the pretty bow options all right we're gonna go to prototype mode and with my component oh it's got it set to component what we're gonna do is actually slightly different so we'll select the artboard select drag trigger and that is then going to go to the optional bow too just like that so select the artboard take our little blue anchor handle here drop it over here drag auto animate and just like that it will do it for all of our artboards hopefully let's see what happens when we go back to the beginning so now if we drag across here it looks like and behaves like that real slider because i'm controlling them i'm going backwards and forwards that little bit but yes like going back to the beginning i don't quite like that as much so i would probably use this one to be a tap set it back to zero and just fake it smoke and mirrors folks it's about the illusion and the art of the possible and because we know the developers can do this yeah that's a good that's a good point there to say like you know if this was actually going to be uh a real app we're just kind of giving the developer what we want to happen um right exactly and then if i you know if this is what we want to do when we use this drag interaction and we've prototyped this all together you know we could set our home screen we can call this uh oh selection drag into action and we can share just that one flow with our engineering team so from this we could select the development view setting which would give them access to know the easing the duration of that easing animation and everything so that they could then code that up for us and then we just generate the link and send it over to them so it's super helpful i really love that we can do everything in um in xd i think it's just so handy that we can go from an idea to sketching wireframes to doing you know high spec high fidelity designs to shipping it off with um everything the engineers need yeah it's pretty you know it's pretty powerful cody and moendo both like the drag interaction but he says that looks great melinda says that is that's awesome so hey big thumbs up glad you liked it okay so we were going to do a drag animation here but we've learnt our lesson so what i'm going to do is unmask this there we go for the g not on m uh remove that white box select this group here and this is literally just my different box shapes and we're going to turn this to horizontal scroll to make a scroll group out of it and then i get these little handles to play with that you'd be familiar with from repeat grid because i'd already positioned this and everything it's in place i just need to make it the right size so now if we go into preview i can i mean i'm using my trackpad for this you could click and drag and use the mouse but um yeah so now we can swipe and look between all of our box options and click our box and here we go we can start start to get into the journey so it's really starting to feel like an app now with all of the corrections wired up yeah and i know we've got i don't know we've got until after spotlight almost has finished this and then yeah we've got about 20 minutes until the artist spotlight so okay we're good to put this on default put this on default and that's already on default okay great let's get into prototyping so something i've added on here is you'll see hey you've got a cube box what is that because it's outside of my scroll group this is just my little trick um but actually i'm wondering if i need this now let me turn this off because what i want it to do is take the box and kind of auto animate to the next screen for that sort of consistency so let's see if it will do it yeah okay so it's harder harder to see with this background color actually that we might need to change that we need to make this like super dark color or no oh don't like it sorry it's all right we're just not going to have a white box anyway we know that um but this is you know these kind of contrast things as things to to be aware of and and think about when we're designing so actually you could take you could try like a gradient i know you were exploring that a little bit yesterday have it be darker kind of at the top and go to lighter let's try it let's see yeah need to flip it that's um okay so where it's dark let me pick this kind of color that we have here and then up here [Music] i don't know what it is but it just looks like it is a little stormy yeah yeah nice isn't it no wonder is it because we need to go more oh maybe more into the color rather gray maybe that works because the idea is um like the same turquoise at the top to kind of match it to the previous screen let's try it might be a little bit too bright though what about this one that's two same issue let's kind of go with this for now so if i hm how can i do that fill i can't just copy paste the appearance i don't know if we can do that on upwards let's yes learning all the tricks all the tricks and probably change this to be something else later but for now i don't know let's make it orange so we can see it properly all right so for prototyping because i've named my layers and inside scroll group we have um we have the box options and we have um ignore this these are the cards that they're sitting on with the tags we've got tubebox cubebox and box so because we've got this cube box and because this here is also the exact same cube box it's going to animate it over there for us when we select it and i've already you can see i've already put that that prototype link here going from uh clicking on that image to here we could also say put it on from clicking on the card so that whether we whether you use wherever the user clicks within that kind of rectangular space it would work so here in preview mode we can swipe have a look at the different box options and cube something like a bit funky yeah let's see is it from this one let's maybe it's because i've got two things going on tap auto animate duration one second tap let's make sure they match at least let's have a look yeah that was kind of weird i'm wondering if it's because the does the other artboard if the other artboard also needs to have up that background if it's animating to like white first i would say because of the gradient although that might mess up your background yeah um but we can uh put a white rectangle behind it yeah that might work all the way at the back um and then what we can do let's see because we might just have to fade it to zero oh no that was okay but it didn't animate yeah i don't know what happened to the why the box isn't transitioning now maybe it was doing it from my sneaky layer okay so what we'll do is we'll take our cube box from inside our group here copy it and then just on top of that we're going to layer it oh i see what you're doing you're going to make a hidden one yeah make it transparent like we said it's not about making it perfectly work that's for the that's to happen when it hits code so now we can swipe through lovely lovely we can yeah there it is it was because i did a magic trick i was being sneaky about it all right so then actually we can test this we need to add in clicking all of our colors all right so we've got our component selected prototype mode and then we're going to click double click into our bauble so clicking on the pink bauble is going to go to pink state clicking on purple bauble is going to go to our purple state let me just make sure this is in default mode yes it is okay good because then it should copy all of these down for us blue goes to the blue so we're just going to match these all up oops clicking too many times green yellow and we can probably turn i don't know if we need this to be auto animate or not but we'll see it's not really much to animate to be honest then silver and gold so you can see it's not it doesn't take that long to do so now if we go here i think oh look at that it doesn't so the same way you can edit in default um you have to go in and you have to go through yeah yeah so from here oh this is long okay fiora says watch it dang watching in the past again were you not or did you were you behind a little bit viola yeah if you if you notice that um the little icon um that says live if you click on if you click on it it'll bring you up to the most recent if you're a little bit behind your video player um either that you can refresh the page and it should bring you bring you back into the present oh i'm gonna regret picking so many colors now we'll do it for the first few i mean yeah oh i i really wish it did that thing from from default that fault yeah i wonder though if i had added the prototype links like this first and then maybe before making the states yeah if it would have um i wonder yeah that would be something to something to see i wonder we could check that let's go to design mode let's make sure this is on default new state tester prototype mode no no just doesn't just doesn't do it oh well it's okay we're gonna like click through these as quickly as we can yeah and you don't have to i mean you can uh do a few of them and yeah that's not uh the best use of time or the most interesting thing to see so let's just do this top row here maybe uh [Music] yeah so go on here purple blue let's just make it so we can sort of switch a couple of them but you'll get the idea this is just gonna switch everything around for us let's make sure we wire in the pink because you know i'm probably going to do the pink box i mean let's let's be real we i know i'm going to pick a pink box so now here in our preview window we can see firstly we get this little finger pointer so we know there's a link here so we can click on pink to make it pink because we've gone through a couple of them from pink we can go to purple from purple go back to pink um so we can kind of click through our top row here of colors for our box and okay so when we got to turquoise we didn't didn't have an escape plan from turquoise correct pink just quickly there we go all right so yeah you get the idea so you can click through all of them and it will be the same sort of thing for the pattern so let me just set this back to default so that's ready for when we go through and that's the time of five minutes okay all right so when we click on this one it is going to go to nut cracker one this one is going to go to beating drum [Music] um let's do a few options snowflake and let's do dances okay so then if we go from nutcracker we might change our mind so let's do let's only do a few other snowflake we might want to also do hey dances yeah so fergie is just flying through adding the tap trigger to each of these to select the different states that we've got set up here up just because we have quite a few to do let me just click from as fast as my mouse will let me [Laughter] and then let's go here to snowflake so that if we select this we could go back to one of the other few that we've got already um wired up dancers i shouldn't have to do that second one okay and then from dance's state let's add a couple here so yeah this is the prototyping does you know depending how detailed you want to be if i was to put all of these in obviously it's going to take me a little bit more time um but you don't have to like add absolutely everything especially for doing any kind of proof of concept design you can just do that yeah that doesn't need one you can just do um the few that you think you need to do um because those the patterns we know we're going to click through we can also pre pre-select pre-determine you know what color the box is going to be so um we've got nutcracker one i think they're all very pink and turquoise but obviously um snowflake dancer so the orange box here not really doing it for me so i think we could select maybe the blue look at that it's a bit like it's kind of okay so we've got snowflake or the dancers or the drum the nutcracker do i think it's okay i think it looks somewhat christmassy and it's not you know it's not pink because i'm trying to dive branch it out yes that's the phrase i'm looking for okay so we have a few there let's go ahead and set it back to our default so what this means is just that when we're going through our prototype we're going to click on a few colors but then go back to the purple so that when we go from a section picture page um it looks like we're you know oh this is what it was we don't have to click that we can click the button as well there we go let's uh sorry i just realized we do have a button so let's use the button tap auto animate one second that's fine okay same for next it's going to auto animate and take about a second might be a little long we can go through and have a look yeah and you can see how it looks and adjust the timing from there that should be going backwards that should be going over here we'll go through the bows and then we hit finish so we just need to finish that up and then what we can do here so this is our home screen so this is our app flow and we can preview this now so we can swipe through look at our boxes put this one centrally you could do a tap if you wanted it to be but let's hit customize yeah i think one second is a bit too long um we could change it to pink purple blue whatever we want we know that we're gonna go with blue let's hit next probably not have that auto animate that could probably just be transition yeah that might get rid of that weird fade [Music] we can add our patterns here yeah look at that no flex painting again they probably could have been um transition instead of animate so that it doesn't do that kind of fade thing so for example uh where's the next button this one we just want to change this to transition and could be dissolve or you could do none we could do like a page you know push so we could say push left i think if we wanted to do that kind of thing um i think i'll just do none um and then we don't need to worry about the timer so we just click next and it just goes next let's let me see i don't think we can change these all at once so if i click that one oh no maybe we can i'm holding down the shift key yeah you can you should be able to do it on multiple all the little things there we go oh no um undo don't do that oh undo i think it's my best my best friend sometimes and then we can just do it really quickly oh that's super handy that we can actually do um all of them just from heading back okay one two three all right let's uh preview this and then i think it's just about just about time to hop over to the artist spotlight almost sounds good okay that's because i think i know we're going to go through yeah we'll go for a snowflake pan or something in the end but let's set that to default and then we'll add a bow and then well what we'll do in the design here is apply the colors and everything that we've just um chosen so what i can do is take the box fill copy that and we have on this artboard our cube so let me double click into here paste the box fill um i could take those away all right are you ready to hop over to the artist spotlight and we can switch back and finish up this the package uh right here in a sec awesome all right so we're looking at jamison perkins behance profile today which is really fun i see automatically some fergie colors going on in the um profile here um yeah so anything that you want to take a look at i mean obviously i think the first one you're gonna pick the first one kind of a sucker for these colors already already like oh what's this looks interesting [Laughter] feel the app that you talk to still helps track your feelings by asking you simple questions getting those feelings off your chest and recognizing them is the goal cool so jameson it looks like is a has 15 years of experience in branding marketing print and ui ux design so yeah i love this i love this just right here i think this is just so cool to see um you know the page of sketches really gets it's really nice way to showcase your process to prospective clients to give them an idea of how you kind of work always nice to see oh yeah the the mood board here or it looks like the sky style scape um they've got is really cool i love these like the yeah everything about this it makes so much sense like you can definitely see how the inspiration has been pulled from all of these yeah yeah done some wireframing so let's get into it yeah i like the presentation too how it kind of flows from that sort of stylescape to the um wireframes really seamlessly um i like how he's clearly because you've mentioned his his background he's clearly done um a little bit of everything for this for this one you know like with the branding and everything i love this effect he's done yeah that's really cool like actually making it a bubble i'm wondering if this was all done in xd because i see xd over there under tools but yeah that's because that would be impressive 100 it could have been it could have been yeah it's just loud ones yeah that is whoa yeah oh look at that i love that animation so cool oh this is this is so my aesthetic but take my money let me download it now oh that's clever yeah i like that bubble feelings bubbling up emotional bubble that is really clever this is just such a lovely way of presenting having this kind of animation through the screens i love this bubble this is beautiful and then having these in the background so you can kind of see a little bit of everything because you don't always need that iphone frame you know i like that yeah like he's done something different it's really cool so look what else we've got a few mock-ups screens yeah i like that they've kind of customized their mock their mock-ups like you said not really it's not just an iphone screen like having it be a mock-up that has like that little bubble in the space with the screens is really cool yeah helps keep everything kind of on on brand for the app get some advice oh there's a video let's see bubble's just gonna take a break wow i love how they've i think they must have done some auto animate with this yeah for sure especially those yeah the side up the screen that slides up and stuff yeah [Music] really nice oh that was fancy oh should have looked at this first for inspiration the uh the bubble like menu style i think works really well with the concept overall it's like really they really kept everything like on brand with that circle element throughout yeah they really did everything just is so cohesive but with the fact that they've done that they've really used that that's you know the circular bubble shape with all the round edges and round buttons and then this is just talking through this is quite nice it's like an annotated video yeah about how it works that's really clever that would be really easy to create in xd you wouldn't necessarily have to do it separately yeah you know you just change your artboard size put the text at the side yeah yeah do you use uh xd for like presentations and recording videos i use xd for everything i think i mean like to the point where i've even used it to to do a floor plan of my my home okay and i was trying to work out like what new furniture to buy but make sure it would all fit like what layout should i do um have a look at one more yeah yeah let's go with food or gaming oh that's a tough choice because i love both but i think maybe let's go with food because it looks like a little bit of a different style that's dead umichon saying oh nice tanya says awesome yeah everybody be sure to follow jameson um on behance like i said whenever i see these kind of artist spotlights i like to follow the person because find cool cool new work that way [Music] this is crazy isn't it such a different style yeah i love the uh this looks like a recipe app maybe where you pick different choose a protein yeah choose a add-on okay i've done the color palette like these little toggle buttons those interesting little highlights yeah like it's it was throwing me off for a minute there when i saw the little cursor mouse going at the same along with yours i was like which one's which what's happening no that's not me but it's a cool that's a cool idea too to show the interaction having that it's really nice okay there's a video but what else let's try and go through i wonder if it's a menu maybe it's a menu i don't know yeah maybe for like a restaurant yeah um yeah like add to order yeah i have to order ordering really nice okay now let's let's let's have a look okay tanya saying i was wondering if i could do everything in xd oh you totally can i think i live my life in x2 i haven't found something that i can't do in xd yet let's let's put it that way okay let's see what the other video was quick that might be more of a walkthrough oh that's fun yeah very fancy uh any slide oh yeah i like how to it looks like they've got the you can either like do a swipe gesture kind of like you were talking about with yours or you can use that tap for those arrows at the top to cycle through yeah it's nice to give users options because i think swipe can be a bit of a an advanced interaction that those of us who you just do use swipe you know we automatically kind of try and swipe on everything but if that's not a familiar interaction pattern you know you've not learnt it and there's not an obvious button to to click on um users don't always know so i think it's quite nice to have both options yeah wow really awesome work definitely folks go follow jameson go check it out got even more projects i'm sure are going to be just as awesome or more awesome so yeah very cool already following so yeah me too so let's hop back over to your screen fergie but yeah if you if you want to um be sure to submit you know somebody to the artist spotlight up there so they can get featured just like jameson on the next stream tanya's asking if we draw in xd as well and yeah um frankie did all of these uh elements here the boxes and um nxt so if you go back uh later and watch the replay you can see a little bit of xd drawing little ornaments or uh baubles i'm getting better i think i'm getting better it doing so well [Laughter] and then i think this layer needs to go here yeah there we go yeah i also i mean i draw stuff in xd too it really depends if it's something that like i don't if i don't need to open up another program i can just do it really quickly in xd i will tend to just do that since i'm already in the program you know yeah okay all i'm doing here folks and i'm trying to i'm like really really trying to get this done it's like my personal mission to actually finish is just like putting the things that i know i'm going to select yeah in this um like built version so this is what we'll end up with just need to grab a bow i need to put them on this one as well come on i know i have a thing here where is it try selecting the artboard and it should show yeah there you go yeah cause it's all off the artboard yeah the edges okay so i need this to come down here tanya i don't know if shawn is still here sean kozil but sean was um before he only had a xd x i feel like he had xd and photoshop or something like that and so any vector work that he was doing he was doing it in xd so here okay so now our box will be on let's go bow quickly quickly we want you still got plenty of time we've got like a little over 20 minutes so oh really okay why was i thinking it was less oh breathe it's nothing like a bit of pressure to help you get something done no no we've still got time all right come in here so basically this is this is the design the box design i'm gonna select um of course i've gone with the most pink things possible it's me uh pink is the brand so not not sorry sorry not sorry um because remember we're trying to sort of smoke a mirror is what we're doing here so if it were to work what i want to happen at the end is we hit finish and the user has this really awesome animation just paste that background there of the box being built so what we can also do is i want us to have a um screen where we do a little animation so we're going to add in a lottie animation real quick let's go to about plugins panel looking really fun thanks oh yay lottie we're gonna get into live yes so yeah this is a plugin that you can install right in xd too yup and you can uh search for existing uh lottie animations or you can hit that little my lotties up there at the top and it'll take you to any animations that you put together in body so trying to look for something christmasy that that's a cute santa yeah we're gonna do it like as though he's about to go and build your box oh yeah that one's coming out of the box that's perfect look at that okay insert as lottie let's select our artboard insert slotty that's quite big okay you could scale it yeah i don't think it quite needs to fit because nothing really happens on the edges i think they're just there yeah and transparent but let's see so what we need to do is put the right settings here for our lottie so we want it to play automatically or you could play on tap or no playback we want it to automatically and then what we can also do is turn on the loop so if i now preview this artboard you see he'll just keep jumping out that little box at us um it's not quite center so i might just nudge it over a little bit and then what we can do is put add a little message saying uh where create okay um no no no no the elves albus v yes yes i would start crafting you're well everybody is asking if we have picked a name yet from the app i think we have a temporary name yes we've called it rapid did anybody come up with a really fun [Music] yeah let us know if we got if anybody has a different name for the app just adjusting the text annika says can you change the colors of presets in lottie i'm guessing you mean the um the animations that you search for like other users have created um i know that on the lottie website you can change the colors uh yes exactly i've only ever done that on the lolli website um so you can sort of change the colors make it more for your brand and make it fit more in with your app so i might do something here and you know obviously first thing i do is make the ribbon pink make the box our version of turquoise i think i'd leave santa i'd allow him his red suit i think i think you know not trying to start any christmas wars here so banter can stay in red he doesn't need to be on brand that's his brand but yeah you can open that up and uh so for example if you click on the three dots here view on web that's opening in my browser over here this is what it looks like on um lottiefiles.com and you can also search here um you can change the background color the speed um you could start to edit things so yeah you can do loads loads more and just make a free account on lottie to do that yep so yes that's the answer the answer is yes all right so um let's make sure let's get rid of that plugins panel we've got everything linked up together because i don't think we do we've got the next button there finish is going to go here um it's not going to auto animate we're just going to transition then what we'll do is on this artboard will have a timed transition before we build the box so let's we'll let it load for maybe i don't know two three seconds let's go with two yeah um so two seconds before it swaps over to building our box uh i don't really need it to have a do a duration no we just want it to kind of go there i think and then let's test this so click finish excuse me nope it went backwards oh yeah look at it there's a second wire hang on what's going on here xd i think i put that in that goes there oh is that because that's the no the other ones aren't that i don't know very suspicious where's the elf on the shelf is he see up to neighborhood causing havoc okay let's double check that i want to make sure that finish buttons oh uh-oh now it's completely removed it what is going on yeah make sure you've got like the actual the whole button object selected any button right we want to go here please on tap you're just gonna transition none that's okay right now not quite sure what that was little glitch in the matrix um we've got santa for two seconds hmm no something else has gone wrong yeah doesn't seem that seems longer than two seconds it doesn't i wonder if that's something to do with the lottie being on loop i can't imagine it let's put that on one delay and let's put the duration as one maybe i did something weird one two swap yep all right try turning the repeat off on the body and see if that fixes just have some to jump out at us once no there's something going on with the wire between those two this is very strong let me just click on your artboard again in the in prototype mode it looks like there's a rogue wire there that no that's just for the lottie to play it was that what that was yeah look okay yeah lovely playback player excuse me xd you're showing me up so cheeky okay plain artboard drag and drop over here let's tie a tap and see if it will play nice that way yeah i'm just wondering if it's a weird thing with the lottie animation yeah the time time not loading building same same okay all right wow okay so now i changed let's work out how long this was how long was that animation not helpful yeah you'd be nice if it gave you a little duration indicator okay well let's i'll try once more we'll just use tap as a backup in case we need um we'll put it on a one two three four it's been about five second delay i think that's how long the lottie might be okay no really showing us up today that's funny it must not uh hmm the two must not play nice together it's the only thing i can think of i guess this being on a time trigger though maybe that's something to do with the car yeah it might have competing time triggers on the same artboard that would that that kind of makes a bit of sense okay but that's fine we will tap on this artboard to go over here and then what we're going to do here is use our time trigger so um after zero seconds it will take let's say 0.6 i don't want this to be too quick 0.6 to go to this second one or to animate and then we want the same again time autonomic 29.6 and then that's our box ready to go and we've got a minute yeah getting close to the end so okay let's not ambitiously try and add another screen you could you could add a gift tag but yeah let's just go through this as a full journey and then hopefully we can still show you how to um full flow we can show you how to add it to behance so we start off with our first page here we've got our boxes we want the cube we could click on the cube or we could click customize we're going to go through add whichever color we want for our box i think we'll go with this blue color here hit next and then we can select which pattern do we want just go with the snowflakes so cute next oh we need to add the pattern in the color here that's what i need to do so then we fake drag um we can click through our bows here or we could go through and use the other flow that we had down below um we're gonna go with this pink one here click finish the elves are making it now [Music] [Laughter] all right so the only thing to do is copy our box fill color onto this layer here as well as our snowflake pattern color that put this here also needs the little pink bit [Music] nice we made it you did it all right so thank you so much for hanging out with us the past couple days here fergie and working on this really fun um gift wrap uh app in the right gift gift wrap app i like how that sounds um everybody be sure to stick around for the illustrator daily creative challenge that we've got coming up right after us with julia vodka but yeah um fergie let us know where we can find you and this project and all that yeah sure so this project will be available on my behance projects so you can have a look at it again there and i will of course link to these videos in case you want to re-watch anything you can find me over on instagram at fergie.design youtube design with fergie tiktok i'm basically on everything so wherever you are come and find me let's connect and don't forget the special super peer discount yeah go back and watch the replay and screenshot it but all right thanks everyone bye so foreign

Channel: Adobe Creative Cloud

Views: 1,501

Keywords: Adobe Creative Cloud, Creative Cloud, Adobe CC, Adobe Cloud, Adobe creative suite, #MakeAdobeCC, #AdobeCC, #ACCTags, UI/UX Design, UX/UI Design, Experience Design, XD, Adobe XD, User Interface, User experience, Design, How to make an app, app design, web design, Digital design, Adobe, Adobelive, Adobe Live, interaction design, UI/UX tips, four, Rebecca Ferguson, Fergie, Jack Watson

Id: 9NHbxvSlW9Y

Length: 117min 20sec (7040 seconds)

Published: Thu Dec 16 2021