No video :(

Practical Guide to Responsive Design

Подписаться 14 тыс.

Просмотров 8 тыс.

50% 1

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.com/52h3iuj6s0bk
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

Опубликовано:

21 сен 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 30

@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 :)

@irinalinuza8341 Год назад

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

@KerevDesign Год назад

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

@NYC_CuriousG Год назад

Nicely explained! Very short and sweet thank you.

@KerevDesign Год назад

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

@saleema6308 24 дня назад

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 19 дней назад

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

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

@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! :)

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

@SzabatDesign Год назад

Thanks Mat ! Appreciate soo much your videos! 💪

@KerevDesign Год назад

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

@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!!