11 Section layouts to make your website ultra UNIQUE
Вставка
- Опубліковано 13 тра 2024
- This video shares 11 unique website section layout designs that you can use on your next web design project. These layout will help make your web design projects look more custom and unique.
🎥 See unique HERO section layouts here:
🎥 Mobile website layouts:
Join my private training platform for web designers:
www.paitpro.com
🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳
CREDIT TO DESIGNERS
Layout 4: dribbble.com/shots/18769356-M...
Layout 5:dribbble.com/shots/20291726-C...
Layout 6: dribbble.com/shots/18385309-A...
Layout 7: dribbble.com/shots/16445371-N...
Layout 8: dribbble.com/shots/20247242-T...
Layout 9: dribbble.com/shots/20419970-U...
Layout 10: dribbble.com/shots/16648065-B...
Layout 11: dribbble.com/shots/20516635-P...
🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳
CHAPTERS
0:00 Basic Layouts 1-3
2:48 Unique Layout 4
4:14 Unique Layout 5
5:43 Unique Layout 6
7:39 Unique Layout 7
8:43 Unique Layout 8
10:32 Unique Layout 9
11:05 Unique Layout 10
12:08 Unique Layout 11
🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳🔳
11 Section layouts to make your website ultra UNIQUE
Love this type of video. Really breaks website design down to the fundamentals in a way I don’t see anyone else doing. Thanks for sharing
Thank you! Will keep more coming 👊🏻
trueee
Try UA-cam videos template monster to WordPress elementor
@@PaytonClarkSmith Hello, please can you share it to me too.
Amen!!!
I've been a designer for almost 20 years and have been experiencing burnout and creative block lately. This video helped a lot. I just subscribed. Thank you so much!
I really enjoyed how you explained designs in a simple way. I'm learning a lot, thanks for this!!
Payton, thanks for this video you do a great job of explaining in a clear concise way of how sections of a webpage can be laid out. You have embedded in my mind that good layout is based on how well organized the columns and rows of each section of a web page are structured.
Solid gold as always. As someone that is more developer than designer, I really appreciate videos and resources like this.
Thanks Raymond 🙏🏼
this video is actually genius. Not only are those sections really good, but you literally just had to find good designs and turn them into Layouts, and not the other way around. Clever thinking!
Thank you 😊
Make more of these bro, they are great, somehow other youtubers of this kind don't show off much of layout designs, but you did, is refreshing to see.
Your videos are the best ui training I ever got!❤
Layout 7 is amazing.
Thanks man.
Great content! it would be interesting to dive deeper into the last example as it's being used so frequently right now; rounded corners, grid layouts and capturing as much screen space as possible.
This is awesome! I struggled for a long time making a page look right. Something always just looked *off* and I couldn’t figure out why. Understanding layouts and borders really helped.
What a unique channel.
Thanks a lot for these type of content
Really enjoyed this. Great source of inspiration. If you make another video along the same lines would love to see a responsive view for these unique layouts. They are very creative in full size but it could be a challenge when scaling those down for mobile
Agreed. It can be tricky to get creative in mobile. I’ll see what I can do! In the meantime here are some mobile hero layouts: ua-cam.com/video/JByOVEOpXas/v-deo.html
I agree. Most of our web traffic comes from mobile.
I am afraid the only realistic option is goign vertical here, no other way (which actually removes too much thinking from the way ::). The way to go, as I see it, is grid with grid areas and then using order to order them. Or perhals subgrids, which I am now starting to use.
Amazing video! So useful to me as a designer early in my career. Never stop doing what you do!!
OMG where were you all my life! Loved the portion where you were talking about nesting layouts to create something unique. Thanks again.
My pleasure 😊
Loved seeing all of these. I have been doing a few websites recently and the hero sections are all just feeling too similar. Ready to shake things up for my next project. Thanks!
one of the best videos about layouts
I like this video. Gives me alot of layout ideas depending on the type of site. Thanks for this! Can't wait to see more ideas!!! Pleasse do more!!!
Awesome layouts Payton thank you for sharing. One thing nobody does is work through great desktop layouts and show how they can be in a responsive design. For example, take say your layout #8 and show how you would change it across the various device viewports. That would be super helpful. 10/10
Will keep this in mind thanks Darren! Mobile can be tricky to get creative so I think a video on this could be good 👍🏻
@@PaytonClarkSmith I think working through one specific webpage layout may be a great way help people visualize / get ideas flowing on what to do for a given screen layout across devices. Awesome work Payton. cheers
@PaytonClarkSmith you could still do it as a follow-up to this video.
Excellent video - it's very easy to start running away with layouts before understanding clean styling and good white space. I'd like to see more of these without doubt.
I agree. Thanks for the comment!
Wow Payton. Your video this one is a gem! It open my eyes for different approach in my design.
Great video and content, and detailed explanation. Very clear and easy to follow. Great work. Thanks for taking the time.
Thank for sharing this. Couldn't like this video enough. Almost hit the like button a second time 😁
Amazing content! Been looking for something like this for weeks now. Thanks for sharing....
This is brilliant, just what I was looking for.
Great Stuff!! Totally stealing these!
Ok! This was really good, Payton!
Really useful thank you Payton
Fantastic insightful and brilliant video
Great video Payton. Looking forward to more ones like this!
No problem!
I love this video and the hero layouts too!
This is really helpful! Thanks for the tips✌🏽
Good stuff! Thanks for sharing!
thank you sir...apki wajha se hmlog competition me bane hue hai...or unique designer ban skte hai
A really important discussion. Thanks for sharing these ideas
Somrthing really useful. Enjoyed the presentation, too!
Thanks a lot
Gosh! these are gold. I just referenced your video on hero sections and now just saw this posted 1d ago.
Happy to hear it!
Great layout ideas, thanks for the video!
I need this!
saving this one for later !
Good job man . Thank for that.
Thank you so much! You've saved me a whole day of time.
Subscribed! Because of the valuable content. Thank you so much
Yes! unique and special, just like every other site!
My man bro. Good shit
Glad I found your channel Payton
This is awesome. 🙏
This was nice! Thank you for sharing. Any chance on a how to video for layout 6? You mentioned a ton of options there - some in unfamiliar with but would love to learn more.
As a UX designer you want and need to use a design system. Using something "unique" can create conflict with the users. remember always to design based on what people more use. also this depends on what is your project
I really am UI, but seriously as UX you can't do something "unique"? sure, I would never do things that look like buttons and aren't, or things as radical as dribbble's complex grids, but I think you can still do something within the rules that looks nice, do you think there is a spectrum between what is good and doesn't look boring?
For example, the Next js site always looks good and is not overwhelming.
And as a frontend dev I can say that I don't find it really hard to do it in css, although I don't like the CMS restrictions on where I can and can't drag, so full css with tailwind.
I am learning so much from watching your videos. Thank you so much for sharing this amazing source of information. This one is quite helpful.
Amazing video bro, thnaks for that!
Your words resonated with me. That's exactly what I was frustrated about. In fact, all Wordpress themes seem to have the same design for sections. I'm looking forward to seeing what else you explore.
Keep posting these type of videos payton❤️
Super useful video, gave me some brilliant ideas. I’d love to see more videos like this one, thank you!!!
Stay tuned! 👍🏻
Love these videos, would love a vid where you explain how you would apply these layouts to mobile, i feel like that's the toughest part.
Great video and examples. Next time I would love to hear you also discuss how these layouts would work on mobile versions. In general I would like to see a video about strategies for responsive design.
12 Column, 6 column, 4 column, 1 column.
@@brianbartels9580 Could you elaborate please ? I'm struggling with grids/columns for responsive
Your videos are very useful and provide lots of information. I have received lots of help after watching this post, please continue to share this kind of information. Thank you.
Dope man.... Very useful 👌
great suggestions.i find that ill start building something new and then i'll hit a wall when it comes to making it responsive for smaller screen sizes..i ultimately end up reverting back to those typical boring layouts to make it work.
Quality content🙌🏻
Great👍
Hi Payton, you have a nice view on design. Your explination of the standard two column layout is ok but also has to do with responsive design. About 70% of users are reading email and websites on mobile. Due to Instagram etc. the layout and reading habbit shifted from landscape to portrait. A lot of your designtips look good on desktop or laptop. How do you implement them on iPad or a even smaller screen like a smartphone? With kind regards, Albert
Amazing video and very useful for me. Thank you! In the following videos, I would really like to see some more specific section types, like maybe 11 unique product cards for e-commerce or maybe like 11 different types of tabs element. That would be great!
Love this idea, I’ll keep it in mind 👍🏻 Thanks
Nice video. Love me some non-stadard issue layouts
Awesome video!
Hello, thanks for your job!
Can you do the layout #6 on Elementor?
Inspirational!!!
Thank you!!
Subscribed!!! nice content
Fabulous💟
Could you make one on blog layouts (single post / all posts or archive pages ) ? There's a lot of information on one page and it's hard to make it looks great without being clutered.
Great content, absolutely loved it. And ... SUBSCRIBED! Thank you for these ideas!
Would be great if you complement this video with other one where you cover the best practices/interesting approaches to transition the same layouts to mobile + tablet views 😉
Keep up the good work.
Many thanks in advance!
Great video. You help me a lot to create my online portfolio. Thanks! :D
Great stuff, would love one where you go through the same but for mobile view. Thanks!
It would be great to see a similar video where how these section layouts need to be developed on mobile devices..
its a fine line between the old fashioned way and going too funky...
would be nice to see not only 2 slides side by side but three - for the mobile option of the layouts.
Very true. I find myself always defaulting to the basics because of this! But throwing in a few of these now and then pushes me outside my comfort zone 😂
nice ideas, thank you
Just awesomeeee
great video!
Mobile responsive sections, thank you!
I am loving it! Do you have videos that teachers 👨🏫 how to create these layouts practically. I am finding it a bit difficult 😢. I am a self taught frontEnd Developer. I discovered your channel today!
Thanx for the real cool videos. What I would really like to see is a more mobile first approach in the designs you show.
Hi Payton,
Great video! What kind of font is used in layout 4 and 9?
The algorithm wins again! I’ve been looking for ways to break out of the mold - this video was great!
Glad you found it 👊🏻
Yes another video like this please 🙏
Thanks for the content! I don't like number 4 very much but all the other designs are bangers.
Thanks for watching and for the feedback Cody 👍🏻
Great video, a brochure download for these layouts will be really helpful!!
I might try and just share the figma link. Stay tuned
such a Great winning video, thank you
Fantastic video
I learned a lot today! I have a question since I am new to this... I am designing a website in figma, I would like to know how long the hero would be? since I am working with a 1440p screen.
I don't know if I could explain myself well, I'm using the google translator since I don't speak English well 😬
Nice video sir, can you make a video on how to make this type of section using Divi or Elementor page builder
Amazing episode, I avoid using timer, I let the user decide by choosing to reveal, slide, or move things based on scroll
Hi there, thank you for the awesome video😊 Could you also explain in further videos how the mobile design looks, since mobile first? Especially the five points around the centered image layout would be interesting to see in mobile. This would be so awesome!!! Thank you and all the best
Yass
Thank you very much
So useful❤
Please do more videos like this! Thank you!!
Will do 👍🏻
very good..thank you
Foi muito bom conhecer o seu trabalho hoje, mais um inscrito.
I believe numéro 10 would be great if you switch alignement from row to row. Like odd row image to the left with text aligned left, then even row image to the right and text aligned to the right
Great content, I would like to see the best modern ecommerce layout sections for home page