Тёмный

11 Section layouts to make your website ultra UNIQUE 

Payton Clark Smith
Подписаться 107 тыс.
Просмотров 459 тыс.
50% 1

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

Опубликовано:

 

4 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 300   
@mallorymusallam9588
@mallorymusallam9588 Год назад
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
@PaytonClarkSmith
@PaytonClarkSmith Год назад
Thank you! Will keep more coming 👊🏻
@omersoncruz1081
@omersoncruz1081 Год назад
trueee
@williamjames6860
@williamjames6860 Год назад
Try RU-vid videos template monster to WordPress elementor
@Racine14
@Racine14 Год назад
@@PaytonClarkSmith Hello, please can you share it to me too.
@d.o.nmuzic3802
@d.o.nmuzic3802 Год назад
Amen!!!
@MsOrganicBlack
@MsOrganicBlack Год назад
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!
@carlellis9647
@carlellis9647 7 месяцев назад
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.
@MrInsider33
@MrInsider33 Год назад
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!
@PaytonClarkSmith
@PaytonClarkSmith Год назад
Thank you 😊
@raymondjenkins1161
@raymondjenkins1161 Год назад
Solid gold as always. As someone that is more developer than designer, I really appreciate videos and resources like this.
@PaytonClarkSmith
@PaytonClarkSmith Год назад
Thanks Raymond 🙏🏼
@LARESCIV
@LARESCIV Год назад
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.
@christiannaira6076
@christiannaira6076 8 месяцев назад
I really enjoyed how you explained designs in a simple way. I'm learning a lot, thanks for this!!
@LightlyLilyAsmr
@LightlyLilyAsmr Год назад
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.
@winterzealot
@winterzealot Год назад
Amazing video! So useful to me as a designer early in my career. Never stop doing what you do!!
@Ramnathk
@Ramnathk Год назад
OMG where were you all my life! Loved the portion where you were talking about nesting layouts to create something unique. Thanks again.
@PaytonClarkSmith
@PaytonClarkSmith Год назад
My pleasure 😊
@neeshsamsi
@neeshsamsi Год назад
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
@PaytonClarkSmith
@PaytonClarkSmith Год назад
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-JByOVEOpXas.html
@unstence
@unstence Год назад
I agree. Most of our web traffic comes from mobile.
@liszcgsedt
@liszcgsedt 6 месяцев назад
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.
@Adlil
@Adlil Год назад
Wow Payton. Your video this one is a gem! It open my eyes for different approach in my design.
@lambo-ca
@lambo-ca Год назад
Layout 7 is amazing. Thanks man.
@saeedmirzaei1
@saeedmirzaei1 12 дней назад
Your content is unique. I really appreciate it.
@lizaskladannaya2213
@lizaskladannaya2213 3 месяца назад
one of the best videos about layouts
@thevintagebrush7378
@thevintagebrush7378 Год назад
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.
@PaytonClarkSmith
@PaytonClarkSmith Год назад
I agree. Thanks for the comment!
@sajeebhassan5393
@sajeebhassan5393 5 месяцев назад
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!
@coachpeterwilliam
@coachpeterwilliam 8 месяцев назад
Your videos are the best ui training I ever got!❤
@boluwatifeolubode7284
@boluwatifeolubode7284 11 месяцев назад
What a unique channel. Thanks a lot for these type of content
@OscarObians
@OscarObians Год назад
Gosh! these are gold. I just referenced your video on hero sections and now just saw this posted 1d ago.
@PaytonClarkSmith
@PaytonClarkSmith Год назад
Happy to hear it!
@iamtommyok
@iamtommyok 10 месяцев назад
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.
@MrAldarias
@MrAldarias Год назад
Ok! This was really good, Payton!
@marexibinsa2915
@marexibinsa2915 21 день назад
Thank you a lot for this video. This is very interesting and informative. Keep posting like those amazing videos, this is awesome.
@dots560
@dots560 Год назад
Thank for sharing this. Couldn't like this video enough. Almost hit the like button a second time 😁
@darrenbealeofficial
@darrenbealeofficial Год назад
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
@PaytonClarkSmith
@PaytonClarkSmith Год назад
Will keep this in mind thanks Darren! Mobile can be tricky to get creative so I think a video on this could be good 👍🏻
@darrenbealeofficial
@darrenbealeofficial Год назад
@@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
@stephenebrandt
@stephenebrandt 9 месяцев назад
​@PaytonClarkSmith you could still do it as a follow-up to this video.
@KBlakK
@KBlakK Год назад
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!!!
@goldenant9450
@goldenant9450 Год назад
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.
@blackfoxwebdev4135
@blackfoxwebdev4135 3 месяца назад
This is brilliant, just what I was looking for.
@cvetlicka
@cvetlicka Год назад
Amazing content! Been looking for something like this for weeks now. Thanks for sharing....
@MuttaqiAliMuhammad
@MuttaqiAliMuhammad Год назад
Great video Payton. Looking forward to more ones like this!
@PaytonClarkSmith
@PaytonClarkSmith Год назад
No problem!
@Anna-ou9dh
@Anna-ou9dh Год назад
Great video and content, and detailed explanation. Very clear and easy to follow. Great work. Thanks for taking the time.
@SinaNouri21
@SinaNouri21 Год назад
Thank you so much! You've saved me a whole day of time.
@marionpaolo319
@marionpaolo319 Год назад
I love this video and the hero layouts too!
@krismatic_
@krismatic_ Год назад
A really important discussion. Thanks for sharing these ideas
@the180degreerule3
@the180degreerule3 Год назад
Amazing episode, I avoid using timer, I let the user decide by choosing to reveal, slide, or move things based on scroll
@codenflowin1094
@codenflowin1094 Год назад
My man bro. Good shit
@Mumthazeer3
@Mumthazeer3 Год назад
Somrthing really useful. Enjoyed the presentation, too! Thanks a lot
@alexrodriguez510
@alexrodriguez510 Год назад
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.
@yubin_jo
@yubin_jo Год назад
Awesome video!
@Michael-iw3ek
@Michael-iw3ek 9 месяцев назад
Yes! unique and special, just like every other site!
@WaleedZubair
@WaleedZubair 11 месяцев назад
Subscribed! Because of the valuable content. Thank you so much
@sleezygamer4428
@sleezygamer4428 Год назад
thank you sir...apki wajha se hmlog competition me bane hue hai...or unique designer ban skte hai
@jennifershen4273
@jennifershen4273 Год назад
Good stuff! Thanks for sharing!
@gerardcruz3520
@gerardcruz3520 Год назад
This is really helpful! Thanks for the tips✌🏽
@abrahamyehoshuafrias3390
@abrahamyehoshuafrias3390 10 месяцев назад
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
@gloriaaliciagarciagarcia2278
@gloriaaliciagarciagarcia2278 5 месяцев назад
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?
@gloriaaliciagarciagarcia2278
@gloriaaliciagarciagarcia2278 5 месяцев назад
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.
@bexitervlog
@bexitervlog Год назад
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.
@jordandoucet6887
@jordandoucet6887 4 месяца назад
This is awesome. 🙏
@thatWebGuySolutions
@thatWebGuySolutions 9 месяцев назад
Great Stuff!! Totally stealing these!
@doctor-dan
@doctor-dan Год назад
Great layout ideas, thanks for the video!
@judecharlton4111
@judecharlton4111 Год назад
Super useful video, gave me some brilliant ideas. I’d love to see more videos like this one, thank you!!!
@PaytonClarkSmith
@PaytonClarkSmith Год назад
Stay tuned! 👍🏻
@MW-fc4ge
@MW-fc4ge Год назад
The algorithm wins again! I’ve been looking for ways to break out of the mold - this video was great!
@PaytonClarkSmith
@PaytonClarkSmith Год назад
Glad you found it 👊🏻
@telsamorgan5369
@telsamorgan5369 11 месяцев назад
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.
@nikamateshvili2826
@nikamateshvili2826 Год назад
saving this one for later !
@WilliamShrek
@WilliamShrek 11 месяцев назад
Inspirational!!!
@stanleysimeon4628
@stanleysimeon4628 Год назад
Dope man.... Very useful 👌
@henrythomas7112
@henrythomas7112 Год назад
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.
@srdjan.despic
@srdjan.despic Год назад
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.
@brianbartels9580
@brianbartels9580 Год назад
12 Column, 6 column, 4 column, 1 column.
@shirounshiroun7555
@shirounshiroun7555 4 месяца назад
@@brianbartels9580 Could you elaborate please ? I'm struggling with grids/columns for responsive
@keylaalston-griffin2416
@keylaalston-griffin2416 Год назад
Thank you!!
@ahmedredafarag5153
@ahmedredafarag5153 Год назад
Good job man . Thank for that.
@jawadahmed8956
@jawadahmed8956 Год назад
Keep posting these type of videos payton❤️
@davidojenike4268
@davidojenike4268 3 месяца назад
Glad I found your channel Payton
@spectrumcodes
@spectrumcodes Год назад
Just awesomeeee
@hooraiable
@hooraiable Год назад
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.
@PaytonClarkSmith
@PaytonClarkSmith Год назад
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 😂
@arcturus1996
@arcturus1996 Год назад
great video!
@coolestnerdever2128
@coolestnerdever2128 Год назад
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.
@ssskymmm
@ssskymmm Год назад
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!
@PaytonClarkSmith
@PaytonClarkSmith Год назад
Love this idea, I’ll keep it in mind 👍🏻 Thanks
@viajantedotempo3718
@viajantedotempo3718 Год назад
Great video. You help me a lot to create my online portfolio. Thanks! :D
@pauls1883
@pauls1883 9 месяцев назад
I need this!
@digitalnomad29
@digitalnomad29 9 месяцев назад
Fantastic insightful and brilliant video
@redhood7105
@redhood7105 Год назад
Nice video. Love me some non-stadard issue layouts
@Jutenas
@Jutenas Год назад
Great stuff, would love one where you go through the same but for mobile view. Thanks!
@z911dn
@z911dn Год назад
Subscribed!!! nice content
@otavioalexandre7575
@otavioalexandre7575 Год назад
Amazing video bro, thnaks for that!
@borisvanleuven6233
@borisvanleuven6233 Год назад
Fantastic video
@SmailPeche
@SmailPeche 10 месяцев назад
nice ideas, thank you
@orzhovthief
@orzhovthief Год назад
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
@ThisDesignLife
@ThisDesignLife 10 месяцев назад
Really useful thank you Payton
@deepakl9265
@deepakl9265 Год назад
Great video, a brochure download for these layouts will be really helpful!!
@PaytonClarkSmith
@PaytonClarkSmith Год назад
I might try and just share the figma link. Stay tuned
@ikennagibson3933
@ikennagibson3933 Год назад
Quality content🙌🏻
@designiya
@designiya Год назад
Fabulous💟
@JaiSequoia
@JaiSequoia 6 месяцев назад
Yes another video like this please 🙏
@pravinshinde_9353
@pravinshinde_9353 2 месяца назад
Thank you very much
@13LesTadO13
@13LesTadO13 Год назад
Thanks for the content! I don't like number 4 very much but all the other designs are bangers.
@PaytonClarkSmith
@PaytonClarkSmith Год назад
Thanks for watching and for the feedback Cody 👍🏻
@newlandstorm
@newlandstorm Год назад
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!
@digitalnomad29
@digitalnomad29 9 месяцев назад
It would be great to see a similar video where how these section layouts need to be developed on mobile devices..
@nimarez5826
@nimarez5826 Месяц назад
So useful❤
@Baltsar
@Baltsar 5 месяцев назад
Mobile responsive sections, thank you!
@asharmubarik388
@asharmubarik388 10 месяцев назад
such a Great winning video, thank you
@ManfredSpecht
@ManfredSpecht 7 месяцев назад
Thanx for the real cool videos. What I would really like to see is a more mobile first approach in the designs you show.
@jacobnegriweb
@jacobnegriweb День назад
Would be keen to see how to do all of these in a mobile format! Especially the 5 points around that product image in layout 5.
@janiskarasa3707
@janiskarasa3707 Год назад
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!
@KasunWitharana
@KasunWitharana Год назад
very good..thank you
@sylviaangelova5279
@sylviaangelova5279 Год назад
Please do more videos like this! Thank you!!
@PaytonClarkSmith
@PaytonClarkSmith Год назад
Will do 👍🏻
@marlokessler
@marlokessler Год назад
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
@nero71845
@nero71845 Год назад
Yass
@liszcgsedt
@liszcgsedt 6 месяцев назад
Hi, thnks, makes sense, just let me bring up a couple of points: One of my concerns would be overall length of the page, which may make it a bit more difficult to scroll (back) to a specific section - so I would be vary of goint too much vertical with the assets. Unless of course you have a section with good content and enough whitespace to span thru the entire viewport. Layout 6 is essentially the same as layout 1, save for the bullets, right? But yeah, I tend to use it (both options) too. In layout 5 I can imagine interactivity when the central image changes based on visitor hovering over one of the five "description" blocks. This would be challenging (and by that I do not mean the hover interaction) to break for a mobile - the only option there is going vertical while ideally keeping all six elements in view. In terms of sliders, you in very most cases have those nav dots and/or L/R arrows at hand, so I would not be worried. Overall, tho, I believe such elements should not be moving without user interaction (or at least stop moving on hover for desktop) - it is generally pretty annoying to open a website where everything keeps moving for fancy effect. Less is oftern more. One point in general: I have watched a good couple of such design videos, somem with Figma, etc. They mostly offer good suggestions ... but I am lacking mobile / tablet aproach in them, which mostly reduces them to a rhetorical exercise. I do not know what you background is (that is, how much you are considering technical solution), but much as fancy design can be quite challenging on handhelds (ordering of elements and headlines, the way they fit into the viewport height ... such as in layout 9 I would want the headline first, then the big picture, then the maller blocks, which, however, may thereby lose the context of the headline). None of you design people really tackle this. Personally, I am still waiting for a breakthrough idea of kinda irregular design with standout-ish visual, something very unorthodox, yet intuitive and comprehensive. Has not yet come ... so I am stickng to what "just makes sense" (and is easy to code). Sad ... but unless the customer really pays for something unique, I need to be making sure no crazy ideas ever get on the table. Being realistic, that is.
@patrickcarstens4797
@patrickcarstens4797 Год назад
Hi Payton, Great video! What kind of font is used in layout 4 and 9?
@leodegroot2
@leodegroot2 Год назад
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
@magedojo
@magedojo 11 месяцев назад
The first 30 seconds...I FEEL PERSONALLY ATTACKED. Seriously, this was great. Some solid ideas to get me out of my rut.
@muhammadahmadnew
@muhammadahmadnew Год назад
That's something much more needed. Your contents are improving a lot after you are focusing on your new business plan. By the way, Can we get the illustrator file?
@PaytonClarkSmith
@PaytonClarkSmith Год назад
Thanks 👍🏻 I’ll see what I can do as far as sharing the file
@alexandrealencar1796
@alexandrealencar1796 Год назад
The 10# would look much better with more copy, there were just so much negative space that it felt empty. Great tips!
@jamesdavis8731
@jamesdavis8731 7 месяцев назад
Yes, #10 is actually not a good design. There is no need to design a section like this that is "uncomfortable to look at." That literally goes against almost every design basic.
Далее
Use THESE building blocks for the PERFECT website
12:00
9 advanced tips of layout & composition in Web Design
16:11
ЖДУЛИ | 2 СЕЗОН | 4 ВЫПУСК
1:01:52
Просмотров 397 тыс.
VK фест 2024
00:56
Просмотров 316 тыс.
Design Better Than 99% of UI Designers
14:52
Просмотров 175 тыс.
5 Must-Have Plugins for Figma Designers
12:24
Просмотров 13 тыс.
18 Hero Section Designs You Can Steal
11:45
Просмотров 661 тыс.
60-30-10 Color Rule
6:18
Просмотров 1,8 млн
Why Is THIS the PERFECT Website Layout?
9:28
Просмотров 61 тыс.
Perfect Homepage Design Explained (in 15 minutes)
16:02
Top 2024 Web Design Trends
5:32
Просмотров 447 тыс.
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 895 тыс.
ЖДУЛИ | 2 СЕЗОН | 4 ВЫПУСК
1:01:52
Просмотров 397 тыс.