How to Design a Website – A UX Wireframe Tutorial

Learn how to use wireframing to help design a website. A good wireframe can provide the vision for the entire layout and functionality of a website. It can serve as the first stage of a design, give an idea of the overall structure pages will take, and how navigation will flow.

--

[Decentralized_Maze]

You know exactly what projects I'm on, perfect timing!! Thank you for educating those wanting to develop skills and make progress. 🔧

[hannahabegail]

You literally fix everything bothering me about what to do with my website. Thanks man!

[sriram-znic]

He is so calm I rarely see people like this. I saw people who's voice reduces and bored at teaching but he is awesome👍. Excellent work I got a great use from u thank you.

[cruzchaps]

When his wireframe is more impressive than your final design

Me : *cries in html and csss*

[thebuildguy]

Everyone has something to learn from this video. Thank you Adrian and FCC. 🖤

[charuduttachaudhari]

Thanks for this video.... actually for every single video you guys put because you literally uploaded full tutorials just for free ✨✨
which has really helped me learn a lot of skills 😁
❤️❤️

[briansmith]

Terrific Introduction and explanation of wireframing, no waffle and straight to the point, really enjoyed this. Super video. thank you

[claudiameneghesso]

Nice, simple, clear! Perfect for a beginner like me! Thanks Adrian

[recujbb]

Thanks Adrian, I owe my first understanding of wireframing to you through this tutorial.

[gthman]

I really like this concept of you narrating what's happening, and the wireframing has already happened and we just see it unfolding.
A very good concept to keep the videos short.

[StrangeIndeed]

I love your teaching style. Also, rewind in the outro was a nice touch c:

[swibay]

Perfect tutorial! I am a full-stack (VueJs & Golang) developer who always gets depressed when comes to the design part especially what to put and how to layout(I always find myself spending tons of time on the color palette and searching for best designs to see how they did in their websites which is very confusing if you don't why they did so)...and what is the best convention! Thanks so much Adrian looking forward for more beautiful videos like this! Much love from Tanzania!

[henrythomas]

Thanks for the new video! I’m looking forward to seeing what other content you post! Always good to learn as much as you can!

[troys]

really looking for these for 2 months... thanks! I was trying to analyze Wix’s Home Page design with my brother, but now... yay!

[HansMcMurdy]

You also do mockups in vscode via the drawio extension.

[whyredvince]

was literally searching for something like this when notification came 🔥🔥

[stephanieczetli]

Hey Adrian! Great walk through of wireframing. Loved seeing your thought process & step-by-step as you worked through the complete design including responsive for mobile/tablet. I thought you spoke clearly & at a good speed for listeners. Thank you for such a nice presentation!

[angelileonor]

Brilliant teaching, thank you for this, it helps me to understand more of the functionality of the website navigation and everything I need to know to finish my website. thanks a lot.❤

[EngineerDJ_Julius]

There we go! That's what I'm talking about!

[omniversal]

Thanks. I often need to make blueprints for my clients, so I found this video quite helpful.