DESIGN A HOMEPAGE WITH ADOBE XD: Free Web Design Course 2020 | Episode 14

In this episode of the free web design course we’ll take you step by step on how to use Adobe XD to build a homepage for your website

Watch the full course here:

Learn how to build custom websites with Webflow FAST:

Find me on other social media platforms:

Gear & Book Recommendations:

#FreeWebDesignCourse #webdesign #freelancer

Thanks for watching the video Using Adobe XD To Design a Home Page


  1. 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!!!

  2. 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 ?

  3. 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?

  4. 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?

  5. Sorry your presentation is good but the sound of your s, p, makes me to go crazy. Please add a filter, pop Riss, cross over or something to make your audio to sound better. Good stuff. It’s just the mic i don’t get it.

  6. 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.

  7. 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.

  8. If you're trying to appeal to a broad audience to educate others on a particular subject its probably best not to choose an example so political. Not everyone is on board with the views and actions of organizations similar to Black Lives Matter and may find such content distracting from the lesson to the point of making the whole video ineffective in achieving its intended purpose.

  9. 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.

  10. 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

  11. @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

  12. 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?

Leave a comment

Your email address will not be published.