Practical Guide to Responsive Design

No video

Practical Guide to Responsive Design

Рет қаралды 8,266

Күн бұрын

In the last video I explained to you concepts behind responsive, adaptive and fluid design. Today I want to show you how to execute it from a practical perspective.
I will be using Figma, since it's my primary design tool, but remember that the principles I will share with you are universal. So it doesn’t matter what tool you use.
We will focus on a responsive approach, since it’s the most practical and popular one.
Get started with Figma for Free: psxid.figma.co...
Watch more of my videos related to UX and UI Design:
• Figma Tutorials
• UX Design Tutorials
Disclamer:
Some of the above are affiliate links-I make a small commission when you purchase through my link, at no extra cost to you. Thank you for supporting an independent creator!
#uxdesign #userexperience #productdesign #ux #uxtutorial #ui #uidesign

Пікірлер: 30

@irinalinuza8341 Жыл бұрын

Actually the best video on youtube about this topic, thanks!

@KerevDesign Жыл бұрын

Thank you, I'm honored you think that! :)

@funwave7748 Жыл бұрын

Just finished all of your youtube videos, Those vides has great tips and inspiration. Love all the videos. if you make a practical videos for breakpoints, grids, columns, and overall responsive design. will be really helpful. Thanks once again

@KerevDesign Жыл бұрын

Great tip! I will think about it, also, thank you for the dedication :D

@alnaslastika3606 Жыл бұрын

Thanks for the video! Please make another like this but for adaptive design 🙏🏻

@KerevDesign Жыл бұрын

I will think about it :)

@at24t 11 ай бұрын

You explain this topic so so well.I really understand it, Thank you so much for this video. Subscribed!

@KerevDesign 11 ай бұрын

I'm really glad that you liked it, thank you and I hope you won't regret subscribing! :)

@NYC_CuriousG Жыл бұрын

Nicely explained! Very short and sweet thank you.

@KerevDesign Жыл бұрын

Thank you! :) I'm glad you liked it!

@SzabatDesign Жыл бұрын

Thanks Mat ! Appreciate soo much your videos! 💪

@KerevDesign Жыл бұрын

Thank you, I'm glad you like the content :)

@mohsinamir6073 Ай бұрын

very helpfull video , I am searching for how we can make our app responsive in figma from smallest screen sizes to the highest with of a tablet, or destop. how to find the breakpoint for mobile phone application. if you have in a iPhone frame, how we can make sure our design is responsive in all mobile phone screens from iPhone to android and all screens of it. really need this detail video. thanks

@KerevDesign Ай бұрын

You need to go through most popular devices screen resolutions - just visit Google Material Design & Apple documentation, everything is there: ex.: m2.material.io/design/layout/responsive-layout-grid.html#breakpoints , developer.apple.com/design/human-interface-guidelines/layout ; compare the 2 and assign primary break points then.

@saleema6308 Ай бұрын

Can you make full video on this progressive enhancement aprroach that will show step by step how to achieve this? From your video, it is obvious that one should create layout grid for each device separately and then by use of plugings one can get responsive behaviour on each breakpoint. Its not like a top down aprroach in which a desktop layout will become mobile layout while reducing the width of desktop design??

@KerevDesign Ай бұрын

I will put it on my list of topics to cover, can't promise when, bud definitely within 4 weeks.

@sharonuja1683 2 ай бұрын

I thought that when you ssid practical guide that you would show how you converted a mobile responsive design to tablet and desktop

@KerevDesign 2 ай бұрын

Well, then the video would be about the conversion of mobile view to the tablet and desktop view that previously didn't exist. The case you are mentioning would be better fitted for adaptive design tutorial (conversion case). This one is on how approach the project from the beginning when the requirement for responsivity is one of the functional requirements.

@Neotanium Жыл бұрын

Really good video! So, I'm an android engineer, who has a passion for good UI designs built from a strong design system. That being said, in a world with so many screen types and choices, would it not be limiting to the user to always just look at the screenwidth? I mean, sure, the screen might be 1000px width, but, it's 1500px high cause it's a tablet in portrait... Would it not make more sense to check the breakpoints based on the values of the longest of either width of height?

@KerevDesign Жыл бұрын

Responsive approach is a solution with the most cost to value ratio (it's the cheapest and covers most of use cases), but like all solutions like that it has some drawbacks. For the case you are mentioning, the adaptive approach would be the best - but even then, most of the time, we're also looking at screen width for the breaking points. Screen width is always a limiting factor for a reason - it's natural to scroll up and down to create infinite space for content, try scrolling right and left - your users would hate you for that. There are some cases where swiping or scrolling left & right make sense (on mobile), but, as soon as you need to provide flexible solution that needs to work on variety of devices (pc/laptops with mouses and scrollbars) it would be a disaster.

@Am-fp3cz Жыл бұрын

Amazing tutorial ! 👍. But a little confusing - till now it was taught that while designing for tablets, we should use 8 column grid but here you said it to be 6 ?

@KerevDesign Жыл бұрын

Well, that depends from you. You can use 5, you can use 7, you can use 4 if you want to. There is no rule set in stone that forces you to use certain amount of columns, altho, typically - higher resolutions = more columns.

@Am-fp3cz Жыл бұрын

@@KerevDesign Okay 👍 thanks!!

@saleema6308 Ай бұрын

So this is adaptive design approach?

@KerevDesign Ай бұрын

Responsive, with adaptive you would created dedicated layout for each breakpoint/device.