Designing CONSISTENT Sub Pages | UI/UX Challenge

Key Takeaways

designing coherent and cohesive sub Pages that's the name of the game for today's lesson and challenge so the first thing I'm going to show you is how to create this upcoming shows page for this design right here this layout that we've already worked on in different context throughout this course so then I'm going to put you to the task to create your own cohesive subpage design that makes it feel like it's a consistent part of the experience going from the landing page to this new page which is all going to be about a culum list page and so your tasked with designing a curriculum page for this existing design it's very important to understand how to utilize existing assets and design patterns to make sure that your sub pages and everything feel coherent cohesive and consistent so as always make sure to subscribe if I could talk and let's get started all right here is the design and here are the specs create a secondary page create the upcoming shows page for this fictional land page um number two it should show the total number of shows that are upcoming okay um so that's something that we have to Def design for and plan for and then third create a vertical list with labels that show the date location and band name okay each list item should also have a get tickets button all right so that's it those are the requirements for this page now it's up to us to create that sub page and the layout and design in a way that's great for ux easy to use and also in a way that makes the design feels seamless from any other page that they come and land on this page from the landing page to this page it should feel like the same brand so we're going to be reusing elements colors uh topography all that good stuff okay so what I'll do to get this started here is I will simply replicate this shift alt left click drag over or just hit contrl D and it will replicate it over here and I'm just going to start gutting this uh large areas of this uh design now um when you at this unfortunately looks like I locked a few things there we go I'm just going to delete pretty much all this stuff let me pull this up real quick yeah there's a bunch of other stuff that was locked there we go um or not there's a lot of stuff that's locked okay so let me delete this we'll delete this and this okay so now we're pretty much starting just with the navigation because obviously we want to hold the navigation uh keep it the same so what I'm going to do is first thing let's worry about the page title which is going to be upcoming shows all right right there now we have a couple options here we could try to use this font for the headline um so let's just try that I'm going to paste that in and I'm going to double click and we'll just say upcoming shows okay so this particular font I don't like the way it looks um it looks cool here in the headline um but if we were to use it for titles they would all have to be uppercase and I just I think it's just a little bit too much so what I'll do is use the other font that's present which is Poppins can't go wrong with Poppins I use that font for a really long time I popins right there and I am just going to make this regular upcoming shows the size of this particular font way too big for this page you always have to think about what is going to be the size of sizing of the the headline um the the the actual title of each page U you want to keep the consistent and some some of the uh Pages might have longer headlines or titles or something like that so this would be way too big it would you know if there were a few more words it would just be consuming the whole page essentially so we need to think about scale in appropriate fashion let's try 60 here and let's make that auto width and this is a little bit better in terms of size I probably wouldn't go much higher than this might even go lower than that yeah somewhere around 66 I will also make this bold all right all right so we got our upcoming shows now it mentioned we also need to show the total number of shows that are upcoming so we could do this there's a lot of different ways you could design for this sort of thing um there are currently I've let's see 48 or 40 yeah 48 up upcoming shows all right so now visual hierarchy between your title and this little subtitle thing I very important needs to we're going to make it regular and we're going to make it a lot smaller um let's try like 26 and maybe we'll bold 48 there we go right around there is fine with me now because I know their page is going to be a little bit longer I'm going to take the frame hold control and just pull it down okay so now we need to actually show the list which is list item number three create a vertical list with labels that show the date location and band name okay so we could just keep on going in this blue section um or we could borrow from this this uh design right here and we can kind of wrap the list in this differently colored container essentially so if I that double click in there we'll go ahead and delete uh delete that stuff and then we will also lock it okay so now we have this area that we can kind of design this list in and notice it says create a vertical list with labels so labels will show up at top so all right it's going to have the date location and band date location and band all right so right bracket key there we go bring it to the front and for the locations I I'm just going to make them all uppercase and there's a couple ways to do that like for instance if I take if I say I date like this we'll make it bold um we could come over here and then just specify uppercase right there so no matter what it'll change everything to uppercase now the size is going to be important um for these I'll make these 22 and I'll kind of just hold shift alt and push pull these over all right location and then also ban all right so I may end up changing these a little bit but for now that's good so for each band list or you know the upcoming show list the row um we can also encase that in its own little differently colored background container so if I take the rectangle tool typically you would use a frame for this and use Auto layout and all that crap but I'm not doing that right now I'm trying to make this go as fast as possible we could go a little bit darker ah there we go so that color code 02992 let me pull that up with a little bit of corner radius all right now we can put the actual label so we can put in um let's say July 28th 2025 or 2024 whatever um now let's re let's remove the uppercase thing there we go and we'll make this regular okay so that seems like a good font size right there so if I shift alt to uh replicate the location will just say is Cleveland Ohio and then also we'll replicate this um the band is going to be um Twisted kitten I literally just made that up and maybe um you know maybe these are clickable links I maybe we make this bold and then maybe put a little link external link icon so if I right click go to iconify which we've already covered and we type in something like um link we might find something or I external yeah okay so yeah we could get like an external icon sort of situation here here pull that in let's put it right there make it black for selection colors we can just put this in an auto auto layout real quick there we go okay so that looks pretty good to me okay so twist a kid um and then finally a get tickets button right there all right each item should have a get tickets button all right so for this I think I'll just take this um button component paste that sucker in over here and then we'll right click I'm going to detach the instance and then I'm going to um I think it would be too much to have like a really strong call to action with a white background that demands so much visual tension when we have a bunch of elements underneath so to make it stand out a little bit less we can just remove the fill and then change the text to White and then change the text inside of it to get get tickets all right and then when we do that we'll kind of uh scale this down just a bit so it fits nice and proper inside of there yeah kind of like that there we go that is our very first row and I actually like it so if I just select it all shift alt drag down just to duplicate it maybe like right around here there we go so that's our list of course you could sit here and make these all unique if you wanted to but you get the point um so another thing that let me find real quick because I I did lock that layer there we go so now we get just need to get this sized up appropriately these don't have to be 100% contrast white we could actually grab the background and just kind of add a little bit of blue and that way it really separates the labels from the list itself and makes the list much more the focal point rather than just the labels of it and I think that's a pretty good uh portion to design for um I probably if I had more time I would do pagination you know like one two 3 four five and then little dots you know but I'm trying to make this go a little bit quicker um so that you basically get the idea of what I'm trying to convey here um in in this case here let me pull this down you know we could we could actually designed for a little bit for some other stuff potentially like um let's see here we could take this yeah let me get that back over here we could get rid of the fill you know these this this down here could perhaps could be like little testimonials that are coming across from people who visited the shows that would be cool a little slider of sorts um oopsie I shouldn't have done that because I ripped it from there without replicating it no big deal um and then we take this over here for instance okay now I'm just being silly here we go okay so there's our sub page a nice seamless sub page where you know if you were to go from this page of course if we had the stupid features down there still to this page it all feels cohesive and coherent with each other it's consistent all right so now it is your turn all right so let's go to the actual Lesson 12 secondary Pages challenge right down here okay so you've seen this time before if hopefully if you've been following along up to this point and now your code your your code your your tasked with creating a curriculum page right up here this little curriculum link so just for this is a fictional Lovel which is a um coding platform of PHP um platform so it's like a course website um and this is your task with designing the actual curriculum page right here all right so here are the requirements for you to submit this and all the submission instructions are in the YouTube description so create the actual curriculum page number two at the top this page should highlight the fact that we have the highest rated curriculum for LEL developers so somewhere near the actual title curriculum or our curriculum up here maybe underneath it a very small hero section where you're just emphasizing or even just a subtitle um or a sub you know yeah sub subtitle where you're just mentioning that you have the highest rated curriculum for L Lal developers that's the first thing um number three the primary focus of the page should be the curriculum list so that's the main you know element just like this primary focus right here is this band list um each curriculum item is a chapter from the course and each item should show the chap the curriculum chapter title a description and a number of lesson modules within it okay so that's important you have the actual title that's one thing a description that's two things and then the lesson modules that are within that chapter that's a part of that curriculum so that's three different things that you need to design for in list format all right so then design at least for five different curriculum chapters like up here we did five 1 2 3 four five as well and so I want you to design for that information and try to make it cohesive meaning it's going to be consistent you're re you're reusing elements in an intelligent manner from this existing design right here and you're making sure everything makes sense in terms of ux ease of use and all that good stuff good UI fundamentals so I'm excited to see what you all come up for the curriculum page here uh make sure to submit it check out designc course.com if you haven't yet for the full uox course and of course as always I'll see you tomorrow with the reviews [Music] [Music]