Watch Part 2: https://youtu.be/_Pp0JHEswMk
π€ FREE “Principles of Layout” Handbook – Download here π https://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 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 π https://bit.ly/33byV7L
π¨ Learn the Art & Business of Web Design. Check out all our courses π https://bit.ly/3jMxocU
π± Find us on SOCIAL MEDIA
Flux Academy’s Instagram π https://www.instagram.com/flux.academy/
Matt’s Instagram π https://www.instagram.com/mattbruntondesign/
Matt’s Youtube Channel π https://www.youtube.com/c/MattBruntonUK
Thanks for watching our video!
#Design #Layout #FluxAcademy
source
A big thank you for sharing this
really helpful. thanks
Absolutely great video! Great content!
Hi, what screen annotator are you using?
If everything is highlighted, nothing is highlighted. Thank you!
Great explanation!
The thing about the Pantone website is that all of this just comes down to one thing: art. Designing is an art. And there is no one way to do art. By saying that it's always about focals points, hierarchy etc is kinda a narrow minded view. It's like you're forcing and dictating how the designer should do his job. Personally I find the Pantone website design great. I don't see any problem with it.
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.
GMAIL PLEASE!!! 2:38
Super, Sweet & Simple. Thanks for making it!
Thank you.
Such a nice explaination. One of the best place to study designing
7:20 – This point is the most important of all!
Thanks a lot big brother!
Very well explained and very useful to know. Thanks.
1/3 : Focal Point | White Space | Hierarchy
(for screen shot note taking π
.γ €
I love you
The headline on Figma should say 'We hope you like working with someone watching over your shoulder' or 'Too many cooks in the kitchen' in a cute font.
Pantone website was probably micromanaged by idiot manager .
Pantone seems to have updated their website, and it looks much better. Still, I'm not a fan of the typography as there are many many different sizes, weights, styles (currently June 2023)
Amazing introductions. Aboit to start a blog and want a really goodlooking website for it and this is exactly what I was looking for
Really great video. Your teaching style, and analogies are perfect.
Just freeballing here…but I think this guy was a musician at some point.
Made me sub in first 10 seconds
1. Focal Point
2. White Space
3. Hierarchy
This is a great video. Thank you very much
I have a question about the page/section height. When I watch design videos, most often when designing for desktop screen sizes designers use a 1440×1024 frame however the actual viewport height of the browser is usually significantly less. As a developer I can either make the section vertically responsive and make each section fit perfectly into the vh(viewport height) or keep the height pixel perfect to the design and just accept that on many devices the bottom of the hero section for example would not be visible until the user scrolls down. I am a developer with a some design skills but I'm very green In web design so I imagine this may be obvious for some however I was curious if there was a concrete/industry standard solution or if this is more of a judgement call.
Your Instagram course page is not available, do you offer web design training?
focal point
white space
hierarchy
no way. the focal point is that red dot sitting on the left of the video
Interesting, but the demo are on company profile with lenient creativity boundaries where you can make and put images in layout that suit the brief and eye candy. how about e-commerce website? I've seen lots of ecommerce/marketplace website kinda all same and repetitive. can you give study case about how to implement better design on e-commerce website where the goal are always to put all the product in front and give more conversion.
Amazing knowledge music knowledge ππ
Nice video bro, I am redesigning my portfolio, and your points are fascinating, thanks for sharing your experience.
Awesome πππππ
Thx for info. It is good to remember those principles, even if I seen them from other tutor.
Beautiful comparisons! Great video, thanks for sharing.
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
This is PART ONE of the Principles of Layout Series.
this was amazing, thank you
Amazing video
Truly appreciate professionalism that draw simple lines… many thanks. Subscribed
RULE #1: Less is more.
RULE #2: A maximum of two typefaces.
RULE #3: Go back to Rule #1 again.
Can anyone recommend where a back end dev (me) can learn the basics of design. I donβt need to be an expert but making our internal apps look better will be key to getting buy in. Sick of basic sites that are just a combination of forms for inputting π
Lol is that you peeking at your notes?
Pantone since this video changed their layout π
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.
nice
asian eye – sharp focus
white space – empty area
hierarchy – order of relations
1.FOCAL POINT (Rule of 3rd)
2. WHITESPACE
3. HIERARCHY