Episode 1: Discovery & Wireframing.
In this video we will start to wireframe are website using Adobe XD. This video is Episode 1 of Design. Build. Launch. a new series to design and build a website from scratch without writing any code. No code tools like Webflow are more powerful than ever, so in this series we will design in Adobe XD and Build the website using Webflow.
The first step in our project is discovery, what is the purpose of the website? What does it need to tell the user? Questions like this help us shape the wireframe and flow to the website.
After we spend some time thinking about the direction we want to go we start to block out the page using basic shapes. This helps get content on the page quickly to get us started. From here we will refine that into a wireframe by replacing the basic shapes with image placeholders and text.
In the next video we will take this basic wireframe and fine tune our typography, spacing / negative space and content.
Enjoy the video 😀
For this project you will need two tools:
Sign Up for Webflow (affiliate):
Download Adobe XD:
New Videos Every Tuesday & Thursday!
Have a Great Day! Join the Notification Squad: click the bell 🔔
Subscribe:
Learn UI/UX Design and Adobe XD 👩💻👨💻(60% OFF)
Learn:
Join the channel and become a Member ❤️
Get exclusive content from me and help support the channel.
Join:
SOCIAL: @CalerEdwards 💙
Dribbble-
Instagram-
Twitter-
Behance-
Website-
Hangout on the Discord server! 💜
Discord:
▶ Music: Epidemic Sound 🎹
What is Design. Build. Launch. ?
If you missed the Introduction Video you can check it out here:
#Webflow #AdobeXD #NoCode
Episode 1 Discovery & Wireframing. Hope you enjoy the video! Don't forget to give it a thumbs up if you did 😀
How do you change the length of the artboard without having to scroll to the top and click its title?
Contetn Generator won't come up for me when I click on it under plugins :/
Watch this on .75 speed if youre a beginner lol
You are just amazing good! For me it is still hard to follow you, but your "tips and tricks" are really coooooool 🙂 Thank you!
Caler you rock. All the best from Indonesia.
You da man! Thank you!
Hello Caler, regarding this (in the video) grid "specifications" – what kind of grid would you use for a mobile version ?? How many columns, spacing, gutter and o on …??
Hello, I have a quick question regarding WebFlow. I have to do a registration page with email entry then email confirmation: I would like the register button not to be accessible as long as the email confirmation does not match the email. Thank you for your answers.
Why do I even bother to check paid courses, with this gold around? Geez. Thanks a lot, that was great!
could#ve passed this one, I'm already a pro in adobe xd. I THOUGHT. soooooooooooooo valuable man, thanks for the content ^^
Thank you, thank you, thank you! One of the Best Youtube channel for design websites!
it was exactly what i needed. tnx a lot
That was awesome, great walk through and informative tip with each tool, tab, & what to click. Thank you!
Great vid Caler! Appreciate you sharing your knowledge
I think this is the best Ui/Ux series that was ever made man thank you so much for all the tips, knowledge and above all the effort you put into this. total appreciation keep it up
These tutorials are so helpful!! Thank you!
I was excited when I saw the intro video. I have to ask what is your column grid set to? I use a 1440px HD web with a 1200px 12 column grid. I started with 1100px but it felt the canvas was not dividing correctly.
Hi Caler,
Want to ask that Webflow is only for websites or Mobile App too?
Nice one! Waiting with anticipation for the next part