You'll never UNSEE this amateur design mistake (how to avoid "stripey" layouts on websites)

[@TheAdminBar]

Have you subscribed yet? Look how close I'm getting to 10K! 🤯 Help me get there 🙏

[@charleswillcock3235]

Yes, I am a subscriber to all your posts. I even use many of your ideas.

[@Permaslug]

Hello, my name is Jonathan and I am guilty of stripes. Thanks for allowing me to come to this meeting

[@TheAdminBar]

I'm sorry to ruin it for you forever 😂

[@blackblather]

Hi Johnathaaaaaaaaaaan

[@barefootdesigncollective]

I wonder if there's a support group for us.... 🤣

[@chrifur]

Me too, I always known I had a problem, but I couldn’t figure out what it was. I now know that I’m a stripy section abuser.

[@erednmakes4863]

Hi, recently I've been hitting the hard lines again. I was clean for 3 years, but I just tried one again. Now I'm hooked. I can't stop striping. Hard lines. I just love them

[@erednmakes4863]

I disagree that this is an amateur mistake. Clear distinctions between sections is an indication to the user from an accessibility perspective that you're in a new section. Little flares of negative margin or edgy transitions are good, but as long as it's easy to ready for everyone. Your opinion is not the driving force in design. It's your customers and readers. So I think we should be careful telling newbies that stripes should be avoided completely

[@TheAdminBar]

Tell me you didn't watch the whole video without telling me 😂 "stripes should be avoided completely" was not only never said, I specifically said the opposite 🙄

[@erednmakes4863]

@@TheAdminBar it's in the title of your video...

[@ArpLaszlo]

@@erednmakes4863 You might as well have a sign on your forehead that says 'I lack common sense.'

[@johnathonpowers4053]

@@TheAdminBar I watched your entire video. Your concept looks bad.

[@Joe-ss9cr]

I'm not sure if these are improvements. Often with design, it's more about balance. I feel you just added more noise to compensate for flaws that only exist in your own mind. A few tweaks can get you out of the stripy flow, without having to create a circus. And depending on how tall each section is, the "stripy" flow can even be desirable.

[@TheAdminBar]

I hear ya - I was trying to illustrate all of these techniques in one video. In reality, I probably wouldn't apply ALL of these to the same page - it was just to give people examples. Do what makes you happy :)

[@martinbarron6545]

Agreed, prefer 1st version with minimal tweeks

[@FlaviusCalinTofan]

There is NO strip efect. You only see it because you look at the design .. as a designer, zoomed out in figma. In real life, you see that webpage on mobile in 90% of the times, and what you get is a whole screen with a background,maybe even 2 depending on the section lenght. Remember to NOT analyse a webpage design from the “aerial” view of figma. There IS NO such view in real web browsing.

[@bobbyboxer2664]

Agreed with these comments… and it’s also a nightmare for developers… specially those dotted borders that extend two different containers. So extra 🤣

[@bennysh]

this creates huge problems for mobile screens. if I was the developer, I would want to see how these shapes work when changing window sizes, what happens to the margins etc..

[@TheAdminBar]

I am the developer 😂 I'm not sure what would be difficult about this design tho.... I've had a few requests to build it, so I guess that will be next week's video 🤣

[@bennysh]

@@TheAdminBar my comment was for the designers creating nice desktop design but forget to consider how that design will look on mobile. I had cases like that so I'm a little triggered ;)

[@NicolasLfv]

What's more, even on the desktop, visitors never see the whole page in this way. This way of presenting the page is misleading.

[@wpsoshub]

@@bennysh I live with this on the daily too so thanks for the question. I look forward to the reply

[@dazman88]

The background colour of a section has no impact on margins...

[@charleswillcock3235]

This week I was updating a clients website who had commissioned a graphic designer to generate some backgrounds. The designer had, I suspect never built a responsive website. What can work well on a design program can become a much bigger challenge when applied to a responsive website. All problems can be overcome, but I essentially had to create two different designs for some pages. Better designs are not a bad idea but most small businesses want to spend the least possible on a website. Stripey designs tend to lend themselves to being responsive. Good food for thought. Thanks for sharing.

[@TheAdminBar]

I don't think anything in this design is particularly hard... Here's a walkthrough of how to do each of the techniques kzbin.info/www/bejne/mX61cn9vl7ikeac

[@madewithjoyandgrace]

I used to use this "stripey" look before because pretty much every website back then was like this. However, I never liked that there's a hard distinction between sections. I liked things to move fluidly onto the next and only use colour-contrasted backgrounds for few sections I really want to call attention to. Thanks for these tips! Love your videos as always ❤

[@rubruiz]

I agree that using stripes is often the default section separation system and while sometimes it makes a lot of sense many other times is a sign of lazy design. I'm guilty of it. Thank you for giving me alternatives to make my designs better.

[@paulhildmann8392]

Thank you! Great inspiration for using shapes to separate sections. I'm working on a site now so I will test it out. Adding margins on the left and right is genius. It makes a site that's not graphics heavy look very minimalistic. Very nice.

[@TheAdminBar]

Glad you enjoyed it!

[@lukedelalio3155]

Good ideas. Very hard to see things, though. The results are rather invisible with the lines.

[@TheAdminBar]

They are hard to see on the screenshare for sure - but look pretty nice on the live site 🤣

[@lukedelalio3155]

@@TheAdminBar - I would imagine that is true.

[@MrBalloonatic]

thanks or sharing that, i would love to have seen how you would then translate that new design for mobile so that 9 doesn’t feel like the whole thing is a giant white block or that the gradient shapes are too blocky. Keep up the great videos and looking forward to the next one!

[@DavidWaumsley]

I love this type of content. Brilliantly delivered Kyle. I remember wanting these full bleed hero image backgrounds so badly. Now I think it must be a template.

[@TheAdminBar]

Thanks David! 🙌 Means a ton coming from you!!

[@thepurpleufo]

Some very good ideas here, and I'm sure I will use some of these ideas on some future sites. I know a lot of people seem to be in denial about the stripe problems and don't want to give up their stripes, but all they have to do is realize that (as you said) they don't *have* to use all these ideas on *every* site. As with many things...the key is moderation. Thanks for this excellent tutorial, Kyle.

[@TheAdminBar]

Yeah, it seems the internet is not great with nuance 😂 Maybe just break up one stripe on a stripey page, I bet it helps :) 😂

[@QuanticDreamer]

I just realized I can use the 2nd trick in mailchimp, too. Pretty cool.

[@codingchewie]

Interesting approach. I’m curious how you handle some of these decisions on mobile when it comes to the testimonial. I do think for the above fold image the gallery underneath should be flipped. There’s too much going on from the images and the feet. It would seem better since the left side has the white gradient to add the images there and text block on the right. Just my 2 cents.

[@JeffTincher]

great video to show how subtle design changes can really make HUGE changes to the overall look. thanks, Kyle!!

[@TheAdminBar]

Glad you enjoyed it, Jeff! Thank you!

[@aqil199]

Thanks, it is insightful.. Now We can use both stripy and the non-stripy...or combine thos for maximum UX

[@RobMcTaggart]

I'm grateful for this video. I was a little triggered at first, because I lean on striping pretty hard.You've given me the nudge to move outside the box and some great tips on how to do it. Thank you!

[@TheAdminBar]

Not trying to call anyone out 😅 Maybe one of these techniques will come in handy !

[@cseymour97]

This is good stuff! It's nice to see some process of some more realistic websites. We usually see people working on really insane designs that will require three.js and gsap to accomplish. But I reality websites like this are what we work on most often in the field. I quite like some of these tips as often times I'll want to make a design feel "lighter" with more space and I think this helps a lot!

[@TheAdminBar]

So glad it was helpful! You won't catch me talking gsap 😂

[@sergeykyrylyuk1342]

As for me, original design looks better than second one.

[@axl8603]

Same, 2nd version looks chaotic, especially overlapping a sw image with colorful images

[@GregMurch]

Excellent, so now we can see it in Figma, how do we do this in Generate Press / Generate Blocks please?

[@Gojiyaravi]

+1 on this. I would love a video on that.

[@TheAdminBar]

Good idea - I'll see about just recreating this page entirely :)

[@DavePerth]

Came here to ask that very question - thanks @GregMurch :)

[@BluegrassJess]

I love hearing your thought process and explanations! But for my poor tired eyes, I hope future examples aren't such a faint grey because it's hard to see on the screen!

[@TheAdminBar]

Yeah, I'm sorry about that 😅 I do love subtle colors 😂

[@RealBasicsDotCom]

I gotta say it's beautiful, as are all static designs done with drawing tools (and Figma is still a drawing tool.) I also gotta say I'm going to incorporate what I can because I also really get tired of the "stripey" look. That said? You're adding a TON of decision-making + work for the dev who has to make this responsive. Again, not saying it's not better, but some of the things you can just plop down with a drawing tool don't just happen that way when you have to do it with CSS.

[@TheAdminBar]

As the person who has to develop what I'm designing - I hear ya 😂 I've already had a few requests to build this design out, which I may do next week. I'm honestly not sure what here would be difficult in the build - but I guess we'll find out 😂

[@niaskywalk]

Great Video! I have used the overlap thing, but not the subtle shaded shapes in the background. I get tired of the gradient blocks and the solid blocks from time to time. I also use box shadows as a way to differentiate content... which sounds like it can be too much, but it works better than blocky blocks and stripes on many of my projects. 🤙 Thanks for the tips! Also, adding my vote for the build video! 😸

[@ssjordan34]

New to web design. I knew there was something off about the section striping. Now i am equipped to partition sections without it. Thank you!

[@TheAdminBar]

Glad it helped!

[@michaelinglisdesign]

I think complexion reduction is always welcome. The visual cues are subjective, I wouldn't use some of those suggested, like gradients, those can age quickly.

[@TheAdminBar]

Websites shouldn't last forver either :)

[@exgeeinteractive]

You can introduce a new component to sort of break the repetition. This is usually the case for projects with strict design systems. Say, add a few eye CTA's or ads. It's great for UX and overall page flow too.

[@TheAdminBar]

Like with anything... "In moderation"

[@metasaman]

Interesting topic. I still prefer the stripey solution. I liked the last approach though, where you get rid of the full width images.

[@TheAdminBar]

Glad you had some kind of takeaway :)

[@snapgraphicsuk]

Great video!

[@QuanticDreamer]

Stripes aren't amateurish - they are used widely because they work. However, they do get get boring after a while, so it's good to have some alternatives.

[@mayanikolova8353]

Love this. I am sure we have all been guilty of the stripy design haha, and these ideas go along way, thank you. Feeling inspired :)

[@TheAdminBar]

Design is a journey, not a destination!

[@bjoernzosel]

I like the changes except the pics overlapping the hero image. Too busy for me. But yeah I am also guilty of stripes. 😅 Would be great to see how to built the gradient

[@TheAdminBar]

I'll admit, the example for overlapping wasn't best here. Here are a few more examples that I think better demonstrate: share.cleanshot.com/33hf6r9f share.cleanshot.com/CKtPn9F8 share.cleanshot.com/kyKj3DLd share.cleanshot.com/fSxKTsHs

[@bjoernzosel]

@@TheAdminBar Thanks a lot!

[@loudsisi7895]

Loving the suggestions ❤️ we need more content like this! #guiltyOfBoringStripes

[@TheAdminBar]

Thanks so much for the support!

[@KarenBrand]

I'm guilty of stripes! Thanks for adding a different way to divide up the sections.

[@TheAdminBar]

Hope it helps!

[@davidlevinson2460]

Yikes, I've made my share of stripey pages. I really loved this tutorial. Thanks. I am subscribing!

[@TheAdminBar]

Thanks so much - I'm glad you found it helpful!

[@raya4230]

WOW! Such subtle changes made such a dramatic improvement. May I please ask what software you're using? I do mostly WordPress websites so I am unfamiliar with the software you're using in this video.

[@TheAdminBar]

It's Figma - a design tool.

[@raya4230]

@TheAdminBar Thank You. I'm looking it up and sub'd 👍

[@MrOliver1444]

Nice one!

[@collectiveunconscious3d]

For this type of design, formal, clear, basic… I think you can stick to the stripy stuff. Pretty sure the clients would say it looks messy and confusing without them. The designer would argue that it looks generic, but that’s often what you want in a commercial setting, I would side with the clients on this one

[@TheAdminBar]

My clients are the last people I ask about "good design" 😂

[@danielforster719]

Good stuff. Thank you!

[@leonardo_iann]

Ehy Kyle, super video as always! As regards gradient shape, how would you do it with GenerateBlocks Pro? My idea would be to create it with e.g. Figma and then to export it in Gb as background image but not sure if there would be better solutions!

[@TheAdminBar]

Like this: kzbin.info/www/bejne/mX61cn9vl7ikeac

[@StarGuardianKassadin]

the overlapping looks like a nightmare development wise

[@kevinroberts3789]

Excellent tips!

[@TheAdminBar]

Thanks Kevin!

[@cantonajohan]

Nice video! I see some issues in mobile tho. That’s why I always go Mobile first

[@healthadvice3091]

The gradient you apply is hard to do by code or if you wan to just make it image it will adds up the website's load which is not good for seo

[@TheAdminBar]

I could put 50 of those gradient SVGs on a page and still get a 100% performance score 🤷 They're 4kb. That's probably 1/100th the size of your smallest png.

[@antwarior]

nothing is wrong with stripy websites, just don't make everything look blended and you'll do fine, alot of clients wont care if the site has photos over lapping the hero section or not, they just want their phone to ring from what you built so if it works don't break it to please other designers

[@dazman88]

7:33 Client: "i can't see the line, can you make it darker or change the background color".

[@barbmiller3386]

So how do you take your great design in Figma into a WordPres site?

[@TheAdminBar]

Easy: kzbin.info/www/bejne/mX61cn9vl7ikeac

[@haltama]

What tool are you using in the video? Is it Figma?

[@TheAdminBar]

Yes, Figma :)

[@jzajzz]

As a noob I still don't understand the first option I don't see how it helps separate the sections..

[@allansloan3373]

It doesn't help. The shape and overlap gymnastics just confuse the brain. Stick with stripes.

[@TheAdminBar]

It's not supposed to "separate" the sections, it's supposed to connect them. Here are some examples that might illustrate the point better share.cleanshot.com/CKtPn9F8 share.cleanshot.com/33hf6r9f share.cleanshot.com/kyKj3DLd share.cleanshot.com/fSxKTsHs

[@devdo987]

This is a terrible or misleading title, the first design is not a mistake or amateur by any mean, in fact it works way better than the right option.

[@TheAdminBar]

Thank you, dildo987

[@dazman88]

This is very subjective dont you think?

[@Element-v1t]

New blog post layout design video sir

[@WickyDesign]

Great design layout tips!

[@TheAdminBar]

Thanks! Glad you enjoyed it!

[@GOOD-ks5rg]

I am not a designer. But I have a strong need for estetics and ecen more structure. I don't like your design ideas at all. I very much prefer the structure of the initial version over the "flow" of your so called improvements.

[@TheAdminBar]

Oh well, I guess I'll just put my 25+ years of design experience in my trunk and leave town - your intuition is no match to that! 😂

[@ArpLaszlo]

@@TheAdminBar 😂😂😂

[@ArpLaszlo]

'I am not a designer' is code for 'I don't know what I'm talking about' 😹

[@GOOD-ks5rg]

​@@ArpLaszlo I indeed meant that I have no professional knowledge of design. I have however a very good idea of what I find pleasing to my eye and easy to read. And that is definitely the stripy design.

[@groooobytooby1306]

I .. like .. stripes …

[@TheAdminBar]

Awesome! 👍

[@mrpink7395]

Candy cane looking websites drive me a bit crazy as well. 😂 I like the changes you covered here. However, shame on you for using Figma. I know it’s fun to work fast, but the code behind it sucks. Clean optimized code is just as important as good design.

[@TheAdminBar]

What the hell does Figma have to do with code?

[@einatblackrose]

I was just thinking about the developers who will actually have to create those effects in CSS... This is abusive. I personally don't see anything wrong in the stripes when done right.

[@TheAdminBar]

I am the developer who will build it - it's just a couple pseudo elements, I don't see what the big deal is 🤷

[@loudsisi7895]

Abusive? 😂😂 We love challenges!

[@einatblackrose]

@@loudsisi7895 Well, as long as you enjoy messing with clip-paths and weird angle in gradients... have fun 🤩

[@loudsisi7895]

I do! 😎 While he was designing, I was considering different approaches to make it responsive. As a designer and developer, I test the tricky parts of my design before handing it off. Sometimes, I include the code with the design because it's often easier and faster to develop certain parts of the design than to design them in Figma ( for each breakpoint) .

[@purplekrakenyut]

Clients love stripes. And if they’re paying they’re getting stripes lol.

[@TheAdminBar]

Your clients are educated on UX and UI design?!

[@purplekrakenyut]

@@TheAdminBar they don’t have to. They want something simple, and they like how stripes look. They also pay the bills. Guess who wins. lol.

[@AvidAfrican]

That's visual heirrachy nothing wrong with that design...

[@FlaviusCalinTofan]

Cheesus, THERE IS NO STRIPE efect. It’s only in your head man. You see those stripes because tou look at it zoomed out. Do you ever realy BROWSE your designs ? You Never, ever analyse a design zoomed out in Figma or Photoshop. You analyse it simulating real life, mobile screen, small mobile screen, large mobile screen, desktop, etc. Never, ever zoomed oit like a poster. IT is NOT a poster.

[@TheAdminBar]

You're nuts if you can't notice that scrolling down a site. In fact, I can guarantee it's going to bother the shit out of you from here going forward - and you're going to always think back to this comment in embarassment 😂

[@kingsulaiman9199]

I agree with you. Users typically view websites by section rather than taking in the entire layout at once, especially on desktops where the screen size allows for scrolling and exploration. Google's emphasis on mobile-friendliness in indexing means that websites providing a good experience on mobile devices may receive better rankings in search results. Therefore, focusing solely on desktop design is not sufficient; mobile design is more crucial as it impacts SEO and overall visibility. From my understanding, Figma designers and most website designers aim to impress clients with mockups first. However, the mobile version is more important than debating between striped or non-striped designs.

[@Rabieshund]

Stripey websites look like a free Wordpress template from 2010. It looks boring and cheap, not very elegant, just functional. It’s the IKEA of web design.

[@giovanniforesti2019]

Non vedo nessun miglioramento di Design qui! Certo che ormai tutti si professano Designer! Lo sapete che esistono anche altre professioni? Panettiere, maccanico etc

[@TheAdminBar]

Bella storia fratello

[@johnathonpowers4053]

Kyle, I wasn’t going to say anything, but since you did what you did... well, you know what? I’m going to. You're wrong here. Your design looks terrible. Clear distinctions between sections are important, and no one ever looks at a website in the way you’ve shown in your example.