Planning out a website before building it is same as saying measure twice, cut once. Prototyping is a way to do exactly this. When we design our websites, we progress from wireframing, prototyping, and finally, a full design. In this tutorial you will learn what Prototyping actually means and what it looks like. You will see the full process of taking an early prototype and wireframe and creating a website.
🎥 Video from Adrian Twarog. Check out his YouTube channel: https://www.youtube.com/channel/UCvM5YYWwfLwpcQgbRr68JLQ
🔗 Learn how to create a wireframe in the first video in this series: https://youtu.be/pN92rnO_n5U
—
Learn to code for free and get a developer job: https://www.freecodecamp.org
Read hundreds of articles on programming: https://freecodecamp.org/news
source
Hope you all enjoy this. Looking at doing color theory and continuing this project in the next one. If you enjoy this content, make sure you check out #freeCodeCamp as they have heaps of great learning material on their website too!
B
title: Website From Wireframe
what actually happening: Wireframe from wireframe
I don't see how figma is much better than say photoshop to create web design!
What are next steps after you’ve created a wireframe
your soo cool thank you to share your knowledge in web design i learned a lot…. more power to you bro!
change the playback speed to 1.25, you're welcome
So incredible :0
awesome , very interesting
With the no-code apps that are taken over can we skip the whole wireframe stuff now?
HI IF I JOIN DO I GET ONE ON ONE HELP ANY TIME
UI designer must code that or not? Learning only UI (graphic only) make any sense? Or i must be UI/UX?
You're the best
your tutorial helped a lot thanks
Thanks for presenting use of Figma!
What if i have done half of my work via sketch and now i want to switch to figma, is it possible to switch and continue from where i left or do i need to do the whole thing again?
Looking forward for next part
Ah.. I needed this video for inspiration. Thank you so much!
When will the next part coming out? Im so excited 😊
Pretty cool. I'm on my web dev journey,maybe I can use this to design websites.
svg link?
Er… it should be 1920 x 1080
Hello there please continue app you are best
You helped me a lot. A valuable lesson. Thanks!
hey I noticed you didn't know this but if you select an element then hold alt and hover around on other elements, the spacing will show up, can be useful when try to measure equal spacings/padings.
Um, this isn't a prototype, this is just a another wireframe. The kind we typically start with. The lone he started with we either dont do it or we use it instead of this. Prototypes actually work. That means the links work, the animations work, slide shows work, forms are built in (not fully functional at this point, but actual forms not just white boxes. etc To further illustrate this note that Bootstrap is a "prototyping framewok" meaning prototypes and made with CSS. HTML and Javascript. Not everything works properly but it will resize etc.
Try to insert wordpres to do website the channel
How should I get the first part of this video
Very helpful. Thanks a lot.
How great are these guys??
Great video explanation. Kindly assist me with the link(s) to your SVGs.
Awesome!!! TQVM!
Isnt the frame actual width of the artboard should be 1920 ?
I am a data analysis instructor i want to connect with data analysis intructors
"Wireframe from Sketch" is a more appropriate video title.
This was exactly what I was looking for the other day on your channel! Looking forward to the colour theory one as well, I know it but not in the website sense. Thank you for your content, it was spot on and easy to follow.
Please add an Arabic translation.
you are the best
I want more and more courses on web development.
Thanks so much Adrian from Australia. This had helped me now I can delve into UI designing with Figna.👍🏾👍🏾
Saving this video.
First time I used figma for a job.. the object kept changing position.. I ended up using Adobe XD.
But you have given me hope on figma. And I will get back to using figma.
It will be cool if it have a feature that convert the design to an actual HTML and CSS codes.
Scratch full tutorial please 🙏
Please anybody help me
Every file extension was changed into .kasp in my system
It doesn't open.
Help me. +919885550049
1980? Why? Isn't it 1920?
Great video. So excited for the next one !!
Those three dots not being centered really bother me though haha
Hlo
We want to see version 3.0 😋 with to make it actual website.
Fantastic tutorial.
Why you're not doing this kind of tutorial on your Channel in full detail like this one? ❤
thanks
What exactly is 1980 pixel representing? Guess it should be 1920? Other than that: thanks for the tutorial, always interested to see someone's approach!