PRO Vs AMATEUR Website Layouts (With Examples)

[@EduwareIzekor]

Although I am an advocate for good design in reality all that matters in the end is if the website is getting any results. I can guarantee that most of those flashy sites really throw the user off unless it's done well. A website might look good visually but perform horribly. At the end of the day looking at a website from the outside does not say much. We want to know if it is reaching the goal it was set up for.

[@Adam326]

That's true, if you make a beautiful website that's hard to use or inaccessible, people will leave. Similiarly, if you create a website that works and presents information well, but looks ugly or fails to fit with the client's brand, no one will want to use it. I think he shows good examples of "ugly" websites with poor usability, and somewhat flashy websites but still much more usable.

[@EduwareIzekor]

@@Adam326 You make good points, but I always point people to websites, especially funnels that are super ugly or even websites that only have copy but still convert like crazy, due to the copywriting that speaks to the target audience. But I always say that good design that does not obstruct the user, but works in favor of the goal of the website will always win. There is a lot to learn from the video though. The creator did a good job to point out some things to keep top of mind.

[@olsixhaferaj9955]

@@Adam326 Well I've worked in CRO for many years, and I can say that if you have an amazing copy, even a Google Doc will work better than most of the most flashy websites out there. To me, looks are maybe 10-15% of what makes a website... Unless of course, you need to create a brand, then looks matter

[@TheRealGoldzilla]

I'm working for a wholesale company and their clients prefer simple and easy to navigate sites more than those modern site these days. One of my older colleague told me that more flashy means less trustworthy since those who buy product from us are older people who is not familiar with today's moving things on the internet

[@TheMightyTata]

Agree here. A lot of the creativity being showcased in the industry lately is visually appealing, but the real purpose of a website needs to be thoughtfully considered. Form follows function, not the other way around. A potential client of your own client is looking for answers and they want it fast and without friction. if you make them work for it because your layout and design is unfamiliar, difficult to navigate, or just overwhelming, they're going to leave. Websites aren't supposed to be hung up in art galleries, they serve business cases. They should be as delightful as possible so these kind of things are awesome for inspiration, but the takeaways you implement in the real world need to exist within the constraints of usability and usefulness. Low code tools are creating a wave of euphoric forgetfulness on these critical matters.

[@gzusrock]

That first website, "Merch Redefined," used waaaaay too much animation in the hero. People will have trouble focusing with the moving text colors and all those little boxes. Plus it was still hard to tell what the purpose was. I agreed that a lot of the "amateur" sites had some major design issues but most of the "professional" ones, while designed visually better, made me wonder about things like responsive layout and accessibility, especially with that last form.

[@hunterefe8287]

I am a designer and I understand the work put into it and all but I still had problem focusing on a particular thing and at a point I started feeling light headed.

[@georgeeno6956]

I totally agree with everything you have said here as i had the same thoughts in my head. I'm always thinking of how it applies on mobile and also how busy it is and i feel designers these days are designing for other designers to be impressed and not thinking of the everyday man or woman

[@aidenberzins]

The accessibility piece has always been a core part of my applications/designs and many many of the companies I have worked with treat it as an after thought if they even recognize it's importance at all. It's usually about prioritizing flashy and trendy designs without too much thought for the true efficacy of the site.

[@SimothyInOz]

Still photos and one video would have been so much better

[@wkolcz]

I was going to comment on what the ADA score would be on this page for people with ADHA and other neurodivergences. This could never pass our UX and legal team. It looks neat but is way to hectic and distracting.

[@JovenAlbarida]

The definition of him about PRO websites is the one that have lots of Visual effects.. By the way most of the real PRO websites created by professional webdesigner, have lots of visual impacts and it LOAD very fast, for the SEO and ranking of the website. For me The good indicator or metrics of your website if it done with PROs, is that it sells tons of money, and reach business objective, reach large customers

[@Abioticwinter]

This guy loves the over the top flashy websites. But I like so many click off of those. Just to busy looks like a kid with adhd made them. But each to their own.

[@sinatraforeign]

simpler matter so costumer shouldn't get lost

[@syed.simanta820]

Too much crowded 😅 I have seen awwwards websites also look garbage same and shit UX

[@robertbruinsmaXXXX]

I 100% came here to write this. No one likes Kaotic websites for professional products etc.

[@syed.simanta820]

My clients won't even pay $1 for awwards websites or websites like these

[@excellenceadigun9093]

That’s cool and very understandable. I would even agree with you over some of the examples given; trendy and loud is not always, or even usually, better. Still, would you or your clients prefer the "noob" websites? I’d say, look at the "Pro" websites offered, and think of them as the extreme on a slider that goes from the "Noob" sites to the "Pro" ones. You would most likely want your sites closer to the "Pro" side of the slider than the "Noob" side. So, create/choose appropriately. You don’t have to go all out, but the point is, “Be intentional, and think of the experience you are offering your site’s visitors”

[@killah3721]

The thing is that these good examples are truely great for the most part, you are showing case studies from the design agencies that have 20+ employees working on the website, including all the different skills they all possess. If you are working alone it would take a very long time to create all the different custom made animations, illustrations etc. Although I like the video, and you make some strong points it's not a complete picture.

[@luckerooni1153]

What I gained from this is that setting up the page to have a shaded (white/gray/black) head banner followed by a single color banner taking roughly 1/4 to 1/3 of the page with some low quality advertising material followed by a white page with a clunky and yet somehow formulaic layout is pretty amateur. Some of the pro layouts are a bit extra and distracting as well but they all agree that delivering an experience from the first moment and then keeping that going matters which ultimately is good. Treat each piece of information as part of a grand design that the user is going to feel an emotional reaction of some kind when they see it, and that emotion will reflect on the product, so be boring and lazy at your own risk.

[@DesignSpo]

Great analysis! Thanks for sharing

[@AtomicPixels]

Haha that was solid rebut

[@janisakmentins6414]

I disagree, that 7-Elevan page looks horrendous. Way too busy with colors that don’t work together

[@cephcottez776]

Yes that page is using more than 5 colors😂😂😂😂

[@TokyoXtreme]

The text is nearly illegible, with small, black fonts on dark backgrounds.

[@snerp]

One key aspect I think needs to be stated is that we as designs would love to create amazing looking designs all the time...we are essentially artists. Yet in real life, you still need to work with the client, and sometimes that means a lot of sacrifice on creativity regardless of how you present your ideas based on your knowledge and expertise. It's an unfortunate fact we need to navigate very carefully without frustrating the client...trying to at least meet them in the middle. I would say more clients tend to lean towards a simple and easy to read/navigate website. Of course this depends on what type of business your client is marketing, and how open they are to stepping outside the box.

[@Sashad2003]

Thank you for the video. Very good examples. It’s also important to talk about the mobile version, which is visited more often than the desktop version these days. We are talking about 70% of users. Unfortunately, the mobile version should be simpler and without unnecessary animations to improve performance, and thus the site again becomes a little more boring. It is also worth understanding that beautiful design is not always correct from a UX point of view. It often happens that a beautiful website has no conversions, while a simple and clear website brings in significantly more money to the client.

[@aidenberzins]

With the advances in CSS I don't think we have to minimize as much as we did in the past as far as animation and bundle sizes go. But it is certainly disappointing to see an outstanding desktop design only to a very minimal mobile design that clearly was lacking much effort.

[@andikafebrianto4021]

Your video has been incredibly inspiring to me as a beginner.

[@1ReaZon]

There is a lot of debate regarding busy vs plain. Busy doesn't necessarily mean chaotic, and plain doesn't always mean novice. The site should always be graded by how well it serves it primary purposes. The navigation and functionalities all being a part of this.

[@circleinforthecube5170]

plain is just blandness with good pr

[@PeterIngersoll]

A whole lot of accessibility fails on many of these sites. Accessibility does not have to be ugly, but flashy needs to tempered. SEO isn't great either - with no links listed, I had to search for the sites and even with viewing the content on pages it took some work. Great design is very subjective, but also measurable based on achieving objectives.

[@exgeeinteractive]

It's kind of hard to explain to clients that product design isn't supposed to be 100% on brand. But yeah, definitely weird choices on his examples of "PRO" designs.

[@macarthurweb]

My thoughts exactly. A lot of really impressive designs are great for most people but not accessible for all. Some of the colour choices leave a lot to be desired. Black (or dark) on white might be considered boring but at least most people will not struggle to view it for longer than 10 seconds

[@Witchact]

Man i really love this video, not only you give us inspiration but also save our time to analyze the layout. If you have time please make more of this kind of vid

[@DevonHong]

thanks for laying this all out. incredibly helpful and inspiring.

[@victorcallender1311]

Creativity and all that are important and nice, but keep in mind that you're usually drawing a variety of people to your website. People with phones or laptops are going to exit a website when they start to feel uncomfortable, struggling with tiny font sizes. I noticed some of the background colors cause a difficulty to recognize the word. If you have too many things on a page scattered oht like that it could cause confusion to a customer. Creating a website where customers can read and understand is a priority, and then you can start being creative.

[@jtr549]

Some great examples in this vid

[@talons2112]

I like the highlighted text links.

[@gruvygraphics9984]

This was very helpful. Thanks

[@burntworks]

Fantastic! thank you for your advise!

[@user-cr2sp7my8h]

Great examples!

[@BenjaminJohnson-qe8kq]

Very well spoken, I dig it.

[@maerosss]

Great work, nice explanation. It can be hard to actually make a reasoning for a better design, apart from saying just "look at this, it just looks better... because it looks better". The only one I don't really agree with is the "better" portfolio (3:02). This is one of those cool & modern websites, that are all over the place and super confusing. I have literally no idea which of those boxes leads where, or if it's even clickable. What's really funny is the designer of this thing possibly knows it as well at 3:42 (Jim Carrey on the right) 😄

[@iremspor]

exactly what i was thinking, they knew the portfolio is so overwhelming that they had to add that in there, not an indication of good design

[@lilybideau521]

this is so many valuable information and knowledge, thank you so much !

[@MainInternetUser]

Most users would profer those simple ones, the bright colors, crowded text and over the top animations really makes the user lost and not know whoch information to look at

[@DeaconuDanAndrei]

This is gold content, much appreciated!

[@Cherri.blossom]

For the first example design, how would that respond to a mobile screen size. Instead of the grid view will it only showcase 1 video?

[@CaterStudios]

On mobile I will make the rest of the code hidden and show only ➌ tailored versions in vertical… that will be best responsive. On tablet ➋ per row and ➏ in total. Is a nice design concept, I felt it while I watched

[@pondermars.9900]

Dude you are amazing. This is awesome content.

[@pablo_two_wheels]

Timestamp: 0:00 - Intro 0:25 - Hero section 2:22 - Portfolio page 3:45 - Case study page 5:25 - Benefits section 8:00 - FAQ section 9:45 - Features section 11:55 - Demo section 13:55 - Product section 16:30 - Comparison page 19:00 - Testimonial section 21:00 - Contact us

[@AestheticUIUX]

❤

[@omohitofullhd]

Do you know the name of the website at 3:30 ?

[@humbertg.9661]

Good video, however I always wondered why this kinda review are always focused on desktop and not mobile. I love design too, but I bet that half of the "good" sites you have mentioned will fail in a mobile test, which is highly severe since 90% of the internet traffic comes from mobile. Cheers!

[@jonnysegway7866]

Agreed, it would be interesting to see the 7-11 on a mobile.

[@jpfivex]

Very articulate, good quick important key points, well-spoken.

[@PrazgreenStudios]

thank you considering my brand, i have a simple, yet amazing vision for my site

[@AlThePal78]

The comparison I thought it was a outside company comparing in that site I did not realize until you said something about it that it was the actual company comparing itself. Also the right nav bar should change depending on what section it is in that would be cool too

[@EliHudson-k5v]

vid! Would definitely watch a part two.

[@iAmPerflexed]

Ey, I'm early to a channel. Look forward to seeing where this goes, this is great content! :D

[@DesignSpo]

Glad to have you, thanks for the compliment!

[@ismailfaturrohman4858]

This is so great segment. Thanks alot

[@davidvultur8704]

This is so great! Subscribed, we want more like this.

[@thomaslambertt]

Great analyses! Will do that more thoroughly when looking for inspiration.. Keep it up!

[@DesignSpo]

Thank you! Best of luck on your journey

[@Matthijs1308]

Great video, keep em coming! But ehm... shouldn't you be on the Polar Express?

[@raptordoommetal4714]

You really see on what project the girl from the 3:30 website worked on ? It's crowded and uneven, I don't understand a single thing on that website. It's beautiful I'll give you that

[@bakeraus]

Make everything Neo Brutalist and you are a PRO

[@andradlegacy6862]

This is really good man. Thank you. I'm absolutely new yet i can follow fine. Good value content

[@Baker_95]

The way you fail to mention how most of these graphic & motion heavy websites will be terrible for accessibility users says a lot about your knowledge.

[@ShirelShalom]

Great video & explanations! Thank you!

[@AlThePal78]

My problem with the seven eleven site is that they not using 7 11 colors. and it really is not portraying anything to me of importance but that it looks amazing.

[@neomode]

A very very very personal opinion

[@RocksStocks]

Thanks for making practical and useful content.

[@DesignSpo]

Glad you enjoyed it, thanks for watching!

[@hisanzee3052]

Great Video Man! Loved how in-depth you went into this. Great stuff! Subscribed because of your attention to detail and effort.

[@DesignSpo]

Glad you enjoyed it, thank you!

[@joe.gedds.developer]

Where are the links to each of the good website examples in the video description? 😭

[@BLTspirit]

🔥 vid! Would definitely watch a part two.

[@anandasir108]

I am a web developer 😊 Your video grow my knowledge thanks🎉

[@mykee1155]

I worked as a professional dev and used to be that developer like this dude in vid. I would go over top and use flashy designs but my senior devs never liked it. They told me think like a client would, those flash websites would be to confusing, so now I make simple websites that are easy for the average user. I would say it is opposite

[@MegaNakmuay]

Hi, i can't find the 7 eleven website that you show in your video. Can you share the URL please?

[@kierinflanagan1241]

Any luck with finding it?

[@carlandres3319]

Can you review analytics dashboards?

[@teewhite7061]

Awesome breakdown. Do you have a Figma course out to learn UI from or one you suggest?

[@DesignSpo]

Thank you very much! I don't believe in courses because they're one-size fits all and tend to become outdated fast. Instead, I launched a design community where I give you case-studies, breaking down new and great designs every week. You can also chat with other designers, build your portfolio, and model the design systems from these great websites. You can check it out here: designspo.co. Thanks again for your comment!

[@themovingaveragetma2642]

Well, websites are designed for customers, not website critique. The users/customer don't really care about what should have and shouldn't have been on the website. As long as the website is aesthetic enough and functional, that's all that matters.

[@_chinocabron]

Hope you're not a designer because your comment is really mediocre. As designers we should not only aim at the customers and users needs but also to make our professional field evolve through quality work and that's achieved through many things including critique from fellow professionals.

[@TheMightyTata]

Design isn't it's own justification I think. It's great to create and expirement because you're right this is how progress is made! However, we need to remember that the purpose of web design is to drive a business goal forward, the two can't be at odds, this means all the artful exploration needs to be distilled a bit in the real world to remain useful.@@_chinocabron

[@derciojds]

If there are two websites offering the same services, same quality and prices but only one website is very well designed. Guess which one would inspire more trust? Design matters a lot.

[@Yeims1]

What is "very well designed"? "As long as the website is aesthetic enough and functional", I agree with that. One of the problems of the modern art today is that artists are making art for other artists and experts. Not for regular people, and that is why regular people can't connect with art, can't understand or feel it. Designers who design for other designers will find similar results. You don't have to be super creative and avant-garde all the time. In fact, trying that creates stress and anxiety, resulting in lower quality work.

[@themovingaveragetma2642]

@@_chinocabron read the last sentence again

[@epicsseven7686]

While I do agree with you regarding a dull website that doesn't express the purpose of the website from a designed perspective. Some of the pro websites that you showed, are the other extreme. Websites that are too busy with over the top aesthetics. These types of websites, is like watching a high fashion show where the models wear those over the top clothes that weren't meant for wearing. But solely about aesthetics. The average web visitor doesn't have the patient for complex navigation and flashy animation. To the visitor, it's a distraction, where they never come back. Simple navigation should always be the key, without overdoing it.

[@junebanks4163]

You should’ve had the breakdown points for this video , like time stamped links for the different sections you included when breaking down the video

[@gilltestudent8176]

Subscribed. You got a good vibe man!

[@DesignSpo]

Thank you!

[@trishjones]

Gosh, I learned back in 2004 that flashy websites are terrible for SEO. And here we are in 2024 with the flashy websites. Nothing has changed! They are still terrible for SEO! If I have to choose between looking good and getting found, plus converting, I'll seek out the latter two every time. Good looking sites don't put money in the bank, converting websites do.

[@UcheOgbiti]

Can you please share links to all the websites?

[@Louis-zl4tp]

Feel like this video could have been called Wordpress vs webflow 😅 great content!

[@anniethewild]

One thing I've been told is that sometimes my designs look too template like. I'm looking for ways to break out of that extremely basic format

[@antoniok.486]

I love how some people defend the amateur wp themes. Yes some of the "pro" websites are a bit extra but that's still better than blocks of text I'll never bother reading mashed together with random images and colors

[@xenicmark]

I'll tell you what's anateur. Having a flashy website that looks really good on desktop but is barely responsive or perfomant on mobile. It would be nice to see the website test scores on all these sites.

[@chrissmit6439]

A good developer gets creative, an excellent developer gives the client just what they want.

[@tracyrage7560]

good work! thanks!

[@DesignSpo]

Thanks for watching, glad you liked it!

[@flix-tw5ow]

Great video! Loved it.

[@waren41]

Thank you for YOUR opinion

[@Brands-sh]

fantastic. congrats man

[@m-create]

You are really good at what you are doing 🎉

[@haydendurow9904]

Needed this video.

[@BlueSquareInWhiteCircle]

Design is taste, trend and clout driven sale of the idea-impressioned value of products. It has objective problem solving parts to it ,for sure! but its still subjective as a whole. People who try to tell you otherwise are trying to sell you something imo

[@ElReicz]

Lot of great ideas, thanks for the video

[@seyitdrms]

17:20 i guess thats because they wanted to make a different look between red and green as setting green to yellow so colorblind people can see the difference between yes or no

[@AleksPopovic]

This is a really good video with some very diverse and cool examples. Your pacing is also excellent.

[@DesignSpo]

Thank you! Glad you enjoyed the video

[@uiuxlearner1769]

Thanks for your video.

[@zhanezar]

subbed great content, thank you algo-god for showing me this

[@waffletube5707]

What was used for all those animations for RNNs 7 Eleven page? Love it

[@seanmartvt09]

Most likely GSAP

[@TomLally]

I’m so for the cool looking websites. But what about their website speeds? I would think the cool websites with all these moving animations will require more code? Is the goal for less and cleaner code? I’m building my photography website again and I’m thinking if I should keep using divi. I hate standard and want to stand out.

[@zafit02]

awesome video thannks a lot you gained a suscriber :)

[@DesignSpo]

Welcome! Glad you enjoyed

[@Mmo2718success]

great info.... thanksss

[@AidanBelasco]

Great video!

[@DesignSpo]

Thank you!

[@gaiascuba8844]

how can i get in contact with some of your designers to do redo a website?

[@dailydriver5942]

I do want to know the difference!!

[@dee23gaming]

That 7-Eleven website must be an absolute nightmare to navigate.

[@omohitofullhd]

What is the name of the website of the Artist at 3:30. KZbin subtitles suggested it as Nang Dwin , but i am not able to find it . Can you please help ?

[@franktielemans6624]

17:57 very weird that they havve used an image for that big TEN while you can do it with live text and some CSS.

[@ashman123456789]

be good to see mobile versions as majority of people are using mobile when browsing (depending on audience etc)

[@MrAbbo11]

great contnet and nice analysis. more of this. You are a smart dude.

[@cmdaltctr]

basically no links to the portfolios he mentioned! Annoying because i'd like to see it for myself!

[@benali6083]

I think it's your first year in design. So always ask yourself these two questions: Is it looking good? Does it work?

[@sebi232006]

Hi, what is the name of the agency that designed 7eleven?

[@DesignSpo]

They’re called The Raw Materials

[@acst2350]

These examples of "pro" websites make me want to wash my eyes with bleach. Chaotic, crazy, impractical, and only suitable for your average low-grade web dev portfolios where you want to show your front-end dev capabilities. Web designs need to contribute to the success of the websites goals. Analyzing the designs without considering the audience and how they will see it is like trying to judge a fish by its ability to climb a tree. News-Flash: These flashy over-the-top chaotic sites confuse users, reduce engagement, and kill sales. A standard, cleaner, less chaotic, "amateur" website that is easier to read and more accessible/responsive wins every time. (unless its a web dev portfolio, then by all means, go nuts)

[@axeo123]

One issue here is demographics. Different age groups and class of workers (front line, hands on or laptop office keyboard warriors. How to design for both, or reach a compromise?

[@Ackmipro]

Can I get the study case 7 eleven link

[@sunflowerstyle-ew5om]

very helpful

[@mandovid]

One thing failing about this analysis is that you compare a "boring" corporate site with a more "fun" website... The tone you want to give to a website is also important, you cannot make a brand more fun if that's not your intention. You should compare a "serious" site with another serious one. Stay in the same tone, but fix the design issues.

[@drewrichardson4018]

First “pro” site also had some cropped off heading text. Probably due to improper scaling within frames. Also is equally as busy as the first site shown

[@abgportal]

Utility matters more now. Simple contrast. Flow the user through with purpose. Build for mobile view. Let go of the brochure type of website

[@AlThePal78]

Uni looks like they selling that vitamin from ebay or something and not their own site. Home wellness looks like something you would be selling on your own site. It looks amazing

[@KomentarSaya]

how did you get this example site? hard to find even in dribbble or behance

[@JFKTLA]

How can I get web designers to critique my website?