5 STUNNING WEBSITE DESIGNS - Web Design Inspiration
HTML-код
- Опубликовано: 2 июн 2024
- Looking at some of the best websites for inspiration moving into 2022! In this video we will look at the top 5 websites for three js, scroll interactions, custom cursors and beautiful web interactions.
Try Milanote to plan your next creative project: milanote.com/caler1021
These are a variety of websites ranging from e-commerce, design agency pages and creative studio websites to personal portfolios. These websites are stunning and the links to all of them are listed below.
Featured Websites:
0:00 Introduction
0:11 Seed: seed.com
1:33 Milanote
2:07 monopo: monopo.london
3:56 eumRay: eumray.com
5:25 Lunchbox: lunchbox.io
6:11 Liron Moran Interiors: www.lironmoran-interiors.com/...
8:05 Outro
-
Become a Member (Access to Completed Project Files):
/ @caleredwards
Sign up for Webflow:
webflow.grsm.io/caleredwards
My Desk Setup for Design & RUclips:
kit.co/caleredwards/my-setup
Learn UI/UX Design and Prototyping using Adobe XD:
www.udemy.com/ui-ux-design-us...
-
Visit my website:
caleredwards.com
Find me on Instagram:
Instagram: / caleredwards
-
Disclaimer: This video and description contains affiliate links. By using any of my affiliate links, I receive a very small commission at no extra cost to you. Thank you for supporting the channel!
Music: Epidemic Sound
5 STUNNING WEBSITE DESIGNS - Web Design Inspiration
#WebdesignInspiration #CalerEdwards #WebDesign
Let me know which website you liked the most!
ok
1 2 and 4
also make a video that teaches you how to create these
Caler, your voice is changed. How's that possible?
I would subscribe and put the notifications on if you can tell me how do they made these websites , is it code or any premium theme.
Because i use WordPress and i can't develop sites like that.😶
Love the quality of your videos and the value you're providing! Thank you very much for your hard work.
You pick the most beautiful sites. Thank you so much
Really appreciate the links to the webpages on the description. Loved the eumray site
I really appreciate your help, Caler, but man these things are easier said than done. I get so overwhelmed by just looking at them. I can think of nothing that can do this magic.
Webflow.
GSAP, PixiJS, threejs, a lot of math, imagination and effort :Ъ
Webflow will do for layouts and basic animations. But magic is definetelly custom coded. I know 'cause I've been sitting next to our devs at CUSP for way too long. At some point I even started to understand how it works. That scared me and I rushed back to my project management routine, lol.
Stick to basics and start with wire frameworks, and build up. Most of this can be done using plain vanilla JavaScript and css. But it is tedious to do it that way if you're trying to do something repeatable over thousands of pieces of content in a production environment on a live commercial site.
Sometimes you can come up with a minimally viable proof of concept using the developer tools in your web browser. Then you can figure out how to get the end result via whatever framework your production site uses.
@@w8mym853 how this animation effect while scrolling is done? With a pill for example. 1st project.
Nice one, cheers. The last one is obviously the winner
In my opinion, I think that my favourite is monopo. For the next year I think the Lunchbox style will be a web design trend with eumRay Liquid animation and 3D details of Seed. Thanks Caler for the video, very informative.
Glad you liked the video! I really liked monopo as well.
Looking forward to seeing more of your work. Thank you for what you do.
Thanks for watching!
Tons of valuable information, thank you so much. It helped me a lot.
These sites are INCREDIBLE
Excellent, I learned a lot.
Nice Video. Thanks.
Amazing All!
I start developing three years ago but to this day I have no idea how they are building this stuff!! wow
View source. Right click over interesting page elements and select "inspect" and try to figure out how they did it.
please show is the mobile views next time, amazing job tho
Great content
Thank you!
Really like the seed website - where would be a good place to begin to learn to do things like that?
I really love your work.
I have a question and I hope you can answer me.
One of client had watch your video and he want me to add the bubble translation effects to his website. I would like to know if It's availiabl with a pluging or not. And it'sthe case can you tell me the name cause I can't find it .. Thank you a looot
Hey, can you created this interactive grainy background in XD?
Wondering if these are all custom coded or any WordPress implementation. All amazing indeed!
If you can do it with web standard html, css, and javascript, you can do it on any website no matter if it's WordPress or joomla or some proprietary content management system. That's the whole point. Anyone who tells you that you need react, or vue, or whatever flavor of the day is selling it. Obviously for a production site there are reasons to use certain libraries or frameworks, especially if you need it to work with an existing system or any legacy data or whatever. But you can open a text file and type out the html, css and js necessary to replicate most of this. Some image editing and animation might be necessary, but using react doesn't change that anyway.
This designs feels small to medium enterprise company though. Hope there's a review on the standard looking functional website soon. Kinda like apple and etc. Or some smart arrangements of standard UI patterns.
This is good aesthetically though but these website can't scale. With that too much function website will be slow and also mobile responsiveness.
Nice Japanese! I’m still slowly moving through Kodansha 👌
Thank you!
any hint how the did the effect with the revealing germs andcollapsing pills? Thanks for the assistance
Bet you've been waiting to flex that Japanese on us for years now lol! Great video man :)
It probably sounds terrible to someone fluent lol, and thank you!
Thanks for the milanote link. What a great tool.. I think it will be new goto tool now for collecting ideas for a website instead of nested windows folders and a Photoshop file.
What libraries and frameworks are they using?
Do all of these sites perform well for page speed and core web vitals standards?
I assume not, but even if they do, you can tell visually that some of the websites are 'heavy' and 'slow', the best they can be for is portfolio, because it showcases your ability to code, but as an e-commerce or public website that many users visit, the slowness and heaviness of the website is a massive turn-off
all these scripts running at the website will probably lower the performance index of lighthouse quite a bit.
In terms of SEO these websites are trash Google is not going to rank them page speed matters alot
how can I make one like these? are they possible to build on wordpress and elementor?
nice
Would be awesome to see the mobile view for these sites.
mobile mostly less exciting 😅
but i want to see it
They look nice but I wonder how these sites would work on mobile or even ones thats not high-spec
I am a front end developer I am have huge passion in this and i love to make it but the i don't know how to do it i use framer motion but there is things can't do it if you have any ideas how to learn this please tell me
Can you make tutorial recreate lironmoran?
Hey ..can you plz help me how to create visa website with some unique ideas
To make something like this you would have to know both figma and front end?
Any idea how they were made?
I would be interested to know how the moving gadient works. If anyone has sources about this I would be very grateful. :D
probably javascript using either perlin noise or simplex noise that is influenced by the mouse's x and y coords in the screen. but not sure really, just new with this kind of stuff
A trick that is a bit easier and will have a similar effect is to have a .json file in the background that will play based on the mouse position in the viewport. (It won't be as good, but it is easier)
@@timothyprescott7621 what would the json file consist of? pixel data? and would it be much faster to run in javascript than noise?
Now i need a tutorial how to make thiss
Is all of the websites developed through coding?
Commercials should not push your eyes, they should let your eyes flow in a relaxed way.
Any non important information to your personal narrative for viewing is undesirable,
So your commercial design should allow you to navigate fast by your narrative, and only show relevant data.
If the viewer scanning pattern should be simple, if you put stuff all over it will block the flow. and promote leaving the viewing process.
Would be nice to see the mobile view of these websites
Can I do something like this by using adobe xd!?
no, you need to code it
Can these websites be created on webflow?
I think most of them is doable with a little bit of custom code.
Yes. The scroll interactions and custom cursors especially wouldn't take long to implement.
I need to know the platform of each site
These animations on these websites are created by coding or not?
yes coded
❤
It's really ridiculous ui but idk about developer, how did they achieve 😂❤
Wow, Wordpress has come a long way.
Maybe it’s just me, but these sites scream “Just because you can doesn’t mean you should” Too many sites have fancy interactions that impede navigating the site. Just my opinion
Seems to be a common stance on sites like these, so I don't think you are alone. Most I put on this list I try to make sure the UX is not completely horrible. I might make a UX top 5 or something like it in the near future for more everyday functional websites.
There are some that I look at when making a video like this that either ruin the navigation or make my Mac fans want to explode so I don't include them. However, I am sure some of these sites do that exact thing to some computers. But most of the sites I see like these, with a lot of fancy features that are heavy on interactions, usually are portfolios or agency websites targeting higher-end clientele. It's almost as if their websites are showcasing everything they can do for a potential client (not sure thats the best route to take tho). So I assume making their websites UX perfect is not as high of a priority as it would be if they where developing a social media site or an e-commerce site, where its goal is the most amount of users as possible. Just some of my thoughts tho, thanks for the comment! :D
@@CalerEdwards thanks for the reply. I am not a web designer per se, but do program a little and like to learn from others. I will say, though, some of those techniques are really cool. Very impressive some of them.
Anyone else come from htf5555?
me
Yep
Yes
Why do you think these websites are stunning design inspiration?
lunchbox changed, not great now :(
94% of my website visitors last quarter were on mobile! . . .
Seed
can you teach me how to create these in xd
I have more web design tutorials coming soon!
@@CalerEdwardsI am learning how to create business designs in xd from the state of Uzbekistan. Your videos are great
nice and thank you!
Hi
All this cool and stuff for the first few times you see/use them, then you just pray to heavens that you get something functional that doesn't fry your machine instead of all the flying counterintuitive crap these are
Must be some of the worst websites I've ever seen.
Horrible UX, I would close the tab as soon as I'd visit every single one of them (except for seed maybe).
is there a common UX problem with them or is it different for each? Just curious what your thoughts are on them.
@@CalerEdwards At least I can't read the words at ease.
I already seen those Websites
htf5555
how the fuck do you make these kind of websites........ i'm stuck with fucking bootstrap :D
Webflow :D
Jezus man, most of those have horrible UX. I'm focussing on managing the web experience itself, instead of the brand strategy and information. Never. Ever. Ever. Get your design ego in front of UX - for a commercial website.
I agree. Monopo site got my browser frozen for a minute. Balance between design and message should be the most important key regarding a website.
@@sl8415 That's the point tho. It's a creative agency, not a site designed for everyday customers.
@@botbot3698 That's okay, but the problem is far too much websites nowadays are bloated and full of unnecessary images or empty space (where you could put some more text in). Even for Design websites I prefer a more basic style, where I get a minimum number of information.
As already stated, e-commerce sites and agency/portfolio sites have completely different goals in mind and should not be held to the same "UX formula"
You need to A) understand the intended audience and B) evaluate your product through user testing. Only then can you really say whether it's good or bad.
Agree. Most of them are so over the top. Design for the sake of design.
monopo r zzzzzzzzlow
Hi --
I'm going to echo most of the UX pros take here - the UX on (most of) these sites is BAD. Don't believe me? Run Chrome Lighthouse performance reports for mobile. Failing across the board except for eumray.
Contrary to popular belief UX design is not visual design.
Design for the capability of the machine/distribution system first; followed by the lowest common capabilities of users, then think about branding on top for the interaction layer. Only then can you be concerned with visual embellishments. Motion/animation is unnecessary fluff when the typical user's goal is to get to the information to solve their problem.
Design for global standards first kids. It can either make or break your career.
scroll jacking should be illegal
everyone can make a good ux and logics. But making it beautiful and pop up is an art, bro
@@tekiero I find this kind of "art" mostly boring, uninspirative and casual. Nothing special where I feel HOME. It kinda lacks personality. Also we live in an era of overstimulation, so less animations is often more.
What is the sense of those sites, when we get no real info at all. I want sites that gives me straightup information, not this bright screen bs.
UI 👍 // UX 👎
your website is really looking bad brother is so minumum to the zero
either thanks for the video
Oh god i strongly dislike basically all of them
Thanks for the milanote link. What a great tool.. I think it will be new goto tool now for collecting ideas for a website instead of nested windows folders and a Photoshop file.
nice
Thanks