PRO Vs AMATEUR Website Layouts (With Examples)

Launch & Grow Your Web Design Career: designspo.co
What's the difference between a professionally designed website and an amateur one? How do pro designers think about layout and design architecture to create websites that their clients love? Today we're breaking down the difference between 11 pro and amateur website layouts to show you how to become a world-class designer. I'm going to show you examples for the most important sections on a website and compare designs from beginners with the layouts created by pros. If you enjoyed this video and want to get daily web design case-studies, check out the link in the description.

[@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.

[@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.

[@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

[@maskedvillainai]

Haha that was solid rebut

[@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

[@janisakmentins6414]

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

[@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.

[@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

[@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

[@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.

[@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.

[@DevonHong]

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

[@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

[@neomode]

A very very very personal opinion

[@thomaslambertt]

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

[@DesignSpo]

Thank you! Best of luck on your journey

[@bakeraus]

Make everything Neo Brutalist and you are a PRO

[@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

[@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

[@andikafebrianto4021]

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

[@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

[@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

[@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.

[@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.

[@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.

[@RocksStocks]

Thanks for making practical and useful content.

[@DesignSpo]

Glad you enjoyed it, thanks for watching!

[@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

[@ismailfaturrohman4858]

This is so great segment. Thanks alot

[@jpfivex]

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

[@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.

[@joe.gedds.developer]

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

[@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

[@gruvygraphics9984]

This was very helpful. Thanks

[@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

[@cerebralvision]

Ehhhhh......I don't think most of the advice given in this video is good. I've been working in the industry for 20 years and am a Director of Experience design for a larger agency. There's good nuggets in there, but sometimes simple is necessary based on your audience. Larger corporate clients have a completely different design system than a smaller company that needs a flashy landing page. It completely depends on the industry. Goals of pages are to get users where they need as quickly as possible. Sometimes that goal is a PDP. Other times it's just to learn something relevant. Most of the time, visual overload does not help that. Also, good luck dealing with a dev team with some of these pages lol.

[@mynexusca]

What your company name can I hire you I need a good graphic design for my website

[@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!

[@user-qk6wq3pg8l]

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

[@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.

[@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

[@lilybideau521]

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

[@-R-H-]

Design is subjective. Know your market!

[@chrissmit6439]

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

[@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!

[@burntworks]

Fantastic! thank you for your advise!

[@Louis-zl4tp]

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

[@jamin946]

too many ads!!! holy moly, respect your audience. jeez. I get the occasional break but I had to skip over 6 ads during this video.

[@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

[@ShirelShalom]

Great video & explanations! Thank you!

[@andradlegacy6862]

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

[@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!

[@BLTspirit]

🔥 vid! Would definitely watch a part two.

[@davidvultur8704]

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

[@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

[@Aestheticdesignz]

❤

[@omohitofullhd]

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

[@user-fl4oz9im7p]

vid! Would definitely watch a part two.

[@benali6083]

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

[@ashman123456789]

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

[@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)

[@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

[@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.

[@BenjaminJohnson-qe8kq]

Very well spoken, I dig it.

[@zafit02]

awesome video thannks a lot you gained a suscriber :)

[@DesignSpo]

Welcome! Glad you enjoyed

[@gilltestudent8176]

Subscribed. You got a good vibe man!

[@DesignSpo]

Thank you!

[@craftyfox1]

A lot of those so-called "professional" websites are too cluttered. There is too much information and too many colours for me. They would cause me to move on. Also, on the sites you like, you don't mention the stock footage, which they clearly have. Yet you run it down on the amateur sites.

[@Igor-vk8fl]

I'm sorry but your definition of "cleaner" is totally wrong. Please read a dictionary. All the designs you showed as "better" are nothing but a bunch of too much annoying animations.

[@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

[@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

[@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

[@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?

[@Matthijs1308]

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

[@ScottSowle]

Great for PC websites but in today's world mobile rules and 80-90% of my traffic comes from mobile. We could use more videos like this on layouts that work for MOBILE.

[@m-create]

You are really good at what you are doing 🎉

[@tracyrage7560]

good work! thanks!

[@DesignSpo]

Thanks for watching, glad you liked it!

[@zhanezar]

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

[@carlandres3319]

Can you review analytics dashboards?

[@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!

[@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

[@UcheOgbiti]

Can you please share links to all the websites?

[@ElReicz]

Lot of great ideas, thanks for the video

[@user-cr2sp7my8h]

Great examples!

[@asapmoa7598]

What are the common tools used to create these websites?

[@SergioOlivieri89]

To me, most of the so called amateur websites are waaaay better than the pro ones

[@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?

[@Art0691p]

A great website design works well in addition to looking good. Those flashy pro site examples have a lot of UX issues in several areas. Yes they are visually 'seductive' at first but my feeling is that they would not 'user test' well. They are making the user 'think' too much about the UI. So not a great user experience. Commercially that means poor conversion for the company.

[@ghostofakina8747]

I would have to beg to digger when it comes to a lot of your takes. The "bad" sites are a lot more clear and less confusing to the user. More coulour and animation doesn't equal more good. User experience is paramount.

[@gdylu]

the title should be the difference between a website for $5,000 and $50,000 or more. Most of the websites you showed as a PRO are websites of large teams that offer digital products. The cost of such websites is months of work by designers and developers.

[@dylanarmstrong9328]

A lot of the time, simplier is better. That first example of the "pro" website made my eyes hurt just looking at it. I honestly preferred the noob version as clunky as it looked.

[@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

[@mazharuddin3647]

I'm afraid to say "None" of these website were Ameteur or Pros. It's just how an ameteur designer thinks of what an ameteur and pro looks like.

[@AlThePal78]

The only issue I have with PLINK is that yellow text on a white background did not help my poor vision LOL I would of used a darker color of yellow that is it :)

[@waffletube5707]

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

[@seanmartvt09]

Most likely GSAP

[@siqhamesihlenomtyala3761]

I am inspired my guy

[@flix-tw5ow]

Great video! Loved it.

[@morizanova]

Niche Vs Mass numbers of web design job . But hey at least some ( self proclaimed ?) top designer just fine getting 4- 5 job /years

[@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.

[@cmdaltctr]

I wished he'd at least give the link to the websites in the video!! Or at least we can see the domain address! So we can inspect this ourselves.

[@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 ?

[@allaboutstrange-uw7qz]

Correct. Customers does not care, customers want clear, seamless, convenient, instant.... and please review using a mobile view. That is the majority of your customers.

[@Raphael-jo1rp]

Flashy and very unique design often resonate with shitty accessibility. I can already see a lot of problems in color contrast just by the look...

[@cymy2]

That hectic motion is horrifying.