PRO Vs AMATEUR Website Layouts (With Examples)
Вставка
- Опубліковано 13 жов 2023
- Get FREE Web Design Resources Daily: designspo.co/newsletter/
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.
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.
I agree; sometimes going over the top is just distracting, especially if the content itself is subpar. The content, ease of navigation and site speed are much more important than fancy designs. However, it also depends a lot on your target audience. For example, if your site is to promote your web design services, a more elaborate design shows your clients what you're capable of.
Designers want to impress other designers. I think the perfect balance of beautiful design and actual usability is Apple's website. Sometimes more is less.
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.
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.
@@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.
@@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
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
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.
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.
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.
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
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.
Still photos and one video would have been so much better
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.
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.
simpler matter so costumer shouldn't get lost
Too much crowded 😅 I have seen awwwards websites also look garbage same and shit UX
I 100% came here to write this. No one likes Kaotic websites for professional products etc.
My clients won't even pay $1 for awwards websites or websites like these
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”
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
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
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.
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.
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.
This is so great! Subscribed, we want more like this.
🔥 vid! Would definitely watch a part two.
This is really good man. Thank you. I'm absolutely new yet i can follow fine. Good value content
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.
Great analysis! Thanks for sharing
Haha that was solid rebut
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.
Very articulate, good quick important key points, well-spoken.
Great analyses! Will do that more thoroughly when looking for inspiration.. Keep it up!
Thank you! Best of luck on your journey
Great video & explanations! Thank you!
this is so many valuable information and knowledge, thank you so much !
Great Video Man!
Loved how in-depth you went into this. Great stuff!
Subscribed because of your attention to detail and effort.
Glad you enjoyed it, thank you!
This is so great segment. Thanks alot
Dude you are amazing. This is awesome content.
Ey, I'm early to a channel. Look forward to seeing where this goes, this is great content! :D
Glad to have you, thanks for the compliment!
Thanks for making practical and useful content.
Glad you enjoyed it, thanks for watching!
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.
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.
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
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.
Make everything Neo Brutalist and you are a PRO
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
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.
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.
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
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.
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.
@@_chinocabron read the last sentence again
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) 😄
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
Very well spoken, I dig it.
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.
plain is just blandness with good pr
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.
Lot of great ideas, thanks for the video
Subscribed. You got a good vibe man!
Thank you!
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!
Agreed, it would be interesting to see the 7-11 on a mobile.
thank you
considering my brand, i have a simple, yet amazing vision for my site
vid! Would definitely watch a part two.
Great video! Loved it.
You are really good at what you are doing 🎉
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.
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?
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
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
Design is subjective. Know your market!
This is a really good video with some very diverse and cool examples. Your pacing is also excellent.
Thank you! Glad you enjoyed the video
great contnet and nice analysis. more of this. You are a smart dude.
basically no links to the portfolios he mentioned! Annoying because i'd like to see it for myself!
What is the name of the website of the Artist at 3:30. UA-cam subtitles suggested it as Nang Dwin , but i am not able to find it . Can you please help ?
fantastic. congrats man
good work! thanks!
Thanks for watching, glad you liked it!
Needed this video.
how did you get this example site?
hard to find even in dribbble or behance
Thanks for your video.
subbed great content, thank you algo-god for showing me this
great info.... thanksss
Great content!
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.
A very very very personal opinion
Awesome breakdown. Do you have a Figma course out to learn UI from or one you suggest?
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!
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
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.
Utility matters more now. Simple contrast. Flow the user through with purpose. Build for mobile view. Let go of the brochure type of website
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
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
Great video, keep em coming! But ehm... shouldn't you be on the Polar Express?
awesome video thannks a lot you gained a suscriber :)
Welcome! Glad you enjoyed
Great video!
Thank you!
What was used for all those animations for RNNs 7 Eleven page? Love it
Most likely GSAP
Interesting.
Can you please share links to all the websites?
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?
What platform could be done on it?
That hectic motion is horrifying.
Hi, i can't find the 7 eleven website that you show in your video. Can you share the URL please?
Any luck with finding it?
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
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
❤
Do you know the name of the website at 3:30 ?
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.
What your company name can I hire you I need a good graphic design for my website
Feel like this video could have been called Wordpress vs webflow 😅 great content!
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.
Tanx
Prrety or Ugly at the end of the day is all about creating something user-friendly that communicates the message well.
What are the common tools used to create these websites?
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.
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.
Can I get the study case 7 eleven link
Where are the links to each of the good website examples in the video description? 😭
how can i get in contact with some of your designers to do redo a website?
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 :)
Hi, what is the name of the agency that designed 7eleven?
They’re called The Raw Materials
...did anyone else prefer most of the "amateur" sites from a usability standpoint?
1 month later and Family Industries has changed their site to not be a motion blur unreadable mess. Nice.
Anyone know the websites link lists ?
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.
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.
I liked it)
I think it's your first year in design. So always ask yourself these two questions:
Is it looking good?
Does it work?
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.
cool video)
Thank you!
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...
Niche Vs Mass numbers of web design job .
But hey at least some ( self proclaimed ?) top designer just fine getting 4- 5 job /years
Do we dislike adding links in description for easier reference or what?
How can I get web designers to critique my website?