Finally someone that when it's about designing for responsive says that it doesn't really matter anymore whether you start with a mobile viewport or a desktop viewport. Plus "mobile first design" along the years, landed on the mouth of founders, recruiters and hiring managers like the commas in a conversation but without knowing when to put commas, just because it's cool to say "we do mobile first" which is became a mantra in every job advertise. A mantra like specifying in a UX/UI position that you are looking for someone the work with a user centered design approach... like if in these days there's some school or university teaching to design casually but then anyway you discover that the business has converted "mobile first design" in the only design, such as my current challenger bank, where I can perform some functions only with my smartphone but for some no sense reason I can not perform them on my desktop Pc when I'm at home and I should not be forced to use my smartphone. I'm gonna take a screenshot of this, video frame, you made my day, thanks.
Hi, I just wanted to say thank you for making the effort to put something like this together. There is ALOT about the thought process that goes into responsive design using XD that I was really struggling with and you've helped clear those uncertainties.
This is an AWESOME VIDEO ON ADOBE XD AND UI DESIGN FOR WEB. I'm a real real newbie and I can follow these lessons to design my website right now. Thank you so much. Saves me so much time googling.
Thanks so much for taking the time to make this video. It was really helpful in explaining the process of how to adjust layouts for a variety of screen sizes.
I just wanted to say, Thank you so much for this excellent video, very well put together, easy to follow, so many useful tips with an effective approach to responsive design.
I really learned so much from this tutorial. Comprehensive, well communicated and well structured content. The best part of this tutorial is your effective communication style. Thank you!!
I'm all in on responsive design and this video was CRAZY HELPFUL!!!! But does this make your coder hate you? When I was learning the basics of code, they certainly weren't teaching coding for seven different breakpoints. 😉 That aside, is there anything a designer can or should do to TELL the coder what is different about each artboard? Or do you just let them figure it out themselves? THANK YOU for doing this. No joke - this was awesome and exactly what I was missing in my design education. I am now motivated to create the fewest number of pages for each website I design, knowing that I may be creating a zillion versions of each to make them responsive!! 🤣
Excellent video. Easy to understand and thorough in its context. I would recommend putting 'time markers' on any future videos, to separate the tutorial sections : )
Amazing!!! Thank you so much. I finally get responsive resizing now after being confused for many weeks. Great teaching and easy to understand. Thank you!!!
At minute 26:40, it must be said that if you do not distract the reactive resize for the two dark blue child rectangles, the n 5 behaves like the n 3, except for the margins which are blocked as indicated in the video. (XD vers. 38.1.12.2)
Hi, awesome tutorial, Thank you very much. Why are some of the screens in landscape orientation, others in portrait (e.g. iPhone 6,7,8 is in landscape, iPhone X - portrait)?
This is the most complete tutorial I could find on Responsive Design with Adobe XD. Thank you very much, Envato Team :) Also, I am looking for a similar tutorial (free or paid) that also uses the newest Content Aware Layout tools like stacks, padding & auto width/height for text. Could anyone send me in the right direction ?
This much info for free is pretty appreciable. Just one doubt... when you were adapting an art board into a specific device size, for eg. surface pro, why did you change the orientation? My point is that we should design for both the orientations..right?
This is a prototype of the website, right? Now to get it functional would this be paired with DW (Dreamweaver) or handed off to a web designer to make it functional as a website? In others words, this is merely for reference for HTML and CSS to take it forward.
Yes. But, there are some addons that allow you to export your designs to HTML and CSS. This article by Adobe explains some of the options: www.adobe.com/products/xd/learn/collaborate/developer-handoff/export-xd-to-html-css-plugins.html
Great video! Also, I'm not sure if I missed it in this video, but does anyone know of a way to have a prototype switch from portrait to landscape when designing for mobile? I have both portrait and landscape artboards, but when I rotate the device I'm viewing the prototype on, what should be "landscape" stays in portrait mode. Has anyone else had this issue?
That might be a dumb question but I am just starting web design and I am confused as of why she uses 1200 as maximum width and how i know what grid width is best to use for 1920?
IT'S ALWAYS DIFFERENT... You can use a 5000px wide monitor... but in order to read everything you would have to turn your head around.. very uncomfortable. As oppose to TVs you are always close to the monitor, so even if the monitor is super super wide you give a maximun width to all your content.. it could be 2000px Idk (it doesn't fill all the horizontal space) ... it also depends on the content... what do I mean by this? text boxes (by recommendation) should not exceed 700px or no more than 80 characters(including spaces and punctuations) (too large rows makes it uncomfortable you can increase the font-size a bit, the larger the window size the larger the text(just a tiny bit don't over do it like 2 px or if you're using rems just .1 or .2 max or increase the html text size better))... First create the largest columns based on your aprox content, then you'll get your largest size based on content... from there you see Oup I got a 3000px layout, ok well that's too much, I'll go with a recommendation that I pulled out idk where that's 2500px... Or another example.... someone recommended maximum 2500px buy your content looks awful, you arrange it and it look good at 1900px... well that's your max width
hi, you did a great video, just one questions, for a general website which normally have more than 10 pages, if I do multiple responsible designs for each page that would be tons of work, I think this way only worked for one page web
Thank you for the video! I'm an envato elements subscriber and looking for a link to the asset files in the video. Are those available? If so, can you please share the link?
@@envatotuts was hoping to find the adobe XD source files that were used for the wireframing example in the video. Didn't see that available on the tutsplus page.
@@ThumperMelges Kezz has since prepared a version of the XD file without any of the Elements assets-you’ll find it available for download on the Tuts+ course page. Hope that helps 👍
Should employers be expected to hire a web developer AS WELL AS their graphic/UI designer? As a GD searching for jobs I fell like all employers expect us to be be a web dev / know coding, and it kinda annoys me. Anyone else feel the same?
@@joshbauman2757 Hey buddy, do you know why she is not using the Grid Layout option that enables column guides? She does every layout manually on the video and I'm wondering if its because that does not work for responsive websites.
Finally someone that when it's about designing for responsive says that it doesn't really matter anymore whether you start with a mobile viewport or a desktop viewport. Plus "mobile first design" along the years, landed on the mouth of founders, recruiters and hiring managers like the commas in a conversation but without knowing when to put commas, just because it's cool to say "we do mobile first" which is became a mantra in every job advertise.
A mantra like specifying in a UX/UI position that you are looking for someone the work with a user centered design approach... like if in these days there's some school or university teaching to design casually but then anyway you discover that the business has converted "mobile first design" in the only design, such as my current challenger bank, where I can perform some functions only with my smartphone but for some no sense reason I can not perform them on my desktop Pc when I'm at home and I should not be forced to use my smartphone.
I'm gonna take a screenshot of this, video frame, you made my day, thanks.
Hi, I just wanted to say thank you for making the effort to put something like this together. There is ALOT about the thought process that goes into responsive design using XD that I was really struggling with and you've helped clear those uncertainties.
This is the best Adobe XD responsive tut on RUclips, much better then any available on the Adobe channel. Thanks so much, this levelled up my UI game!
Wow, thanks! Glad it was helpful!
This is an AWESOME VIDEO ON ADOBE XD AND UI DESIGN FOR WEB. I'm a real real newbie and I can follow these lessons to design my website right now. Thank you so much. Saves me so much time googling.
The best tutorial ever in terms of "Responsive Design". Thanks for sharing your knowledge!
Wow, thanks!
Thanks so much for taking the time to make this video. It was really helpful in explaining the process of how to adjust layouts for a variety of screen sizes.
I just wanted to say, Thank you so much for this excellent video, very well put together, easy to follow, so many useful tips with an effective approach to responsive design.
Glad it was helpful!
In 1:01:50 ... I think you can maintain aspect ratio if you click the little lock icon between the width and height
Thanks so much! I was wondering about this. Very simple solution
I really learned so much from this tutorial. Comprehensive, well communicated and well structured content. The best part of this tutorial is your effective communication style. Thank you!!
I'm all in on responsive design and this video was CRAZY HELPFUL!!!! But does this make your coder hate you? When I was learning the basics of code, they certainly weren't teaching coding for seven different breakpoints. 😉 That aside, is there anything a designer can or should do to TELL the coder what is different about each artboard? Or do you just let them figure it out themselves? THANK YOU for doing this. No joke - this was awesome and exactly what I was missing in my design education. I am now motivated to create the fewest number of pages for each website I design, knowing that I may be creating a zillion versions of each to make them responsive!! 🤣
Excellent video. Easy to understand and thorough in its context.
I would recommend putting 'time markers' on any future videos, to separate the tutorial sections : )
There are time markers in the description of the video.
Amazing!!! Thank you so much. I finally get responsive resizing now after being confused for many weeks. Great teaching and easy to understand. Thank you!!!
Amazing lesson and simple and quick to understand, Thank you so much!
Perfect! Exactly what I needed to know - Thank you.
This course is awesome and very helpful, the RWD features is exactly what we want to learn about...
At minute 26:40, it must be said that if you do not distract the reactive resize for the two dark blue child rectangles, the n 5 behaves like the n 3, except for the margins which are blocked as indicated in the video. (XD vers. 38.1.12.2)
Thanks you so much. Great lesson.
Thank you for the tutorial, better than school.
This was amazing!you hepled me just like an awesome mentor
Glad I could help!
Great tutorial really helpful
Love this tutorial! You can take the wisdom taught here to the bank...sooo good!
You nailed it, @Nathaniel. This video is packed with solid UI knowledge.
Thank you for this outstanding course. It answered all of my questions and much more.
Thank you very much this best lesson, i learned new info and trick.
this is a great video, so useful thank you very much
Woah, great video mate!
Glad you enjoyed it!
This is really amazing tutorial. Thank you.
THANK YOU SO MUCH FOR THIS!!! I watched the whole thing ~ It is a great tutorial!
Amazing class!! Thank you very much !
Hi, awesome tutorial, Thank you very much. Why are some of the screens in landscape orientation, others in portrait (e.g. iPhone 6,7,8 is in landscape, iPhone X - portrait)?
Great tutorial thanks a lot !
Very helpful, thank you
You're welcome!
This is excellent tutorial. Thanks for the course it was helpful
Great video on responsive design Thanks really Thanks!!
This is awesome and then some! Thank you very much!
Thank you!! Excellent teacher!!
This is the most complete tutorial I could find on Responsive Design with Adobe XD. Thank you very much, Envato Team :)
Also, I am looking for a similar tutorial (free or paid) that also uses the newest Content Aware Layout tools like stacks, padding & auto width/height for text. Could anyone send me in the right direction ?
Thank you so much
This much info for free is pretty appreciable.
Just one doubt... when you were adapting an art board into a specific device size, for eg. surface pro, why did you change the orientation? My point is that we should design for both the orientations..right?
Nice tutorial brother sorry I need to ask you if soft can be installe on Android?
No. It's available for Windows or MacOS.
This helped me a lot, Thank you so much :)
But is there any way to show the responsiveness in presentation mode?
Isn't there a way so that there is 1 artboard that is responsive to adapt to every change that needs to be made at each break point?
Thank you , very useful !
Great video !!
really great in-depth tutorial.
Is there a follow up course for developers? E.G. taking these artboards and developing the css and html?
Thank you. This is so helpful.
Can we resize the buttons height and placeholder boxes ?
Buttons are height is large in web, now it is looking not good in mobile version , how can i handle it?
This is a prototype of the website, right? Now to get it functional would this be paired with DW (Dreamweaver) or handed off to a web designer to make it functional as a website? In others words, this is merely for reference for HTML and CSS to take it forward.
Yes. But, there are some addons that allow you to export your designs to HTML and CSS. This article by Adobe explains some of the options: www.adobe.com/products/xd/learn/collaborate/developer-handoff/export-xd-to-html-css-plugins.html
Great video! Also, I'm not sure if I missed it in this video, but does anyone know of a way to have a prototype switch from portrait to landscape when designing for mobile? I have both portrait and landscape artboards, but when I rotate the device I'm viewing the prototype on, what should be "landscape" stays in portrait mode. Has anyone else had this issue?
That might be a dumb question but I am just starting web design and I am confused as of why she uses 1200 as maximum width and how i know what grid width is best to use for 1920?
IT'S ALWAYS DIFFERENT...
You can use a 5000px wide monitor... but in order to read everything you would have to turn your head around.. very uncomfortable. As oppose to TVs you are always close to the monitor, so even if the monitor is super super wide you give a maximun width to all your content.. it could be 2000px Idk (it doesn't fill all the horizontal space) ... it also depends on the content... what do I mean by this?
text boxes (by recommendation) should not exceed 700px or no more than 80 characters(including spaces and punctuations) (too large rows makes it uncomfortable you can increase the font-size a bit, the larger the window size the larger the text(just a tiny bit don't over do it like 2 px or if you're using rems just .1 or .2 max or increase the html text size better))...
First create the largest columns based on your aprox content, then you'll get your largest size based on content... from there you see Oup I got a 3000px layout, ok well that's too much, I'll go with a recommendation that I pulled out idk where that's 2500px...
Or another example.... someone recommended maximum 2500px buy your content looks awful, you arrange it and it look good at 1900px... well that's your max width
hi, you did a great video, just one questions, for a general website which normally have more than 10 pages, if I do multiple responsible designs for each page that would be tons of work, I think this way only worked for one page web
Yes, it's a lot of work, but you should for it for all pages. Normally, you should aim to wireframe for at least 3 screen sizes.
Thank you for the video! I'm an envato elements subscriber and looking for a link to the asset files in the video. Are those available? If so, can you please share the link?
Those links and a link to the course on Envato Tuts+ are now in the description. Thanks for watching!
@@envatotuts was hoping to find the adobe XD source files that were used for the wireframing example in the video. Didn't see that available on the tutsplus page.
@@ThumperMelges Kezz has since prepared a version of the XD file without any of the Elements assets-you’ll find it available for download on the Tuts+ course page. Hope that helps 👍
Should employers be expected to hire a web developer AS WELL AS their graphic/UI designer?
As a GD searching for jobs I fell like all employers expect us to be be a web dev / know coding, and it kinda annoys me. Anyone else feel the same?
The adobe XD is only for prototyping only?
lovely tuts.. (kinda funny tho coz you sounded like Ellen DeGeneres) kidding aside thank you for this
Who's watching this in 2020
Is this still working?
Absolutely! The design habits the author presents are very relevant and will be for a long time.
Note that any references in the tutorial Symbols are now called Components in XD
@@joshbauman2757 Hey buddy, do you know why she is not using the Grid Layout option that enables column guides? She does every layout manually on the video and I'm wondering if its because that does not work for responsive websites.
Hey buddy, do you know why is she using manual layouts instead of using the layout grid system already built in the artboards?
Why is she using manual layouts instead of using the layout grid system already built in the artboards?
its easy to do in XD but the real pain is for the developer
you are milking the publicity to the max aren't you