Complete Layout Guide

Поделиться
HTML-код
  • Опубликовано: 22 ноя 2024

Комментарии •

  • @kennyslg8914
    @kennyslg8914 Год назад +330

    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 Год назад +5

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

    • @kennyslg8914
      @kennyslg8914 Год назад +2

      @@juanchojack Absolutely!

    • @CS-GOgame
      @CS-GOgame Год назад

      ruclips.net/video/HRfkdcrp2Mk/видео.htmlsi=yH1ml5wzD5QdjxlC

    • @MikeHudsontek
      @MikeHudsontek 5 месяцев назад

      yup me too!

    • @novaplaya
      @novaplaya 3 месяца назад

      every field has the same stuff, nuances , and secrets that only the pros know. I believe engineering uses majority of the stuff artists, designers and musicians use. (those nuances and vague secrets)

  • @redkay7969
    @redkay7969 Год назад +18

    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

  • @sleeper_3.090
    @sleeper_3.090 4 месяца назад +10

    I love the simplicity of this video: focal point, white space, hierarchy.

  • @MahirAlsamua
    @MahirAlsamua Год назад +16

    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.

  • @DominicVictoria
    @DominicVictoria 2 года назад +43

    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.

  • @chtulhu4618
    @chtulhu4618 Месяц назад +2

    As a youtube scroller, I love how he explains it

  • @ro3843
    @ro3843 2 года назад +9

    The quality of this tutorial is awesome.

  • @JasonOtto
    @JasonOtto Месяц назад +1

    Thank you for your advice, expertise and time. I concur, and will action accordingly. Much appreciated.

  • @davedsilva
    @davedsilva Год назад +1

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

  • @saravolf3753
    @saravolf3753 5 месяцев назад +1

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

  • @sandeshgowdru8869
    @sandeshgowdru8869 Год назад

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

  • @jennysjourney02
    @jennysjourney02 2 года назад +71

    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 2 года назад +1

      Thanks Jenny.

    • @The1stLionn
      @The1stLionn 2 года назад

      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 2 года назад

      How and where did you learn?

  • @HeyMyian
    @HeyMyian 9 месяцев назад +3

    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 😂

  • @ninobach7456
    @ninobach7456 Год назад

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

  • @shachaha
    @shachaha 2 года назад +6

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

  • @nordica8942
    @nordica8942 Год назад

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

  • @ObservingBeauty
    @ObservingBeauty Год назад +3

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

  • @subhasrini2706
    @subhasrini2706 Год назад

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

  • @hasnainmalik8982
    @hasnainmalik8982 9 месяцев назад

    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.

  • @MelanieGonzalez-n8z
    @MelanieGonzalez-n8z Год назад +1

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

  • @iljunjang
    @iljunjang 2 года назад +6

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

  • @theunitedreds3802
    @theunitedreds3802 2 года назад +47

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

  • @aaronmillerillz
    @aaronmillerillz Год назад +3

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

  • @AmoghSrivastava
    @AmoghSrivastava 2 года назад +15

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

  • @aloalo-ss5vl
    @aloalo-ss5vl 7 месяцев назад

    You’re a complete artist

  • @odedejikehinde6514
    @odedejikehinde6514 2 года назад +1

    I'm glad I found your channel.

  • @BigSmoke-r9w
    @BigSmoke-r9w 11 месяцев назад +2

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

  • @89taklung
    @89taklung Год назад +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

  • @TheThinkersBible
    @TheThinkersBible Год назад +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 Год назад

      ruclips.net/video/HRfkdcrp2Mk/видео.htmlsi=yH1ml5wzD5QdjxlC

  • @jonathan_brutus
    @jonathan_brutus Год назад +2

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

  • @intervention_w_myself
    @intervention_w_myself Год назад

    Super, Sweet & Simple. Thanks for making it!

  • @anonimos1211
    @anonimos1211 Год назад +3

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

  • @fugduhhh
    @fugduhhh Год назад

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

  • @That_One_Phil
    @That_One_Phil Год назад +1

    Just wached something else before this, 12 minutes long, but I was asleep getting board and never learned anything.
    But immediately after that, I watched this less, exact length, and I learned the info that last me lifetime as a designer in a very effective way.
    You are easy to follow and thanks to Flux Academy. Just wow.

  • @AristeoIbarra
    @AristeoIbarra Год назад +1

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

  • @tomimdawodu6808
    @tomimdawodu6808 2 года назад +81

    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 2 года назад +1

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

    • @tomimdawodu6808
      @tomimdawodu6808 2 года назад +6

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

    • @chidorirasenganz
      @chidorirasenganz 2 года назад +5

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

    • @bonbonpony
      @bonbonpony 2 года назад +3

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

    • @tomimdawodu6808
      @tomimdawodu6808 2 года назад +1

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

  • @brooklynboy1000
    @brooklynboy1000 5 месяцев назад

    Been a musician and graphic designer for many years. Many designers are also musicians Same part of the brain

  • @tbyass-q6j
    @tbyass-q6j 6 месяцев назад +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.

    • @rhionysmael135
      @rhionysmael135 5 месяцев назад

      The pantone website design is a headache to a designer. A feeling of an autistic that can't calm down until it's fixed. However, it's just happened that the brand is already famous that's why clients don't care about the design. Also, they don't sell designs, they sell color pallets. Because of it's design, no one would trust them 😅.

  • @davdfranzen
    @davdfranzen 2 года назад +5

    You're such an awesome teacher! Thank you

    • @MattBruntonUK
      @MattBruntonUK 2 года назад +1

      Thanks David that's kind of you to say.

  • @conqr1113
    @conqr1113 2 года назад +8

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

  • @pauladeconte7925
    @pauladeconte7925 Год назад +1

    Absolutely great video! Great content!

  • @utekk
    @utekk Год назад

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

  • @nikitamoiseev9877
    @nikitamoiseev9877 9 месяцев назад

    Super! Great comparison between mixing and designing.

  • @zeeq7331
    @zeeq7331 2 года назад +10

    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 2 года назад +3

      Sounds a little passive aggressive. 😆

    • @integral8420
      @integral8420 2 года назад +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

  • @michelleleadley8938
    @michelleleadley8938 Год назад

    Very well explained and very useful to know. Thanks.

  • @orelhassid5812
    @orelhassid5812 2 года назад

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

  • @jaimix31792
    @jaimix31792 2 года назад +1

    Another home run, great job guys!

  • @defden7867
    @defden7867 2 года назад +3

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

  • @tomimdawodu6808
    @tomimdawodu6808 2 года назад +1

    Aye thanks for the refresher course on this

  • @taewithalilsuga
    @taewithalilsuga Год назад

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

  • @Nhatlan93
    @Nhatlan93 Год назад

    Thank you so much. Helpful tutorial

  • @keyannaharper3916
    @keyannaharper3916 7 месяцев назад

    My brother works with Pantone and has redesigned a bunch of their things. Look much better now

    • @FluxAcademy
      @FluxAcademy  7 месяцев назад

      Fantastic! Sounds like they're lucky to have him.

  • @nataliakoshkina5570
    @nataliakoshkina5570 2 года назад

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

  • @DianaBukaeva
    @DianaBukaeva 2 года назад

    Loving your music references!!!

  • @glendanascimento1853
    @glendanascimento1853 2 года назад

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

  • @Penwheng
    @Penwheng 2 года назад

    This is very useful for me, thank you.

  • @boxy3087
    @boxy3087 Год назад

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

  • @SeansAnthology
    @SeansAnthology 9 месяцев назад

    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.

  • @radish550
    @radish550 Год назад

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

  • @becky7008
    @becky7008 5 месяцев назад

    Great channel! Keep up the good work 😊

    • @FluxAcademy
      @FluxAcademy  5 месяцев назад

      Thank you! Will do Becky!

  • @GamesVortex-rs1ed
    @GamesVortex-rs1ed 11 месяцев назад

    your videos are super clean, Wooow

  • @HuzaifaParachaHim
    @HuzaifaParachaHim Год назад

    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

  • @uifry
    @uifry Год назад

    A big thank you for sharing this

  • @artdiarybyjess
    @artdiarybyjess Год назад

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

  • @creative_edgemedia
    @creative_edgemedia 2 года назад +2

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

  • @devdofuturo
    @devdofuturo Год назад

    Great explanation!

  • @سمندر
    @سمندر 2 года назад +1

    Thank you ❣️

  • @modz9711
    @modz9711 2 года назад +2

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

  • @A2Zondeck
    @A2Zondeck 2 года назад +1

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

  • @hustler-q8s
    @hustler-q8s 2 месяца назад

    soo helpful 🤍🤍

  • @pratikrajsah
    @pratikrajsah 2 года назад +1

    Already waiting for other parts

  • @John83118
    @John83118 11 месяцев назад

    I'm amazed by the comprehensive nature of this content. A book with similar substance offered immense insights. "A Life Unplugged: Reclaiming Reality in a Digital Age" by Theodore Blaze

  • @salmanamir4460
    @salmanamir4460 2 года назад

    that was exactly what I needed , thank you so much

  • @AbderrahmanFodili
    @AbderrahmanFodili 2 года назад +5

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

  • @Cinnayre
    @Cinnayre Год назад +1

    1. Focal Point
    2. White Space
    3. Hierarchy

  • @Jovian_Nights
    @Jovian_Nights Год назад

    Great info and visual production quality, but from an audio perspective… RX9 de-breath -> RX9 de-mouth noise-> noise gate will increase the listenability of the voice over tenfold.

  • @qaz1617
    @qaz1617 Год назад +1

    Amazing video

  • @fakhriirfan7262
    @fakhriirfan7262 2 года назад

    THANK YOU!! THIS WAS THE BEST AND EASIEST TUTORIAL

  • @platingqueen
    @platingqueen Год назад

    Beautiful comparisons! Great video, thanks for sharing.

  • @tipoidarraga
    @tipoidarraga 2 года назад +1

    Perfect! Thanks

  • @carolacv3471
    @carolacv3471 8 месяцев назад

    Quality above quantity

  • @micasa5345
    @micasa5345 2 года назад +1

    thank you!!!

  • @AMoktar
    @AMoktar 8 месяцев назад

    Amazing video, thanks 🙏

  • @iamjagan.r
    @iamjagan.r Год назад

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

  • @AvisualsStudio
    @AvisualsStudio Год назад

    This is really apt.

  • @utkarshacharya5213
    @utkarshacharya5213 Год назад

    really helpful. thanks

  • @DanzEnglish
    @DanzEnglish Год назад

    This is a great video. Thank you very much

  • @stylesg7818
    @stylesg7818 Год назад

    Thank you.

  • @ThomStanton
    @ThomStanton Год назад

    1/3 : Focal Point | White Space | Hierarchy
    (for screen shot note taking :)

  • @MultiSciGeek
    @MultiSciGeek 6 месяцев назад

    Interesting... Can you do apps specifically?

  • @MultiSciGeek
    @MultiSciGeek 6 месяцев назад

    I was hoping for a Pantone redesign.

  • @makitahq
    @makitahq 4 месяца назад +30

    that red dot really bothers me

  • @tm2cruz
    @tm2cruz 4 месяца назад

    Thanks

  • @Isa-dq4jw
    @Isa-dq4jw 2 года назад +1

    vert good vidéo. thank you 🙏

  • @mingsirakowit3316
    @mingsirakowit3316 Год назад

    Thank you so much

  • @mujtabaandrabi5410
    @mujtabaandrabi5410 2 года назад +1

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

  • @c4mi20music4
    @c4mi20music4 2 года назад

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

  • @RicoStone-c6i
    @RicoStone-c6i 11 месяцев назад

    This is somehow helpful.. Thanks

  • @ikennagibson3933
    @ikennagibson3933 2 года назад +2

    Nice video, please when is the next series coming up?

    • @FluxAcademy
      @FluxAcademy  2 года назад +1

      in the next weeks, please subscribed to be notified!

    • @ikennagibson3933
      @ikennagibson3933 2 года назад

      @@FluxAcademy I have been a subscriber for ages 😁

  • @datafricankid
    @datafricankid 7 месяцев назад

    Hello! Thank you so much for this great information! However, I've been unable to download the handbook from your website, please what can I do??

    • @FluxAcademy
      @FluxAcademy  7 месяцев назад

      Hello, Sorry you’re having trouble accessing this resource. Please click "Help" on our website (bottom right corner) and a member of our team will assist you.