Average vs AMAZING Web Designs - COMPARED

Key Takeaways

take a look at this website design it's for a dog sitting service here in Ohio there's nothing too crazy about it it's pretty solid to me but now let's take a look at a Next Level design in a website in the same Niche all right a dog sitting service have you ever seen a layout like this do you think they copied it probably not if I scroll down you're going to see some really interesting animations and interactions and this type of design takes it to the next level and that's what what this video is about let's get started if you enjoyed this video check out designcourse decom where you can learn uiux CSS and more with my custom interactive platform that makes learning fun and easy all right so let's take a look at this first example and this is called pontos Mexican Grill and this is for a franchise opportunity all right so this is the niche franchise opportunity we scroll down here there's nothing too crazy happening I I see a lot of good things in terms of uiux fundamentals the good contrast I don't like this form but it's straightforward it gets the information across minimal interaction animations all that Jazzy stuff now let's compare it to another one in the same Niche that kind of just elevates it to the next level I'll refresh just to show you this is actually in Portuguese originally so some of the text isn't going to make that much sense but take a look at this this is not something that you create on the Fly while coding there's a lot of people who who are front developers who like to just design while coding you can't do this with a next level website you have to really plan out exactly what's happening now watch this scroll down take a look at this cup are this little thing with stuff going into it this is what I mean by Next Level design I Next Level interactions there's so much thought that goes into this uh that just makes it a fun experience to kind of just scroll down and get access to the information all the same information of course that you would find down here and I know what some of you are going to say in the comments you're going to say well this is all great and stuff to show off but in terms of ux it's terrible you know well I don't really think this this uh site does a a bad job of bad ux just for the sake of having crazy animations um you're able to get and access your information quick between each section the scrolling is is minimal it goes pretty fast I I think this does an absolutely great job of really just doing something in a unique manner for this business these type of sites demand like $330,000 uh just to tackle because it's so involved so very very cool example here let's take a look at Smoky bear.com all right so this is Smoky bear and if you're not familiar with the United States Smoky bear is like a long-standing organization to help prevent Force fires and stuff like that and this is their website again there's good stuff happening here there's actually some creativity up here in the header I like this it's like a nice illustration um again minimal interaction it's your standard your average site it does a good job uh for what it is now let's take a look at this one now this one is just I love it stylistically it is so unique so how do we burn up Forest Villages and people with our own hands all right so let's refresh to see if there's any in animation very minimal loader so it's quick I like that I hate loaders that take obviously too long and we can see have a fixed background here and just take a look at the the the colors and the font the font works perfect for this type of I you know fire it seems like it's organic and earthy um very nice we can see these scroll based animations and interactions and we scroll down here a little bit more and it takes time to create these little these little I stop motion animations I just love it and these are scroll based too so like te check that check this out for a second uh scrolling down look at these uh cigarette butts falling Crea a fire and it like literally just destroys somebody's house very unique I love it each section here is not just copying pasting from UI components you're not going to find this stuff in a typical UI kit I so going thoughtful trying to take it to the next level that's what I'm trying to emphasize as much as possible now let's get Circle back to that dog boarding one we saw at the very beginning again there's nothing wrong with this this design here everything is solid you're able to access the information quickly I'm now coming down here scrolling all the way up just to show you one more time you bounce the ball to get in I would personally get rid of that and just stick with this part it's it's it's it's it's it's fine enough without having to have people click and bounce a ball um scrolling down a little bit further I love this part very nice and just take a look at The Branding that they have going on here these little uh balls of sorts because dogs like to play with balls I love it very very nice this looks like the dog's butt though like the tail and then like they have the F okay all right well nonetheless very nice now I'm going to show you one more example and this one is a little bit of a curveball so take a look at this this is dream bible.com and it looks like it was made in like 1998 which is fine I you can access the information easily this is this is basically for describing dreams or something we'll take a look at this one from it's called open book dream guide so if I go back to open book here we'll see the intro animation now I for this thing I love this hero section there are some other things I don't like but it this is a gorgeous website so watch this uncovering hidden meanings a guide to dream analysis and symbols in the modern world let me go back up here so this is this is tied to the scroll position so hidden meaning and we're literally hiding the type that that's the type of thing I'm talking about being unique and creative uh with your execution so if I scroll down we're going to see some really nice uh UI animations kind of falling into place here scrolling down really nice topography monochrom IC for the most part um and if I click on for instance symbols oh and I also love the little uh this effect I see a lot of sites use this but this this context of of scrambling the letters on Hover is actually really ingenious for the purpose of this like encoding uncoding dreams or decoding dreams rather very very cool so here's like the symbols and then there's types right here and the one thing I kind of don't like is notice those page transition animations they kind of take a little time um one thing that's a little bit frustrating about this UI I'm finding is that if you want to quickly access your information like trying to search for a particular symbol or keyword that's associated with your dream it's going to be a little bit harder it's going to take you a little bit more time compared to a design like this it looks ugly but you're able to access the information way faster so the takeaway here in all of this is that I would love to see more designers take this unique approach if you do you're going to demand way more money just because you're producing something that's way more unique however you don't want to sacrifice ux just for having an interesting unique website um I think some of these examples did a great job on both fronts the Dream Bible example is a beautiful demonstration of front and development and interactions and animations but it can feel slow when compared to something that looks way uglier but is going to benefit the user a lot more so there is a balance between both of these rules and if you're interested in learning about both of these worlds definitely check out my courses at designc course.com where I cover UI ux CSS figma Advanced front ends my new course check all of it out subscribe here I'll see you very soon [Music] goodbye [Music]