On this UI Design lesson I walk you through our responsive layout to get a better idea of how elements will behave in smaller devices.
It has been the best investment I made in my design journey so far. I would consider myself a novice but I honestly feel like I've gained a genuine professional insight into the process of creating a high-level website.
I'm an early adopter of the KreativePro Masterclass, and I love how well put together it is. Neftali takes you through each step of the process from paper sketches to marketing all with fun visuals & clear instructions!
Hey guys, welcome back. All right. So on our previous lesson, of course, we finished the homepage. We designed all the elements and all the graphics required to make this fully interactive following the branding of our style guide that we created and based out of the style guide, a lot of really cool ideas came out.
The next step, if this is an option is, to rescale all of these elements in a way that it looks, in a way that it works for mobile. what does all these elements look like on a smaller device, for that I've created already a frame following the Figma's phone structure of the iPhone 11 pro I've created that frame.
And I started to move over all of the elements that we already created from the homepage. And started just scaling them down a little bit so that we have a better idea of what we're going to do with, for example, the menu bar, how will those items align? In this case, I plan to have them hidden in a pop-up interaction.
So right now it shows the little menu icon on the top. For example, we have here, the carts are gonna take on the waterfall effect where one stacks, one below the other. So that's something we're going to take a look at in webflow and how grid systems work there. So you can see also I've re-scaled some of the elements of the create watch parties card so that it matches the sizes so that everything stays within that boundaries.
And then I have added a couple of more icons in here, including a close icon. This icon is just to be able to close a tab when it's open. So if I click on this tab, then I know for sure that tap can take me back to this screen where we have the gear up title, and as you can see here, the parallax effect, we can have the same graphics, just a little bit smaller.
And then the text will be shown here with, animation when we get into webflow, and also the signup page no longer is contained in a box, but rather expanded fully out around all of the edges. So I'm going to give you access to this, all these documents, the practice documents, the brand assets and the style guide.
So you can yourself utilize it to also learn ways of how I was able to create this design. So you'll find a lot of these resources in the download section, but now that we have this kind of laid out, it gives us a better idea of how we're going to structure this on the mobile, using webflow.
So let's finalize with organizing our system. Right now, we have all the style guide here, but what we want to do is start adding some of the core elements into our library and publishing it throughout. So whenever we start creating more projects, we can access those same elements, anytime using Figma's library.
All right, I'll see you there.
Access our premium community including bonus tutorials, project files & weekly resources.LIFETIME 💎 ACCESS