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):
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

20 comments

  1. Episode 1 Discovery & Wireframing. Hope you enjoy the video! Don't forget to give it a thumbs up if you did 😀

  2. You are just amazing good! For me it is still hard to follow you, but your "tips and tricks" are really coooooool 🙂 Thank you!

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

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

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

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

Leave a comment

Your email address will not be published. Required fields are marked *