You'll never UNSEE this amateur design mistake (how to avoid "stripey" layouts on websites)
Vložit
- čas přidán 30. 07. 2024
- In this video, we tackle a common mistake many amateur designers make: alternating colors on every section of their website, creating a "stripey" look that's not very pleasing to the eye. I'll share some valuable tips and tricks to help you avoid this and polish up your designs.
We'll start by examining a design with the classic stripy issue and explore several techniques to enhance cohesion:
☑️ Overlapping Content: Learn how to overlap sections to maintain separation without hard lines.
☑️ Using Gradients: Discover how simple gradients can create distinction between sections without stark contrasts.
☑️ Adding Lines and Shapes: See how dashed lines and subtle shapes can break up content elegantly.
☑️ Full-Width Sections: Find out how adjusting section widths can reduce the stripey effect and create a smoother flow.
By the end of this video, you'll have a better understanding of how to keep your web designs cohesive and visually appealing. If you find these tips helpful, please give this video a thumbs up and subscribe for more design insights. Let's get started!
💻 Visit Our Website: theadmin.bar/yt-tab
🗨 Join Our Free Community: theadmin.bar/yt-community
📨 Get the Best of The Admin Bar Delivered: theadmin.bar/yt-tfc
🔁 Sell More Care Plans: theadmin.bar/yt-wom
🧮 Use My Website Price Calculator: theadmin.bar/yt-calculator
📜 Get My Proposal Template: theadmin.bar/yt-proposal
☑️ Get More Done with My Checklists: theadmin.bar/yt-checklists
🔴 Live Event Schedule: theadmin.bar/yt-events
🔧 The Tools I Use: theadmin.bar/yt-tools
⚡ My Agency, OGAL Web Design: theadmin.bar/yt-agency - Jak na to + styl
Have you subscribed yet? Look how close I'm getting to 10K! 🤯 Help me get there 🙏
Yes, I am a subscriber to all your posts. I even use many of your ideas.
Hello, my name is Jonathan and I am guilty of stripes. Thanks for allowing me to come to this meeting
I'm sorry to ruin it for you forever 😂
Hi Johnathaaaaaaaaaaan
I wonder if there's a support group for us.... 🤣
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.
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
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
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 🙄
@@TheAdminBar it's in the title of your video...
@@erednmakes4863 You might as well have a sign on your forehead that says 'I lack common sense.'
@@TheAdminBarI do think the original design was fine, wouldn't call it amateur at all. I get it, you are finding interesting alternatives to the design yet the original one is pretty solid. Keep up the good work though. Tx.
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..
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 🤣
@@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 ;)
What's more, even on the desktop, visitors never see the whole page in this way. This way of presenting the page is misleading.
@@bennysh I live with this on the daily too so thanks for the question. I look forward to the reply
The background colour of a section has no impact on margins...
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.
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 :)
Agreed, prefer 1st version with minimal tweeks
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.
Agreed with these comments… and it’s also a nightmare for developers… specially those dotted borders that extend two different containers. So extra 🤣
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.
I don't think anything in this design is particularly hard... Here's a walkthrough of how to do each of the techniques czcams.com/video/cMRAL9bSqCE/video.html
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.
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.
Glad you enjoyed it!
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.
Thanks David! 🙌 Means a ton coming from you!!
Great design layout tips!
Thanks! Glad you enjoyed it!
Good stuff. Thank you!
great video to show how subtle design changes can really make HUGE changes to the overall look. thanks, Kyle!!
Glad you enjoyed it, Jeff! Thank you!
Excellent tips!
Thanks Kevin!
Great video!
Nice one!
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.
Yeah, it seems the internet is not great with nuance 😂 Maybe just break up one stripe on a stripey page, I bet it helps :) 😂
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! 😸
Loving the suggestions ❤️ we need more content like this! #guiltyOfBoringStripes
Thanks so much for the support!
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!
Not trying to call anyone out 😅 Maybe one of these techniques will come in handy !
Good ideas. Very hard to see things, though. The results are rather invisible with the lines.
They are hard to see on the screenshare for sure - but look pretty nice on the live site 🤣
@@TheAdminBar - I would imagine that is true.
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!
Glad it helped!
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 :)
Design is a journey, not a destination!
Thanks, it is insightful..
Now We can use both stripy and the non-stripy...or combine thos for maximum UX
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!
So glad it was helpful! You won't catch me talking gsap 😂
I just realized I can use the 2nd trick in mailchimp, too. Pretty cool.
Excellent, so now we can see it in Figma, how do we do this in Generate Press / Generate Blocks please?
+1 on this. I would love a video on that.
Good idea - I'll see about just recreating this page entirely :)
Came here to ask that very question - thanks @GregMurch :)
I'm guilty of stripes! Thanks for adding a different way to divide up the sections.
Hope it helps!
Yikes, I've made my share of stripey pages. I really loved this tutorial. Thanks. I am subscribing!
Thanks so much - I'm glad you found it helpful!
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!
Like this: czcams.com/video/cMRAL9bSqCE/video.html
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.
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.
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.
Websites shouldn't last forver either :)
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.
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 😂
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!
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.
Like with anything... "In moderation"
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
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.
Interesting topic. I still prefer the stripey solution. I liked the last approach though, where you get rid of the full width images.
Glad you had some kind of takeaway :)
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.
It's Figma - a design tool.
@TheAdminBar Thank You. I'm looking it up and sub'd 👍
What tool are you using in the video? Is it Figma?
Yes, Figma :)
As for me, original design looks better than second one.
Same, 2nd version looks chaotic, especially overlapping a sw image with colorful images
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
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
@@TheAdminBar Thanks a lot!
As a noob I still don't understand the first option I don't see how it helps separate the sections..
It doesn't help. The shape and overlap gymnastics just confuse the brain. Stick with stripes.
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
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!
Yeah, I'm sorry about that 😅 I do love subtle colors 😂
So how do you take your great design in Figma into a WordPres site?
Easy: czcams.com/video/cMRAL9bSqCE/video.html
7:33 Client: "i can't see the line, can you make it darker or change the background color".
Nice video! I see some issues in mobile tho. That’s why I always go
Mobile first
the overlapping looks like a nightmare development wise
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
My clients are the last people I ask about "good design" 😂
New blog post layout design video sir
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
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.
What the hell does Figma have to do with code?
I .. like .. stripes …
Awesome! 👍
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.
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! 😂
@@TheAdminBar 😂😂😂
'I am not a designer' is code for 'I don't know what I'm talking about' 😹
@@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.
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.
I am the developer who will build it - it's just a couple pseudo elements, I don't see what the big deal is 🤷
Abusive? 😂😂 We love challenges!
@@loudsisi7895 Well, as long as you enjoy messing with clip-paths and weird angle in gradients... have fun 🤩
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) .
This is very subjective dont you think?
That's visual heirrachy nothing wrong with that design...
Clients love stripes. And if they’re paying they’re getting stripes lol.
Your clients are educated on UX and UI design?!
@@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.
Non vedo nessun miglioramento di Design qui! Certo che ormai tutti si professano Designer! Lo sapete che esistono anche altre professioni? Panettiere, maccanico etc
Bella storia fratello
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.
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 😂
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.
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.