4 steps to design the hero of a website with the Golden Canon Grid FROM SCRATCH

[@17thMidnight]

What developers think about the grid? Does it give them a headache?

[@hellobont]

I guess that depends on the skill set of the developer. It's just a modular grid than can be achieved with CSS!

[@UTJK.]

​@@hellobont I had the same question, especially considering the constraints by CSS frameworks that are usually used. Do you always design first without any clue about the underlying tech, or sometimes your process is reversed and you are asked to respect the conventions dictated by the tech that will be used to develop?

[@cedric_designs]

I love the fact that you mentioned our primary focus should be the iteration of the design and not just imposing to use a fancy grid system

[@brunocavenaghi]

Hi, I really need to say that I've been using your grid since 2018 now and it's the very best grid I ever used. It is awesome for almost everything, from websites to printed ads. I used it so much that my eyes and hands guides me to positioning my layouts on it even when it's not there hahaha. Thank you so much for it.

[@hellobont]

Love this Bruno! Thanks for sharing and happy you found the grid helpful :)

[@Pablo-k4j9p]

Hey Adrián! This might seem a bit repetitive, but your insight as an experienced designer is invaluable. If you had the chance to start your journey again, I'm curious how you'd approach it. What would you prioritize learning, starting from the foundational skills up to the more advanced ones? And in what order would you tackle them? I'd love to understand why you'd choose this specific path too. On a slightly different note, have you ever thought about building a community where we could provide feedback on each other's designs? Something like a weekly or monthly challenge would be fantastic! Thanks for your time and all the knowledge you share.

[@hellobont]

Hey Pablo! Thanks so much for the thoughtful comment, it means a lot! I'll note your questions for future videos. I thought about doing a periodic challenge, but not sure how to structure it. Any specific ideas?

[@Pablo-k4j9p]

@@hellobont This is a general idea, ofcourse feel free to choose what parts you find more interesting and iterate over them if you want to change them Timelines: Organize challenges with varying durations. Shorter two-week challenges can be ideal for smaller projects, while more complex challenges can span a month. Additionally, introduce flexible mini-challenges or tasks within larger challenges to make larger projects more manageable and keep engagement high throughout. Design Challenges: Set diverse themes to spark creativity and learning, for example designing a website showcasing the evolution of Renaissance art, redesigning the NASA website for a modern user experience, or creating a website for an imaginary museum. Challenges can also align with educational content, such as emphasizing the use of contrast after discussing it in a video. Allow community members to suggest themes for future challenges to increase involvement and relevance. Consider introducing different tiers or levels of challenges to cater to varying skill levels. Feedback Sessions: Conduct regular feedback sessions on platforms like Skool, providing participants with opportunities to share their designs and receive constructive feedback. Organize these sessions in various formats including one-on-one sessions, group critiques, and "silent" critique sessions where feedback is written before discussion, catering to different learning styles and preferences. Expert Reviews and Mentors: Extend invitations to experienced designers to provide valuable insights and mentorship during challenges, enhancing the learning experience. Additionally, set up AMA (Ask Me Anything) sessions, webinars, or workshops with these professionals for more in-depth learning opportunities. Recognition and Prizes: Announce challenge winners in your videos, acknowledging their achievements. Offer prizes like design resources or collaboration opportunities to inspire and motivate participants. In addition to recognizing winners, consider recognizing effort and improvement to foster a growth mindset. Introduce a system where members earn points or badges for participation, which can be traded for rewards (This could be done inside Skool community). Knowledge Sharing: Leverage Skool's feature for sharing educational materials and resources related to the design challenges. Make sure that resources are not just limited to the challenge topics, but cover various aspects of design. Also, create a space where members can share resources they found helpful. Communication: Keep members informed and engaged with regular updates about the community, upcoming challenges, and other news through newsletters, Discord announcements, or short KZbin videos. Continuous Improvement: Regularly seek feedback from your community members about what they like, what they don't, and what they want to see in the future, keeping your community relevant and engaging. Also, there’s a great podcast about how to create a community with Shana Lyn and Sam Ovens that I saw once and I think that you could find useful: kzbin.info/www/bejne/oGbGZnipgLuLmq8

[@hellobont]

@@Pablo-k4j9p that's amazing man, thanks again for the detailed response. I'll definitely note all of these ideas and ponder on them!

[@gambino59]

The extra tips around the padding and nav bar are super helpful! That's definitely gonna power up my next design to use this!

[@hellobont]

Let's gooo my friend! Glad to hear that 🙌✨️

[@passionboy7542]

I JUST DISCOVERED YOUR CHANNEL, I think you are one of my favorite channels 🙏❤❤ Continue

[@hellobont]

Wow, thank you! Welcome aboard my friend!

[@rajkiranc3866]

This is a blessing, Thank you, Adrian :) Hope to catch up soon in the Bont Club 🙏

[@hellobont]

We miss you in the BONT Club man! Hope to see you again soon ✨️🙌

[@Madloco491]

thanks for the video much appreciate it and i bought the grids few years ago and they are insanely good

[@hellobont]

Thanks for the support through the years, glad you enjoyed the product!

[@maximilianoranholi9208]

I've been watching your videos lately and you really teach some interesting web design fundamentals. I know that a many people have already asked about mobile design, so a suggestion for a future video could be "golden grid on mobile design", since a lot of the views on web site comes from mobile devices. amazing work, by the way. :)

[@hellobont]

Glad my videos resonate with you man, and thanks for the feedback. I'll definitely do a video about responsive design soon, like you say, a lot of designers ask me about that 🙌

[@SothearithKONGMrMuyKhmer]

Another great advice! Thanks a lot Adrian! 🎉

[@hellobont]

My pleasure!

[@JustCcRachel]

Love videos like this where you show your process...thanks! Would be great to see how you scale down to mobile.

[@hellobont]

Sweet, noted. Hopefully I'll do it in less than 5 years haha thanks Rachel!

[@anakarinapinzonnavarro5750]

Tu contenido es lo máximo ❤.

[@hellobont]

Muchas gracias 😊

[@cuboxstudio]

Hi Adrian, Your contents are so groundbreaking for me who learn design as self taught even tho I've been doing web design for a decent time. I use to create wireframe before designing the actual web interface. The wireframe acts as a guide for me and my client to determine the exact content that later fit onto my web interface. My question, where did wireframe fit into your workflow when designing website or you just don't use it for your craft?

[@hellobont]

Usually for websites smaller than 10 pages I don't do wireframes. Thanks for the kind words!

[@TheUnodetantos]

Muchas gracias por tus videos, seria importante crear una segunda parte orientada a usarla desde la perpectiva mobile

[@hellobont]

Genial Sergio, gracias por el feedback. Varios pidieron lo mismo así se ve que es de interés general 👌

[@TheUnodetantos]

@@hellobont Hola, seria interesante ver el proceso para webs mobile, he puesto el grid en un div en una web real y, que decir, cambia toda la manera de ver las cosas. Buon trabajo y gracias por tanto esfuerzo

[@hellobont]

Genial, anotado!

[@matheuscervo892]

Great video, dude! Thanks for the content, I am learning a lot with your channel. I was just thinking: how do you translate your screen into a handoff for developers to make everything responsive into multiple screens? I was wondering that as our choices in the perfect scenario wouldnt work in a lot of situations...

[@hellobont]

Thanks Matheus! I'll be doing a video about responsive this year, stay tuned!

[@rogerio8710]

Muito obrigado por mais essa grande aula.

[@hellobont]

You're welcome my friend!

[@matheusrgoularte]

yeah, I actually learned something today, thanks

[@hellobont]

Awesome, cheers!

[@Ruhayyim]

This video is just dope

[@hellobont]

Thanks yo!

[@hagaivdh]

amazing!!

[@FedericoLunaRGH97]

Muy bueno Adrian! Cómo manejas esas compositions en responsive o la adaptación mobile? Cambia la grid? se reduce la complejidad e la misma?

[@hellobont]

Buenas preguntas Federico! Anotadas 💪

[@AjiNMoto]

thanks for the content, do you think there are other grids too that are slighlty beginner friendly? thank you

[@hellobont]

Yes, definitely. If you're a beginner, just use a regular 12 column grid. I use a 12 col grid 90% of the times.

[@juancamilogrimaldogarcia5682]

Excelente video

[@hellobont]

Muchas gracias Juan!

[@vismayaiyer1983]

Hey Adrian, love how simple yet powerful this is! Is there something that inspired you to style the pagination as "01 /0003"? Or is it purely for aesthetics but random?

[@hellobont]

Thanks Vismaya! I wanted that text to be a bit more prominent so it doesn't get lost, and to contrast with the "01" in its width. Good question, details matter ;)

[@sxndiegoalx]

Grande!

[@zephyrt.4464]

Thank you for the informative content. I have a question about determining the aspect ratio of the grid. I understand that the grid system helps in organizing elements within the window, but considering that the window dimensions can vary across devices, using fixed units like pixels may cause the grid-backed design to appear distorted. Unless major units are defined using viewport width (vw) and viewport height (vh) in the code, the design may not adapt well to different devices. Am I overlooking something important here?

[@hellobont]

Yes exactly!

[@jaiyeolatosin8227]

Great video Where is the link to download the grid system please?

[@hellobont]

Thanks! It's in the description

[@staybalancedn]

do you have a video where you show a design that doesnt have a nav. like say a section under the hero or in the middle of the page

[@hellobont]

Yeah, you can check this website: conspireagency.com/

[@rakshithrao7217]

Can you please make a video on prototyping in Figma.

[@hellobont]

I use to Principle to prototype. But yeah, I'll make a video on prototyping animations/interactions. Thanks for the feedback!

[@nasigh9882]

which software use bro

[@rakshithrao7217]

Do you only design the hero section with golden cannon grid or design the rest of the sections with it too?

[@hellobont]

Good question! I design the rest of the sections as well. Maybe that can be for another video

[@vancourverite7779]

also why are you not using a 4pt grid system which is more conventional for UI designers and developers?

[@hellobont]

Because to me it's just too complicated, I like simplicity. And if it's a spacing of 8px or 10px, it won't make a huge visual difference, so I'd rather stick with round numbers.

[@juncal230975]

How this layouts translates to mobile?

[@hellobont]

Coming soon!

[@rossvincent6806]

I'm curious about why you chose the 30 pixels padding when resizing the one image. Why 30 pixels? Would it be more in line with the golden ration to chose and Fibonacci number like 33. Or is this irrelevant?

[@hellobont]

Good question! I think it's irrelevant and just adds more unnecessary complexity that makes it more difficult for other designers who need to design with this system, and for developers to implement. I just pick round numbers for paddings and margins for that reason.

[@sxndiegoalx]

Seria genial ver cómo pasas este diseño Figma a Readymag, si tienes plena flexibilidad de adaptar el grid en esa app y ver cómo se comporta el código estando en live, un abrazo!

[@hellobont]

Interesante Diego, anotado!

[@brandinglab100]

How does the Golden Canon convert to the web?

[@hellobont]

It's just a modular grid that can be achieved with CSS!

[@meharjawadhashmi6723]

How did you make the Golden Canon grid? I mean, which or what rules applied to this to make the grid?

[@hellobont]

You can check the first video to learn how it is achieved!

[@sadepennbrook]

Signed up just to find that the resource file only works with limited applications strictly web oriented. We in the print world use grids too.

[@hellobont]

Sorry, it's for Web Designers specifically :)

[@vancourverite7779]

im curious to know if any followers here are UX/product designers? I love the asthetics yo use in the designs rather than go with the conventional cookie cutter templates that you will find in many websites.. but im curious to know if golden canon grid principles can be applied to corporate websites or is it "too creative" and not practical ?

[@hellobont]

I did Product Design for adidas, Nike and the Olympics. Sure it can be used as well, it was originally used for books, so... it's just another type of grid.

[@joaooliva4878]

Thank you for these videos 🙏But I think you could change the titles on these videos to "4 steps to design a hero section" and not "website". Because a website is composed of several sections, and since you only work on the hero section...

[@hellobont]

You're right, updated the title.

[@fernwehtwl]

i know this may be more tailored to UI design ...well isn't web design like UI ? Why do you use a 30 square method ? its not divisible by 4 .. and generally UI designers design with a 4pt or an 8pt grid

[@hellobont]

Because to me the 4pt grid system is just too complicated, I like simplicity. And if it's a spacing of 8px or 10px, it won't make a huge visual difference, so I'd rather stick with round numbers. If I need it to be divisible by 4 I would use 40px instead.

[@fernwehtwl]

@@hellobont would this be easy for developers ?

[@kristofferodman27]

You have a buzzing noise (like from a computer) in the background on all the videos I've been watching with you. A little bit annoying. Just some feedback :)

[@hellobont]

I know... any ideas on how to solve it?

[@Mumont]

The number of Spanish speakers is higher than the number of English speakers. I would think that with that in mind it would be better to speak Spanish. I think you are reducing the chances of generating more traffic to your channel. Another tip probably is to mention your channel name "BONT" more times. That could help to user's memory.

[@hellobont]

Ok, thanks for the tips!

[@tchinaza]

You could make subtitles but please don’t shut us(English speakers) out.

[@hellobont]

Don't worry Cynthia, I'm happy having an international audience, and my students are from so many different countries! I love that and I'm not planning on changing it :)