@@simonbullows This didn't exist, until THIS existed. I checked 2 years ago when I first became a Developer, nothing of this quality on Design existed on YT. So, I second the Thanks
@5:04, for accessibility reasons, it is a bad practice to jump typography. It needs to follow in order (i.e h1 > h2 > h3 > etc...) then you tweak the font-size to create the necessary gap. As a developer or for other developers, this not really necessary at this point because this may not be the final build and can be done well in CSS but since most designers like to use website builders like web-flow, it is important to note that this affect accessibility and SEO
This has been great for learning the basics of XD, I’m used to working in InDesign but thought it was time to use the proper app for web design, so thanks for this Ran. Now I’ve been an information designer for 20 years and it’s NOT up to the designer to capitalize or not, those are editorial decisions, those elements speak about much more than aesthetics and it has become quite common to see new designers forgetting what design is really all about and there is too much focus on the tech side and the looks. It should be much more deeper than that.
@flux I recently just came across your channel, and the way of teaching is top notch. I have learned so much within 2 days then I have learned from paid courses.
Iam amazed(does this word exist? 🤔) by the way u teach. I’ve made one XD full course and one figma full course of 3 hours and I leaned more just for this simple tutorial. I appreciate!🙌
I hate the black bars on top of websites.. at least on the main pages. i kinda like the original one. without those ribbons donate buttons.. great video and class.. cant wait for the interactive part........ thumbs up!
Question related to setting up the content container and grid is Adobe XD. Let's say you want the container to be 1140px wide and use a 12 column grid. You do not want elements stick to the very edge of the container so you give the container for instance 20px padding on the left and right. How do you take this into account when defining your grid in XD? Like when you have a H1 that's 4 columns wide, do you make the container in XD 1100px and put the H1 it start at the beginning of the first column or do you make the container in XD 1140px and position the H1 20px from the left of the first column?
Suggestion: Hey Ran, try a voice filter for the mic and use the mic in upright position and try talking from the side of the mic. Pitch of sound is too much crisp, and for the longer videos experience is little umm noisy or over-crisp. Thanks for the amazing content.
First off thank you for this video. It is very helpful. I do have one question. What setting do you have on XD to be able to copy the image url and paste it in XD with the image and not the url in text form?
Hey there! This is Vanessa from the Social Media Team. Can you please send your question to this e-mail? team@flux-academy.com. Please link the video to the e-mail so the team can better help you. :) Thanks!
Sorry for the delay in asking a question but only just discovered your videos. You make a component out of a button, why do t you make the entire menu - background, all items and the logo a component so you can use it across multiple pages and any alterations will cascade throughout ?
At the end of this video you say "in the next video"... you will take that full page you just built and create a responsive design in XD. I can't find this video - could you send me the link please? Thank you. This was a great video by the way!!!
as a designer i am always confused hiring devs for apps or websites.. there are many kinds .. can you make a video to explan different types of developers and technogies jargon please
Hi, saw some of web design video in your channel, which all of them are great and helpful. I have one more question and would be much appreciated if you could answer me. Should I create 3 versions for each web page based on different devices? Because the content display way of same page could seems different on mobile and desktop. So should I create 2 artboards for the homepage?
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.....
whn you decide on the sizes for the font to use could you use a range of sized , for example H1 could be 50px - 60x is that ok our should I just decide on the size for H1 H2 H3 etc. ???
Hey Ran, I was watching some of your webflow videos and I was hoping you could help me with an answer. After you're done designing a website for a client and have to connect the domain, how do you ask for the credentials to their account in a safe manner? Do you ask it over email? What do you do if they already have their card info inside webflow and don't want you to see it? This part of the client interaction is so awkward to me. Thanks!
Thanks, thanks........................ if I say it infinite time that won't be enough for your effort. This course is really a lot worth to me. I am thankful to you. @Chris Do and you are really awesome mentor to me.
I love your tutorials and I am signed up for a few of your courses but I have a hard time following along, because I use Windows and you always use Apple . Can you create a separate course for Windows users, or at least show alternatives for Windows users?
You have to get the image address (URL) from the HTML code. You can find it by right-clicking the home page, then click Inspect. This will bring up the HTML for that section of the website. Open up the s under the section looking for the background. It will be a URL address for a .jpg. Right click the address, edit as HTML, and copy the address up to (but not) the ? question mark. Open a new tab. Paste and open. Right click and save as. OR After opening the Inspector, click on Sources. It will show a heirachy of folders. Open those until you find the images folder. It might be listed in there. LOL! Good luck!
bro I have never seen a teacher same like you.i like you bro, today I have some question, my question is how can I know the homepage which section should I put, which feature i put any website like photography website business website eccomerce website .?
Isn't secondary button in hero section actually more attention grabbing due to higher contrast ratio between both hero background and button and in button background and text?
I am only at 4 minutes and already have bugs on this software: font is missing (arial lol). Search on internet and saw it's a know bug since at least 2018 and it was never fixed... Cool
few reasons - it might expend over the other links (and I don't want to hide the CTA), and also because its small, it visually would probably not look aligned if the big button is not aligned to the right
@@FluxAcademy just curious, wouldn't it be better if the search were in the left of the navbar links? So it does have the space to expand. Also, why's the navbar items not on the grid system? Just curious, thank you for answering! Love your channel. Started working with webflow also thanks to you. :D
Adobe XD has no option to vertically align text which is needed to create accurate spacing when developing sites. Until this is implemented XD is not an option for professionals. Use Figma or Sketch instead
Why do your type suggestions in Type-Scale have fractions of pixels and why aren't you doing multiples of 8 for vertical grid multi-device integration. The only version of your type size list that is legit is the 16px 1em size and that would be for web body copy. At the very least they need to be multiples of 4. You can't have odd numbers and fractions of pixels. That is design content 101. None of this would work on a 8px vert grid based on your type selections. And therefore wouldn't work redesigning screens from Desktop>Laptop>Tablet>Multiple mobile device break points.
You don't just teach the mechanics, You teach the " why it works ". Thank you!
Yes I like how he improves the design and tells why. Good for beginners to learn the usability of design too.
I found literally nothing on RUclips to learn Web Design so I just want to thank you for making the first move with this very great course !
There’s literally thousands of videos
@@simonbullows this comment was posted 11 months ago
@@simonbullows This didn't exist, until THIS existed. I checked 2 years ago when I first became a Developer, nothing of this quality on Design existed on YT. So, I second the Thanks
@5:04, for accessibility reasons, it is a bad practice to jump typography. It needs to follow in order (i.e h1 > h2 > h3 > etc...) then you tweak the font-size to create the necessary gap. As a developer or for other developers, this not really necessary at this point because this may not be the final build and can be done well in CSS but since most designers like to use website builders like web-flow, it is important to note that this affect accessibility and SEO
Thank God you came into my RUclips recommendation I really needed a teacher like you who teaches right do's and don't!!!
Funny to see someone I watch on RUclips design for a client I work with at the agency I’m current at 😂😂. Look forward to this video 👀👀
I love the hero image man. But damn, I can't unsee the misspelling of 'Breathe'
This has been great for learning the basics of XD, I’m used to working in InDesign but thought it was time to use the proper app for web design, so thanks for this Ran. Now I’ve been an information designer for 20 years and it’s NOT up to the designer to capitalize or not, those are editorial decisions, those elements speak about much more than aesthetics and it has become quite common to see new designers forgetting what design is really all about and there is too much focus on the tech side and the looks. It should be much more deeper than that.
Since I join these course not quite long and i have been able to use XD normally, How you teach really work bro. Thanks
@flux I recently just came across your channel, and the way of teaching is top notch. I have learned so much within 2 days then I have learned from paid courses.
Hope for more of this!!!just in a beginning to learn design with xd..thanks!
Iam amazed(does this word exist? 🤔) by the way u teach.
I’ve made one XD full course and one figma full course of 3 hours and I leaned more just for this simple tutorial.
I appreciate!🙌
Yes, you got the word right 🤗 Amazing work! Well done for going for it 💪
I'm loving your course more and more!
Nice way to help make awareness✊🏾✊🏾
I'm pumped to dive into this topic and glad I found this series. Keep going I appreciate your efforts a lot. By the way: great style of teaching!
I hate the black bars on top of websites.. at least on the main pages. i kinda like the original one. without those ribbons donate buttons.. great video and class.. cant wait for the interactive part........
thumbs up!
Your course rocks!
Question related to setting up the content container and grid is Adobe XD.
Let's say you want the container to be 1140px wide and use a 12 column grid.
You do not want elements stick to the very edge of the container so you give the container for instance 20px padding on the left and right.
How do you take this into account when defining your grid in XD?
Like when you have a H1 that's 4 columns wide, do you make the container in XD 1100px and put the H1 it start at the beginning of the first column or do you make the container in XD 1140px and position the H1 20px from the left of the first column?
Your stuff is amasing bro.
Great videos! The way you explain everything is clear and understandable so even beginners can follow along. Thank you:)
thanks a lot!!! so nice reverb
J’adore , juste le style qu'il faut. Simple mais efficace ! Thanks from france
You are a Hero Sir!
You are my favorite RUclipsr 🙏
Such a clear explanation......thank you so much for the tutorial👍
Awesome video :) Showing the design process of how you're creating a homepage was very helpful, thank you!
Amazing! Thank you! 🤩🙏
You’re welcome 😊
Great Work.
This is amazing, very very helpful for the UI best practice. Thank you!
Suggestion: Hey Ran, try a voice filter for the mic and use the mic in upright position and try talking from the side of the mic. Pitch of sound is too much crisp, and for the longer videos experience is little umm noisy or over-crisp.
Thanks for the amazing content.
Best master ❤❤❤
First off thank you for this video. It is very helpful. I do have one question. What setting do you have on XD to be able to copy the image url and paste it in XD with the image and not the url in text form?
Hey there! This is Vanessa from the Social Media Team. Can you please send your question to this e-mail? team@flux-academy.com. Please link the video to the e-mail so the team can better help you. :) Thanks!
Hy. I’m interested too in this subject. Can you tell us how did you managed this? Thanks
Thank u Ran for your great videos.All of them are really helpful.
this design is great!
Great Video Amazing tutorial about XD
Thank you so much for this video.
Sorry for the delay in asking a question but only just discovered your videos. You make a component out of a button, why do t you make the entire menu - background, all items and the logo a component so you can use it across multiple pages and any alterations will cascade throughout ?
Thanks!
Thank you so much for this course ,but I think the way they put the H1 and H3 was more efficient and also now it looks so busy I guess
Thanks for your lessons. May I know where I can get the website measurement tool.
TNice tutorials is exactly about everytNice tutorialng that you'll ever need to do to make soft on soft soft
You make your intro with XD or aftereffects??
At the end of this video you say "in the next video"... you will take that full page you just built and create a responsive design in XD. I can't find this video - could you send me the link please? Thank you. This was a great video by the way!!!
Thanks a lot! You are amazing :)
Super Dope Design Dude!
as a designer i am always confused hiring devs for apps or websites.. there are many kinds .. can you make a video to explan different types of developers and technogies jargon please
Hi, saw some of web design video in your channel, which all of them are great and helpful. I have one more question and would be much appreciated if you could answer me. Should I create 3 versions for each web page based on different devices? Because the content display way of same page could seems different on mobile and desktop. So should I create 2 artboards for the homepage?
Thanks a lot for sharing.
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.....
It's a great tutorial! Please which tool do you use to measure the website size?
Great design.
whn you decide on the sizes for the font to use could you use a range of sized , for example H1 could be 50px - 60x is that ok our should I just decide on the size for H1 H2 H3 etc. ???
loved it. thanks a lot for the video!
Hey Ran, I was watching some of your webflow videos and I was hoping you could help me with an answer. After you're done designing a website for a client and have to connect the domain, how do you ask for the credentials to their account in a safe manner? Do you ask it over email? What do you do if they already have their card info inside webflow and don't want you to see it? This part of the client interaction is so awkward to me. Thanks!
same idk what to do in this case
I think that should be discussed with the client up front.
The Donate Button should be the same distance from the Right as the Logo has it from the Left,!
thanks for you so much💙💙💙
Thanks, thanks........................ if I say it infinite time that won't be enough for your effort. This course is really a lot worth to me. I am thankful to you. @Chris Do and you are really awesome mentor to me.
Excellent!!
Is this better than using other page builders?
Thank you a lot
im a bit late but the website container needed to be a bit wider to make space for the impactfull background
Okay lesgoo
what is the shortcut for crop the image?
Thnx very much Ran
I love your tutorials and I am signed up for a few of your courses but I have a hard time following along, because I use Windows and you always use Apple . Can you create a separate course for Windows users, or at least show alternatives for Windows users?
How did you download the picture with the woman from the site? Thank you for lessons! Very helpfull!
You have to get the image address (URL) from the HTML code. You can find it by right-clicking the home page, then click Inspect. This will bring up the HTML for that section of the website. Open up the s under the section looking for the background. It will be a URL address for a .jpg. Right click the address, edit as HTML, and copy the address up to (but not) the ? question mark. Open a new tab. Paste and open. Right click and save as.
OR
After opening the Inspector, click on Sources. It will show a heirachy of folders. Open those until you find the images folder. It might be listed in there. LOL! Good luck!
Incredible Man!
bro, you need a Desser, those esses hurt my ears. Otherwise, Love this course
How did you crop the image to size?
bro I have never seen a teacher same like you.i like you bro, today I have some question, my question is how can I know the homepage which section should I put, which feature i put any website like photography website business website eccomerce website .?
what is the job of homepage, what should be I include on the homepage..?
good instructions. A bit distracting with the website choice.
Like bro!)
Isn't secondary button in hero section actually more attention grabbing due to higher contrast ratio between both hero background and button and in button background and text?
works gj
Ran, what is the tool/chrome extension you use to measure the elements of the website? @1:45 in this video? Would be super helpful... Cheers
Is cmd + Shift + 4 on a Mac to take a screen shot and also measure an area.
but its only available in mac
cms+ shift+ 4
Episode 14
THANK YOU SO MUCH!!!!
🙏 ❤️
Hello guys! Is it free to design and create a homepage in adobe xd?
What app are you using to quickly switch between apps. Thanks.
Mac's do that. Same as alt-tab on Windows.
Amazing
What too did you use to measure the width? 1:45
He took a screenshot, CMD+SHIFT+4 on mac
Sir I am always follow your design, excellent your design Process.
Where is episode no 15????
I am only at 4 minutes and already have bugs on this software: font is missing (arial lol). Search on internet and saw it's a know bug since at least 2018 and it was never fixed... Cool
Why did you choose to place the search icon between the Donate button and the navbar links?
few reasons - it might expend over the other links (and I don't want to hide the CTA), and also because its small, it visually would probably not look aligned if the big button is not aligned to the right
@@FluxAcademy just curious, wouldn't it be better if the search were in the left of the navbar links? So it does have the space to expand. Also, why's the navbar items not on the grid system? Just curious, thank you for answering! Love your channel. Started working with webflow also thanks to you. :D
Hey Ran, based on your experience... how much time it will take me to get into UX/UI design field. Thanks for your tutorials.
I guess you need to ask yourself that question how passionate are you to learn with that in mind you can learn anything.
I think word "color of change" should be bigger than text
.. because it is the message...
..
Adobe XD has no option to vertically align text which is needed to create accurate spacing when developing sites. Until this is implemented XD is not an option for professionals. Use Figma or Sketch instead
Can't we install Adobe XD on windows7 ??
We can't. I used W7 untill a couple of weeks ago. It runs only on W10 i believe. They have writen requirements on their website.
Episode 15????
Ikr!
what's your take on invision studio? an similar alternative to xd!!
11:59 How did you make the text and orange rectangle into one component
Ctrl+A (Windows) or Command+A (Mac).
One Suggestion Please remove some pitch shift from audio while speaking "S". It hurt ears. :)
Wow,but why when i do the same thing is not look like professional like your😦,anyway very good tutorial
Hey Man, Proof me wrong but I thought Adobe XD isn't working with pixels but with points.
I was looking for this comment
First bro :)
Transferring measurements off to developers is so off in XD
69k views
Nice × 1000
Why do your type suggestions in Type-Scale have fractions of pixels and why aren't you doing multiples of 8 for vertical grid multi-device integration. The only version of your type size list that is legit is the 16px 1em size and that would be for web body copy. At the very least they need to be multiples of 4. You can't have odd numbers and fractions of pixels. That is design content 101. None of this would work on a 8px vert grid based on your type selections. And therefore wouldn't work redesigning screens from Desktop>Laptop>Tablet>Multiple mobile device break points.
Any plans to do Adobe XD course? I'd definitely pay for that.
Check out Daniel Scott's Course. It's Free on RUclips.
I thought its full homepage :(