Adobe XD Masterclass: Episode 77

[Music] [Music] good afternoon everyone and welcome back to another adobe xd masterclass my name is howard pinsky senior xd evangelist here at adobe hope y'all doing well on this friday afternoon hope you're all excited for the holidays as well this will be the last adobe xd masterclass before we go on winter shutdown but we will be back in the new year with all sorts of new content and i would love your feedback if anyone has been watching these master classes and has suggestions on what they'd love to see in 2022 definitely send me a tweet at pinsky so i can check those out and better plan for next year before we dive into things i want to say a big hello good morning afternoon or evening to everyone joining me here live on behance we've got jack and katarina cornell amwenda if i mispronounce your name i do apologize wade and who else do we have i saw someone i saw jason and robert great to see all of you if you're hanging out on youtube and you do want to chat along head on over to behance.net slash adobe live so we can i'll see each other and have a great time if anyone has questions definitely throw them in the chat hey megan and hey rick and hey bliss and golden rose great to see you all awesome all right so we're gonna dive into things today and we're gonna just get going so over the last few weeks we have been working on this streaming platform almost like a blockbuster redesign it's been a lot of fun and today we're probably gonna wrap up that project just so it doesn't go too long especially over the holiday break and i did post something on dribble not too long ago on how to use video support in adobe xd as well as the end of playback trigger to automatically transition between various clips and we may explore some of that today and we're also going to explore things like auto animate and how that works with video all sorts of really cool stuff so again if you anyone has questions about xd design whatever it might be definitely throw them in the chat i will be taking a peek from time to time hey joanne and drew gareth chris great to see you all and happy holidays indeed all right let's go ahead and hop over to oop adobe xd and here's where we left off last week so two weeks ago we started the process of building out this streaming service and we started with the landing page or splash page whatever you want to call it and we built out the logo a little bit of a tagline and of course a call to action now this call to action could be an email field it could be sign up buttons could be all sorts of different things we also built in a login experience using hover states and states as well so if i go ahead and play this we have a nice video in the background just to give a little bit of motion to this particular design you don't want to go too far with these videos because then it could be a little bit distracting and push people away from the experience login there we go and then did i wire this one up might have been here wire this up to our home screen where we have our featured video or series which in this case is a documentary and then as we scroll down we have additional content now we did explore how to fake scroll triggers right of course adobe xd doesn't have scroll triggers at the moment but we were exploring how we can use hover states to kind of fake something like that and i am working on a video on exactly this it's taking a little bit longer than expected but i am working on it and to give you a preview of what that looks like right here is our home screen one more time as we scroll down and as our cursor or pointer in this case this this little guy right here as this gets to that area right although that content kind of flies on in and then we have another set of content right down below and as we move out it flies out which is really cool so again no no scroll triggers but it's a nice workaround if you do need functionality like that all right let me dive in here just bring that stuff back perfect okay so today we have a few different options of course we can explore what we will be looking at what we did look at a little bit earlier in you know this featured page where you know it might feature a specific movie or show with the auto advancing clips we might get to that but i think we might want to start with maybe one of these pages up here movies shows live or favorites and i think movies and shows will probably look very similar but the live experience could look a little bit different and that'll give us an opportunity to really explore a few different experiences here so what i'm going to do is i'm going to start creating a new artboard and if i go ahead and press a to grab my artboard tool i can select let's say the web 1920 which is consistent with our other artboards and of course you can go ahead and duplicate one of these artboards if the content is similar but you know this one here is a little bit different from what we're going to be designing on this art board to the right so i'm going to start nice and fresh now we are going with a darker experience so if you take a look here on this second artboard over to the left we have a very dark color that we're using as a background now there are a few ways to get this exact color over to our new artboard we can add it to our colors within our document assets just like that now if you have an entire artboard selected it's going to add all the unadded colors to your document asset so definitely keep that in mind may not be exactly what you're looking for right you can also copy so if you have the artboard selected you can command ctrl c and then if you go over to the next artboard and right click and then paste appearance it's going to take that background and pop it directly there which is exactly what we want and i'm going to name this live all right someone was asking about the witcher 2. you know what i haven't seen the witcher 1 yet we'll get to that maybe over the holiday break we'll get to some of the shows that we have to catch up on we have a lot to catch up on now the next thing we want to bring over is the navigation bar now last week i believe we started that process of building out the navigation bar which includes the logo over here to the left which is a component or an instance of a component we have some text links and then we have some information to the right which has a profile photo notifications and search now at the moment this navigation bar itself is not a component and i think this would be a great opportunity to convert it into a component so that when we do bring it over to another artboard if we do have to make changes globally we can very easily do that so either within our document assets or the components section over to the right or the command or control k shortcut you will be able to create a component and now i can copy it and paste it right over there now uh drew is saying this may be a dumb question there are no dumb questions drew but does xd's video playback also support any audio included in the mp4 clip yes it absolutely does um now this clip doesn't have any audio but over here to the right we have our heads up display that we can access and within this we also have a mute button so if you do want the audio playing and it does include audio just leave it alone if you don't you can always turn that audio off now the team is working on another update for video so that you can play separate audio as well as the video so you know some of you might know that if you have an artboard selected and you go into prototype mode you can have a time trigger on that artboard that allows you to play audio playback right at the moment the audio playback and the video will not automatically play at the same time that update is in the works hopefully maybe january possibly february we'll see um but that is something that is in the works and coming hopefully soon and jason is saying do videos still have a 15 megabyte limit at the moment they do and that's one of the things that the team is actively keeping their eye on the last thing we want is to increase that video limit you know 100 megabytes or whatever it might be and then performance suffers because as you increase video size performance has the tendency to you know drop a little bit so the team is keeping an eye on it but that's the plan we want to increase the video size and also increase the amount of video codecs that were we support not just mp4s but also movs i guess that would be file formats not codecs but codecs too maybe alrighty perfect so here we go so we have our navigation bar in place now this is the live page so what i want to do is just dive in here and make some changes to the text so that it does reflect it so we have 700 and 900 for the weight so i'll just switch that over to 900 and this one over to 700 and i'll shift the active indicator all the way over just so that users know that this is the live experience all right that looks good now if you have experienced a live experience keep saying experience but you might know that sometimes especially youtube tv i was looking at that quite a bit you know when you go to that live page not all the time is it this full screen view right sometimes you'll see a little bit of a preview at the top and then down below you'll see some additional content so what i might want to do is right here at the top i might want to kind of build out that live preview and we'll be able to expand it if we do want to watch it right all right paul's asking my question is can you design and publish a website with just xd not knowing any code oh and cornell's also saying can you turn off those pop-up tips yes so under the xd menu down to preferences you can turn off productivity tips usually before these live streams i reinstall xd because i often have an unreleased version installed on this computer so i reinstall the public version and that automatically turns back on now paul's question um for the most part no xd is mostly a design tool but there are some plugins that can generate code it's questionable whether that code is decent or not but if you're just looking for a very basic html or css experience that might do the trick all right so i've gone ahead and drawn out a rectangle and this will help me grab a video and place it into this particular shape now one thing you're going to notice if i hop over to finder and i do have this video here of basketball which i downloaded from adobe stock and pop that in there now of course it crops it because if i go over to my layers we have our object mask and if i expand that we can grab the video and move it around right so maybe i'll place it right in this area here and then when we do get around to creating that expanded view we'll be able to move that video you know full screen we'll want to make sure that this object mask is at the top of our layer stack but but also below our navigation bar now in addition to the video which i'm going to dive in here and make sure that over to the right it's set to play automatically and maybe i'll also have it loop as well but in addition to that video we may want a little bit of content that gives a bit of context as to what exactly this show or you know piece of content is so what we're going to do is we're going to dive in here and we are going to start maybe with the title so with the text tool shortcut key t we'll just do something like oops spartz no sports cast we'll keep it very generic make that nice and large and you know we've got we've been going with a few kind of stylistic typefaces lately so maybe we'll continue that but we want to make sure that it's not so stylistic that it's very difficult to read we want viewers to be able to look at this and immediately understand what's happening right so i've been on a kick of just diving into adobe fonts lately and just finding these very obscure stylistic fonts one of them has been called oh no blaze face which is an interesting you know typeface right it's an interesting name and it also has a lot of different weights to it from 12 all the way up to 72 points so something like 14 if you take a look right it's it's not it's a nice weight it's nice and heavy and as you experiment with the different ones you know 72 it's a little bit more condensed 12 or 14 i think should probably do 14's a little bit heavier which is nice and wade also posted a link in the chat not just for adobe fonts but also adobe stock and we have a completely free section with a ton of videos and photos and illustrations as well and julia's saying it's by oh no type foundry indeed it's a great great typeface there's also ono fat face which is wonderful um you know there's a few typefaces i've been really digging lately just to kind of go on a little bit of a tangent i think we explored mighty slab last week and what's cool about mighty slab is also includes if i duplicate this move it back a bit and then change the color a touch they have some i guess you can call them weights i suppose but they have these variations one two three and four and it allows you to add not just outlines but also these nice bevels or shadows or whatever you might want to call it so that's a fun typeface as well if you're looking uh also blenny is a nice kind of stylistic typeface with some really nice details on that i've been using that in a few other projects it's quite fun but anyways back to what we're working on so we have our title here and now underneath it or i guess above it we might want to indicate that this is a live broadcast and there are a few ways of doing that but typically you would have either a rectangle or you know a pill shaped object and inside there it would just say live now what you would usually see on most streaming services is something like this you would have this nice red shape maybe the corners would be slightly rounded maybe four yeah eight might be too much yeah so four maybe even two if you want to really dial that back and then inside you would just have the word live now this brings up the conversation we've been having quite a bit over the last few weeks is when you're working with typefaces like oh no blaze face right when the text is displayed nice and large like it is with the word sportscast if i go ahead and preview this it looks okay you can take a look you'll be able to read it but when you start shrinking those stylistic typefaces down quite a bit especially this size here it becomes a lot more difficult to read whether it's capitalized or not capitalized it's just it's a bit of an eyesore so when it goes below let's say probably 20 points or pixels you probably want to switch it over to something a little bit more traditional and you could go something like uh you know museo we've been using quite a bit it's a decent typeface they have you know sans-serif they have serif they have all sorts of different things or something like astoria right it's also a very traditional typeface but it has a few nice elements to it you know it has some curves and you know that sort of thing but it's not so stylistic that's going to be a little bit difficult to read and this one in particular also has you know extra condensed and bold and all that fun stuff so if i do something like extra bold condensed and i can bring this in a little bit or i can also you know select these two live and then over within my properties inspector i can turn padding on so if i do decide to change this to something like live broadcast it'll automatically resize in the background now we did see a question from julia i'll get to that in just a moment but what i think would be interesting because we've been using these yellows and blues throughout this experience i think it could be interesting to kind of pull those colors into this badge up here the live badges even though red is usually associated with live you don't necessarily have to because if you think about the user experience a user is deliberately if i zoom out and they're on the home page they're deliberately clicking on live so when they do that they're expecting live content so we don't necessarily need to use that bright red to indicate a live broadcast right if this was living on maybe the home page for example it might make more sense because someone to see that be like oh that must be live right but in this case we might be able to strive away from that so if i switch over to my document assets we can do something like yellow and then maybe that blue now this is a little bit too vibrant now you might remember in this area here we tweak the yellow and the blue a little bit we darken the yellow just a touch and we also darken the blue so i'm going to add these ones to my document assets as well and to keep consistency let's go ahead and pull those in because this is a little bit too vibrant it's not terrible but a little bit vibrant so darker and darker just like that and i'll make sure that everything looks good much better all right let me scroll back up i did see a question from julie i think any plans on preview within xd character settings so i've talked a little bit about the type limitations in the past and the short answer is that xd desperately needs a new type engine now i don't personally know where that is in the development roadmap but i know that's something a lot of people want not just you know previews for type but also things like right to left support and you know various other stylistic options so short answer is definitely on the roadmap don't know where it is but it's a very large project to completely replace the text engine so you know hopefully one day but definitely something that is needed all right now right beside this we may just want to put something like maybe the date what what day is it december december 18th 17 17 20 whoops 29 oh boy time traveling into the 2018. first i time traveled into the future now i'm in the past i don't even know what year it is anywhere what is it 21 something like that and then maybe something like 8 p.m and then for this we might want to just drop the size let's take a look [Music] i think the size might be okay but the weight is definitely a little bit too heavy so i'm gonna just go something like roman possibly maybe drop the size a little bit that could do and shove it on over a little bit closer that'll do all right so we've got our title we've got our live badge we have our date and then you know like i mentioned earlier we might want the ability to expand this so that if a viewer does want to watch this episode they can very easily do that of course there are many ways to do this um you know on some platforms you can just swipe down or swipe up or there's a button of some sort oh drew says it's my birthday happy birthday drew my daughter's birthday was two days ago actually my whole family so my very short story my mom's birthday was on the 12th my dad's on the 14th my daughter is on the 15th and then my sister is tomorrow december is crazy for us but happy birthday drew all right so right below you know we've we designed this out a few weeks ago i think when we designed our video player so we're not going to spend too much time on this but if we go ahead and create a section over here just like that maybe i'll round out the corners a little bit and this will essentially be our controls right i'm going to set this to a nice darker color give it a little bit of a border to separate it from the background something in that area there and again we're not going to design the entire thing but over on the right hand side you know you would often see something like an expand button right and that could look like a bunch of different things one way you can possibly do it if you really want to get creative with this is have a shape like this right around at the corners a touch you would have just the border and then you can experiment with the dashes and the gaps so we can really bring this outwards until we have about four going around the side and you can also adjust the gaps like this and kind of just finesse that into place sometimes a little bit tricky to get it right it's not the greatest thing in the world but you can also you know round up the corners a little bit and the caps [Music] or if you're if you want to you know mess with this at all you can use a plug-in so hopping over to my plug-ins i have the icons for design plug-in right over here and if i look up something like expand possibly there we go we've got a bunch of open source icons that we can very easily use in this project now i've i've mentioned this before this plug-in in particular for whatever reason takes your icon sometimes and just kind of throws it to the top left of the artboard hopefully one day they can get that updated but for now definitely keep that in mind all right so we've got our icon right over here to the right and essentially what we want to happen now is when this icon is pressed the entire experience would get larger and you know a few other things would happen this bar at the bottom here would likely disappear because you would be watching full screen and you don't want any interruptions the text over here to the right to the left other right would also disappear and you know possibly the navigation bar as well something you definitely want to think about now like i mentioned we did design this kind of control area in a previous master class can we make our own icons when you can't find one tanya is asking absolutely so if you do have the ability to create your own icons you know something like this would be very simple to create but you know there's lots of boolean options there's there are pen tools and polygons and ellipses and all sorts of different things that you can use to make your icons a lot of people do icon design directly in xd so absolutely if you have the time patience and ability definitely go ahead and do it now to save a little bit of that time i'm going to just hop over here to this secret document that i have over here and [Music] there's our controls perfect i'm going to make sure that if we have any and we do have a few components in here specifically you might remember we have this reaction component that we created with lottie files a few weeks ago if you missed that master class on creating a video player definitely go back and watch that we had a lot of fun and we created all these little hover effects and volume controls and settings and things like that and that reaction thing is just all sorts of fun but the point of this what we want to do is we want to use that expand icon over here to the right to control the size of this entire video player now to do that what we want to do is make sure that all of this is a component right so we're going to select this control section we're going to select the text which i'm also going to group and we're also going to select the video in the background right and we want to place all of this into a larger component so plus button over to the right and i can go ahead and name this video player and then now that that's done what we want to make sure to do is create the additional state so the expanded state and also the collapse state which is you know sort of like this one here wait thank you very much for posting that link in the chat so over to the right one more time i'm going to press that plus button and we're going to create a new state and this is going to be the expanded state and now we want to do is dive in here and really design what this is going to look like so if i double click in i can select the video maybe expand this which is going to expand that layer mask and also grab the video and move that down as well might need to expand this a little bit this will be moved down and our text will be moved down as well but like i mentioned a little bit earlier we don't necessarily want the controls or the text to be visible we maybe only want it to be visible when a hover takes place which is a whole other story we'll get to that so for here we'll just maybe drop the opacity to zero and drop the opacity to zero now we could have dropped the opacity when those elements were up here as well but to add a little bit of movement to this experience during that transition i think it would be kind of nice to drop them down and then drop the opacity as well right so we have our default state and we have our expanded state now i'm going to make sure to move the navigation bar above and now we want to make sure to do is wire this up and i i am noticing a few other issues we'll get to that in just a moment but we want to make sure to wire this up so that you know when someone does click on expand it actually expands so if we go into prototype mode we'll want to do is find that expand icon right we dive in here and we have an icon now we've run into a problem right this particular icon is already a component now it's a component we previously created on that other master class that we just linked but because this is a component inside of a larger component if we were to add another interaction on this nested component we will not be able to down here select that expanded state right because you can only select states on a parent's component or that particular component so what we'll want to do as a workaround is if you take a look inside of the layers panel over here to the left we have our component and this is the component we cannot add or trigger used as a trigger for the larger component but command control g to place it into a group now that it's placed into a group we can add an interaction on that group just by clicking on this blue handle and now within the properties inspector we can choose our expanded state so definitely keep that in mind maybe one day that will be improved but for now if you need to use nested component to trigger the larger component pop it into a group and you should be good to go now here we want to make sure auto animate is enabled otherwise it'll just kind of either cut or fade to that next state so we'll choose auto animate and maybe we'll do maybe eight ease in out duration let's try 0.6 seconds and we'll see what that looks like and if i press play we have our video playing and then i can hover over expand and tap on it and now we have our video playing full screen right now i mentioned earlier that i did notice specifically in this collapse state if we take a look at the top here these icons are a little bit difficult to read now on this side here it's not too bad this text but if the video was different it was brighter it would be you know still a little bit difficult so just to solve that i can maybe add a very quick overlay we did talk about this last week so if you missed that definitely go back and watch it but linear gradient i'm going to set both colors to black but the color on the bottom i'm going to drop in opacity [Music] i just want to make sure that it's behind the navigation bar so that those icons right if i turn it off and on they're just a little bit easier to see and i can drop the opacity a little bit if it's a bit too strong but one more time view there we go now the big question is how do we bring that back because i mentioned you know we don't really have a hover state on this so we did explore that in that class that wade mentioned the all about lottie files and building that video player but from this expanded state we can go ahead and actually add a hover state right so if i go ahead and add a hover state right here i'm going to dive in and grab the text and the controls and bring it up right now the hover state by default gets linked to our default state right something to keep in mind so in that case in this case we do not want that so if i hop into prototype mode you're going to notice right here we have our hover state i'm going to delete that we want to go to our expanded state click we want hover and then we want auto uh we probably don't need auto animate to be honest transition and then we want to go to our hover state maybe we'll do a little bit of a dissolve maybe point two seconds to keep it nice and short so now right we have our video one more time we can expand it and then we have our hover state and we can well we don't have collapse set up just yet but if we go over to our hover state dive in here find that group and click and then transition to our default state i missed it what did i do oh i have hover instead of tap which i definitely don't want and i also want to make sure that the video continues to play right now it's set to no playback want to continue to play automatically and the nice thing is some of you may have noticed that if you have video playing and you have auto animate set up it will continuously playing throughout those auto animated states not just on a component and state level but also an artboard level which is really cool one more time right expand the video keeps playing should have kept playing but and there we go perfect all right so now that we have that set up what we want to do is add some additional content right down below and this will you know this could be things like news broadcasts and additional movies maybe just for you or something like that right and it's very similar to what we have over here but there'll be a few changes so i'm going to dive in here and we'll do something like just for you let's try something like museo maybe museo sans condensed could be kind of fun [Music] and we'll really bump up up that weight to about 900. [Music] let me drag out some guides so i make sure everything is set up or lined up and cornell is asking what if you want the control panel to appear only if you hover over the bottom part of the video how would you do that oh that's a great question so in that master class a few weeks ago that wade once again linked i believe we did cover exactly that you can hot spot at the bottom actually you know what let's go ahead and do that just so that this makes a little bit more sense so expanded right we have our hover state but if you take a look in prototype mode we have the hover state trigger on the entire experience let's delete that now in here what we can do is we can dive in even though this is not the default state we can still do it on the expanded state because we don't really need it on the default state so we can dive in here and we can create maybe a hotspot maybe the bottom third possibly right now this we don't definitely don't need to see but we may want to see it when the hover does take place you know what let's go uh i'm going to add it to our default state because i also want it to appear in the hover state so i'm going to pop it in right about here right and this one very similar to that overlay at the top we're going to set a linear gradient but it's going to be kind of flipped so both colors again will be black but the color at the top will be set to zero percent opacity and this will be called overlay i'm going to move this behind the controls and the text but in this default state we want the appearance at zero and then the expanded state that's where we want actually we also want it at zero but we want to be able to use this as the hover right or the hover trigger so in prototype mode instead of selecting the entire component we're gonna select just that overlay we're going to click on the blue handle and just like we did before we're gonna set overlay or sorry hover as the trigger and then the hover state as the destination we can do a simple transition dissolve let's try 0.4 seconds right and then from the hover state we just want to make sure that that overlay is set to let's try about 60 opacity right so now we can play we can expand the video keeps playing and now if we hover over there we go now i just caught my small mistake right this is working great but you're gonna notice the expand looks great but when we hover the video restarts playing and this kind of goes back to what i was talking about earlier if you have auto animate as the type between the transitions then the video will continuously play back but it did not because in prototype mode i have a transition instead of auto animate so let's go ahead and switch it over to auto animate we'll keep the same settings and now that should look a little bit better right much better so we have our hover state and now we can go ahead and the video plays back beautifully that looks a little bit better that's a great suggestion cornell all right so let's go ahead and re-hop or unhide the just for you section and we're going to add a little bit of a thumbnail here just like that maybe i'll round up the corners just a little bit and whoops we'll add a little bit of a border [Music] very slight border now excuse me of course you can't see much right now because the color is white but if i go ahead and set that to something a little bit darker we have a little bit of a very subtle border on there what we may also want is another way to indicate that these specific shows are live again not completely necessary also this badge here in the controls section possibly also not necessary but you know what what we're going to do is we're going to grab this guy here maybe paste it right down here that looks pretty good might be a little bit too close but we'll see and then down below we might want to add in some additional information about these particular shows right so for example we might want to do 8 p.m on xd tv 13 minutes remaining now the text on this obviously is way too large we can stick with museo maybe we'll do museo sans and then we'll drop it down to something like 16 [Music] and then maybe we'll drop the weight as well to about 500 we probably don't need something like 900 or 700 for something like that but the section below we might want this to be the title right so this might be maybe a murder mystery or something components of a murder components get it i think i'm clever but i'm not so this one here because it's the title it's the main focus you might want to bump up not just the size but also the weight as well so this one we could possibly get away with 900 maybe i'll make this all caps and that could potentially work might be a little bit too large i might drop these a little bit that'll do was that was that joke a prototype i tried i tried all right that one looks pretty good now considering all of these cards will kind of follow the same uh you know style what we want to do is use a repeat grid of course we can use a stack and components and all sorts of different things but i think a repeat grid should work quite nicely and you know there are a few ways we can display cards like this we can oops we can kind of have you know a few going across and then lining up exactly with our other guides that we have partially set up right there right we can have a bunch going across like that or we can also have a few going across and extending off of the art board and i think that could be an interesting thing to do let me actually just dive in here for a second make some of this a little bit larger let's move this inwards a little bit maybe 16 could work that'll do all right so what we're going to do is we're going to select all this information here and i'm going to right over here to the right hand side we're going to create a repeat grid there we go and then we'll drag a few shows across in terms of the spacing we'll keep it nice and tight somewhere around 8 in between each one so we have but one two three four five nicely visible and then we have possibly one over to the side as well so you have to really think about you know is that the optimal amount of shows to display do you want four do you want five do you want six you probably don't want too many because then it gets a little bit busy but i think this could work i might want to just bring this in just a touch there we go one two three four five and then one over to the side now of course we can now take this repeat grid and place it into a scroll group right so we can create a horizontal scroll group within the properties inspector so if we did have additional videos maybe i'll add one more just like that right now we can scroll and see them just like that now of course the scroll group is kind of locked on this left-hand side so in this case because i want the videos to kind of fly off the artboard over to the left i'm going to extend this scroll group just like that and it's going to snap into place so that we can very easily scroll left and right you can also click and drag to move them around as well perfect all right so that section is looking pretty good of course we can dive in and make changes to the actual text we can add some images in there but let's go ahead and add one more section down at the bottom or maybe two more sections we'll see and this section down here actually you know what let's group the the section here and call this just for you and then we'll add another section right down here maybe this is uh possibly upcoming now this one could be a little bit different because these are not necessarily live shows these are maybe upcoming videos series documentaries whatever it might be so they're not necessarily live so you may not want to highlight as many of them so maybe we'll display three of them going across right and to make sure we can display three really nicely of course we can eyeball it but what i like to do is create a rectangle all the way across so guide on the left all the way to the guide on the right and then within the properties inspector let me zoom in here under the width we can just divide by three now if we were to simply just divide by three we're going to you know each of those shows is going to be very flush with each other and let me show you what what that looks like which is not what we want by the way so if i were to do that you know duplicate one and then duplicate another right to the guide they're right on top of each other which we certainly don't want we want a little bit of breathing room in between each one so back in here in addition to dividing by three you might want to just you know subtract eight or subtract 4 depending on the grid system that you're using right so now repeat grid and if i go ahead and oops if i bring this in it'll snap really nicely like that right perfect all right but of course we want to add some additional content i'm going to actually copy the style on this particular shape just by selecting it copy right click paste appearance and then we can also possibly just to keep consistency grab the text elements here and just use them over here as well and we did have about 16 pixels in between these elements that looks pretty good and for now we will keep the text the same ideally we would dive in here and make changes to reflect whatever this content is but for the sake of time we're going to simply select these repeat grade command control r and drag it across perfect and then finally we might want one more section right down below and this could be maybe on demand content right so in addition to the live content and the upcoming content which i want to make sure it's spaced out properly we'll do 16 here and i'm going to change this to about 16 as well this will be upcoming and then we're gonna we're gonna have one more section and very similar to this section down here so i might just actually grab this section here and pop it in here i want to make sure to use the same type faces just to keep consistency now ideally this typeface here would probably be the same as this one over here so definitely keep those things in mind you don't want to straight too far away from your other screens especially if it's all part of the same experience [Music] i'm going to copy select this one and paste the appearance and this one we might want to just do something like new on demand and we'll make sure it's 16 that looks good and these images here of course actually you know what i was gonna say we can definitely keep these images but just in case you missed the last two master classes we've been using the movie poster plugin so i'm going to go ahead and select all five of these images and then within my plugins panel one more time i also have the movies posters plugin or the movie posters plugin i think that's what i tried to say and then here you can enter a year and also filter by genre so let's say maybe animation from 2005. i don't remember what movies were big in 2005 but we're about to find out ah toy story of course great movie blind king lion king was too no there's no way lion king was 2005 was it really that seems wrong i think that's wrong maybe that was just like one of the top most either that or i'm just very old i don't know all right so we have our sections we have our on demand which i'm going to group we have our upcoming and we have our just for you right and what's nice is we can now dive in here and actually select all of these sections here so we have just for you upcoming on demand we're going to place them all into a group so a larger group 95 toy story was 99. yeah okay i'm not going completely crazy and i'm gonna place i'm gonna so i place them all into a group and i'm gonna name this something like content and then what's really nice is we can now in the properties inspector turn a stack on and what's great about this is not only can you control the amount of space in between each section so if you want to do something like 70 or 80 or whatever it might be right it might be a bit too much let's drop it to about i don't know 54. but you can also dive in here because a stack is turned on and just move them around so all the other sections kind of split out of the way depending on where you want to move things but i think i'm pretty happy with just for you upcoming and new on demand i think that looks pretty good now if we do hop over to finder for example right i do have some clips here i think i have some other clips somewhere else let me just take a quick peek actually i'll just do this alright so i have some thumbnails and i also have some video clips now would be kind of cool depending on the platform this i mean it may work on tv experience as well but definitely desktop and web what you might want to do is maybe for either a live show or an upcoming show you may want to give a little bit of a preview of what that's going to look like on you know on hover so what we're going to do is we're going to start off by dragging an image in here and right now it's in a repeat grid so if i do drag one image in it's going to repeat throughout the entire grid so in that case i'm just going to ungroup the grid for now [Music] i'll dive in and let's drag this maybe this one here pop that in there and now this one is upcoming so we're gonna change this to something like premieres tomorrow 4 p.m and we'll keep the same title the same but what we want to happen is when your cursor goes over top of this particular preview it's going to play a little bit of a clip in the background or you know on top of it right so we have this here and want to hover over it and a preview will play what we want to do here is turn this into a component and very fitting considering the title of this particular show so over within the properties inspector one more time we're going to create a component and now we want to create a hover state now what's nice is you don't need that video that we're going to use as a preview on the default state so we're going to press the play button we're going to create a hover state and we're going to dive in here we want to replace this photo with a video now if i were to simply grab one of these videos and try to place it in there it's not going to work because the photo is technically already a mask right so it's going to pop it separately so we can either create a separate object or we can just select this photo change the color to something else and then pop a video in right just like that and we want to make sure on this hover state that the video is set to play automatically and do want to loop it possibly might as well right there we go so we have our default state play scroll down and we have our video now what you're going to notice is that there's a little bit of a delay as i move my cursor over top of it it takes a second or two well half a second or so 0.3 seconds to be exact to actually initiate that video and that's because auto animate is the action so when my cursor goes over top of it auto animate performs a little bit of a fade for 0.3 seconds now if you don't want that or don't need that what you want to do is go into prototype mode it's already selected as the hover trigger and instead of auto animate as the type switch it over to transition with no animation so now if i one more time i hover it kicks off almost immediately right that looks a little bit better and we can do the same thing with the other ones as well so for example maybe there will be well we'll just do this i'll pop that one in there create a component hover state change the color and we'll do another video maybe this one here ideally these would all be different videos or different uh you know series or whatever it might be but considering i don't have any other videos queued up right ready to go we'll just stick with this prototype mode and we'll switch this over to transition you can also have one component over here to the left and then you can use an instance of this component to create the other ones as well or you can create separate components whichever is easiest for you and then we'll do one more and then just maybe just to show that there's a little bit of variation we'll just change this to this clip here oh i have to remember to change the image pop that in there make sure this is set to play automatically and then just to make sure it kicks off right away oh you know what i did not do is create a component terrible oop much better overstate drag that in make sure it's set to play automatically switch it over to transition with no animation and now we should be good to go so i can go ahead and hover over this one we can see a bit of a preview we can hover over the next and then the next one as well looks pretty good now of course because we have these objects inside of a larger group we can also turn a stack on on this group as well in addition to the much larger group that we have so if we did want to rearrange some of these just to give a bit more variation we can very easily do that and one more time we've got our previews right now the one thing we're going to notice is that we have our video at the top if i do go ahead and expand it we have all this other content on top of it and that's because we want to make sure that that video player always remains on the top and the navigation bar as well so if we do go ahead and launch the preview we can now expand it it's going to go over top of all that other content we can hover and then close it down right and there we go renee is asking would it be quicker to create one with hover video and duplicate that one than switch out the images and videos it probably would be and it would probably also keep your document assets and components section a little bit cleaner even though you know now we can go ahead and create groups so this could be our videos group for example of our components but yeah i think you're probably exactly right and especially once the team does get around to releasing the update that allows you to have instances better update your instances of components which they are actively working on then that'll make your process even easier but either way whichever you feel more comfortable but if i was designing on my own i would absolutely do it the way renee was uh suggesting all right looks like we are out of time kyle t webster is coming up in just a few minutes with his illustration master class and for me hope you all have a wonderful holiday we will be back the week of january 4th i believe so more master classes are coming again send me a tweet at pinsky to let me know what you want to see in 2022 not just for master classes but also content as well do you want ui kits do you want more videos long videos short videos more live streams whatever it might be i'm all ears so have a great holiday everyone and i will see you all next time [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music] [Music] so [Music] you

Channel: Adobe Creative Cloud

Views: 1,612

Keywords: Adobe Creative Cloud, Creative Cloud, Adobe CC, Adobe Cloud, Adobe creative suite, #MakeAdobeCC, #AdobeCC, #ACCTags

Id: _x6CPGzqGpQ

Length: 57min 25sec (3445 seconds)

Published: Fri Dec 17 2021