Responsive vs. Adaptive vs. Fluid Design: What's the Difference?

Believe me when I say that there was a time when we as designers only had to consider only the screen resolution of desktop computers when designing digital products.
Nowadays with all kinds of wearables, smartphones, laptops, tablets and other tech, our job has become much more complicated.
So, How can we ensure scalability and adaptability of our interfaces?
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

[@KerevDesign]

Look out for practical video about making responsive interfaces, I will try to release it ASAP! In the meantime check out my channel and subscribe if you find my content useful! :)

[@rubychien]

Excited for that video - turning on notifications for it!

[@normanvalenzuela3055]

Dude I’m so happy I came across your channel. Your content is compact and very well thought out.

[@KerevDesign]

Thank you, I very much appreciate your comment, it make my day :)

[@Kiskeyainmyheart]

Thank you for this video! Looking forward to the next one

[@KerevDesign]

Thank you! :)

[@benjamingross6123]

this was pretty good, but you might better differentiate this by increasing/decreasing the size of a window to show ppl (vs static diagrams). Responsive entails dynamic incremental reflowing, while adaptive will sort of "pop" into the different pre-designed layouts. Sometimes they can be mixed too!

[@KerevDesign]

Well, I could, but as I said in the video - most of the times companies are targeting specific platforms with adaptive. I don't think I ever seen a website or web app prepared in this way. Most of the web is primarily responsive and then you get native apps that are optimized for specific platforms.

[@digaolevita]

seus videos são muito didáticos, gostei muito... very lykes

[@KerevDesign]

Obrigado, fico feliz que você pense assim!

[@sebastianjuara]

your videos are amazing thank you so much for sharing

[@KerevDesign]

Thanks, I'm glad you liked it! :)

[@54gulnara]

Thank you very much for such informative video))

[@KerevDesign]

Thank you for finding it useful!

[@chaitanyavamsi45]

is there a combination of responsive layout and adaptive design say for example the site itself is responsive on a higher level but the components/assets vary with each breaking point...say the site is responsive on a higher level/works like adaptive for 3 primary break points web, tablet, mobile/ again the site is responsive in between those 3 individual breakpoints/ say it breaks into mobile view, the components are now optimised for mobile version just like adaptive design but the site behaves responsive in-order to scale for all the mobile sizes....so the point is to avoid designing for 6 breakpoints when going with adaptive design but instead design for only 3 breakpoints making it a combination of responsive and adaptive design...is it possible? I couldn't put together my doubt properly, but if you understood this...can you please answer this?

[@KerevDesign]

Short answer to your somewhat convoluted question is yes :) - But, as you saw in the video both those concepts are very similar in many regards and in most cases adaptive/responsive approaches depend from developers approach. You can optimise individual components to adapt better in context of available space, that’s why we have 3 typical variants of buttons size (small, medium, big) and so on. Primary thing that decides if something is adaptive or responsive is the behaviour: responsive - one layout that adapts to available space, adaptive - many layouts dedicated for available space. I hope that explanation helps :)

[@17thMidnight]

At 0:34 there is a whirl made of lines, like a pattern. Anyone know where I can find patterns like this? Or that one?

[@KerevDesign]

Try at freepik.com or elements.envato.com and type "abstract lines pattern" in context of web design.

[@KerevDesign]

Or "minimal lines", or just try to replicate the effect yourself :)

[@funwave7748]

Great

[@KerevDesign]

Thank you :)

[@manisingh4814]

I really found this channel helpful

[@KerevDesign]

Glad to hear it!