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!
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.
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.
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.
I need to get back to working out but school is soooo stressful at the end of the semester. I only have a week and a half left and then I can start working out and running again.
Try to not fall into an all-or-nothing mentality, try to incorporate at least a few workouts a week, this really helps to oxygen and nurture the brain, so it is at it's best to study and handle stress !
I love it. And it's really really helpful for me because I am a néw bie a new guy.. I am 15 and I love it.. My mother suggest me this channel.... In 2020 may I think 🤔
This channel is informative. Learn as if you are a sponge absorbing as much knowledge as you can and practice you way through to Guru level. Good Luck😊
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!
@@iUmerFarooq Yeah, but why 1980 and not 1920? I mean the screen size you are replicating here is mot likely 1920x1080 (and then capping the height to 800 to have a better idea what the content will look like on smaller screens) - that's why I'm asking :)
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.
And I didn't watch the rest of the series but I'm betting pone of these steps he mentions isn't Research and/or content. these are also huge parts of a website, in fact they are the most important. the UX needs to built around the content in fact, not the other way around.
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?
@@cajocz Yes. the video title suggest you're building a website here. Thats just not the case. The video from start to finish is manually transforming a rough sketch into a wireframe. Not building a "website from a wireframe".
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!
Yes sir for definitely
Thanks so much Adrian. I really can't wait for your next video on color selection. Great job!
STOP, just stop. You really shouldn't be doing this.
Thanks for awesome content and waiting for next one...
How would you indent a page within a wireframe, visually speaking?
This is the best channel on UA-cam
Wait aren't you the one who yesterday wrote same thing on PewDiePie's video 😀 jk
@@tks4 Haha lol, no
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.
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.
Best channel ever
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.
Great Tutorial, thanks for sharing it!
Ah.. I needed this video for inspiration. Thank you so much!
Looking forward for next part
Thanks so much Adrian from Australia. This had helped me now I can delve into UI designing with Figna.👍🏾👍🏾
Fantastic tutorial.
Why you're not doing this kind of tutorial on your Channel in full detail like this one? ❤
thankew free code cam for everything 🥰🥰🥰🥰
Pretty cool. I'm on my web dev journey,maybe I can use this to design websites.
Thanks for presenting use of Figma!
I need to get back to working out but school is soooo stressful at the end of the semester. I only have a week and a half left and then I can start working out and running again.
Try to not fall into an all-or-nothing mentality, try to incorporate at least a few workouts a week, this really helps to oxygen and nurture the brain, so it is at it's best to study and handle stress !
The video is just good, to the point.thx.
Nice broo!!
You helped me a lot. A valuable lesson. Thanks!
your tutorial helped a lot thanks
When will the next part coming out? Im so excited 😊
I love it. And it's really really helpful for me because I am a néw bie a new guy.. I am 15 and I love it.. My mother suggest me this channel.... In 2020 may I think 🤔
This channel is informative. Learn as if you are a sponge absorbing as much knowledge as you can and practice you way through to Guru level. Good Luck😊
Use their website and hackerrank site as your main path.
Scratch full tutorial please 🙏
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!
1980 representing the width and 1920 is the height which is increasing vertically when we add more content. I hope it make scene.
Thank you
1080w? 1920h? 60 pix for margin? 🤔
@@iUmerFarooq Yeah, but why 1980 and not 1920? I mean the screen size you are replicating here is mot likely 1920x1080 (and then capping the height to 800 to have a better idea what the content will look like on smaller screens) - that's why I'm asking :)
@@benfrese3573 yeah I got the point. You should change it to 1920 I think that doesn't matter.
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.
And I didn't watch the rest of the series but I'm betting pone of these steps he mentions isn't Research and/or content. these are also huge parts of a website, in fact they are the most important. the UX needs to built around the content in fact, not the other way around.
your soo cool thank you to share your knowledge in web design i learned a lot.... more power to you bro!
Great video explanation. Kindly assist me with the link(s) to your SVGs.
How should I get the first part of this video
Isnt the frame actual width of the artboard should be 1920 ?
It will be cool if it have a feature that convert the design to an actual HTML and CSS codes.
i have heard there are plugins available for this
@@clearlyvips May I know what are the plugins plz. It would be really helpful
Er... it should be 1920 x 1080
awesome , very interesting
I want more and more courses on web development.
Awesome!!! TQVM!
So incredible :0
Very helpful. Thanks a lot.
With the no-code apps that are taken over can we skip the whole wireframe stuff now?
svg link?
Great video. So excited for the next one !!
Those three dots not being centered really bother me though haha
Yea same here
UI designer must code that or not? Learning only UI (graphic only) make any sense? Or i must be UI/UX?
Hello there please continue app you are best
What are next steps after you’ve created a wireframe
change the playback speed to 1.25, you're welcome
Try to insert wordpres to do website the channel
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?
title: Website From Wireframe
what actually happening: Wireframe from wireframe
🔥🔥🔥
We want to see version 3.0 😋 with to make it actual website.
1980? Why? Isn't it 1920?
lol i thought that too. He must have made a mistake. It’s definitely 1920 x 1080
You're the best
thanks
Tq bro
"Wireframe from Sketch" is a more appropriate video title.
really
@@cajocz Yes. the video title suggest you're building a website here. Thats just not the case. The video from start to finish is manually transforming a rough sketch into a wireframe. Not building a "website from a wireframe".
@@danielschmider5069 isn't a wireframe the 'sketch' you're referring to?
I am a data analysis instructor i want to connect with data analysis intructors
Please add an Arabic translation.
you are the best
I don't see how figma is much better than say photoshop to create web design!
Thx u helped my so much and I didn’t watched the video 😹
First like
24 minutes ago.....
First commennttttt
Hlo