How to Design a Website – A UX Wireframe Tutorial

Share it with your friends Like

Thanks! Share it with your friends!

Close

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.

🎥 Video from Adrian Twarog. Check out his YouTube channel: https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp

Comments

Ahsanul Haque says:

Is there a way that i can take my design from figma and import it as html/css?

Dmitriy Plaksin says:

Great video
thanks.

Can you suggest some wireframing tool that will work on both Windows and Android platforms?

Claudia Meneghesso says:

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

Vishwanatha Reddy M says:

Thank you so much for this..need more content around this topic…wireframes and converting it to html css code

Sunday Obinna Oruwhone says:

Great video explanation. Kindly assist me with the link(s) to your SVGs.

Strange says:

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

Masekela Isaac Maake says:

You are absolutely brilliant. I like the way you deliver the content, its amazing.

Matt says:

Awesome video – how to find the next videos in this series?

Mohammad MOULAKHNIF says:

Thank you sir for your amazing course

anonymous bot says:

Please make a video on full stack with java spring ,spring boot with either react or angular

Mayank chandan says:

Can some tell which software to use for Sharing your webcam and screen together like the one in video

Khalid El-Gazzar says:

Great demo. Thanks

ayo onamusi says:

Thanks Adrian!

Israel Buitrón says:

Is there a couple applications (ones free, others not) that you can suggest us?

groovebird says:

An image slider and the navigation + logo on top of it makes no sense for me but nice video.

Rasmi Singh says:

Thank you for this! @adrian_twarog I really appreciate how you explained step by step and in an easy to understand way. I look forward to more videos.

Omni Versal says:

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

Green Marble says:

+Adrian Twarog I've seen you in 2 channels so far today. This and Traversy. How many jobs got?

Monsieur Longbow says:

yeah wireframing is cute, actually coming up with a great UX and even more so, design, typography etc… aside of standard patterns and bootstrap boxes not so easy. if your goal is to become a dev, maybe dabble a bit in your freetime – otherweise let the pros do it.

source: being a webdev for 10 years.

Write a comment