When a noob like me wanted to design a website by my self... Looking for help everywhere and found this gem suddenly . I guess same force working better for me😅
Backend developer here. It took me a few searches to find your video after realising that the abstract notion of layout is important, rather than how to write CSS and HTML. I wasn't interested in how to make layouts, but how to think of them, and this video fits that interest very well. I was vaguely aware that first and foremost a webpage flows from top to bottom (major axis, your first principle), and then secondarily from left to write (minor axis), but that was about it. The reference to Pinterest webpage building blocks is very useful. I'm saving this for future reference.
I LOVED THIS ! Thank you so much as someone who is learning front-end I've been struggling hard with the design and layout part of the job, this has helped so much !
This is a great video. It’s informative, easy to understand and super helpful, especially because you walk the viewer through the process. Greatly appreciated, thank you. Keep it up!
i'm someone who severely struggle on focusing on something but your simple yet non-uniform(cutesy) styled graphic reeled me in very effectively. it simplifies the point to it's core with enough detail to distinguish itself from the others as it's own thing. it's been a long while since i've focused on something and i didn't left empty handed either. now i'm very interested in your content! :D
Thank you for this tutorial. I am currently using this advice to attempt to design my business website using bootstrap 5, and it has helped me jumpstart the designing and creation. Appreciate you taking the time!
This is my first time enjoying your RUclips channel. Great content! Looking forward to hearing more from you! Your video was so informative. Thank you so much!
Just completed wireframing a website, then algorithm brought this video to me. I feel happy that most of my website was based on this principle but I never actually knew these as basic principles. Algorithm worked well. This is a perfect video to revise fundamentals
I always wanted to learn website development as a hobby, but found website creation process very challenging and would mostly focus learning the coding part of the process. Thanks for making such a detailed video connecting requirement doc to layout, and I think, it goes without saying the best video I have seen in 10 years of my journey. Thanks a lot Alex 🙏🏻
After watching different videos, taking courses, read books, I can say this is the best video I've ever seen about web layouts, it's pretty straightforward while instructional. Thank you so much! You should keep posting more stuff like this
So basicallly rhytm and repetition, is good to know how others arrange their worlk flow. Thanks dude, this video helpms me alot to move pass the "blank page" as you mentioned.
I have a project to submit in 2 days time and Iwas only focused on the layout forgetting content. That really blew my mind. Thanx content before layouts
I was confused for days that how should I structure my blank page and this video was filled with jampacked knowledge that I fell out of my chair , I am better now lol
This is one of the best video to learn about layout. Trust me, I am one of those guys who has a lot of trouble and always get stucked when I have to do this. I just want to say thank you.
What kind of dream client is this haha. Getting my clients to write content for their website is like pulling teeth for me. So I often make their layouts first so they can see what kind of text I need from them
This really helps a lot, when you only know a bunch of html, css and js. And trying to practice to make a website by copying others, why shouldn't everyone teach this at first, it improves the sense of completion and implementation of knowledge you learn. Anyways thanks a lot for creating this video.
I'd really love it if you could use your skills and knowledge and do a breakdown on ecommerce email template blocks. I see so many absolutely appauling layouts it is criminal. Thanks for these videos btw, really down to earth and spot on.
This is a great video! I've always bemoaned my designs, but this concept of rows is making my fingers itch to make something and I'm almost regretting I don't really have a project to try it out on at the moment
Figma is another tool I want to learn! And while I do have my layout sketched out, maybe I should lay it out better in illustrator 🤔 that way I can make sure it’s cohesive.
3:07 - Pro tip: instead of using a plain grey like #f7f7f7, use a hint of Blue e.g. #f3f6f9 You just need to remember “369”. The initial “F” stays the same, while the next number increments by “3”. So… 036 = #f0f3f6 369 = #f3f6f9 58b = #f5f8fb
@@davidchavarriamendez9091sry, I skipped some colors in my previous comment just to keep it short. Anyways, after “9”, the values switch from Numbers to Letters as you move left to right from darkest, to lightest. 0123456789ABCDEF 0 = Darkest F = Lightest So if you start from “0”, and you increase the next number by “3”, you end up with these shades of blue: 036 = #f0f3f6 (darkest) 147 = #f1f4f7 258 = #f2f5f8 369 = #f3f6f9 (my favorite) 47A = #f4f7fA 58B = #f5f8fB 69C = #f6f9fC 7AD = #f7fAfD 8BE = #f8fBfE 9CF = #f9fCfF (lightest) Make sense?
@@davidchavarriamendez9091 that’s because its a hexadecimal number, aka base 16. You can hold 16 numbers in a single character. 0-9 and then A-F for the numbers 10 through 15.
My experience with front end is limited to a few small projects, and few were public-facing or for business. Mostly in-house documentation for internal project team use. So now I'm working on something more genuinely front end, and find not sure how to think about designing. I can design a decent GUI for a desktop app using Qt, gtk or the like. That's not a transferable skill! What's a more productive way to think about architecting a few web pages? This video took me from zero to halfway a hero :)
Great video, got me wondering ... At what point do you meet with the client to show them what you put together? For example, do you show clients the thumbnail sketches you display in this video? Or ... do you wait and show them a more finalized version with actual images and content?
What do you suggest for a row in the index page for something like popular blog categories? Having a design block for mine and research plus inspiration is limited and I’ve got ideas for icons but it feels too much like a row of generic top icon with sub text used mostly on business category services.
You're creating amazing content that's quite helpful in real life. I visited your site but to my surprise, I can't find any good websites with the principles/techniques that you're telling. Neither the pricing that you've mentioned matches the type of work you've listed in the portfolio section. Please tell me if I missed something? I've following you for a long.
Question. But first Thx for the tips. This is great! So are you suggesting to use a similar setup on all of your pages as we create on the homepage too section? Like if we used a background pic with a title section with text for top of homepage, you’re saying we should also use a background pic with text overplayed for the top section of all the pages for continuity, is that right? (Not a graphic designer so I’m cluelessly building my own site) thx.
![Eminem - Houdini [Official Music Video]](http://i.ytimg.com/vi/22tVWwmTie8/mqdefault.jpg)
Mother of algorithms brought me here while im stuck at designing myfirst few babysites. Thank you
Couldn’t have said it better myself
When a noob like me wanted to design a website by my self... Looking for help everywhere and found this gem suddenly . I guess same force working better for me😅
"babysites" is an amazing word
Layout is one of the most important aspect of a website. You explained it beautifully.
Especially that part where he just says add a two column paragraph but doesn't specify what it should talk about.
I am studying HTML and CSS but oftentimes I don't know what to build with it. Finding this is a blessing. Thank you my friend.
This concept is perfect. The putting everything in its own row is a gem.
Backend developer here. It took me a few searches to find your video after realising that the abstract notion of layout is important, rather than how to write CSS and HTML. I wasn't interested in how to make layouts, but how to think of them, and this video fits that interest very well.
I was vaguely aware that first and foremost a webpage flows from top to bottom (major axis, your first principle), and then secondarily from left to write (minor axis), but that was about it.
The reference to Pinterest webpage building blocks is very useful.
I'm saving this for future reference.
Basically the Hieracrchy
I LOVED THIS !
Thank you so much as someone who is learning front-end I've been struggling hard with the design and layout part of the job, this has helped so much !
This is a great video. It’s informative, easy to understand and super helpful, especially because you walk the viewer through the process. Greatly appreciated, thank you. Keep it up!
i'm someone who severely struggle on focusing on something but your simple yet non-uniform(cutesy) styled graphic reeled me in very effectively. it simplifies the point to it's core with enough detail to distinguish itself from the others as it's own thing. it's been a long while since i've focused on something and i didn't left empty handed either. now i'm very interested in your content! :D
Thank you for this tutorial. I am currently using this advice to attempt to design my business website using bootstrap 5, and it has helped me jumpstart the designing and creation. Appreciate you taking the time!
As a web developer student with a passion for design your videos are awesome ! Keep it up !
MOAAAAR LIKE THESE. Everyone only teaches design principles, you talked about actual layout!
Please keep building on it..
This is my first time enjoying your RUclips channel. Great content! Looking forward to hearing more from you! Your video was so informative. Thank you so much!
Bro you just inspired me!! I was stuck on a design and this video is EXACTLY what I needed!! New subscriber
Just completed wireframing a website, then algorithm brought this video to me. I feel happy that most of my website was based on this principle but I never actually knew these as basic principles. Algorithm worked well. This is a perfect video to revise fundamentals
Your "no BS" aproach is refreshing!
Very well explained! I have learned many great things from your articles. I have been checking out all of your blogs as well, thanks for sharing this.
Excellent clear cut and to the point content
I always wanted to learn website development as a hobby, but found website creation process very challenging and would mostly focus learning the coding part of the process. Thanks for making such a detailed video connecting requirement doc to layout, and I think, it goes without saying the best video I have seen in 10 years of my journey.
Thanks a lot Alex 🙏🏻
This channel deserves more subscriptions and it definitely will.
This is the best video i have found on youtube in this subject!!!
This is the most practical and easy video on layout I found online. Thank you so much.
This video makes web design seem very approachable. Good presentation. Thank you 🙏
After watching different videos, taking courses, read books, I can say this is the best video I've ever seen about web layouts, it's pretty straightforward while instructional. Thank you so much! You should keep posting more stuff like this
I agree. It's very well done and to the point. Exactly what i was looking for when i searched "clean website tutorial."
I love the use of diagrams, it has really helped me to visualise better!
Thank you for creating these videos, you are soooo good at it!
This is an AWESOME video. Coming from a dev walking into the design world. Thank you!
Wow i am Amazed how easy it was to listen to you!
Thank you for making it so simple to understand!
Looking at layout as rows instead of as grids/boxes has been a game changer
Your content is so good. I wish you could keep bringing more. Thanks. 🎉
So basicallly rhytm and repetition, is good to know how others arrange their worlk flow.
Thanks dude, this video helpms me alot to move pass the "blank page" as you mentioned.
Finally, Thank you for explaining in detail
This channel is gold🏆 thank you brother
This was a great video. I learned a lot , subscribing and going to learn more from this channel.
This was excellent and gave me great guidance. Thank you.
This was really helpful. I learned a lot, thank you!
Great video. Using this information I can build simple and clean websites. Thank you!
I learn a lot from this videos, really thanks for great tutorial!
Thank you. This was just what I was looking for ❤
*Just what I was looking for - thanks man!*
this is the content I seek form months as a self taught web developper/designer. thank you very much
I have a project to submit in 2 days time and Iwas only focused on the layout forgetting content. That really blew my mind. Thanx content before layouts
this helped me learn how to make a responsive layout in webdesign
Very concise, effective and to the point video.
I was confused for days that how should I structure my blank page and this video was filled with jampacked knowledge that I fell out of my chair , I am better now lol
Thanks Dude. I get to know new things.
This is full blown high quality course!
Very convincing, thanks a lot - I shall put this to test as I build some websites.
This is one of the best video to learn about layout. Trust me, I am one of those guys who has a lot of trouble and always get stucked when I have to do this.
I just want to say thank you.
Absolutely valuable video.
Thanks a million for sharing.
Nice and great lesson. Thanks.
What kind of dream client is this haha. Getting my clients to write content for their website is like pulling teeth for me. So I often make their layouts first so they can see what kind of text I need from them
This is super useful, and something I struggled with a lot recently... Would love to see the same thing for an app!
Great video brother. Helped me big time
This really helps a lot, when you only know a bunch of html, css and js. And trying to practice to make a website by copying others, why shouldn't everyone teach this at first, it improves the sense of completion and implementation of knowledge you learn.
Anyways thanks a lot for creating this video.
You just have gained one subscriber ✨🙌
Amazing explanation ❤
Thank you bro, you are a legend for this vid
I'd really love it if you could use your skills and knowledge and do a breakdown on ecommerce email template blocks. I see so many absolutely appauling layouts it is criminal. Thanks for these videos btw, really down to earth and spot on.
Formidable ! Meilleure vidéo sur le sujet, je ne suis plus débutante mais je l’ai trouvée très très bien 😊 Je file voir les autres. MERCI
This was so helpful, thanks!
This is a great video! I've always bemoaned my designs, but this concept of rows is making my fingers itch to make something and I'm almost regretting I don't really have a project to try it out on at the moment
Theee beeesssttt layouting explanation with example.. not only speech.
You're a gem, thank you.
Nice video, helped me so much!!
Where were you this wholeeee time ...
So so insightful ..
This is a great video. Thanks for sharing! 😁
Awesome! Thanks for the content!
Figma is another tool I want to learn! And while I do have my layout sketched out, maybe I should lay it out better in illustrator 🤔 that way I can make sure it’s cohesive.
Ways to start simple yet not confusing
Nice channel. Favorited. Thanks for the videos.
Great video I learned a lot thank you
Great video!
Thanks a million for your content. :)
Such a great video, very good 👍
Brilliant. Thanks a lot. I have subscribed.
Thankyou, very informative and succinct. I have subscribed.
Solid video thx a lot 🏖️
Great explained!
Great video! Thank you
Great video! Thanks!
3:07 - Pro tip: instead of using a plain grey like #f7f7f7, use a hint of Blue e.g. #f3f6f9
You just need to remember “369”.
The initial “F” stays the same, while the next number increments by “3”.
So…
036 = #f0f3f6
369 = #f3f6f9
58b = #f5f8fb
I dont understand. How nine became to b in your last example?
@@davidchavarriamendez9091sry, I skipped some colors in my previous comment just to keep it short.
Anyways, after “9”, the values switch from Numbers to Letters as you move left to right from darkest, to lightest.
0123456789ABCDEF
0 = Darkest
F = Lightest
So if you start from “0”, and you increase the next number by “3”, you end up with these shades of blue:
036 = #f0f3f6 (darkest)
147 = #f1f4f7
258 = #f2f5f8
369 = #f3f6f9 (my favorite)
47A = #f4f7fA
58B = #f5f8fB
69C = #f6f9fC
7AD = #f7fAfD
8BE = #f8fBfE
9CF = #f9fCfF (lightest)
Make sense?
@@davidchavarriamendez9091b is 11 in hexadecimal
@@davidchavarriamendez9091 It is 5, 8, then 11. There is no 10+. 10 becomes a, 11 becomes b.
@@davidchavarriamendez9091 that’s because its a hexadecimal number, aka base 16. You can hold 16 numbers in a single character. 0-9 and then A-F for the numbers 10 through 15.
It's means a lot, beautifully explained🎉😊
Thankyou for this tutorial :)
Great Content!
In this context: "Principle" is the correct spelling of the word! (Plural = "Principles.") Thanks for your video. ~
LOVE THIS.
• different rows
• visually distinguishe background
• Web design page blocks
awesome vid
Informatively entertaining~
BANGER!!!!
beautiful drawings
My experience with front end is limited to a few small projects, and few were public-facing or for business. Mostly in-house documentation for internal project team use. So now I'm working on something more genuinely front end, and find not sure how to think about designing. I can design a decent GUI for a desktop app using Qt, gtk or the like. That's not a transferable skill! What's a more productive way to think about architecting a few web pages? This video took me from zero to halfway a hero :)
Great video, got me wondering ... At what point do you meet with the client to show them what you put together? For example, do you show clients the thumbnail sketches you display in this video? Or ... do you wait and show them a more finalized version with actual images and content?
thank you very much!
Thank you
What do you suggest for a row in the index page for something like popular blog categories? Having a design block for mine and research plus inspiration is limited and I’ve got ideas for icons but it feels too much like a row of generic top icon with sub text used mostly on business category services.
thank you
Awesome!!
You're creating amazing content that's quite helpful in real life. I visited your site but to my surprise, I can't find any good websites with the principles/techniques that you're telling. Neither the pricing that you've mentioned matches the type of work you've listed in the portfolio section. Please tell me if I missed something? I've following you for a long.
underrated
Question. But first Thx for the tips. This is great!
So are you suggesting to use a similar setup on all of your pages as we create on the homepage too section? Like if we used a background pic with a title section with text for top of homepage, you’re saying we should also use a background pic with text overplayed for the top section of all the pages for continuity, is that right? (Not a graphic designer so I’m cluelessly building my own site) thx.