PRO Vs AMATEUR Website Layouts (With Examples)

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.

[igeyzew]

I've noticed that whenever designers rate a site, it's through a rigid lens of design rules and advanced theories. Meanwhile, a customer see's a standard website and they feel more comfortable with the layout, and aren't overwhelmed by design grandeur, and abstraction.

[gzusrock]

That first website, "Merch Redefined, " used 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.

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

[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

[luckerooni]

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.

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

[SquishyBoat]

🔥 vid! Would definitely watch a part two.

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

[killah]

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.

[janisakmentins]

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

[thomaslambertt]

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

[andradlegacy]

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

[davidvultur]

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

[jpfivex]

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

[ShirelShalom]

Great video & explanations! Thank you!

[AlThePal]

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

[Sashad]

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.

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

[hisanzee]

Great Video Man!

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

[ismailfaturrohman]

This is so great segment. Thanks alot