Responsive Web Design Tutorial in Adobe XD

skl.sh/designc... - First 500 people to sign up will get their first 2 months free!
-- This is a continuation of the project created in my UI Design Crash Course from last week: • The 2019 UI Design Cra... - In this video, we're going to take the project we created and make a mobile friendly variation. This is a necessary step before I release the frontend development crash course where we will make this mockup a reality in the browser.
The frontend development course using this mockup is here!
• The 2019 Frontend Deve...
This is the XD file that includes both the desktop and mobile design:
s3.amazonaws.c...
Make sure to subscribe!
Enjoy!
- - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesi...
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

Subscribe to get notified of when I release the frontend crash course that takes this mockup and makes it a reality in the browser!

[@harisbashir6074]

Thanks for giving me heart :) .I already subscribe your channel .Your content is awesome . my favourite KZbin channels Design course ,Traversy media ,CS dojo ,The new Boston :)

[@muhammedyasinkalender6576]

Did you drop any courses? I signed my email to that link in your top 13 design mistakes in UI video. How can I enroll in your courses.

[@Overasc]

bruh, one of the best parts of this tutorial is the narration of the shortcuts/commands. super helpful.

[@bhavikakapadia2462]

I will look forward to your up coming fronted Dev course!

[@nichiban3972]

You don't have to cut the 3-column-bar into two pieces.Just resize it with SHIFT + ALT (Just like you did). Double click the element select the most bottom 3 anchor points while holding shift and drag those to the bottom. You did it lots of times in your other videos and so I learned it from you. Isn't that ironic. But seriously you're a good mentor keep up the work!

[@nichiban3972]

However, for the export you probably need to do it the way in the video.

[@paulb3084]

Great series Gary, really enjoying it! Looking forward to the next video. 👌🏻

[@ttfxtrader2361]

Watching and learning during pandemic... thank you.

[@junaidabbasi9544]

instead of taking another rectangle, i selected anchor points of bottom and resized it. it worked for me.

[@willmjmcg]

Can't wait for the next video - the front-end coding video!

[@Elluzive]

me too. I cannot wrap my head around the translating the design process from Sketch/XD to a working responsive design. I attempted and failed multiple times.

[@IStMl]

Try SoloLearn, they have some courses dedicato web design

[@erwinmesi]

This video DOES NOT deserve "at least 1" unlike.

[@uweschaefer2231]

For aligning H1 with the hamburger (min 9) , use the Help lines you can drag from the left to the position desired.

[@ajaym6795]

I loved this video the first time I saw it. However, I've learned a little bit more and feel that what he did was an adaptive design... not responsive

[@uzairsultan6550]

You are an amazing teacher man..... learned it in one go. Appreciations from Pakistan.

[@jamieslate]

Why are you so incredible?! Your tutorials are the best on the web, no doubt!

[@theninetieskid2853]

starting with Adobe XD and your tutorials really helps me out!!

[@Gigusx]

I have been sticking with them actually, got some pretty good habits going since the start of the new year and also added exercise a couple of days ago!

[@golamrabbiazad]

Lovely video. got many ideas about responsive design ☺️

[@corpstaging]

Here's a tip: at 24:08, you didn't need to remake the text field in order to switch it to area type. You could have just selected "area type" in the text palette.

[@Franiveliuselmago]

Loving this series. Thanks a lot for sharing.

[@wendyzhoudesign]

Great video! Love to see these UI tutorials on KZbin.

[@Merko2]

Awesome. Getting so much inspiration of your videos. Really great work!

[@DavidPerez-xz8dr]

Salute! 6:22

[@nduhmnisi]

Sure man you videos are making a huge impact in South Africa

[@DesignCourse]

Really? How?

[@khurramshadab8958]

came here after your first video !

[@jovannovakovic5975]

You are the best!

[@towfeeque5929]

Awsome design :)

[@harisbashir6074]

Please give me a heart plzzz. I am beginner in web development .

[@techtipsuk]

The noun project is also a great resource for icons.

[@marcelomotta6904]

hi there, thnx for share you knowledge, i have a question... on 14min why not just change the shape size with anchors to get wish size..can i do this change simple resizing shape with anchors ..? or I really need to have the 2 elements separate, I was wondering if it was to facilitate the resizing or if for some problem in the final result...and keep going! the knowledge must be shared...thx for all

[@youtubewatcher2006]

14:00 But why can't you double click the shape and move the 2 bottom anchor points to stretch the shape? This way the angle at the top will not be affected.

[@caiomachi]

true, but in the css its easier and better to do like he did. Its better when the text background color is via css instead of an img

[@canerdemircigm]

Jhon and Jane should meet with each other one day :) Where are they?

[@indioarmani8209]

so actually we have to prepare several design version for seveal device?

[@arpadracz-fodor3864]

Hey man. Great channel, great tutorials. Would you consider making a video on responsive HTML email design? :)

[@afonsokolb4107]

Should I make the design for all screen sizes? Can not I do just one that works for everyone?

[@joseph-the-seventh]

Great video. How many screen sizes would you typically do for a website? Desktop, tablet, and mobile sizes?

[@mdrayhanmunshi5455]

Hi, your design is so good. I want to work stock market, like uplabs, themeforest and etc. I have some question... please help me. 1) i want to use some assets icon, where i found this assets? 2) is assets has any copyright issue? because i want to download this type of assets from others site for my design! 3) i want to use some mobile app picture, did i design that? 4) if i download this mobile app picture from any free resource sites, Would it be copyrighted? 5) i want to use some team-logo image, where i found it with out copyright issue? Please help me, plz plz plz.....

[@fuad471]

Your video gave me some good ideas as always. I have designed a mobile first website of 20 pages and now have to 'translate' all of them to desktop size (( . Have you any advice for me?

[@AllenMarsam]

thanks

[@nadavram7322]

Skillshare ad was cut off to early

[@uropig]

Video starts at 3:15

[@canerdemircigm]

In responsive design I define mobile smallest and biggest, tablet smallest and biggest, desktop and 4k desktop breakpoints and I watch fluency between two breakpoints. Do I right?

[@wathah323]

You talked nothing about text size in mobile. You just dragged and sized as you went along.

[@YashKadamYT]

how do you get this working as a website (cross platform)? BTW your videos are super-insane!!!!!

[@ThiyagarajanKesavan]

it is not about responsive html conversion?

[@sanjay94827]

first view ,first like ,first comment

[@raphalugs]

aham, é ta bom

[@psybitcoin]

@@raphalugs English ma friend...

[@MULTICODE]

I want to be a front-end designer. Where can I start on your channel? Playlist please?

[@MULTICODE]

Please answer me

[@DesignCourse]

Watch my course releasing tomorrow.

[@MULTICODE]

@@DesignCourse thanks, i will do at night after my writing exam. 👌

[@jusatin]

MULTICODE Sleep at night. Watch videos later when you have time during the day.

[@psddesignernet]

i still cant switch to adobeXD because im missing the grid system so much... :/

[@wathah323]

Also wouldn't the desktop version that you already did be good enough for the ipad? Since Ipad shrinks to fit?

[@theaiphotography]

If we design a website then we have to design it for mobile and handoff to the developer???Please help!

[@vashimirzendera7803]

Hi is there a way to make artboard scroll down as if it were a one page website. or another way to create a website with the ability to scroll down.

[@andrewleong7613]

Do you have advanced front-end courses?

[@bisark1]

I was also wondering what is considered a beginner design and an advanced design

[@jakub7048]

Hi ! When I create any kind of shapes in Adobe XD is it better later to code these shapes in css or just import as svg and include these in html ?

[@СергейПротос-р1р]

I think responsive stuff in figma better. and xD no hover states. sorry Adobe.

[@nomtijorti]

it all depends. They both have what they're good at so i just use both depending on the projects i'm doing

[@babakyousefzadeh6850]

@@nomtijorti can you briefly explain how different they are regards to things they are good at.

[@OverEducatedUnderPaid]

but how do I export it to the web and how do I make it responsive

[@swearsinspanish1092]

Adobe XD is more of an interactive mockup program. you can't make it fully responsive but design how it is supposed to look on the breakpoints

[@TheBaltLT]

I dont get it, why are you distracting viewers with your headshot video??

[@drammeh1209]

I don't know how to thank you...

[@Ash-em5pm]

Just buy a course of his or donate on PayPal

[@titus7770]

no pinned comment :(

[@DesignCourse]

I had to leave before the video posted. I will add one now.

[@Ajaykumar-ky6mv]

I cant run xd

[@dhruvitnavadiya5253]

after installing xd just restart pc or laptop and then try.

[@clickaction]

Great job, thx... looking forward to your next video