Great share! The Golden Canon Grid is an amazing tool to design UI really quick and easy. I've been using it for my client sketches a lot :) you developed a nice outcome in the final, I like! I'm about to stream a video using this grid later today
Hey Caler, thanks for all the inspiration and valuable tips youbshare with us! Do you also code? How would you approach the golden canon method with css grid?
Quite an interesting one. I can see how those intersecting lines can inspire different layouts. How do you think this would work for sections that are taller than the base aspect ratio of this grid? Would you stretch the grid down? Do you repeat it?
@@CalerEdwards here is a real quick version (not responsive, no interactions, I'll play with it later this weekend...): golden-canon-grid-demo.webflow.io/ Many thanks for the inspiration!!
Thanks for the great tip Caler, I love your videos. A quick question for you. Keeping the opacity down to the body text is a developer friendly method? As far I know developers like solid color instead of using opacity.
Hai caler. I followed you since 10 monthsVery glad to learn more stuff from you 👏....I seen your ui ux course in Udemy based Adobe xd...but wr need advanced level..so kindly please make a full course for us.... looking forward for your reply 👀👋
I would say this kinda Grid is better for graphic design. When it comes to web, how can we tell the css to align to the grid when the screen sizes and ratios are completely dynamic. 😂
The Golden Canon Grid is really good! I used to draw a lot of time to arrange the elements. Now I have got this new method! thank you very much. I have downloaded Nucleo and am trying to use it.
Hi Caler! I learned so mucho because of your content, so thanks for that! But, this time I'd like to tell you I'm a little disappointed about you cause you didn't say nothing about the work of Adrian Somoza, the "golden canon" creator, who put it all the knowledge and resources for free, for us. Again, I think you are a great ux/ui designer and you share amazing content, but you have to start giving credit to all the great designers like you when you make a video using their resources. Wathever, that It's just my opinion.
Sorry to disappoint, but I am super glad you said this because I didn't know I didn't credit him in this video, I did in yesterdays and I must have forgot in this one. I added a pinned comment on this video with his dribbble in addition to the description. Again thanks for letting me know I would hate to not give credit for such a great grid :D
Caler Edwards first of all, thanks for replied me! Now, I have to say sorry cause I had not seen the link in your description. Have a nice day and hope you keep sharing your knowledge with all of us. 🙌🏻
No, you are not making a website, you are simply doing 16:9 digital design composition. Every single tutorial here on youtube does this and calls it website. No, this is just header section and nothing else. Website is about flow of information and flow of layout, connecting sections both contextualy and visualy.
![สาวเมืองเพชร - ธีเดช ทองอภิชาติ [Official MV]](http://i.ytimg.com/vi/kEt7F9PvO3I/mqdefault.jpg)
Make sure you check out the Golden Canon Grid creator here: dribbble.com/shots/4301953-Golden-Canon-Grid-Freebie-Update-V-2
For a few seconds, I already like the design! Keep it up!
Thanks, will do!
Great share! The Golden Canon Grid is an amazing tool to design UI really quick and easy. I've been using it for my client sketches a lot :) you developed a nice outcome in the final, I like! I'm about to stream a video using this grid later today
Thanks. Very cool, but is it useful? Have I missed something the website layout in this example is not responsive?
You can use the grid to make the design responsive :D
@@CalerEdwards The website in the example is tailored without the mobile-first principle in mind... with all the respect.
Great!!!!
How do you use it in mobile version?
Another video, here we goooo 😍🔥🔥
You already know! :D
Great work Mr. Edwards. I am now a proud member of your TH-cam page. I hope to learn much from you.
Thank you very much! I hope my content continues to be helpful to you :D
@@CalerEdwards You are welcome. I will continue to do so.
Hey Caler, thanks for all the inspiration and valuable tips youbshare with us! Do you also code? How would you approach the golden canon method with css grid?
I like your creativity!👍
Thank you!
How will this layout respond? What will it look like on a phone? White on yellow won't pass accessibility tests.
Quite an interesting one. I can see how those intersecting lines can inspire different layouts. How do you think this would work for sections that are taller than the base aspect ratio of this grid? Would you stretch the grid down? Do you repeat it?
I would maybe try stretching it down I think
Thx for this great video! Do you mind if I try to build it on Webflow?
Go ahead!
@@CalerEdwards here is a real quick version (not responsive, no interactions, I'll play with it later this weekend...): golden-canon-grid-demo.webflow.io/ Many thanks for the inspiration!!
Very gooood !!!!!!
Thank you :D
Thanks for the great tip Caler, I love your videos. A quick question for you. Keeping the opacity down to the body text is a developer friendly method? As far I know developers like solid color instead of using opacity.
I would recommend using the color picker to grab the color that lowering the opacity makes before sending off to a developer :D
@@CalerEdwards Thanks
Hai caler.
I followed you since 10 monthsVery glad to learn more stuff from you 👏....I seen your ui ux course in Udemy based Adobe xd...but wr need advanced level..so kindly please make a full course for us.... looking forward for your reply 👀👋
Have plans for more stuff soon :D
I think it's a great tool for newbies to learn compositions
has anybody tried to create the acual html/css for this? I'd be interested in seeing how that is done
You would use CSS grid to do it
bro, i don't like that big H1 lineheight
I would say this kinda Grid is better for graphic design. When it comes to web, how can we tell the css to align to the grid when the screen sizes and ratios are completely dynamic. 😂
Does this grid suit only for symmetric designs ?
I would say both symmetric and asymmetric
Cool!
thanks :D
don't like the line-height of "find modern dream homes" though...and wonder how the whole design will look like on responsive views :-)
The Golden Canon Grid is really good! I used to draw a lot of time to arrange the elements. Now I have got this new method! thank you very much. I have downloaded Nucleo and am trying to use it.
When i download the grid it is slightly different that the one you have. Did you add extra lines ?
I had an issue with the Xd file missing lines. So I opened the psd file and exported it as an image. Hope that helps :D
@@CalerEdwards I have this issue as well, and my download didnt come with a PSD file. :(
Sir I do not find the Join Button
It should be next to the subscribe button :D
Cool video, only thing that I dislike is the font used. Other then that, i love the video
Hi Caler! I learned so mucho because of your content, so thanks for that! But, this time I'd like to tell you I'm a little disappointed about you cause you didn't say nothing about the work of Adrian Somoza, the "golden canon" creator, who put it all the knowledge and resources for free, for us. Again, I think you are a great ux/ui designer and you share amazing content, but you have to start giving credit to all the great designers like you when you make a video using their resources. Wathever, that It's just my opinion.
Sorry to disappoint, but I am super glad you said this because I didn't know I didn't credit him in this video, I did in yesterdays and I must have forgot in this one. I added a pinned comment on this video with his dribbble in addition to the description. Again thanks for letting me know I would hate to not give credit for such a great grid :D
Caler Edwards first of all, thanks for replied me! Now, I have to say sorry cause I had not seen the link in your description. Have a nice day and hope you keep sharing your knowledge with all of us. 🙌🏻
No, you are not making a website, you are simply doing 16:9 digital design composition. Every single tutorial here on youtube does this and calls it website. No, this is just header section and nothing else. Website is about flow of information and flow of layout, connecting sections both contextualy and visualy.