5 laws of design layout & composition *golden rules*

Thanks for visiting! I Hope you find this helpful. If you have any questions or feedback, drop it in the comments :-)
Here is a great book on grid systems that I still reference back to from time to time: amzn.to/434UzmP
There are a tonne of in depth courses available over on Skillshare, along with a huge library of courses on anything within the creative industry. I would highly recommend their free trial. If you use my link I do get a small commission which helps me with the time to create these videos 🫶:
skillshare.eqcm.net/LXxRgV
I am currently using it to learn animation in After Effects!
For more content, check out my other social media channels:
Pinterest: www.pinterest.co.uk/shapesbysean
Instagram: / shapes.by.sean

[@psychxx7146]

🎯 Key Takeaways for quick navigation: 00:00 📐 Modular grids in designs help in alignment and give a professional layout structure. 01:28 🔝 Hierarchy and proximity in designs ensure visual engagement and guide the viewer's attention in the right order. 03:05 🌁 Layering creates a sense of uplift and depth in designs, bringing movement and perspective. 04:02 🎨 Harmonized colors enhance the visual appeal, and Global colors allow for consistent color adjustments across designs. 05:54 👁️ Clear focal points guide the viewer's attention and effectively communicate the main message of a design. Made with HARPA AI

[@evelineteunissen2328]

What is spilt intro group or the netherlands?

[@asgharqasim5522]

Finally a nice simple and well thought out grid video with application example, love it man!

[@shapesbysean]

Glad you found it helpful!

[@bonniehoke-scedrov4906]

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

[@shapesbysean]

So glad I could help! Stay tuned for more

[@wickywackwoo]

Thanks for not only showing what must be done, but also how is done. Very helpful!

[@shapesbysean]

Thanks for watching!

[@ella-and-her-cup-of-coffee]

This was the first actual helpfull video about design choices and tips, that caught my attention span, hold it and delivered. Thank you for cutting the blabla and just doing quick facts and come straight to the point. The comparison between the two posters and seeing what little you changed, but the difference it made was mindblowing. I actually understood your point and learned so much more from this short video then so many other videos about the same topic. Definitely gonna check out your other videos

[@shapesbysean]

So glad I could be of help! I’ll be making more of this no nonsenses style video on all subjects of design and branding

[@ella-and-her-cup-of-coffee]

You should! You're fantastic at it! @@shapesbysean

[@khmerembasy]

All these rules. Truly gold. Bravo. 👏

[@shapesbysean]

Glad it was useful!

[@njeri_jk5243]

Very easy to follow video. Loved the explanations for your choices

[@shapesbysean]

Glad it was helpful!

[@daan7783]

I usually don't comment on video's but by how well this is put together I had to and also instantly subscribed. By this video alone you deserve a lot more subscribers man. Gonna watch your other video's now but please don't stop making these kind of video's! Really informative, great explanation with examples, straight to the point and well put together. Love it!

[@shapesbysean]

High praise, thank you! I am slowly but surely making another video, difficult to do alongside my job but I’ll get there

[@daan7783]

@@shapesbysean Understandable, take the time you need man. No need to pressure yourself. It's better to have a few high quality video's than a lot of mediocre ones. We can wait :)

[@hainaalfonso1579]

This is such a valuable video. Practical and actionable tips, something a beginner like me can easily apply. I wish there could be more graphic design tips that are as simple and practical as this on the internet

[@shapesbysean]

Glad it was helpful! Taking a bit of a break from this, but I’ll be back with more practical videos soon. Is there anything in particular you would like to learn more on?

[@hainaalfonso1579]

@@shapesbysean Font pairing. They all look the same for me 🥱

[@shapesbysean]

This is actually fairly simple once you know a few tips, i am by no means a specialist on typography but i can definitely make a video with some good tips!

[@subhankitbasu620]

Would love more videos like this and the example properly explained cuz often times we know the rules but struggle to implement it properly ~!

[@shapesbysean]

I try to be as clear as possible, I know creating a good design is a lot harder than it looks

[@subhankitbasu620]

@@shapesbysean thank you man !

[@youcanthaid]

I think the rules are the easiest part. the hardest part is the aesthetic IMO

[@JaspervanderKamp]

Finally, 'global' colors will help me so much! Thanks for the tips and nice video with beautiful examples

[@shapesbysean]

Thanks for the support!

[@rgarlinyc]

Great insights, laid out very effectively, Thanks!

[@shapesbysean]

Glad it was helpful!

[@sergey5604]

Very helpful and packed with useful tips. Sir, you got yourself a new subscriber.

[@shapesbysean]

Glad I could help! I’ll be releasing a new video in the next few days

[@picmakerhq]

1:34 - Hierarchy and Proximity section is on-point. Hiearchy is important but the right scaling of element will help us to direct the viewers to the messaging

[@shapesbysean]

Indeed!

[@Aratolotl]

Very clear and well structured video. Newcomers will certainly find this useful.

[@shapesbysean]

Glad I could help!

[@iampo6945]

A great presentation of some very valuable information...beautiful.

[@shapesbysean]

Glad you liked it!

[@TheThinkersBible]

REALLY good video. Very instructive and easy to follow with well explained principles and very instructive application. Will use these laws going forward for thumbnail design and other aspects of video creation. The idea of creating a grid is great and I'll make one in Photoshop or find one online, thanks!

[@shapesbysean]

Happy I could help! Even following just a couple of these rules makes all the difference for simple layouts

[@pradeepprasanna201]

Great stuff! Please keep creating. Waiting for more.

[@shapesbysean]

Thank you! Will do!

[@silversinclair2169]

thank you so much , i just started learning digital marketing and this helped a lot.

[@shapesbysean]

Glad it helped! And good luck with digital marketing

[@pkfitnesshub]

Amazing in depth tutorial!

[@shapesbysean]

Glad it was helpful!

[@AHMEDMOSTAFA77]

Nice and informative video! Good job and waiting for more. All the support for you bro!

[@shapesbysean]

Thanks so much! Working on the next one right now, I’ve been super busy with work, then covid so had to take a quick break, but aiming to upload a video a week in future

[@user-cf3st7gw7n]

学到了，谢谢老师

[@dkdakty]

What a well done video! Keep it up, I will watch all your videos!

[@shapesbysean]

Thankyou for the support! I’ll hopefully be releasing another video this evening.

[@christopherszafranski990]

Fantastic video, all the examples and revisions are super useful 2:30

[@shapesbysean]

Glad it was helpful!

[@gentleman055]

thanks that really helped me, I hope if you upload more videos like this one

[@shapesbysean]

Glad you liked it, I’ll do more on layout soon!

[@Loopify3D]

Thank you. The video is very helpful and easy to follow.

[@shapesbysean]

That’s no problem! It’s been a while since I released anything but I am getting back on it and recording my next video

[@bikermansl3]

More videos like this!! This one was great!!

[@shapesbysean]

Coming soon!

[@svetlanazotova3274]

Very helpful! Love the animation 😊

[@shapesbysean]

Thanks for your kind words : )

[@m.carter9090]

Fabulous! Thanks.

[@shapesbysean]

Thank you too!

[@SP1DYEE]

Very Helpful !! thankyou

[@shapesbysean]

You're welcome!

[@sneakykickz]

Briefly yet meaningful! And examples look so good! Thanks a lot!! Could you please determine what the pace is? I never heard it before in design language

[@shapesbysean]

Thanks for the comments! Pace is bringing life to a design, it’s not really a technical term but a term I use a lot. It’s a combination of creating depth with layers and hierarchy using different sized elements

[@shapesbysean]

It’s trying to make a still image feel animated, if that makes sense?

[@sneakykickz]

@@shapesbysean yes it does! Thanks a lot!

[@thiagobteixeira]

Just, Wow! 👏👏👏

[@shapesbysean]

Thanks for watching!

[@adraur9670]

Thanks for this, master grid :)

[@shapesbysean]

My pleasure!

[@arvindgandhaare5502]

Great.... keep it up. Awaiting more videos

[@shapesbysean]

Thanks!

[@pututejaa]

Thanks man!

[@shapesbysean]

Happy to help!

[@victorhugorodriguez773]

this is very helpful, am trying to star a second hand watches bussines and my facebook post sucks, i always curious about desing and this bring me a lot of ligth in to the matter

[@shapesbysean]

Dm me through my Instagram channel if you need any advice on the social media posts!

[@victorhugorodriguez773]

@@shapesbysean i follow you xD i try to read as much as i can, i discover grids whit you xD

[@johnbehneman1546]

Thank you so much

[@shapesbysean]

Any time!

[@otohivestudio]

thanks, it's a great video!

[@shapesbysean]

Glad you liked it!

[@minhhiennguyen417]

This video helps me much. Thanks!

[@shapesbysean]

Happy I could help!

[@viethoangluu899]

What an amazing video!!!!! Thank you so much

[@shapesbysean]

Happy I could help! I’ll have another video on logo design coming out soon so stay tuned!

[@shapesbysean]

And thanks for watching

[@sbxtn]

Really cool and clean video! Well done

[@shapesbysean]

Glad you enjoyed it

[@jamesgrubb]

Nice, thanks, did not know about Global colours

[@shapesbysean]

It’s a life saver!

[@KollegeHartmann]

thanks for that content!

[@shapesbysean]

My pleasure!

[@khuyentran437]

Great content! love it !!

[@shapesbysean]

Thanks for watching!

[@ismailbakrimi]

amazing reallllly I love this video

[@shapesbysean]

My pleasure! Glad I can be of help

[@ButtercupMaude]

Very useful, thank you!

[@shapesbysean]

My pleasure!

[@AhmedElnosany]

I love it.

[@shapesbysean]

No problem!

[@joshsaunders2075]

You would be much better off using indesign… I know so many designers that comfortable in illustrator but it’s not meant for layout … breaking this habit will save u soooo much time and will be better

[@shapesbysean]

I tend to use InDesign for longer form editorial or brand guidelines etc. because of the amazing capabilities it has in master pages and paragraph styles etc. it is a bit trickier to get into as a beginner though, I’ll definitely release a more in-depth guide on layout using indesign at some point because it has so many amazing features

[@CGingerbreadman]

Agreed. We keep hiring new people who use Illustrator for everything, and it’s a struggle to get them to start using InDesign more. I understand, though. I was the same way until I got my first actual job.

[@prakashsatam7630]

You are absolutely right. In design is very great software.

[@schultzeworks]

Agree with InDesign. All of these grid tools are built in

[@maximusralte777]

Totally agree. But as shapesbysean mentioned, it can be trickier for a beginner therefore if they start off step by step it will be more helpful to them. The key is for them to learn. And I think the video is targetted to them. But then again, indesign is a must learn once someone is comfortable with illustrator.

[@EllyseaAndDolls]

great video ! very informative !

[@shapesbysean]

Glad it was helpful!

[@abdullahdesigns00]

wonderful, really helped!

[@shapesbysean]

Happy I could help!

[@nikikinz-nik]

Very good! Thanks!

[@shapesbysean]

My pleasure!

[@cgardinerphoto]

great video, thanks for sharing!

[@shapesbysean]

Glad to be of help!

[@toddz2994]

thx! 7 minutes video but delivers so much value and insights.

[@shapesbysean]

Short and snappy is my aim!

[@quintovicky6277]

Really helpful. Thanks alot

[@shapesbysean]

Always a pleasure to help!

[@user-wl4xc3wn3n]

This video is a valuable resource for anyone interested in design, we offer comprehensive courses in graphic design, VFX, 3D animation, video editing, UI/UX design, and more. Your passion for learning aligns perfectly with our mission. Feel free to explore our offerings to further enhance your skills and unleash your creative potential!

[@Alina_Sauer]

well done, thank you!

[@shapesbysean]

Happy to help!

[@ocaiobravo]

amazing! thank you :)

[@shapesbysean]

No problem, glad I could be of help!

[@John83118]

I'm thoroughly enjoying this. I had the privilege of reading something similar, and I was thoroughly enjoying it. "The Joy of Less: A Minimalist Living Guide" by Matthew Cove

[@lovingcreativecoordinator8732]

amazing wonderful

[@shapesbysean]

Thanks!

[@rabbit9471]

I have a question if someone could answer. What is better to use for graphic design a laptop or pc?

[@shapesbysean]

Most laptops should be able to hand any graphic design needs

[@jithusj2261]

🔥❤

[@vuvuzelaasesina7690]

hi, thanks for the video. when you first created the grid you said you wanted to make a 3 mm gutter around the edges (-6mm in height and width) but you reduced the grid by 20mm, 1 cm all around. unless im missing something?

[@shapesbysean]

Well spotted, that was just a mistake on my part/ but really the gutter should change depending on how you want your design to look

[@infographie]

Excellent

[@shapesbysean]

Thank you! Cheers!

[@Marketo10Channel]

so great!!!

[@shapesbysean]

Thankyou! Happy to help

[@Marketo10Channel]

@@shapesbysean ❤️❤️

[@joebazooks]

the last one wouldve looked instantly better with white text on the yellow button to create more contrast

[@shapesbysean]

I'm not sure I agree with you, white on yellow rarely stands out and is not something i would usually recommend! Saying that, looking back on it I would maybe have used dark blue text.

[@shahramsadeghi7784]

AWESOME. waiting for new videos...

[@shapesbysean]

I will get round to a new video soon, been very busy with my job recently

[@bbanggitanggit9320]

nice content, we one more sir, keep it UP!

[@shapesbysean]

Thanks for the support, I should be uploading another video next week.

[@Lio_Kai]

B1E2

[@MushfiqAKhan]

Awesome

[@shapesbysean]

Glad I could be of help!

[@MrAlexRot]

Great video!!!

[@shapesbysean]

Thanks!

[@renatoferreira4939]

Eu realmente gosto de videos curtos e objetivos, mas é necessário um ritmo adequado quanto a exposíção do que está sendo transmitido. No caso deste video precisei pausar diversas vezes para poder entender o que estava sendo apresentado. Isso porque faço uso das legendas e não do áudio, já que o idioma apresentado no video não é o mesmo que eu e outras bilhões de pessoas compreendem. Então, se servir somo uma sugestão, gostaria se possível que as falas fossem menos rápidas de forma que ao ler eu pudesse acompanhar visualmente a apresentação. I really like short and objective videos, but an adequate pace is needed in terms of exposing what is being transmitted. In the case of this video, I had to pause several times to understand what was being presented. This is because I use the subtitles and not the audio, since the language presented in the video is not the same one that I and billions of other people understand. So, if it serves as a suggestion, if possible, I would like the lines to be less fast so that when reading I could visually follow the presentation.

[@shapesbysean]

Thanks for the feedback, I’ll consider it in my next video

[@zakiroyhan]

Thank you

[@shapesbysean]

Welcome!

[@uncleanAlibertine1]

cool

[@TheBham]

The best 👌

[@shapesbysean]

Glad I could help!

[@TheBham]

@@shapesbysean I couldn't agree more with the rest of the comments here. Informative and easy to follow. 🙌

[@eddiepowersdesigner]

I’ve got a few things to point out, but I’ll just mention something important. A logo must not be placed over anything. It’s better placed in an area that provides the padding recommended in the design system or brand guide.

[@shapesbysean]

In most cases I would agree, but I think there is an exception, which maybe I should have explained in the video. When the aim is to create visual tension vs the norm, placing the logo in an unconventional way can help tell people ‘this brand is different from the norm’

[@eddiepowersdesigner]

@@shapesbysean I would reconsider.

[@shofwatulafifah]

very thankful for this! but i still don't get it why we have to change the color to global color. is it a must? is it just so we can change the hsl? or is there something more?

[@shapesbysean]

It just means that you can easily change all the same shapes and strokes of the same colour easily, without having to select them all each time. There are other ways of doing this ofcourse, this is just my preferred way.

[@shofwatulafifah]

@@shapesbysean i see, thankyou for your reply

[@igedepanduwangsa1359]

this video was awesome, i wonder if could do quick tutorial on photoshop tho

[@shapesbysean]

Happy to be of help! I can certainly do a photoshop version of this at some point!

[@justrandomstuff4867]

nice video.. thanks

[@shapesbysean]

Happy to help 🙂

[@natem355]

i actually saw the image first for the hierarchy poster. Probably because there was more going on there than the heading and supportive text

[@shapesbysean]

That’s fair enough, hope the other rules were still useful!

[@Alpha_DTF_Print]

@‌AlphaDTFPrint, your expertise shines through! 🌟 What's your take on DTF printing for custom apparel? Let's share experiences! 👚💬

[@shapesbysean]

I must admit I haven’t used it!

[@stewartisan213]

When it comes to print design, InDesign is a better application to use than Illustrator. InDesign just has more features that give you more control on the creative end and on the printing end

[@bigtosz]

Yep; I can't take advice from someone who does page layout in Illustrator. Stopped play as soon as he said that and now on my way out. Crazy.

[@shapesbysean]

It honestly depends on what you are designing, Illustrator is far easier for beginners, and a way more versatile software. I could do an entire video on paragraph styles in InDesign but there are a million courses and videos out there on that

[@shapesbysean]

I honestly to think that people who do single page layout in InDesign are living in the past. Illustrator now has all the same capabilities and much more. InDesign is for long form print documents and nothing else. It’s becoming a dinosaur like Quark Express

[@stewartisan213]

​@@shapesbysean I use InDesign, Photoshop and Illustrator. Photoshop for imagery, illustrator for vector art such as logos and illustrations, and Indesign for layout design. I use all three in unison to create anything i want for print. Just using one application is limiting.

[@stewartisan213]

@@shapesbysean Never take the easy route in this industry, it'll only limit you. Learn Indesign first as it's the industry standard for creatives which allows you to design in single or multiple pages

[@clintonubay-ubay2407]

Hi, what is the program you are using to?

[@shapesbysean]

Adobe Illustrator, but the same principles apply in any design software :)

[@andermalatestaalonso582]

amazing content. bit of an advice: it feels difficult for both mind and eyes to follow the content. I think it would be much easier if you ddidn't display the talk and the images at the same time. I mean, you could first talk to the camera, then show the examples, with just few comments. Like Satori does. For the rest, as I said, amazing content and amazing designs! Thanks!

[@shapesbysean]

thanks for the feedback, I'm just beginning to play with being on camera, which ads another layer of complexity for a novice video editor like myself! My next video, which I hope to upload tonight will be my first appearance, it's a little rough around the edges though 😅

[@tenoahaibaychin]

your voice is chef kiss btw

[@shapesbysean]

I’m not entirely sure what that means but thanks!

[@tenoahaibaychin]

@@shapesbysean it means your voice sounds nice 🫶

[@AyaneATufa]

cool video)

[@shapesbysean]

Thanks! Glad it was useful

[@reving4896]

thanks

[@shapesbysean]

Pleasure is mine

[@siphesihlengcobo3010]

Learnt everything about Graphic Design in 7 mins 😂

[@shapesbysean]

That’s just the start! I’ll release more videos soon 😀

[@ruhtrastart]

Hi. I didn't understand this part 0:44, you said "i want 3 mil gutter around the edges so I'll reduce the H and W by 6 mil" then you reduce 20 millimeters... Could you explain me, please?

[@shapesbysean]

You’re right, I did say that! slip of the tongue. To be honest the exact size doesn’t matter to much, it can be whatever you feel looks good for your design 👍

[@ruhtrastart]

@@shapesbysean Thank you, english is not my native language so I thought I had made some misunderstanding, now it's clear to me :D

[@Seanod123]

@@ruhtrastart happy to help :)

[@luquitaz5]

i love you men!

[@shapesbysean]

Sure I have a video planned that will focus on key elements, including layering, pace and how to make things stand out!

[@luquitaz5]

[@luquitaz5]

@@shapesbysean When you make a design on front on screen, you know? this is amazing! all the concepts make sense... is great! very didactic for a benninger, and... is not much content like this. thanks! sorry for my english

[@deepakmahto4726]

Bro taught graphic design in 7mins 💀

[@danielnewton5867]

Nice

[@shapesbysean]

Thanks!

[@alexanderkushchenko9697]

🙏🙏🙏👍👍

[@shapesbysean]

🤘

[@andrescarrilloestrada984]

great stuff, but why use illustrator when life is a lot easier using indesign for layouts?

[@shapesbysean]

Personally I just find illustrator more intuitive for single page layouts, but that’s probably because I am much more used to the shortcuts in illustrator. I have been meaning to make another video for longer form stuff in InDesign though!

[@andrescarrilloestrada984]

@@shapesbysean looking forward to seeing it... keep up the good work

[@giuliodigiusto7501]

I'm sorry but why did you say 6mm gutter if you put a margin of 10 per side? Thanks

[@shapesbysean]

My mistake! To be honest the gutter can be whatever suits your design, this was just an example

[@MySpace662]

There are three basic laws in composition: Balance, Harmony and Rhythm.

[@LuckeGabriel]

Learnt more in 3.5 mins (I watch 2x speed haha) than I did doing graphic design in college.

[@shapesbysean]

I know the feeling! Don’t think I learned anything at college that I’ve actually used in my career!

[@TheMirnach]

is this photoshop or illustrator?

[@shapesbysean]

This is illustrator, photoshop shouldn’t really be used for layout, stick to Illustrator or InDesign

[@improvementTime10.3.17]

0:10 think big med small And then breaking things up into grids/equal spaced apart sections But most int one the shoe one was about unique big med small application in a swirl way not horizontal or vert but swirl 3:20) 2nd font, overlapping logo over pic, then overlapping pic over 2nd part of font to create even more depth 6:05 contrasting angles of subject matters So when overlap = high contrast and focal draw 6:10 largest text for 2nd focal, then smaller text within same proximity which groups them together and become second read afterward And then the next med size block of text afterward

[@kuhthaa]

what kinda maths gives such numbers when you minus 6 mm for gutter? how is 210 - 6 = 190? and 297 - 6 = 277? how is this possible?

[@shapesbysean]

Maths was never my strong point! In all honesty though, you don’t need to be completely accurate, just go by what looks good on any particular design. Sometimes I go for a thicker border, sometimes thinner

[@howardsend6589]

Few suggestions: Longday graphic overlap on letter Y looked messy. Summer text was over too much of face. Colour contrast rules needed applying, especially in last example.

[@shapesbysean]

Thank you for the feedback