11 Section layouts to make your website ultra UNIQUE

  Рет қаралды 504,456

Payton Clark Smith

Payton Clark Smith

Күн бұрын

Пікірлер: 327
@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 KZbin 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!!!
@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 😊
@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!
@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 🙏🏼
@BEXITER
@BEXITER Жыл бұрын
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.
@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 😊
@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!
@abrahamyehoshuafrias3390
@abrahamyehoshuafrias3390 Жыл бұрын
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 Жыл бұрын
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 Жыл бұрын
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.
@Michael-iw3ek
@Michael-iw3ek Жыл бұрын
Yes! unique and special, just like every other site!
@nero71845
@nero71845 Жыл бұрын
What about the smaller screens why are we ignoring them could you please talk about how would the designs look on mobile screens Thank you for the great work
@Emuu-r6o
@Emuu-r6o Жыл бұрын
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 👊🏻
@sleezygamer4428
@sleezygamer4428 Жыл бұрын
thank you sir...apki wajha se hmlog competition me bane hue hai...or unique designer ban skte hai
@jupitershorizons
@jupitershorizons 3 ай бұрын
Really good demonstration of layouts that can be helpful if one needs to rekindle their creativity. The only downside to this video is that the amount of requests to subscribe + channel ad + YT ad. I've never seen so many ads in a one-hour long video, let alone a video that's less than 15 min.
@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!
@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 😂
@lambo-ca
@lambo-ca Жыл бұрын
Layout 7 is amazing. Thanks man.
@lizaskladannaya2213
@lizaskladannaya2213 10 ай бұрын
one of the best videos about layouts
@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.
@SohaibHasan
@SohaibHasan 4 ай бұрын
Thank you for this amazing video. Really enjoyed watching it and learnt new designs as well.
@globalfunseeker6733
@globalfunseeker6733 Жыл бұрын
Considering that most people view the web using portable devices, there's too much emphasis placed on design. It doesn't matter what the site looks like on a desktop computer, when reduced to fit the viewport of a cellphone, it becomes a series of square/rectangular blocks. I think navigation and content are far more important, unless you're priority is developing or supporting a brand.
@GrouEEf
@GrouEEf Жыл бұрын
This. Absolutely.
@patrickbuswell
@patrickbuswell Жыл бұрын
I appreciate your comment. I personally do not like to visit websites using my mobile phone (and it's a Samsung Fold). I do 85% of my browsing on desktop. I would also argue that if what you have to offer is B2B (Business-to-Business) oriented, you will have more desktop visits being office workers using their work computers vs. B2C (business-to-Consumers) which might indeed attract more mobile traffic. Lastly, I agree that having a more straightforward mobile interface is the way to go to both types of consumers.
@JaiSequoia
@JaiSequoia Жыл бұрын
I think both are extremely important! For my clients I see up to 80% of site visits coming from mobile devices. I’m a squarespace designer and what is great about the platform is you can easily customize the mobile view to make the experience as easy and straightforward as possible. But I still place just as much emphasis on the desktop design… it should all start there.
@zenitsu2989
@zenitsu2989 Жыл бұрын
Agreed 💯%
@briansexton
@briansexton 11 ай бұрын
So… considering that most people commute with land vehicles nobody should make videos about improving experiences that are more common in air or water travel? And because most people read on electronic devices should nobody make videos about print design? If most people eat rice with dinner should nobody make cooking videos featuring pasta or beans? Design for different devices is not mutually exclusive.
@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.
@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.
@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: kzbin.info/www/bejne/gHPcgIl7hNWLl9U
@unstence
@unstence Жыл бұрын
I agree. Most of our web traffic comes from mobile.
@liszcgsedt
@liszcgsedt Жыл бұрын
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.
@boluwatifeolubode7284
@boluwatifeolubode7284 Жыл бұрын
What a unique channel. Thanks a lot for these type of content
@MrAldarias
@MrAldarias Жыл бұрын
Ok! This was really good, Payton!
@roebienarnaiz
@roebienarnaiz Жыл бұрын
1:01 - Layout 1 1:30 - Layout 2 2:24 - Layout 3
@saeedmirzaei1
@saeedmirzaei1 7 ай бұрын
Your content is unique. I really appreciate it.
@Adlil
@Adlil Жыл бұрын
Wow Payton. Your video this one is a gem! It open my eyes for different approach in my design.
@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 Жыл бұрын
​@PaytonClarkSmith you could still do it as a follow-up to this video.
@blackfoxwebdev4135
@blackfoxwebdev4135 10 ай бұрын
This is brilliant, just what I was looking for.
@krismatic_
@krismatic_ Жыл бұрын
A really important discussion. Thanks for sharing these ideas
@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!!!
@Shane199416
@Shane199416 10 ай бұрын
What do these layouts look like on tablet / mobile ? it would make sense to show that too
@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
@MuttaqiAliMuhammad
@MuttaqiAliMuhammad Жыл бұрын
Great video Payton. Looking forward to more ones like this!
@PaytonClarkSmith
@PaytonClarkSmith Жыл бұрын
No problem!
@jawadahmed8956
@jawadahmed8956 Жыл бұрын
Keep posting these type of videos payton❤️
@liszcgsedt
@liszcgsedt Жыл бұрын
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.
@rightpadding
@rightpadding Жыл бұрын
I love this video and the hero layouts too!
@telsamorgan5369
@telsamorgan5369 Жыл бұрын
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.
@sylviaangelova5279
@sylviaangelova5279 Жыл бұрын
Please do more videos like this! Thank you!!
@PaytonClarkSmith
@PaytonClarkSmith Жыл бұрын
Will do 👍🏻
@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.
@davidojenike4268
@davidojenike4268 10 ай бұрын
Glad I found your channel Payton
@SinaNouri21
@SinaNouri21 Жыл бұрын
Thank you so much! You've saved me a whole day of time.
@digitalnomad29
@digitalnomad29 Жыл бұрын
It would be great to see a similar video where how these section layouts need to be developed on mobile devices..
@WaleedZubair
@WaleedZubair Жыл бұрын
Subscribed! Because of the valuable content. Thank you so much
@cvetlicka
@cvetlicka Жыл бұрын
Amazing content! Been looking for something like this for weeks now. Thanks for sharing....
@dots560
@dots560 Жыл бұрын
Thank for sharing this. Couldn't like this video enough. Almost hit the like button a second time 😁
@coachpeterwilliam
@coachpeterwilliam Жыл бұрын
Your videos are the best ui training I ever got!❤
@thatWebGuySolutions
@thatWebGuySolutions Жыл бұрын
Great Stuff!! Totally stealing these!
@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! 👍🏻
@jacobnegriweb
@jacobnegriweb 6 ай бұрын
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.
@redhood7105
@redhood7105 Жыл бұрын
Nice video. Love me some non-stadard issue layouts
@sajeebhassan5393
@sajeebhassan5393 Жыл бұрын
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!
@carlellis9647
@carlellis9647 Жыл бұрын
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.
@the180degreerule3
@the180degreerule3 Жыл бұрын
Amazing episode, I avoid using timer, I let the user decide by choosing to reveal, slide, or move things based on scroll
@mpfiesty
@mpfiesty 5 ай бұрын
Thank you for this! Super helpful.
@mdqmatias
@mdqmatias Жыл бұрын
What about mobile responsive? You didn't show how should look this sections in mobile, wich has aprox. the 80% of web traffic...
@christiannaira6076
@christiannaira6076 Жыл бұрын
I really enjoyed how you explained designs in a simple way. I'm learning a lot, thanks for this!!
@doctor-dan
@doctor-dan Жыл бұрын
Great layout ideas, thanks for the video!
@digitalnomad29
@digitalnomad29 Жыл бұрын
Fantastic insightful and brilliant video
@happybirthdayrishiahmed9642
@happybirthdayrishiahmed9642 4 ай бұрын
Visitors from mobile are laughing at the corner😂
@Mumthazeer3
@Mumthazeer3 Жыл бұрын
Somrthing really useful. Enjoyed the presentation, too! Thanks a lot
@alfanur_rizal
@alfanur_rizal 5 күн бұрын
Thank you,,, We need more layout,,,
@Anna-ou9dh
@Anna-ou9dh Жыл бұрын
Great video and content, and detailed explanation. Very clear and easy to follow. Great work. Thanks for taking the time.
@ahmedredafarag5153
@ahmedredafarag5153 Жыл бұрын
Good job man . Thank for that.
@llothar68
@llothar68 Жыл бұрын
About the layout at 5:37. It would be nice for my iphone app page if we could show an vertical howto video and right is the section breakdown. How can i add vertical videos best? Not with youtube, thats sure? Vimeo?
@nikamateshvili2826
@nikamateshvili2826 Жыл бұрын
saving this one for later !
@stanswork
@stanswork Жыл бұрын
Dope man.... Very useful 👌
@jennifershen4273
@jennifershen4273 Жыл бұрын
Good stuff! Thanks for sharing!
@ManfredSpecht
@ManfredSpecht Жыл бұрын
Thanx for the real cool videos. What I would really like to see is a more mobile first approach in the designs you show.
@xavierxavier3610
@xavierxavier3610 Жыл бұрын
Hey man, I’ve been watching your videos and the information you provide in this channel is super helpful! I was wondering tho.. are you related to Chandler David Smith by any chance?
@PaytonClarkSmith
@PaytonClarkSmith Жыл бұрын
Yea that’s my bro 💪🏼
@stanford19
@stanford19 5 ай бұрын
This is awesome hey. But I was wondering about some of these elements in terms of being responsive. Like the hat one. How do I show that on a small screen size and doesn't that cause the development to become tricky because someone is going to have to code for that logic and break point behavior..
@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
@winterzealot
@winterzealot Жыл бұрын
Amazing video! So useful to me as a designer early in my career. Never stop doing what you do!!
@magedojo
@magedojo Жыл бұрын
The first 30 seconds...I FEEL PERSONALLY ATTACKED. Seriously, this was great. Some solid ideas to get me out of my rut.
@evdxb5630
@evdxb5630 3 ай бұрын
Amazing. Thank you for great content.🎉
@codenflowin1094
@codenflowin1094 Жыл бұрын
My man bro. Good shit
@andreic048
@andreic048 8 ай бұрын
I would love to see a web design course from you
@JaiSequoia
@JaiSequoia Жыл бұрын
Yes another video like this please 🙏
@Baltsar
@Baltsar Жыл бұрын
Mobile responsive sections, thank you!
@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 👍🏻
@faragashttravelagency
@faragashttravelagency Жыл бұрын
thx for this useful video. these layouts are very nice in desktop view, but in mobile (as more viewers these days) all they goes simple one in below of another... so do you have any idea about making layouts in mobile view, that goes nicer and more beautiful than most sites we see every where?
@deckerjake438
@deckerjake438 Жыл бұрын
Thank you, I’m only partially through the video. Do you have a pdf/deliverable of each type?
@ercdesign
@ercdesign Жыл бұрын
Thank you for this. I would like to know how these will scale on mobile though. A specially the last few that is not comly used. Not sure if you have a video about mobile layouts?
@otavioalexandre7575
@otavioalexandre7575 Жыл бұрын
Amazing video bro, thnaks for that!
@m1che_
@m1che_ Жыл бұрын
I legit came into this video expecting a design philosophy that utilised exactly 11 sections. Nonetheless, great video 👍
@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!
@-The-Golden-God-
@-The-Golden-God- 5 ай бұрын
Cool video, but I'd love to see how these designs translate to mobile layouts, as that's how most people are viewing websites these days. It's all well and good creating a fancy desktop website, but the skill comes in translating it to tablet and phones.
@gerardcruz3520
@gerardcruz3520 Жыл бұрын
This is really helpful! Thanks for the tips✌🏽
@viajantedotempo3718
@viajantedotempo3718 Жыл бұрын
Great video. You help me a lot to create my online portfolio. Thanks! :D
@asharmubarik388
@asharmubarik388 Жыл бұрын
such a Great winning video, thank you
@burtos
@burtos Жыл бұрын
I would love to see how these layouts could be used in a responsive site
@ThisDesignLife
@ThisDesignLife Жыл бұрын
Really useful thank you Payton
@Elminco
@Elminco 4 ай бұрын
great as always
@iuritorres
@iuritorres Жыл бұрын
make a video about choosing and combinating fonts please
@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 11 ай бұрын
@@brianbartels9580 Could you elaborate please ? I'm struggling with grids/columns for responsive
@marta_na_moto
@marta_na_moto Жыл бұрын
Any chance u can make a video about android design? With current material 3 release it's a nightmare. I have no idea how to utilize provided components to create ANTHING unique. And the automatic color pallete omg..
@yubin_jo
@yubin_jo Жыл бұрын
Awesome video!
@z911dn
@z911dn Жыл бұрын
Subscribed!!! nice content
@yourlinuxguy
@yourlinuxguy Жыл бұрын
I'm a beginner and would like to know how do you implement these designs, like how do you divide the site with columns and etc.
Use THESE building blocks for the PERFECT website
12:00
Payton Clark Smith
Рет қаралды 35 М.
9 advanced tips of layout & composition in Web Design
16:11
How Strong Is Tape?
00:24
Stokes Twins
Рет қаралды 96 МЛН
Что-что Мурсдей говорит? 💭 #симбочка #симба #мурсдей
00:19
“Don’t stop the chances.”
00:44
ISSEI / いっせい
Рет қаралды 62 МЛН
小丑女COCO的审判。#天使 #小丑 #超人不会飞
00:53
超人不会飞
Рет қаралды 16 МЛН
12 designers redesign this homepage. Here’s what happened…
12:04
Payton Clark Smith
Рет қаралды 54 М.
60-30-10 Color Rule
6:18
Jesse Showalter
Рет қаралды 2 МЛН
I fixed Iman Gadzhi's SaaS website design
3:51
Wize Templates
Рет қаралды 4,4 М.
Perfect Homepage Design Explained (in 15 minutes)
16:02
Payton Clark Smith
Рет қаралды 271 М.
Copy This Perfect Landing Page To Double Your Leads Instantly
15:27
Wes McDowell
Рет қаралды 221 М.
21 Brand New Hero Sections You Must Copy
15:05
Payton Clark Smith
Рет қаралды 27 М.
Complete Course On Layout Design (MASTER LAYOUT)
21:04
Satori Graphics
Рет қаралды 735 М.
Why is THIS the Perfect Homepage?
14:21
Wes McDowell
Рет қаралды 610 М.
6 UI Hacks I Wish I Knew As A Beginner
11:11
Tim Gabe
Рет қаралды 870 М.
How Strong Is Tape?
00:24
Stokes Twins
Рет қаралды 96 МЛН