9 advanced tips of layout & composition in Web Design

Do you feel stuck with your layout skills? Do you find it hard to understand how to get to an advanced level in your compositions? To break free from designing cookie-cutter websites you need to be able to break the rules and create unique layouts that are tailor made to your client. In this video, we will cover 9 advanced tips of layout and composition in Web Design. These are dos and don’ts from a professional Web Designer with examples, that if you put them into practice, they will inevitably help you take your Web Designs to the next level. You could almost call this a layout & composition course for Web Design. Hope you find it useful!

FREE GOLDEN CANON GRID COURSE
Download the Golden Canon grid and join thousands of students in learning 5 secrets to design beautiful websites with the Golden Canon Grid with this free course:

READY TO JOIN THE WEB DESIGN MASTER CLASS?
If you are ready to peak your Web Design skills & learn how to monetize them so you can have more freedom to do the things that you love, then click the link below to apply to my signature program, the Web Design Master Class. I will schedule a call with you so we can chat and decide if my program is the right fit for you:

Apply here:

DM me on social media:

Check out my works:

Check out my Pinterest for inspiration

#BONT #WebDesign #Layout&Composition

Timestamps:
00:00 - Intro
00:45 - 1. Make meaningful decisions
02:57 - 2. Don't be mild
04:48 - 3. Create depth
06:38 - 4. Reference more
08:47 - 5. Show me, don't tell me
10:33 - 6. Use typologies of information
11:54 - 7. Iterate
12:52 - 8. Switch alignments
14:21 - 9. Try new layouts

[TheBrightSites]

I love the advice of looking at references every day - at the beginning of a design path it’s easy to feel that you rely to much on inspiration and constantly compare yourself with others, but after a certain point it’s also easy to get a little cocky and ignore what is happening in the industry so it’s nice to keep doing that regardless of where someone is

[zackz]

Didn't heard anywhere what you're saying! I'm starting my web designer journey and I'm getting excited by what you're saying! First video that I've watch from you and I want to know more about how you think and work.

Will definitely join your program as soon as possible! I've subscribed and I'll do your free course soon! Thanks for the value!

[darndarn]

For me being more into CRO, boring is good because the visitor does not get overwhelmed with all that is popping off on a fancy website design. Simple layout with simple messaging. After all isn't a websites job to convert either into a lead or a sale? it is for me and that is why boring works

[jankarl]

Love it! This has got to be the most comprehensive video on layout!

[felipedeamaral]

Great tips. The Pinterest boards were GOLD! Inception tip within the tip. Thanks for that!

[worldstop]

I've been designing for almost 4 years now, and this is one of the best videos I've every come across. I wished I had access to this when i started my carrier. But anyways its never late. keep it up, looking forward to more design related content.

[raisingbarssince]

It depends, graphic design is not webdesign, very often the most boring layouts are the once that convert. From experience, i also, multiple times, created some visually stunning designs, only to find out in a/b tests that my classical "F" shaped landing page converted better.

[brucekennedy]

These are excellent insights not just for web design but design and layout in general. I’m not a web designer but this resonates with me for all areas of graphic design - branding, print, digital and video & motion graphics. 👍

[houseofrosesnthedark]

As much as I like minimalist looks, contrast really is everything. And also good typography. I love that he teaches people to go back to the fundamentals. Reminds me of Chris Doe. God bless guys sending love from my Jamaican flavored breadfruit roasting roots 🇯🇲❤️🇯🇲❤️

[the_randmon]

Timestamps:
00:45 - 1. Make meaningful decisions
02:57 - 2. Don't be mild
04:48 - 3. Create depth
06:38 - 4. Reference more
08:47 - 5. Show me, don't tell me
10:33 - 6. Use typologies of information
11:54 - 7. Iterate
12:52 - 8. Switch alignments
14:21 - 9. Try new layouts

[danielochei]

This is one of the best YouTube videos I’ve watched on web design so far this year. Thank you! 🎉.

[JordanAF]

subscribed, I've kind of stepped away from design because I was working on other stuff, but this is a great refresher and helps build my confidence.

[down__lo]

incredible input and inspiring, the modality of your teaching is like a meditation, dont want to watch other youtube videos now lol

[chbmnya]

one of the best mind opening guide I received in my design journey, may be at right time also, thanks for opening my mind, as I was not satisfied with my web project, I was feeling like there is something missing, but yes, now I got those element, which was missing, yo thanks so much.

[toddb]

Dude your a legend thanks! you got the adhd in me thinking creative again

[iragladoschuk]

thanks ! loved all of the tips, i'm just dipping my toes into web design and here after my first ever design in figma.
also just wanted to note, the video looks amazing and very professional, the last 1 percent that's missing is some kind of background music
other than that it was very useful thanks a lot !

[Micsc]

Thanks, dude. I'm very glad that I found your channel

[samaranicoleh]

This video is amazing, thank you so much! I feel so many people just throw together common sense tips and don't even elaborate, but you on the other hand, I can tell every point you brought up had a lot of thought and intention behind it.

[aryanasmith]

Tons of valuable information, thank you so much. It helped me a lot.

[willia]

I just started in the field of UI/UX design, I thought when I designed something while looking at other people's references was the wrong thing because copying other people's designs, but it turned out that references opened up a lot of ideas in me.