ฝัง
- เผยแพร่เมื่อ 31 พ.ค. 2024
- Do you feel stuck with your layout skills? Do you find it hard to understand how to get to an advanced level in your compositions? To break free from designing cookie-cutter websites you need to be able to break the rules and create unique layouts that are tailor made to your client. In this video, we will cover 9 advanced tips of layout and composition in Web Design. These are dos and don’ts from a professional Web Designer with examples, that if you put them into practice, they will inevitably help you take your Web Designs to the next level. You could almost call this a layout & composition course for Web Design. Hope you find it useful!
• Web Design Tutorials
FREE GOLDEN CANON GRID COURSE
Download the Golden Canon grid and join thousands of students in learning 5 secrets to design beautiful websites with the Golden Canon Grid with this free course:
bit.ly/481ES3w
READY TO JOIN THE WEB DESIGN MASTER CLASS?
If you are ready to peak your Web Design skills & learn how to monetize them so you can have more freedom to do the things that you love, then click the link below to apply to my signature program, the Web Design Master Class. I will schedule a call with you so we can chat and decide if my program is the right fit for you:
Apply here:
bit.ly/3Ep7Z3t
TWEET THIS VIDEO: ctt.ac/aIkef
DM me on social media:
• Instagram: / hellobont
• LinkedIn: / adriansomoza
Check out my works:
• Behance: www.behance.net/adriansomoza/
• Dribbble: dribbble.com/adriansomoza/
Check out my Pinterest for inspiration
/ hellobont
TH-cam Video URL: • 9 advanced tips of lay...
Typeface used: Rhapsody by Off Type off-type.com/products/rhapsody
#BONT #WebDesign #Layout&Composition
Timestamps:
00:00 - Intro
00:45 - 1. Make meaningful decisions
02:57 - 2. Don't be mild
04:48 - 3. Create depth
06:38 - 4. Reference more
08:47 - 5. Show me, don't tell me
10:33 - 6. Use typologies of information
11:54 - 7. Iterate
12:52 - 8. Switch alignments
14:21 - 9. Try new layouts
Any follow up questions? Shoot!
I'm in awe whenever I see impressive design implementations, But my immediate concern is always about the responsiveness of such designs. How should one approach this design to cater all screen sizes? Should we first start from mobile and then scale up? or the other way around? Would love to get some insights on this!
Can you link to that pinterest board?
I'd prefer overlapping layout, image offset layout but in my experience, my supervisors do not understand. How do you convince them to allow you try new ideas ?
That's coming soon! :)
You don't convince them, you find a company who understands and values the types of designs you want to be doing.
I love the advice of looking at references every day - at the beginning of a design path it’s easy to feel that you rely to much on inspiration and constantly compare yourself with others, but after a certain point it’s also easy to get a little cocky and ignore what is happening in the industry so it’s nice to keep doing that regardless of where someone is
100% my friend!
I don't mind cookie cutter for some websites. I have noticed a lot of websites which accessibility is a nightmare for people. I don't need to see custom shit flying all over the screen with custom typefaces so I can book my car in for a service.
Lol
Especially those on web flow. Sometimes they overkill with the animations
For me being more into CRO, boring is good because the visitor does not get overwhelmed with all that is popping off on a fancy website design. Simple layout with simple messaging. After all isn't a websites job to convert either into a lead or a sale? it is for me and that is why boring works
Ok! This channel is probably not for you then :)
It depends like you said on the type of client you’re working for,boring mainly works for corporate companies like a bank or a school, or e-commerce but like if you’re doing a job for a specific clientèle like an artist or portfolio or a kids websites those little features will make it far a better experience for the user
On a website, you have to build brand recognition, brand recall, and trust.
If you have a boring cookie cutter website, you’re ensuring your website is forgettable, and there’s no evidence that the brand is any better than the competition.
You don’t want useless clutter of course. No design for design sake. It has to LIFT. Each element needs to work hard at communicating something that fortifies the brand.
This is done in different ways depending on the industry.
@@hellobontlol really? Because he doesn’t agree with your point? The website example you’re in this video isn’t even captivating, nor is it good UX. So why shove someone aside because they don’t agree…
@@hellobont does designing for accessibility in mind mean that this channel isn't for me? Or are you just planning on alienating an entire section of people to make a website look pretty?
Oh by the way, why no mobile design? over 55% of web browsers are using mobile, why aren't you doing mobile designs? In fact why do all "design" youtubers ignore mobile devices all together. You guys are like a plastic bag full of air.
It depends, graphic design is not webdesign, very often the most boring layouts are the once that convert. From experience, i also, multiple times, created some visually stunning designs, only to find out in a/b tests that my classical "F" shaped landing page converted better.
Agreed that efficiency is the first priority. It's actually what I consider the number 1 law of Good Web Design.
copy that; also some design here looking good on desktop, but they break for sure on mobile, f.e. bridge transition journey. but ty for sharing. o/
That’s the greatest advice! I’m glad I’ve found your channel. I’m new to this area and really love designing stuff, especially web design/graphic design. ❤
Welcome aboard my friend! Glad you're enjoying my content. Happy learning!
This video is amazing, thank you so much! I feel so many people just throw together common sense tips and don't even elaborate, but you on the other hand, I can tell every point you brought up had a lot of thought and intention behind it.
I'm so glad to hear you found my content unique and valuable! Means a lot!
What a brilliant video. Great advice, simple and practical.
Great advice! Thank you for your help.
I've been designing for almost 4 years now, and this is one of the best videos I've every come across. I wished I had access to this when i started my carrier. But anyways its never late. keep it up, looking forward to more design related content.
Wow, thank you so much for your kind words 🙌😊
Amazing! Great tips and examples!
Didn't heard anywhere what you're saying! I'm starting my web designer journey and I'm getting excited by what you're saying! First video that I've watch from you and I want to know more about how you think and work.
Will definitely join your program as soon as possible! I've subscribed and I'll do your free course soon! Thanks for the value!
Super happy to hear that man! Keep at it and hope to see you soon inside the BONT Club :)
These are excellent insights not just for web design but design and layout in general. I’m not a web designer but this resonates with me for all areas of graphic design - branding, print, digital and video & motion graphics. 👍
very useful, I love hearing other people's thoughts especially in design :) Did you consider recording how you're transforming the desktop layout to a mobile one? Or from which you are starting at first?
Thank you for so useful content, definitely will go to check out the course 😊
Love it! This has got to be the most comprehensive video on layout!
Wow, glad you think so!
subscribed, I've kind of stepped away from design because I was working on other stuff, but this is a great refresher and helps build my confidence.
This is one of the best TH-cam videos I’ve watched on web design so far this year. Thank you! 🎉.
Thanks man, really appreciate it!
You're very creative! THX for the tips.
Awsome video Adrian! Thanks man !
Wonderful video.
I can't wait to watch more of your videos. Also, outstanding, beautiful work. Thank you!
Thank you very much!
Great tips. The Pinterest boards were GOLD! Inception tip within the tip. Thanks for that!
Loved this video!
Just realized that I have been applying some of your tips 🎉
That's super cool my friend! You got this 👊
Thank you for this great tutorial 🌹
As much as I like minimalist looks, contrast really is everything. And also good typography. I love that he teaches people to go back to the fundamentals. Reminds me of Chris Doe. God bless guys sending love from my Jamaican flavored breadfruit roasting roots 🇯🇲❤️🇯🇲❤️
Ha that's a huge compliment, thanks! You can be minimalist and create impactful with a lot of contrast. For example, you can choose only two type hierarchies, and have them be super different like 16px and 114px. Cheers from Argentina!
Thank you! I'm happy I found your channel) You have a slightly different point of view in describing the basic canons of design, and it suits me better.
Welcome aboard! Glad you like my explanations 🙌
I love your design, love your approuche, feeling all you talked about, keep going!
Thank you! Will do!
Great video, glad i found this channel
Tons of valuable information, thank you so much. It helped me a lot.
Great to hear Aryana! :)
Thanks, dude. I'm very glad that I found your channel
this is so valuable thank you so much!
You're so welcome man!
one of the best mind opening guide I received in my design journey, may be at right time also, thanks for opening my mind, as I was not satisfied with my web project, I was feeling like there is something missing, but yes, now I got those element, which was missing, yo thanks so much.
You're so welcome! Glad you found it valuable!
I just started in the field of UI/UX design, I thought when I designed something while looking at other people's references was the wrong thing because copying other people's designs, but it turned out that references opened up a lot of ideas in me.
Thank you
Loved your advice, Thanks
So glad!
Great tips! Would be great a video that explain how do you create those compositions taking in mind the different breaking points :)
Many requested this, so it's definitely coming oming soon!
Thank you! really helpful
Glad it helped!
This is a really good video!
These advanced tips on layout and composition are solid gold! They're a great resource for refining web design skills. We at Ceros are all about supporting the design community with valuable insights and your content is doing just that. Keep the insightful tips rolling!
Valuable insights my friend, you got yourself a new subscriber! 👌🙏🏻
Welcome aboard!
Another gem. 🙏🏽
Thank you for the great video 👍
My pleasure!
Cool designs, non-trivial tips, thanks! Liked subscribed :)
Awesome, thank you!
this is great 💪
Amazing content mate.
Much appreciated Tharun, and happy to have been able to chat ;) Keep up the great work!
You inspired me Bont. Thank you❤
I'm so glad! 🙌✨️
Nice explanation
Amazing Content
That mirror effect is amazing!
Thanks Andy! 🙌
Very nice vid. Good job!
Thank you very much!
I am only 3 minutes in and your tips and advices are soo helpfull thank you !!
Glad it was helpful! ✨️🙌
Thank you!
Welcome!
incredible input and inspiring, the modality of your teaching is like a meditation, dont want to watch other youtube videos now lol
Wow, thank you!
So useful! Thank you! Loved the designs. If I may, as a fellow youtuber/podcaster, I would suggest removing white noise in the background. I use Audacity for that particular task - super simple and quick. Makes a huge difference.
Thanks for the tip! I'll check Audacity, never tried for this purpose, and never took the time really to find a proper solution, even though I'm very aware of the bg noise and it bugs me too :P
@@hellobont here’s how I do it. Works really well I find: th-cam.com/video/ov5x3fTIemo/w-d-xo.htmlsi=U1MJMPXQB-pcgxNe
Great video. You can never go wrong with a reference to Rand.
You got that right!
Hi Adrián, I recently stumbled upon your channel and I must say, your content is fantastic! Thank you so much for creating such valuable content. I was wondering if you could provide some insights on how designers can elevate their skillsets? How to practice every day
Welcome aboard! To practice, choose a website on your niche, and redesign the hero, or the whole website! That's the best exercise
Thank you - great information as always. I noticed at 12:10 your iterations are so cleanly and purposefully selected. I often struggle with knowing when to stop iterating/selecting a final set to go forward with. Any advice or resources on how to finalize and decide?
Good question! I think that comes down to the visual journey. That's a good idea for a video!
Loved the video!!! Any recommendations on where to learn the technicality and how to build designs like shown.
Glad to hear Greg! Do you mean where to learn how to build this with code? If that's what you're asking, take a look at my video "should freelance web designers learn to no code?" :)
awesomeness here
Great
I do not think they are boring. They were readable. Like the one on preview, I like how it was before remake.
interesting! helpful!
Glad it was helpful man!
bro no way I xame across this!!! this was amazing
Hey Bont, Great video. I would love if you could consider taking the time to teach about how you create these beautiful interactions using principle, figma, etc. Thank you
Noted! I do have videos about that in the Interaction Design Playlist, but more to come for sure 💪
Nice
Still thinking what to place, as a content, to that small texts. If I have text from copywriter for heading and text (claim) what to put there?
this is the way
This is golden
Thanks 😊🙌
You are giving really amazing information.... but I am a little bit confused because I made an animated design in figma but I can't make that design online at WordPress...... can you give solution for this problem
great video. thanks for posting.
Que - What is the tool that is adding the rulers on the browser page where you talk about switching alignments ?
It's a Chrome extension. Google "ruler Chrome extension" ;)
I would add something, when doing the design, always think of the main goal of the page (of your client):)
With that red abstract layout design, I would say that CTA gets lost in both colour, layout, and this could lead to lower CRO:)
That can only be known when testing 🤷♂️
@@hellobont thats true, just coming from my personal experience 😃
Timestamps:
00:45 - 1. Make meaningful decisions
02:57 - 2. Don't be mild
04:48 - 3. Create depth
06:38 - 4. Reference more
08:47 - 5. Show me, don't tell me
10:33 - 6. Use typologies of information
11:54 - 7. Iterate
12:52 - 8. Switch alignments
14:21 - 9. Try new layouts
Thanks so much! Just added these so the video has chapters :)
This is just me, I am ok with boring site as long as they 1) provide good user experience so the visitor can easily understand/find what they are looking for and 2. ) Convert/engage. We do not design for ourselves but for the users of the sites.
This was a value-packed video. I'm tired of seeing the basic, text-left and image-right layout. This was great!
Glad you enjoyed it!
Hola Bont! Te quiero agradecer por el contenido que compartis, es genial para "pensar fuera de la caja"!
Te quería hacer una consulta respecto al punto 8 y las grids con alineaciones más interesantes... ¿Cómo pensás ese tipo de grids para diseño responsive?
Abrazo grande!
Hola Paula, muchas gracias por tus palabras! Voy a estar subiendo pronto un video sobre responsive. Asegurate de subscribirte a mi newsletter :)
Спасибо!)
You're welcome!
All looks great. Can you provide more mobile layouts, as it’s more actual in novadays
Will do! Thanks for the suggestion
hi gret video as a new web designer this video helped me a lot! i was wondering about the svg bridge and the car did you din that readyor did you make it your self? i am looking for websites that offer those images and svg files and icons like this one even paid of course, so yif you could share some links where i could find those it would be a huge help :)
thanks in advance
I did the car and the bridge. But I love this website for illustrations and icons of that sort: thenounproject.com/
What software do you use ?
Love all of your content, thanks for helping us :) btw I have a question, how good has been youtube for you to get clients?
Great to get clients for my course, not tp get Web Design clients. You need to always create content for your target audience!
I Like You, You are genuine & visionary , give any book recommendations about Solve my question which is How to design which can’t outdated, i design but its boring after 3 or 6 months also have 3+ year experience of digital design .
Glad you like my content! Check the video on the 7 laws of Good Web Design to create timeless websites!
Can I create this advanced Designs and recreate then in wordpress/Elementor without coding ? (in case I want do my own, not the client projects)
GREAATTT!!!
I am starting to use Figma. But I also want to learn other stuff to make my websites appealling. What can I use also to enhance mty imaginations on web design
thanks for the tips i think very usefull for me. All example you give for desktop version, how to handle mobile view version, any tips or trick? i think it will be challenging to convert them
Glad it was helpful! Will do a video with responsive designs
Super helpful video. What fonts did you use for "Mantrackers" and "Observations?"
They are listed in the description!
I'd like to see those examples in the mobile version and see how they had been adjusted to a small screen :)
Coming soon!
Awesome!! :D @@hellobont
Hi, how are you Bont? About the first tip (or LAW). What would be the content that should guide me? The content of the product is what it teaches or what it is. Or the COPY that I will use in my layouts.
The copy could help for sure, but in the "Mantrackers" website, the idea of the broken typography came from the topic of the series, not the copy. Maybe the copy is not good enough, so it's always you're job as a designer to understand what's unique about the business you're designing for, and make visual decisions that show that uniqueness. If I was commissioned to design a website for a series like this, the first thing I would do is watch at least a few chapters to understand what the series is about. Hope that help but let me know if you have any follow up questions!
the way you use typography is great very fascinating, please where can I learn this
In this channel :)
Hi, very informative video. Could you explain that Grid from the Iterations or grids in general in another video?
Sure! Any particular questions on grids? Would help me know what you need to learn. Grids are a wide topic!
Your content is always inspiring! one question come to my mind, how do you translate it to code or hand it off to developer? is there extra step? especially for the golden canon grid. Anyway, thank you so much🙌🙌
Noted! Thanks for the idea, and glad the content helps man :)
Sorry, to answer briefly: I don't code, I hand off the project to developers who match my skills :) Explaining how to handoff in a comment is difficult, but I'll take note of the idea for future videos!
@@hellobont Wow, thank you so much! I have been watching your videos and dreaming to become expert in design only, not both world (design and code). But, you know, gotta pay the bill😂
Can somebody tell me what software he's using at 12:20? Great video thank you for the inspiration!
No problem! That's Figma :)
Brill!!!
Golden advice.
Are there more resources for developing your layout and composition skills?
I want to go deep into these topics as I know my designs are just cookie-cutter websites for now.
I'm sick of lack of creativity in my designs.
There are lots of videos on TH-cam... not sure exactly what you're looking for. And I also have several hours of content specifically about composition in my mentorship program. Let me know if you have specific questions about this topic and I'll take note and try to cover it in the future.
@@hellobont Thanks for the excellent video. what is the course fee for your mentorship program?
Thanks for the reply@@hellobont
I did check the course on your website. I'm sure I will not be able to afford it currently but one day I will enroll definitely.
By resources, I meant any specific videos/books/websites, etc. that I can refer to gain in-depth knowledge about layout and composition.
I'm always fascinated by the creative websites on Awwwards website, eager to know how they would have done it.
I need to know how to think like a designer who can create these types of websites.
Thank you for your patience with all these questions.
It's a 4-figure investment. Feel free to apply and if you qualify we can have a chat about the details.
I don't know any other particular resources about composition. I hace learned this from replicating other designs I admire, and a LOT of practice. To think like an advanced designer, I would encourage you to watch this tutorial and the ones on Art Direction several times, and put the idea into practice!
How come you designed your page on a 1920px 1080px dimension instead of the standard frame that figma uses for desktop? I've been struggling with correct website dimensions for a while. I get the issue of making the design responsive for scaling, but shouldn't you design on the figma frame?
To me, it's easier to strip down a design than the other way around. I would rather design the full experience in HD, and then simplify for smaller screens. Video on responsive coming up this year, stay tuned!
Always waiting for your video , nice info however I visited your website on mobile it's not functioning properly and also want to know how you optimise website for mobile responsive
I know... I'm too lazy to create the mobile version of my site. Please check it on desktop 💪 and I'll definitely do a video on responsive design!
What platform are you using for your designs
for mantrackers i am not able read context/ text and the image is dominating mantrackers. if you feel that my feedback is correct or if not please give me an explanation why did you used typography in such way there
As a UX/UI designer I am interested in improving my web design skills and I wonder those that join your Bont Academy are they more creative /graphic web designers or Product Designers that also specialize in UX?
Hey TH-cam Junkie :P The members of the BONT Club are in the path to specialize in Web Design. You can read more about the program on my webiste!
Thank you for the video. Would like to know, what is the price for your course?
Hey Melvin! Thanks, and thank you for your interest on the WDMC. The program is invite only, so I only talk about the price once I know you're a fit. Feel free to apply to have a chat, or to DM me on Instagram!
I am not absolutely new to web design, but still amateur i believe. Would that course be something for me? Or is it more for advanced designers?