Тёмный

PRO Vs AMATEUR Website Design (With Examples) 

DesignSpo
Подписаться 13 тыс.
Просмотров 111 тыс.
50% 1

Get Free Daily Design Resources: designspo.co/newsletter/
What is the difference between pro and amateur website design? What does the design process look like for an expert vs a beginner? Today we're going to explore the key differences between pro's vs amateur's by redesigning five websites that members of my private design community sent to me. Along the way I'll show you simple ways you can elevate your designs to look professional with just a few simple changes.
Chapters:
0:00 - Pro VS Amateur
0:25 - Website 1
3:33 - Website 2
6:35 - Website 3
10:30 - Website 4
13:53 - Website 5

Опубликовано:

 

16 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 150   
@chrisbcarlson
@chrisbcarlson 2 месяца назад
Hey thanks for the review! You have a lot of talent. Keep up the great work! I'll be making the modifications asap
@DesignSpo
@DesignSpo 2 месяца назад
Glad you found that helpful Chris!
@Shaminat0r
@Shaminat0r 2 месяца назад
Hey Chris. I checked out your website after watching this video. And while I think you did great with the redesign from @DesignSpo and implemented it fast, I would like to bring to your attention that you can't forget about your mobile design. Of course, I don't know much about your business, so maybe you deemed that your software isn't meant to be used via a mobile phone, which is totally okay. But many people use their phones to browse the internet, and right now your mobile design could use some attention :) best of luck on your journey, and great work.
@chrisbcarlson
@chrisbcarlson 2 месяца назад
@@Shaminat0r thanks, I agree with you! We are still new and working on this. Do you have anything specific you think should be improved?
@Shaminat0r
@Shaminat0r 2 месяца назад
@@chrisbcarlson The big thing would be fixing clipping at certain breakpoints between your buttons, and currently the buttons also stack in mobile view, however they are completely capable of being side-by-side in a mobile view. I believe also their centering is slightly off. Other than that, it feels and looks good!
@chrisbcarlson
@chrisbcarlson 2 месяца назад
@@Shaminat0r Thanks for your feedback I will try to work on this in the coming days! appreciate it!!
@agentm10
@agentm10 Месяц назад
Holy shieet! As a non-designer, I get so impressed to watch professional designer rework simple designs into beautiful and effective displays. Amazing!
@googooboyy
@googooboyy 25 дней назад
Years of experience, priceless.
@topperboi1642
@topperboi1642 2 месяца назад
Hands down the most practical and informative web design video i have seen in ages
@levigaal
@levigaal 2 месяца назад
Your real-life explanation is pure gold. Period. Well done!
@googooboyy
@googooboyy 25 дней назад
Love how you kept the redesigns direct and client focused, nothing fancy or schmug. Keep it up!
@Sapling_ak
@Sapling_ak Месяц назад
Blown away by this video. Super informative, love the designs and the reasoning on why you gave each designs. Subbed and like for sure, looking forward for more content!
@deepershadesofhouse
@deepershadesofhouse 12 дней назад
I love how you find the perfect inspiration to update a certain design.
@HaoNguyen-rk7iw
@HaoNguyen-rk7iw Месяц назад
These videos are getting better and better man, keep it up man you can get big
@orensavidor6867
@orensavidor6867 7 дней назад
Dude, that was mine blowing! Thank you for putting this content out there. I'm just starting out in web design and giving me a glimpse of how you think like a designer is super valuable!
@MultiSciGeek
@MultiSciGeek Месяц назад
Really educational and fun to watch! I'd love to see more episodes of this!
@LH-gb2lh
@LH-gb2lh 22 дня назад
Wow! What amazing results you achieve in your redesigns, love it!
@javiernunezgomez9003
@javiernunezgomez9003 Месяц назад
Chamo esto está brutal. Y ni siquiera he visto el video completo. Great job bro!
@brefi_art
@brefi_art Месяц назад
I'm just recently starting to learn all about web design and your explanations and processes are so easy to understand! Thanks and I'm subbed
@shreyasborakhadikar
@shreyasborakhadikar Месяц назад
Brilliantly done, need more videos like this! 🔥🔥
@VTalkTogether
@VTalkTogether Месяц назад
Love learning from real example and the creating process.
@aaronkrugel4471
@aaronkrugel4471 Месяц назад
Hey, love your style, productive Feedback and clarifying what a site is about (headings). I would love to see, what you do when designing for Tablet and Phone. I always find myself struggeling with making a site "pop" on phone, since there is just so little space. Keep up the awesome work!
@muhammadbacar6051
@muhammadbacar6051 Месяц назад
Love the way you take inspiration. You actually steal the design of other websites with out actually copying it that's the point of designing.
@CameronArnold-xj9dv
@CameronArnold-xj9dv Месяц назад
Your work is amazing! Thank you for these extremely high quality videos.
@BlenderForDesigner
@BlenderForDesigner 2 месяца назад
This is such a great video. You really are a great designer. You've gained a new subscriber!
@DesignSpo
@DesignSpo 2 месяца назад
Thank you, glad you enjoyed it!
@bentam1516
@bentam1516 2 месяца назад
A hidden gem right here! This format is so fresh and exciting!keep going and you will be the next big youtuber!
@tamastakacs3810
@tamastakacs3810 Месяц назад
Agreed
@AJ-vy4yu
@AJ-vy4yu Месяц назад
Subbed. Really solid redesigns!
@methanesulfonic
@methanesulfonic Месяц назад
I'm surprised to see a video this good with such a low subs count.
@travis-tech
@travis-tech Месяц назад
Great work! I loved this video :)
@codenk4s
@codenk4s Месяц назад
Great video, great work!
@myname8722
@myname8722 Месяц назад
So cool to watch your reviews
@ideationstudios9542
@ideationstudios9542 12 дней назад
Superbly done, I Loved all your designs!! Moreover, it would be a great opportunity if I could develop those designs into websites.
@muneebsun
@muneebsun Месяц назад
Love the redesigns! What video recording / editing software do you use? Thanks!
@efrenhaw
@efrenhaw 2 месяца назад
Great video, great redesigns! You are a legend! Keep going!
@user-kd5gc8lk3v
@user-kd5gc8lk3v Месяц назад
You are amazing. Here's hoping that I can make my own website look half as good as that lol
@SimonePaulon
@SimonePaulon 2 месяца назад
Great video, thank you!
@DesignSpo
@DesignSpo 2 месяца назад
Glad you liked it!
@laurenthannelas8223
@laurenthannelas8223 18 дней назад
Wow very talented designer. One thing I don't agree though is letting the social icons on the nav because you surely don't want people to leave your website.
@tamastakacs3810
@tamastakacs3810 Месяц назад
Super helpful!
@catopotato3330
@catopotato3330 Месяц назад
a great friendly educational video thank you for both feedback and knowledge wish you the best
@inter.esting
@inter.esting 26 дней назад
i learned a lot from this holy
@user-zo6sn5zf9x
@user-zo6sn5zf9x 13 дней назад
Great video! Helped me get so much more inserpation! Definitly droppping a sub and like. What sofware do you use for designing?
@saadsohail4690
@saadsohail4690 20 дней назад
Hey bro love the tutorial. Can you please do a tutorial on how you do that colour gradient thing, thats very handy to know.
@jamesscott1009
@jamesscott1009 Месяц назад
Great suggestions
@FairyDLux
@FairyDLux 2 месяца назад
currently working on some websites this was so helpful to watch before setting on any designs!
@DesignSpo
@DesignSpo 2 месяца назад
Glad it was helpful!
@abhishekkewate817
@abhishekkewate817 Месяц назад
I like this video, very informative and leearn something new
@user-ri3vj8mw4j
@user-ri3vj8mw4j Месяц назад
Great design ideas ❤ how do they fit responsive? Would be great do see such designs on mobile too 🤓
@Inspirelearning271
@Inspirelearning271 Месяц назад
I really love and appreciate this work. Can you please spare a time to explain how figma works, that will really help out a lot
@anuragshekhar1402
@anuragshekhar1402 Месяц назад
Great video. Loved your design ideas. Can you please make a simple Figma web design tutorial, suitable for beginners?
@mratunjaytiwari3257
@mratunjaytiwari3257 Месяц назад
Hello I Just Watch Your Video Randomly But Love it i just want to know that from were you find perfect design inspiration because i always struggle a lot to find perfect and right inspiration of designs
@command_print
@command_print Месяц назад
thank u man
@JeremyMuradesign
@JeremyMuradesign 2 месяца назад
Nice redesigns bro
@DesignSpo
@DesignSpo 2 месяца назад
Thanks! Glad you liked them
@Alidotty
@Alidotty 16 дней назад
the second one is truly flabbergasting.
@ByronBrownSydney
@ByronBrownSydney 20 дней назад
great vid
@LifeBegns
@LifeBegns 27 дней назад
ı just watch a 21 second and o clicked subs button
@inderjanakarajan9389
@inderjanakarajan9389 Месяц назад
Hey! Can you also mention the fonts you used across in your videos? Will help a lot!!!
@hosseinkhanmohammadi4770
@hosseinkhanmohammadi4770 2 месяца назад
Like to see more like this 😊🎉
@Trashpanda_404
@Trashpanda_404 Месяц назад
Thanks for the video! Beautiful.Use odoo v17 for our ERP. They do some silly stuff with their the architecture and integrations. From what I’ve found you can’t simply import HTML5, react, etc bootstraps. Can’t use node at all. 🙄 Created prototype in FIGMA, but they make it too complicated to just import.
@LaserHighway
@LaserHighway Месяц назад
I really don't like when contents like 'trusted companies' are added purely for visual balance, on 90% of the designs I see. You applied the logos to the 1st design without knowing if they actually have trusted companies to list, if the business doesn't, then what do you use? You thought about design 1st, communication 2nd, it should be the other way around.
@davemotz1139
@davemotz1139 18 часов назад
This was a very informative video, thank you. I subscribed to the channel and also the mailing list. Looking forward to learning. Would you mind sharing what software program you are using in the background when designing these pages? Thank you!
@DesignSpo
@DesignSpo 7 часов назад
Thank you, glad you enjoyed the video! The program is called Figma, the best design software on the market right now and free for individuals.
@zafit02
@zafit02 2 месяца назад
Very good video, keep it up! I wanted to ask you a question, I loved the grid background at 3:10 you put behind, I would like to know if you know any good tutorials to create elements like that. I've seen very nice backgrounds in very professional websites, with gradients, different lines, etc., I don't know if I'm making myself clear, but I never found tutorials for that... background elements? Dont know how to call it
@DesignSpo
@DesignSpo 2 месяца назад
Thank you! Those little details are what I love most about web design. They're very tedious to make by hand but a video on subtle things you can do to elevate a design could be really cool, thanks for the idea.
@zafit02
@zafit02 2 месяца назад
@@DesignSpo Great that you understood what I wanted to say! You know, I've been searching for tutorials or courses for months to create those elements, and I only see them on very professional-looking websites... there must be some place to download resources like those, or a good course... I hope to find it... I'm really glad I gave you an idea for a video, it's also one of my favorite aspects of web design :)
@RhynoD1407
@RhynoD1407 Месяц назад
Just want to add that this is something I struggle with as well, and I would love a video on how to create and bring in these little details!
@giorgio1498
@giorgio1498 Месяц назад
Lovely
@stinkleaf
@stinkleaf 2 месяца назад
Great tips, but keep in mind about accessibility white text on orange won’t pass the screen contrast test. But how would it look on a phone?
@walshsr
@walshsr Месяц назад
I came here to say the same thing.
@dmitryz2320
@dmitryz2320 Месяц назад
Man, your redesigns are 🔥 But what about mobile? Do these sites need a separate mobile/tablet designs?
@TheStickofWar
@TheStickofWar Месяц назад
For sure they will. But things like the nav and Polaroids have nice solutions.
@deepthreedesign
@deepthreedesign Месяц назад
This video is incredible- please make it a serious
@jayrajjadhav5112
@jayrajjadhav5112 Месяц назад
where from u pick the inspired web design as you found in this video
@EasyMcgreasy
@EasyMcgreasy Месяц назад
what program is this?
@adaezesimon3499
@adaezesimon3499 2 месяца назад
This is an amazing video. I am really glad I saw this. Please how do you get the websites you use for inspiration
@DesignSpo
@DesignSpo 2 месяца назад
Thanks, glad you enjoyed it! I primarily use lapa ninja and awwwards to find inspiration. But a lot of my inspiration recently has come from Twitter
@adaezesimon3499
@adaezesimon3499 2 месяца назад
@@DesignSpo Thank you, please what's your handle so I can follow you.
@peteclark1012
@peteclark1012 2 месяца назад
On the Kickboxing site, you changed the navigation by adding white background 25% opacity, and some background blur. How did you acheive the background blur?
@DesignSpo
@DesignSpo 2 месяца назад
In Figma, there's an option to add effects like drop shadow or background blur. In CSS you can use backdrop-filter: blur(); to achieve the same effect
@peteclark1012
@peteclark1012 2 месяца назад
@@DesignSpo THanks for the CSS information. Just when you think you know them all... 😄
@rejuantalukder8763
@rejuantalukder8763 Месяц назад
Can I get the resources of the designs you have made on the video?
@adamhardin9176
@adamhardin9176 Месяц назад
How do you add what you created in Figma to the website?
@Shaaffy-zj6te
@Shaaffy-zj6te 7 дней назад
George upload more pls.
@pauls1883
@pauls1883 Месяц назад
These are very insightful. But I have to worry, how do these ideas translate to a mobile screen?
@angelln25
@angelln25 17 дней назад
What design software is this?
@akshaykhandekar9683
@akshaykhandekar9683 2 месяца назад
Hi, the video was awesome but wanted a video where these web pages resize themselves and change their alignment in mobile view. If there is more content on the desktop view how would it resize or align in a mobile viewport.
@chimastudios
@chimastudios 2 месяца назад
That's mobile responsiveness I believe?
@grizfan93
@grizfan93 17 дней назад
Some good ideas here, but you've glossed over several critical considerations. First, what about mobile? How will these designs translate to a phone screen? It is safe to assume that at least 1/2 of your audience will view your website on a phone. Getting something to look good at 1920x1080 is a lot easier than making the same thing work at 320px wide. Especially when you have text over an image. Speaking of which, your second big oversight is accessibility. In many cases, your designs produce text that is completely unreadable due to really poor contrast, especially when over an image. Finally, turning design to functional code could be a challenge. Some of these designs are not the most resilient. If something is slightly off, or if the text is a bit longer than in the comp, the visual balance goes out the window. I think what you've shown has a lot of value, but please spend a bit more time to create accessible, mobile-friendly design comps that a developer can work with.
@bishal.dangol
@bishal.dangol 2 месяца назад
do you have any knowledge on school ui?
@artiealimi8593
@artiealimi8593 2 месяца назад
How can i have you review my website?? Also can you post some videos on hostinger because that's the software I use and I think it'll benefit many people.
@---om4zt
@---om4zt Месяц назад
What app do you use in the video to redesign?
@BlueMrDragoN
@BlueMrDragoN Месяц назад
It's called Figma :)
@irlKazua
@irlKazua Месяц назад
How do you insert this on your own website?
@MultiSciGeek
@MultiSciGeek Месяц назад
8:33 Nahh, that orange button looks straight outta Windows XP lol
@AxisAerospaceOfficial
@AxisAerospaceOfficial Месяц назад
Hello sir , I want to show my website to you that I redesigned , How can I do it ?
@FernsDad
@FernsDad Месяц назад
Nice video but I would have liked to have seen how the designs look on a phone.
@dialac1
@dialac1 Месяц назад
What software are you using in the video? I tried looking everywhere to see if you mention it, even visited your website, I can see anywhere you mention the platform you use for your design
@Barz.Gaming
@Barz.Gaming Месяц назад
I also wanna know
@dialac1
@dialac1 Месяц назад
@@Barz.Gaming I’m guessing you have to pay him to get that info Smh
@node17
@node17 Месяц назад
The software is called Figma. Hope that helps. 🙂
@sanemihashira6942
@sanemihashira6942 2 месяца назад
@Septumsempra8818
@Septumsempra8818 2 месяца назад
How do we submit our sites for roasting
@claudeball9163
@claudeball9163 2 месяца назад
😂😂😂😂 yoooo
@FromLake
@FromLake Месяц назад
Basically, how to make the same website 5 times that don't work on smaller screens.
@romany177
@romany177 Месяц назад
It does
@Nightsmiles
@Nightsmiles 2 месяца назад
how can i submit a website for redesign...? i have an appliance repair business
@DesignSpo
@DesignSpo 2 месяца назад
Awesome! Send me an email at george@designspo.co
@reneklokkerholm1453
@reneklokkerholm1453 2 месяца назад
What was the URL for Cardinal website looks fun
@DesignSpo
@DesignSpo 2 месяца назад
It’s cardinalapp.io
@XxITGScooby33xX
@XxITGScooby33xX Месяц назад
What design software are you using?
@Man-ng8lf
@Man-ng8lf Месяц назад
Hes using Figma I believe
@XxITGScooby33xX
@XxITGScooby33xX Месяц назад
Ok so in figma do you design it and can export it directly to html?
@rodrigofish
@rodrigofish Месяц назад
how to make the glass efect in CSS?
@expresswebservices3012
@expresswebservices3012 Месяц назад
CSS have gradients feature
@revenge425
@revenge425 Месяц назад
That last CTA..it looks like a pain in the ass to implement... or maybe im just inexperienced?
@programmingloop7
@programmingloop7 28 дней назад
* Create a div container and three children divs * Make them align horizontally using flexbox * Make all 3 children divs look like a pill (like the "book a session today" button) * Target last child and make it a circle Right now you should have 3 divs that are lined up horizontally. The first two should look like the "book a session" button and the last one should look like a circle * Reset border-radius of second child * Make the container position relative * Make the SECOND child position absolute * Second child should look like it's gone. Change background color and add border so that you can see it * Increase the width so that it bridges the gap between the two divs (the call to action and the circle) * Adjust the height so that it looks like same as the video * Change the background color of the second child back to its original color. Same as the other children Now it should look just like the video
@SRC503
@SRC503 2 месяца назад
I’m new and want to be designer. You didn’t state what you’re using so I have no idea what you’re doing. Do you teach basics in your subscription?
@DesignSpo
@DesignSpo 2 месяца назад
I use a program called Figma to design websites. I cover some basics, although my channel is probably not the best for an absolute beginner. Flux Academy is a great RU-vid channel that has a lot of videos for people of all experience levels.
@SRC503
@SRC503 2 месяца назад
@@DesignSpo ok thanks. Maybe I’ll join after checking out flux academy
@UpUpDnDnLtRtLtRtBAStart
@UpUpDnDnLtRtLtRtBAStart 2 месяца назад
@@SRC503what type of design are you looking to get into ? Figma is great. Def look to understand code and work with html editors in parallels. It will make you that much better. Also books are great. I used to be a huge fan of Friends of Ed. Now defunct but they did all the books for Macromedia ( now defunct and bought by Adobe). Just start from the beginning and work on the task they give. The 4+ hrs tutorials on yt are good but take multiple to get more perspective. Cheers
@dialac1
@dialac1 Месяц назад
I literally just posted this same comment. I wish RU-vidrs considered the questions that their viewers or people that stumble on their channel would ask and address it
@bringbackdislikes3195
@bringbackdislikes3195 23 часа назад
@@dialac1 He addressed it right into this conversation...
@paologenovese410
@paologenovese410 Месяц назад
What is the Site called where he redesignes ?
@musicsausage
@musicsausage Месяц назад
Figma is the software he uses to prototype the redesigns
@vaisakhkm783
@vaisakhkm783 23 дня назад
Really cool 😂 but you made everything bootstrappy
@valeekatona
@valeekatona 11 дней назад
responsive?:)
@hydyravezberdiyew676
@hydyravezberdiyew676 18 дней назад
firespark looks better before
@Ach7ven
@Ach7ven Месяц назад
Is this figma?
@node17
@node17 Месяц назад
Yes it is.
@manaembepis
@manaembepis Месяц назад
Figma balls
@Harvito87
@Harvito87 9 дней назад
Too much works for 80% of the user being from mobile
@netyimeni169
@netyimeni169 Месяц назад
Should he called "how to design an orange website"
@sungodd63
@sungodd63 3 дня назад
Man you have some haters😂😂
@ShrikeGFX
@ShrikeGFX Месяц назад
This is a bit too much copying from others
@nooster125
@nooster125 18 дней назад
Dude I dont understand how people love this work he’s just stealing designs…
@jeremytodd77
@jeremytodd77 11 дней назад
​@@nooster125that's his point, he's not reinventing the wheel he's showing what works for non designers to make a good looking website by using site layouts they're inspired by
@nooster125
@nooster125 11 дней назад
@@jeremytodd77 why would you that when you can teach simple entry level design tips?! Thats more valueble that copying designs you learn nothing from that…
@jeremytodd77
@jeremytodd77 10 дней назад
@@nooster125 You think you can't learn things from copying ideas from other designers work? Are you actually a designer? Also, he doesn't blatantly copy from every single case study he uses (it's called a case study btw and it's a normal aspect of designing) and he provides plenty of tips and ideas of his own to show you how to effectively make good design. There are some things he does that I think could be improved as far as the layouts he comes up with but he's definitely giving valuable information.
@Iamsfi68
@Iamsfi68 10 дней назад
​@@nooster125 i think hes just showing for learning purpose. Like, as a beginner how we can build these advaced type of designs
@nicholasblake9561
@nicholasblake9561 13 дней назад
I understand inspiration....but this is theft. Make it your own, put your spin on the site
@programmingloop7
@programmingloop7 28 дней назад
is it me or is his mouth not in sync with the words?
@christianlorenz1696
@christianlorenz1696 Месяц назад
Tbh. your designs are just boring, without any worth recognition. the designs before may not have been great - but you're doing the "stock-photos" of designs
@nooster125
@nooster125 18 дней назад
Dude there is inspiration and there is stealing desings… 0 creativity cant belive someone would post something like this….
Далее
Reacting to 21 Design Portfolios in 22 Minutes
22:41
Просмотров 466 тыс.
Best Web Design Resources 2024
19:24
Просмотров 91 тыс.
FUN&SUN | Update 0.29.0 Trailer | Standoff 2
02:32
Просмотров 1,2 млн
Why I Quit UX
10:32
Просмотров 48 тыс.
The 7 laws of good Web Design
14:17
Просмотров 40 тыс.
Fundamental concepts to design a minimal website
7:00
20 Graphic Design Hacks You Need To Know
16:50
Просмотров 7 тыс.
7 Portfolio Websites designers NEED to see
6:14
Просмотров 125 тыс.
The 5 Levels of Web Design - Worst to BEST UI/UX
11:22
Top 2024 Web Design Trends
5:32
Просмотров 468 тыс.
The Easiest Way to Build Websites
10:56
Просмотров 315 тыс.
18 Hero Section Designs You Can Steal
11:45
Просмотров 664 тыс.