KreativePro Masterclass
Hello, {first_name}
3.8
Adapting to Mobile
Learn UI Design Systems with Figma
Completed
Oops! Something went wrong while submitting the form.
Completed
Browse Lessons
25
lessons
3
hours
MINUTES
2
files
Level

Access our premium community including bonus tutorials, project files & weekly resources.

UNLIMITED ACCESS
Overview

Adapting to Mobile

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.

Reviews

Manases
Being the best means investing in the best, no matter what level you are at, this course will take you through the entire process you need to be able to implement an idea and turn it into a fully functional business.
Manasés Padilla
Photographer & Entrepreneur
Noel
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.
Noel Hale
Founder of Slush Monkeys®
Mae
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!
Mae Green
Product Designer @ Dropbox

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.
Cool.
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.

Coming Soon

UI Design Systems
25
lessons
3
hours
MINUTES
2
files
Level
Digital Media Masterclass by Neftali Loria

Neftali Loria

Author & Instructor
@kreativepro
KreativePro Masterclass Bundle

Access our premium community including bonus tutorials, project files & weekly resources.

UNLIMITED ACCCESS
PRICE INCREASE IN
00
Days
00
hrs
00
mins
00
secs
🚀
Welcome to the Tribe! 💜 Something cool is coming your way...