All of that, so that you can take some of these ideas and implement them in your own web design. If you’re new to the blog welcome, my name is ron sega and flux. This blog is the best place for you to learn how to become the best freelance web designer so make sure you’re subscribed and hitting that bell button.
We got a new free web design course coming up. We’re releasing three articles per week so make sure you’re staying tuned with us. Let’s jump right into the first website, so this website is called swap the world. Let me scroll through it. While I explain what is this website and why I like it? Basically, this is a website that kind of brings into attention the fact that mostly the donation for blood for cancer patients are from white people and we need blood from you know other people as well.
So we need more diversity and they’re trying to bring an awareness to that and trying to get you to donate some blood. Now why I love this website and I think they’re doing fantastic job here. I think this is a topic. That’s hard for people, people don’t really want to talk about cancer and all that stuff and they’ve taken an approach kind of make it into a little bit of a fashion brand here check out the colors.
This is really not not a cliche for a website that talks about cancer patients. They they did a really nice color selection, they’ve combined these abstract animation, and this really highly web directed like art, directed photography all using the same colors. So a few things about this. First of all, I think you can really see that’s nice here that a lot of times, people think that you need to either choose illustrations or choose photography, and you can here combine them and it looks really nice together.
It works really really well also in terms of the layout, so this layout here is really not not really cliche, it’s grid based, and so it’s easy to read, but there’s something in it here. Obviously, it would be kind of the cliche to break it into three columns step, one step, two step three, but instead they’ve built it. This way. With these illustration, breaking up the grid a little bit and also you know, when you’re scrolling there’s a little bit of a parallax going on here in this section, they’re talking about colors and so they’re, using colors to demonstrate their point about talking about colors.
And then, here again using this, really nice photo um in a more impactful way, when it’s kind of like big on the whole screen and so and here they’re, basically giving you using the same type of grid as before. By giving you stories about people who you can help if you’re donating, so I think this is really really interesting. Combination of the illustration of using these abstract, abstract circles to demonstrate.
You know that white people and non-white people are codependent and working together. I think it’s a really interesting way to storytell yeah and just in general, I think website looks really really great, we’ll see how it reacts on mobile when we get to the mobile part of it. Let’s continue to the second website, so the second website is called muay and basically this is kind of a website, for I don’t know if to call it ecommerce, but they’re selling, these kind of like high fancy furniture and art and all that kind of stuff.
So when you’re just getting into it, there’s kind of enter the experience and when you click that you kind of move into with a sound something that I don’t really like. But they’re breaking down these things into the objects into creating kind of a scene for you which is really nice to interact with, and then you can actually go inside and check out the object that they’re talking about again really really great use of the experience.
How they’re telling you that, and also good typography good layout, that you can see here really nice? The menu here is kind of a non-cliche. It looks like a pop-up with a search here, also a voice search, something that is not very common. When you see kind of search or menus that goes up so in general, I think this is a really cool approach for an e-commerce website that is different. It’s selling different things, and so it wants to tell the story about them in different ways.
So here they’re talking about a lamp if you go into the collection and you can move and see how it looks inside and so really really kind of a nice interactive way to show what they’re talking about, instead of just looking like another e-commerce website that really Created an experience that actually also works pretty well on mobile, we’ll see that in a second. The third website is this: one: reno and pele kind of a luxury brand um for clothe, and I like this because you know if you scroll down here, it really really looks and feels luxury, and you can see how you can create luxury just by using the Right type faces so the right font, including a lot of space.
So that’s really what creates luxury. I think here using a lot of white space using good imagery. This subtle, you know parallax effects here. So that’s really really nice um! You know you scroll in here and then it turns into kind of a grid. So this is an unexpected. You know after you’ve, scrolled in here and you’ve kind of get a feel for how this scrolling, all of a sudden, they’re kind of like creating this zoom out effect to show their um to show their in instagram feed.
So I think that’s really really nice way of showing how you can brand yourself. You know there are so many e-commerce website today and you have to compare with amazon and asus, so you want to be different. You want to create some luxury, and you can do this here again by great use of typography, the mixing of the fonts and creating the space and the layout to give this a luxurious feel to it. The next website is calexo, and I know that you guys are going to hate me on this, because this website, really when you scroll it, uses so much of your cpu, but basically this is kind of a drink that has thc in it.
So you know the active active weed marijuana thing in it, so i’m not sure if you’re getting high by drinking this, but they wanted to take you on this kind of a hippie colorful journey and note how they’re doing this you know so sometimes it’s these colorful Shapes combining with imagery of the ingredients and just kind of like a lifestyle imagery here. I think this is rather cool, even though um yeah, this website uses a lot of your cpu, but it still gives you kind of a cool experience, something that I really liked on this website is how they created the menu into this kind of a drop.
So this menu right, the hamburger menu – is kind of a cliche, but the way that they’ve made a drop out of it block that feels like in line, because this is a drink um. I feel this is really really cool way. Uh this this website. I think there’s a lot of things that you can take away from it, basically in their art direction, typography and layout. Maybe this kind of scroll interaction which here it is so now right now it’s kind of like stuck my brows – are stuck that’s kind of that sucks right.
You need to think about this. When you’re building your website, you need to have the balance between. You know how awesome and impressive it is, but then again it needs to be functional. It needs to be running around and not not crashing your browser, my god. I can’t believe it happened during the demonstration, let’s move in into the next and last website. This one is called the a to z of ai, which is artificial intelligence, and basically, this is a website, it’s kind of a content hub for a lot of terms that are about you know, artificial intelligence, and I think they did this really really smoothly.
Um kind of like encyclopedia, look to it with the abc, but then, when you hover over it, you know the the illustrations a little bit change. You know they change the color, so the d instead of blue becomes uh, um, green, and so you, you know that they’ve used probably kind of like an svg animation to create this, which is really subtle. When you click it, it kind of has a really smooth page transition to it and then you’re kind of like reading the typography.
So note it so here it every article has a color to it, but when you’re getting into reading the actual article they’re switching back into a light background, because they know that it’s probably much easier to read on this light background versus on this colorful. So it’s really good a nice user experience, but also feels great. You know when you’re scrolling into it. So this is a really really nice website, that’s oriented for helping you to read content, and I think they did this really really nicely.
So these were the five website, let’s jump into the moba here and uh, and let’s see how they look when we’re opening them up on mobile. So the first one here is: it’s swap the world. You can see here something nice. These are actually different, colors and a different image here, which is nice, so they basically created two different versions: i’m not sure if it’s random or if it’s just you know mobile versus desktop, but they change the color scheme here on mobile and it looks great as Well, also very fashiony and yeah, so this website I feel like it’s working really well on.
You know on mobile as well. You can get access to most of the information loads, pretty sweetly here on my iphone, so I think this website I would rate it as work. You know adjust it for mobile responsiveness, really well, let’s check the second one, the movie, so this one just let it load for a second all right. So this one, let’s see what happens if we enter this kind of movie experience? Well, it’s kind of lagging a little bit, but the animation works and yeah.
You can actually still see the the whole scene here and you can still click on things. So, overall it works. I would say it works. You can open up this sub menu here for the item that you have just picked up overall. This is not a bad mobile, responsive kind of like an ecommerce website, so that’s I would rate it not bad at all. Let’s move into the next one. Let’s see the reno and pillai here, um yeah, this is quite obvious, still looks super luxurious.
They did uh removed a lot of the things here. So here we had images on the sides, for example, and they obviously minimized this a lot for mobile. They also remove these kind of the scroll interaction. Remember the zooming interactions, so they’ve removed and minimized the experience on mobile, which is you know. Sometimes you need to do this because not everything that you do if you try to force every interaction on mobile, sometimes that that does not work really well, let’s see the calyx so here on mobile.
So this is weird. This is what you see before you scroll. This is, I wouldn’t say this is a great experience because you have like: where did the hell did I came into? I don’t even know what this website is, I just see scroll down and then you scroll down, takes a while to get into where you actually understand where you’re at so. This is kind of like again this website, there’s stuff – I like it here, but um and it’s I think it’s amazingly well designed, but I think the experience wise you know development and how it handles the scroll interaction.
I think this, it’s not perfect could have been done better, the last one, the a to z of ai. I think this is pretty straightforward. They’ve put here the kind of a category, so you can scroll them, but most of it, yeah transition still works well on mobile and all the rest looks pretty similar, so yeah pretty good experience. Let me know what you thought about these website. If there’s anything I know, a lot of the comments are hey.
Were these builds on webflow? No, these website that I showed not right now did not were not built on webflow, but I do think that we can pretty much achieve most of these effects and transitions and obviously layouts and designs on webflow. So if there’s anything that you were wondering here, hey, how could I achieve this thing on webflow? Let us know in the comment and we’ll create a special article around that.
As I said in the beginning, we are pumping out new awesome articles for the free web design course so make sure that you’re subscribed and i’ll see you on the next article. You