Build a Responsive Website | Adobe Xd Tutorial for Beginners #1

[@WebDesignGeek]

Get the Design from here: www.buymeacoffee.com/WebDesignGeek

[@ahadmaqsood1266]

Do you do any case study or something before designing a website? Like if a new designer wants to practice how should he study the case?

[@diksha5914]

can you please tell how the website scroll down . what are the neccesary setting for that

[@WebDesignGeek]

This is not a scroll animation, if the artboard height is taller that the viewport height you can click on the play icon and scroll down.

[@MuhendisKadir]

I'm very excited for starting UI Design :)

[@acousticsoda6185]

Hello! Please reply. I'm a new designer, need help with this. When we are designing in adobe xd, do we need to make different screens for different sizes like desktop, tablet and mobile or we can make one for all using responsive resize? Is it possible in Figma?

[@EffnCrisp]

Why won't you describe what you're doing in the videos... It'll help the beginners alot. Thanks

[@kimotami9982]

in which part you taught Responsive design? you just shared a simple landing page design

[@WebDesignGeek]

Watch the other three parts.

[@hammadahmed6332]

thank you it really helped me

[@WebDesignGeek]

My pleasure!

[@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) you 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) you use some mobile app picture, did you design that? 4) if i download this mobile app picture from any free resource sits, Would it be copyrighted? 5) you use some team-logo image, where i found it with out copyright issue? Please help me, plz plz plz.....

[@DesignDen673]

Thanks so much for the tutorial! Do you create all the assets ? Is there a place you download them from? (esp the phone mockup with the App)

[@sureshkumar3015]

This is great but can you explain how it will be done so this will helpful for beginners like me, grid system how we can measure the gutter size detailed information that will very useful 👍

[@WebDesignGeek]

Hey Suresh, I recommend you read Grid Systems in Graphic Design by Josef Müller-Brockmann. This book will answer every question you might have regarding the grid system.

[@joycechu5911]

thanks for the tutorial. I need to deliver a design to a client but I ended up making it 1920x1080px. I'm not really sure whether I should make another one for 1440x900px because I cannot scale the entire design down without breaking it. Will it be ok to just leave 1920x1080 and let the client (the web developer) deals with the dimension when he codes it?

[@WebDesignGeek]

You have designed the 1920x1080 size, so it shouldn't be a big deal to make the 1440x900 size, you can follow this playlist to learn how to do a responsive design. kzbin.info/aero/PLcYnfEOKgz-yZ64oEOG6OccItmyzideDV If you leave it to the developer I think they finally ask you for the other size, and it harms your relationship with the client in the future.

[@joycechu5911]

@@WebDesignGeek thanks. I just took a look at the playlist. It seems like I need to cover the 1440x900 size and the mobile screen as well.

[@WebDesignGeek]

@@joycechu5911 Yes, if you agreed with the client or it's in the project brief

[@habrmamun506]

1st time you made full website, we are waiting for this.

[@WebDesignGeek]

Surely it will not be the last time!

[@Abdul-cg4rm]

Files in download pack are different from this that you showed in the video :(.

[@WebDesignGeek]

How they are different?

[@Abdul-cg4rm]

@@WebDesignGeek I don't have hero shapes for example (that you use in 1:26) or HeroMockup (from 5:00), though I downloaded file from the link in the description :/.

[@WebDesignGeek]

@@Abdul-cg4rm Hero shape a simple rectangle with different corner radius, and the hero mockup is a separate file and its link is in the description.

[@meenusigroha329]

what are the resoultion?

[@WebDesignGeek]

for large desktop it's 1920 by 1080.

[@biuxer0]

Does this have to be coded?

[@WebDesignGeek]

If you want to use it as a live website, yes you have to code it.

[@sahilbagade]

You are doing a great job! Keep uploading more #fullsupport

[@WebDesignGeek]

Thank you so much

[@manzourabdalla2279]

Great video , one thing else is can u tell me wich software you using for the background sound , thanks :)

[@WebDesignGeek]

Thanks, I use Camtasia for video and music.

[@yas2498]

Maps landing page please

[@WebDesignGeek]

Noted!

[@ultranova3315]

Loved this thanks :) Can you pls link the project file for your videos ?

[@WebDesignGeek]

In the description

[@ultranova3315]

@@WebDesignGeek I can't see it so can you pls copy paste the link here , sorry for disturbing and thanks !

[@WebDesignGeek]

@@ultranova3315 The StarterFile and all assets to be used for personal use only. www.buymeacoffee.com/WebDesig... bit.ly/BBankingApp

[@Tahmeed-Ahmed]

Can you build a real website with links to go to other web pages using Adobe XD? And also, is it possible to publish the website with a custom domain? If it's possible, please create a video on it.

[@WebDesignGeek]

No, you can't build a website inside Adobe XD, but you use plugins to convert your design into a real website.

[@jamievdj2824]

@@WebDesignGeek Can you teach us how to do it? Right now I'm using Shopify or how to post it on Shopify?

[@nresheteev]

nice

[@WebDesignGeek]

Thanks

[@mansoorali3870]

Brother make more

[@WebDesignGeek]

Sure!

[@MarkusMischek]

So where was the responsiveness? You didn’t show how it looks like on the phone.

[@WebDesignGeek]

Hey Markus, this is a 4 video series, watch the other parts for complete responsive design!

[@MarkusMischek]

@@WebDesignGeek Sorry, I didn´t see this. Will check it out. Thanks!

[@sudaissd6464]

thanks pro

[@WebDesignGeek]

You're Welcome!

[@alterakdraws9023]

great! I'm looking forward to trying it!

[@WebDesignGeek]

Hope you enjoy it! Have fun.

[@ranaahmed-uf5lr]

why there is no explanation along the video..it's good video but it's boring to just add some music

[@Reelworthy]

Take responsive out of the title. Nothing was devoted toward responsiveness to screen size.

[@ReachYourGoalsNow550]

dentist website

[@digitaldustbin1628]

I was so excited to watch this playlist... and then realized there were no explanations. Just visuals. That's a hard pass. Bummer.

[@WebDesignGeek]

Sorry, you felt that way, but I had a poll where most of the subscribers voted for more videos without explanation.

[@digitaldustbin1628]

@@WebDesignGeek huh. I find that a bizarre preference unless you're bad at explaining. (I have no idea if you are or not.) Anyway, no big deal. As long as people are benefitting, it's all good.