How to Wireframe a Website – Design. Build. Launch. Episode 1

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): http://bit.ly/2sq7QLz
Download Adobe XD: https://www.adobe.com/products/xd.html

New Videos Every Tuesday & Thursday!

Have a Great Day! Join the Notification Squad: click the bell ๐Ÿ””
Subscribe: http://www.youtube.com/user/CalerEdwards?sub_confirmation=1

Learn UI/UX Design and Adobe XD ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป(60% OFF)
Learn: https://www.udemy.com/ui-ux-design-using-adobe-xd/?couponCode=CALER60

Join the channel and become a Member โค๏ธ
Get exclusive content from me and help support the channel.
Join: https://www.youtube.com/channel/UCfzOLBT7jyHFcaTgwmnttog/join

SOCIAL: @CalerEdwards ๐Ÿ’™
Dribbble- https://dribbble.com/CalerEdwards
Instagram- https://www.instagram.com/CalerEdwards
Twitter- https://twitter.com/CalerEdwards
Behance- http://behance.net/CalerEdwards
Website- http://caleredwards.com

Hangout on the Discord server! ๐Ÿ’œ
Discord: https://discord.gg/qP9CJYE

โ–ถ Music: Epidemic Sound ๐ŸŽน

What is Design. Build. Launch. ?
If you missed the Introduction Video you can check it out here:

#Webflow #AdobeXD #NoCode