How to Properly Layout A Website (For Beginners)

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?

+1 subscriber

interesting

Very useful content!!!

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

Great video I learned a lot thank you

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

Just start with C.R.A.P. Design Principles and it's a easy ride from there…

It is PRINCIPLE not principal! Principal means main and could never be number two!

Looking at layout as rows instead of as grids/boxes has been a game changer

Thanks. I don’t even know what a wireframe is. I was a programmer 1970s to 1990’s. I find this web stuff interesting but I like simplicity. Not all of this animation. I think things are getting to bloated

In this context: "Principle" is the correct spelling of the word! (Plural = "Principles.") Thanks for your video. ~

Where were you this wholeeee time …
So so insightful ..

I learn a lot from this videos, really thanks for great tutorial!

Thanks a million for your content. 🙂

Great video. Using this information I can build simple and clean websites. Thank you!

Great video! Thanks!

Bro you just inspired me!! I was stuck on a design and this video is EXACTLY what I needed!! New subscriber

It's means a lot, beautifully explained🎉😊

This is my first time enjoying your YouTube channel. Great content! Looking forward to hearing more from you! Your video was so informative. Thank you so much!

Awesome! Thanks for the content!

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 !

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.

But what if this pratice makes all the website looks same?

helpful

re: (3:04) #F7F7F7 is almost indistinguishable from #FFFFFF on my laptop's screen 😆

This is full blown high quality course!

thank you

great amazing

beautiful drawings

Great video brother. Helped me big time

Best thing I ever did was stop accepting content from clients, without copywriting support or full copywriting – such a better outcome ❤

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.

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.

This channel is gold🏆 thank you brother

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! 😀

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

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.