Complete Layout Guide

Sdílet
Vložit
  • čas přidán 8. 06. 2024
  • Watch Part 2 (Grouping, Scale, and Sequence): • Grouping, Scale, and S...
    Watch Part 3 (Alignment, Balance, and Grids): • Alignment, Balance, an...
    🤑 FREE "Principles of Layout" Handbook - Download here 👉 bit.ly/3M7cuB3 🤑
    Don't waste more time dragging things around until they look good. Watch Matt talk about the Principles of Layout on Part One of this three-part series of videos. In today's episode, he discusses 3 ideas: Focal Point, White Space, and Hierarchy.
    📽️ CHAPTERS
    00:00 - Introduction
    01:00 - Focal Point
    02:38 - White Space
    03:48 - Hierarchy
    04:56 - Examples
    ⬇ Did you find this video helpful? Tell us what you think in the comments section and stay tuned for the next two videos. ⬇
    Don't forget to subscribe to our channel for more Design Content. Click here 👉 bit.ly/33byV7L
    🎨 Learn the Art & Business of Web Design. Check out all our courses 👉 bit.ly/3jMxocU
    📱 Find us on SOCIAL MEDIA
    Flux Academy's Instagram 👉 / flux.academy
    Matt's Instagram 👉 / mattbruntondesign
    Matt's CZcams Channel 👉 / mattbruntonuk
    Thanks for watching our video!
    #Design #Layout #FluxAcademy

Komentáře • 247

  • @kennyslg8914
    @kennyslg8914 Před rokem +285

    As a musician and engineer of 12 years, I absolutely LOVE all the analogies you made between web design and music composition. I never thought about it like that, just like how music needs soft and loud dynamics to remain interesting, it makes perfect sense the same concept applies visually.

    • @juanchojack
      @juanchojack Před rokem +3

      Design is deeply embedded in everything we do and the objects we interact with on the daily.

    • @kennyslg8914
      @kennyslg8914 Před rokem +2

      @@juanchojack Absolutely!

    • @CS-GOgame
      @CS-GOgame Před 8 měsíci

      czcams.com/video/HRfkdcrp2Mk/video.htmlsi=yH1ml5wzD5QdjxlC

  • @DominicVictoria
    @DominicVictoria Před rokem +39

    Wow! This is well crafted lesson. I always hear these terms in design but just now that understand their connection to each other instead of separate concepts.
    Whitespace contrast focal point, multiple focal points can be arranged in a heirarchy. It makes so much sense now.

  • @MahirAlsamua
    @MahirAlsamua Před rokem +11

    As a graphic designer, I never had access to this information in school. now I understand the grid logic and dynamics much better thanks to your channel.

  • @shachaha
    @shachaha Před rokem +5

    I just LOVE that short and easy to digest peaces of information videos!

  • @theunitedreds3802
    @theunitedreds3802 Před 2 lety +45

    Can't wait for the next episode. Thanks for this invaluable session

  • @kebetuagency
    @kebetuagency Před měsícem +1

    The Pantone website knows what they are doing. The shop Now button is the focal point. They probably noticed a problem that people don’t know they can buy straight from their site. Their designers decided to do something radical. A test of conversion rate optimization may tell them the design is just right.

  • @ro3843
    @ro3843 Před rokem +8

    The quality of this tutorial is awesome.

  • @redkay7969
    @redkay7969 Před rokem +8

    as a music producer and web developper
    all i can say this guy made a good point between both of them by describing the similarity of the design

  • @jennysjourney02
    @jennysjourney02 Před 2 lety +70

    Great refresher and back to basics.
    I'm working with my first paying client so this is perfect. She needs more than just a website, so I love this applies to other types of design. I learned basic photography a few months ago and apply the rules of thirds to every design. Which I'm still practicing and trying to get better at.
    I wasn't too confident on how much white space to leave so this helps a lot. I've got a couple designs to fix. Looking forward to the other videos.

    • @MattBruntonUK
      @MattBruntonUK Před 2 lety +1

      Thanks Jenny.

    • @The1stLionn
      @The1stLionn Před rokem

      Hi! How can I be a better UX/UI designer? I know nothing about designing and I want to learn. Please I need help

    • @The1stLionn
      @The1stLionn Před rokem

      How and where did you learn?

  • @becky7008
    @becky7008 Před 18 hodinami

    Great channel! Keep up the good work 😊

  • @ObservingBeauty
    @ObservingBeauty Před rokem +4

    Truly appreciate professionalism that draw simple lines... many thanks. Subscribed

  • @davedsilva
    @davedsilva Před 7 měsíci +1

    Wow, after decades of confusion, thank you for making it so straight forward with your photo and music comparisons.

  • @defden7867
    @defden7867 Před rokem +3

    perfect timing
    thank you for the free content and your expertise!

  • @AmoghSrivastava
    @AmoghSrivastava Před 2 lety +15

    Loved this session Matt! Appreciate you uploading this content for all kinds of designers out here.

  • @aaronmillerillz
    @aaronmillerillz Před rokem +3

    Really great video. Your teaching style, and analogies are perfect.

  • @ninobach7456
    @ninobach7456 Před 8 měsíci

    That was the best video on design that I could have watched. Fundamental truths, rather than quick shortcuts

  • @user-pf7yi8oz6q
    @user-pf7yi8oz6q Před 8 měsíci +1

    Really clever explanation and no unnecessary verbiage! Respect! + subscription

  • @jaimix31792
    @jaimix31792 Před rokem +2

    Another home run, great job guys!

  • @conqr1113
    @conqr1113 Před 2 lety +8

    Thanks for this amazing tutorial !! This will help many Beginners in Motion Designing community. ❤️

  • @sandeshgowdru8869
    @sandeshgowdru8869 Před 7 měsíci

    Thank you, for making me observe what I see everyday digitally ...

  • @davdfranzen
    @davdfranzen Před 2 lety +5

    You're such an awesome teacher! Thank you

    • @MattBruntonUK
      @MattBruntonUK Před 2 lety +1

      Thanks David that's kind of you to say.

  • @TheThinkersBible
    @TheThinkersBible Před 10 měsíci +3

    Very useful and practical guidelines that are core and basic but too often forgotten or neglected. Appreciate the reminder and the instructive way you presented the principles.

    • @CS-GOgame
      @CS-GOgame Před 8 měsíci

      czcams.com/video/HRfkdcrp2Mk/video.htmlsi=yH1ml5wzD5QdjxlC

  • @intervention_w_myself
    @intervention_w_myself Před 10 měsíci

    Super, Sweet & Simple. Thanks for making it!

  • @user-kn4oi9oh4i
    @user-kn4oi9oh4i Před 5 měsíci +2

    Mah man created an amazing guide!! You earned yoself another subscriber mah man

  • @salmanamir4460
    @salmanamir4460 Před rokem +1

    that was exactly what I needed , thank you so much

  • @nordica8942
    @nordica8942 Před 8 měsíci

    Programming for musicians, I love it!. Being both, a developer and a musician myself, I catch every analogy on your video very easily.

  • @fakhriirfan7262
    @fakhriirfan7262 Před rokem

    THANK YOU!! THIS WAS THE BEST AND EASIEST TUTORIAL

  • @platingqueen
    @platingqueen Před rokem +1

    Beautiful comparisons! Great video, thanks for sharing.

  • @jonathan_brutus
    @jonathan_brutus Před rokem +2

    Love this! sometimes we have to go back to the drawing board and get back to the fundamentals.

  • @iljunjang
    @iljunjang Před rokem +6

    Love it!!! Esp the Pantone example. Terrific work

  • @subhasrini2706
    @subhasrini2706 Před 11 měsíci

    7:20 - This point is the most important of all!
    Thanks a lot big brother!

  • @89taklung
    @89taklung Před rokem +1

    Amazing introductions. Aboit to start a blog and want a really goodlooking website for it and this is exactly what I was looking for

  • @fugduhhh
    @fugduhhh Před 11 měsíci

    Such a nice explaination. One of the best place to study designing

  • @michelleleadley8938
    @michelleleadley8938 Před 11 měsíci

    Very well explained and very useful to know. Thanks.

  • @tomimdawodu6808
    @tomimdawodu6808 Před 2 lety +76

    Now I personally would like to see the “How To , make a focal point? Where TO place the focal point or best places to place the focal point? How to achieve successful hierarchy and alignment? How to create creative layouts ? How to balance white space? What are some different layouts styles and combinations that are successful? “

    • @zeeq7331
      @zeeq7331 Před 2 lety +1

      There are plenty of videos for that and usually with practice, you’ll find out for yourself which principles work best.

    • @tomimdawodu6808
      @tomimdawodu6808 Před 2 lety +5

      @@zeeq7331 oh! lead the way to those videos that answer these questions and more please 😁

    • @chidorirasenganz
      @chidorirasenganz Před 2 lety +5

      I would look into learning grids. Once you learn grids it’s like building with legos

    • @bonbonpony
      @bonbonpony Před 2 lety +3

      Wait… you expect actually useful and practial videos on CZcams? Oh foolish you! :J

    • @tomimdawodu6808
      @tomimdawodu6808 Před 2 lety +1

      @@chidorirasenganz hey okay , I’m game would you mind teaching me somethings about grids ?

  • @qaz1617
    @qaz1617 Před rokem +1

    Amazing video

  • @nataliakoshkina5570
    @nataliakoshkina5570 Před rokem

    Bro! it's Amazing You solved my problem! Thanks!!!

  • @modz9711
    @modz9711 Před 2 lety +2

    Just wow 😄 please keep making it 🔥. And thanks a lot.

  • @odedejikehinde6514
    @odedejikehinde6514 Před rokem +1

    I'm glad I found your channel.

  • @aloalo-ss5vl
    @aloalo-ss5vl Před měsícem

    You’re a complete artist

  • @Penwheng
    @Penwheng Před rokem

    This is very useful for me, thank you.

  • @AristeoIbarra
    @AristeoIbarra Před rokem +1

    Nice video bro, I am redesigning my portfolio, and your points are fascinating, thanks for sharing your experience.

  • @boxy3087
    @boxy3087 Před 8 měsíci

    This is a great content I hope you make more of layout videos just like this one.

  • @utekk
    @utekk Před rokem

    Thx for info. It is good to remember those principles, even if I seen them from other tutor.

  • @tomimdawodu6808
    @tomimdawodu6808 Před 2 lety +1

    Aye thanks for the refresher course on this

  • @Nhatlan93
    @Nhatlan93 Před 7 měsíci

    Thank you so much. Helpful tutorial

  • @pauladeconte7925
    @pauladeconte7925 Před 9 měsíci

    Absolutely great video! Great content!

  • @tipoidarraga
    @tipoidarraga Před 2 lety +1

    Perfect! Thanks

  • @CherishArtPortfolio
    @CherishArtPortfolio Před rokem +1

    this was amazing, thank you

  • @DianaBukaeva
    @DianaBukaeva Před rokem

    Loving your music references!!!

  • @uifry
    @uifry Před 9 měsíci

    A big thank you for sharing this

  • @glendanascimento1853
    @glendanascimento1853 Před rokem

    Thank you so much bro. Sending virtual hugs. Worked like a charm ;-)

  • @c4mi20music4
    @c4mi20music4 Před rokem

    Thank you very much for your key......1000% work :)

  • @whimsicalcellbooster
    @whimsicalcellbooster Před 8 měsíci

    Great video as it always used to be ;-) Keep up the good work!

  • @iamjagan.r
    @iamjagan.r Před 7 měsíci

    thank you so much buddy it is very valuable and useful content ❤

  • @seunomeaqui_
    @seunomeaqui_ Před 9 měsíci

    Great explanation!

  • @anonimos1211
    @anonimos1211 Před rokem +3

    1.FOCAL POINT (Rule of 3rd)
    2. WHITESPACE
    3. HIERARCHY

  • @DanzEnglish
    @DanzEnglish Před rokem

    This is a great video. Thank you very much

  • @web3Ninja
    @web3Ninja Před rokem +1

    Thank you ❣️

  • @utkarshacharya5213
    @utkarshacharya5213 Před 9 měsíci

    really helpful. thanks

  • @AMoktar
    @AMoktar Před 3 měsíci

    Amazing video, thanks 🙏

  • @mujtabaandrabi5410
    @mujtabaandrabi5410 Před rokem +1

    Thank you for this! Super cool video! A+++

  • @A2Zondeck
    @A2Zondeck Před 2 lety +1

    Omg thank you so much for this video!!!!!

  • @artdiarybyjess
    @artdiarybyjess Před 8 měsíci

    a newbie browsing most of your videos for today. :)

  • @HeyMyian
    @HeyMyian Před 3 měsíci +1

    Wow, I needed to see that trainwreck of a Pantone website myself, but they changed it. Now they have a "SHOP ALL" button that is not exactly centered and looks slightly different than their other buttons, they have a carousel for four items that SHOWS four items, they have randomly rounded corners or straight corners on their images, they have text as image, random headline styles, wrong line-spacing... They jumped from the frying pan into the fire, it's glorious 😂

  • @orelhassid5812
    @orelhassid5812 Před rokem

    Please Please share how you setup these beautiful studio, the lighting the camera this is so amazing

  • @GamesVortex-rs1ed
    @GamesVortex-rs1ed Před 6 měsíci

    your videos are super clean, Wooow

  • @mingsirakowit3316
    @mingsirakowit3316 Před 8 měsíci

    Thank you so much

  • @itskritz1996
    @itskritz1996 Před rokem

    yo bro, really thankya. Big respect

  • @micasa5345
    @micasa5345 Před 2 lety +1

    thank you!!!

  • @AvisualsStudio
    @AvisualsStudio Před rokem

    This is really apt.

  • @vojtaborsky
    @vojtaborsky Před 4 měsíci

    love it, thanks

  • @MultiSciGeek
    @MultiSciGeek Před měsícem

    I was hoping for a Pantone redesign.

  • @nikitamoiseev9877
    @nikitamoiseev9877 Před 4 měsíci

    Super! Great comparison between mixing and designing.

  • @Isa-dq4jw
    @Isa-dq4jw Před 2 lety +1

    vert good vidéo. thank you 🙏

  • @saravolf3753
    @saravolf3753 Před 10 dny

    I'm learning web/layout design for work, and music production in my spare time. The similarities just blew my mind. 🤯

  • @07factsfeed
    @07factsfeed Před 2 lety +2

    Hello sir,
    Thank you so much for these videos.
    And when you are going to start sale on your course for indian students??

  • @AbderrahmanFodili
    @AbderrahmanFodili Před rokem +3

    you have bullied PANTON into redesigning their website. props to you

  • @shanemilk9741
    @shanemilk9741 Před 4 měsíci

    Thanks!

  • @stylesg7818
    @stylesg7818 Před 11 měsíci

    Thank you.

  • @mozalicashekoz5132
    @mozalicashekoz5132 Před 2 lety +1

    keep going on these videos

  • @zeeq7331
    @zeeq7331 Před 2 lety +9

    Thank you, Matt. I wonder if I can link this video to my clients/stakeholders when they tell me to make things BIGGER.

    • @MattBruntonUK
      @MattBruntonUK Před 2 lety +3

      Sounds a little passive aggressive. 😆

    • @integral8420
      @integral8420 Před rokem +2

      Maybe a better idea would be to sell them on the idea by storytelling - that the design needs to breath, that the space gives a feeling of freshness, that amidst all this calmness here approaches the "hero" of the design etc. :) a little humor and storytelling goes a long way

  • @user-kg9kc8ce8s
    @user-kg9kc8ce8s Před 5 měsíci

    This is somehow helpful.. Thanks

  • @radish550
    @radish550 Před 9 měsíci

    If everything is highlighted, nothing is highlighted. Thank you!

  • @naharisratvlog590
    @naharisratvlog590 Před 2 lety +1

    Parfact! Thanks

  • @taewithalilsuga
    @taewithalilsuga Před 7 měsíci

    i honestly learned more in these 12 minutes than i did at college 😭

  • @arpitbatri1419
    @arpitbatri1419 Před 2 lety +5

    Great explanation!
    Also, Maybe the designers at Pantone are intentionally not following the basic rules of design: to stand out! Just a thought 💭

  • @pratikrajsah
    @pratikrajsah Před 2 lety +1

    Already waiting for other parts

  • @BehzadHabibzadeh
    @BehzadHabibzadeh Před rokem

    Very cool content 👌

  • @Cinnayre
    @Cinnayre Před rokem +1

    1. Focal Point
    2. White Space
    3. Hierarchy

  • @misstress1928
    @misstress1928 Před 8 měsíci

    Subscribed!

  • @hasnainmalik8982
    @hasnainmalik8982 Před 3 měsíci

    So, what I learn so far, from this video is create a focal point add a bold or sharp heading or title and very small text paragraph limited lines
    And a lot of white space.

  • @HIM-HUMAN
    @HIM-HUMAN Před 6 měsíci

    Gotta say that pantone website example as an example of a bad layout was great. You couldn't really navigate and know where to go ; disorientation

  • @adilsharafudheen3787
    @adilsharafudheen3787 Před rokem

    Waiting for the next video!!!

  • @sameermalik8580
    @sameermalik8580 Před rokem

    Amazing knowledge music knowledge 😉👍

  • @thiagobteixeira
    @thiagobteixeira Před rokem

    Nice!

  • @redowangrafix
    @redowangrafix Před 4 měsíci

    Helpful video.

  • @SeansAnthology
    @SeansAnthology Před 4 měsíci

    10:10 I didn't even realize that was a video until you pointed it out there is so much going on in that image.

  • @carolacv3471
    @carolacv3471 Před 2 měsíci

    Quality above quantity

  • @Anotherday8477
    @Anotherday8477 Před rokem

    Awesome 🙏🙏🙏🙏🙏