An excellent video by Chris Misterek discussing the six high end website design styles. Well worth a look for inspiration.
The designs highlighted are brilliant and would take a lot of skill and talent to make a similar one yourself. There are helpful tools out there now, including Anime JS, whose website is mentioned as an example.
One amazing website that's now offline, Structured Money, is beautiful but its design didn't save the business. Many of the example websites mentioned are difficult to find which shows that a groundbreaking design doesn't mean customers will find you. Although getting a mention in the Awwards website will give you a warm fuzzy feeling!
Below are my notes and points I got from watching the video.
The first one is called the Steve Jobs. Apple perfected this style on their own site, and sites that use this tend to use thin sans serifs, a spacing and type that follows an obvious system.
Everything on the page feels organised without feeling too stiff. It's like the site that when you scroll it, you wish your life looked and felt like it.
Useful for client who want "I just want something clean". This is exactly what they mean. They strike this really cool balance between systems and rules and then feeling like cutting edge. And I think it's because of the same reason that those spaceship doors in movies feel, like, really advanced, right? The ones with no knobs or handles, you just have to think open, and it opens. Removing stuff is what makes it feel like the future.
And if you're working on a website with this kind of style, the main thing is you can't be afraid of white space. Just because a section doesn't have a lot going on doesn't mean it's not well designed.
Perfection is achieved, not
Antoine de Saint-Exupery
when there is nothing more to
add, but when there is nothing
left to take away.
But some projects call for an even more buttoned-up version of the Steve Jobs.
They want to be more precise and calculated. I call this next style the Jensen Huang.
Jensen is the CEO of Nvidia, quietly banking off their massive need for the chips that power the AI. But here's the thing about Jensen. He's clean cut. He's put together in every single interview, and he always wears a leather jacket.
He doesn't have time to think about outfit variations. He's trying to change the world with tech, and that's exactly what our next web design style is trying to communicate.
These websites are almost always a sassy company and, and typically, but not always, they're AI.
Their main goal is to try and get new investors. They need to communicate a no-fuss stability who mean business, like the Melrose AI website for example. Everything is, is buttoned up. Think of it like taking the Steve Jobs style and making it even more precise, but that doesn't mean there's no style.
Even Jensen himself wears a leather jacket. He could wear any kind of jacket, even a poorly fitted blazer like much of his counterpart's wear. He wants to be seen as having a little bit of coolness. That's just not his main thing. This style is for clients that are, that are more concerned about looking put together than standing out.
They want to communicate that they're building the future of technology over being the best looking brand. If you've got a project that calls for this prioritise function over form. Keep things in a really clear grid. Be careful about any loud or distracting design choices. Everything should pull attention back to the product, not take away. You're not trying to be cool. You're trying to be the next big tech breakthrough.
All right, so if the Jensen Huang style feels on mission and calculated, the next style is all about being warm and inviting. I call it the Drew Barrymore.
Drew Barrymore has become everyone's girl next door, the, the friend that you call when you want to vent to someone who's not going to be judgy about it. And sites with this style have a candid feel to them. As if you walked in on a private moment, and they were like, "No, no, it's, it's all right. Come in. In fact, I'm glad that you're here."
The design doesn't take itself too seriously. There's, there's nothing super bold, and there's even a noticeable bounce to things with the animations that they use. Like, check out this Fruitful site. The, the person in the explainer video is filming it from her apartment, and this dude's got a hat and a T-shirt on, and this is for an automated system for managing your money. And look, even when I click anywhere on the site, these little leaves animate out of it.It, it's just a perfect picture of the Drew Barrymore.
This style is for clients who want to communicate that they are approachable and down to earth. The main thing that you need to pull this off is, is good photography, the kind that splits the difference between highly produced and highly authentic.
But I know after having worked with a lot of clients throughout the years, that they don't always bring the best imagery. The good news is you, you can subsidize that by doing things like rounding out the corners of your cards or your images or even going with a colour palette that has warm tones and a real natural feel to it.
And if Drew is the friend who feels like a warm blanket, the next style is the friend we run to make sure our outfit doesn't look like something our grandpa would wear. They're the cool friend, and I call this the Zendaya. Zendaya is iconic, right? She's always two steps ahead of the trends, if not creating them entirely. She's comfortable with attention. But doesn't have to try too hard to get it. In fact, she sometimes feels like she's not trying hard at all on purpose.
You'll see sites like this in all kinds of industries, but they carry a high fashion editorial type feel. The imagery, if there is any, has a cinematic cologne commercial feel to it, and the design is typically ultra minimal with layouts that don't necessarily follow common principles.
We know you have to bounce your eyes to read different paragraphs, but we're too busy being cool to worry about it. And sure, it works for a lot of fashion brands, but it could be for lots of other kinds of businesses as well. Like check out this Sstill Agency website. The entire homepage is this video that looks like an ad for Paris Fashion Week. Pretty cool and fits this style perfectly, because that's kind of the point.
Clients who need this communicate their value by showing people their taste, not necessarily by saying, "If you hire us, you'll get XYZ in return." What you get is understood innately from who they are. And if you're working on a project that needs this style, you need to become familiar with Swiss design and editorial design. So modular layouts are your go-to move, and some of the normal design principles kind of have to take a back seat. So don't be afraid to scale back the font size or r try a layout that's a bit unconventional.
And if Zendaya pulls you in with her coolness, the next style pulls you in with a visual element that you can't stop thinking about. I'm calling this style the Virgil Abloh.
You might not know Virgil offhand, but you have definitely seen his work. He's the founder of the streetwear company Off-White and has done album covers for all kinds of artists, including Kanye.
His style isn't about minimalism or maximalism, which honestly both show up depending on the project, but that's not the point. It's about being something that you can't ignore one way or another. And websites that pull on this style want to do exactly that. They want you to see an element and say, "That's sick," and then make you wish that you would've thought of that first.
It doesn't necessarily have to be an image either. It can be a font that really stands out or a colour palette with really high contrast or some kind of imagery that the moment that you look at it you know it took skill and talent to create.
Check out the Obsidian Assembly website. The moment it loads, your eyes are instantly pulled to this unique font that's a bit bigger, and this 3D-looking shiny rock. And, and it gets better as you scroll. Each interaction was designed to pull your attention towards the visuals. And if this is the direction that you're going with on a project, don't feel like you need multiple stunning visuals every single section or even every single page.
There's a way to do this that isn't tacky or distracting, and most of the time that means picking one cool visual element and repeating it throughout the site tastefully- maybe it's a super big unique font that works more like a design element than it does text that you have to read, or maybe it's a small 3D object that stands out. The point is contrast, not bigness. You want people's attention to be drawn to it because it stands out, not because it's screaming at you.
And if the Virgil style wants you to keep thinking about its visual elements, the next style wants to completely blow your mind. I'm calling it the Christopher Nolan. Nolan is the director of movies like Inception, Interstellar, Batman, Dark Knight, to name a few, and every single one of his films feels less like a movie and more like a roller coaster ride. You can usually tell within the first three seconds that you're on a Nolan style site. Something moves. Something morphs. The hero scrolls in a way that you've never quite seen before. These sites aren't trying to be clean. They're not trying to be cool. They're trying to impress you, and they're not subtle about it.
There is some kind of interaction almost every part of the website. For example, visit the Active Theory site. The moment that it loads, the type's doing something weird, and you scroll, and the sections don't just sit there. They, they react with you as you're scrolling. And by the time you hit the bottom of the page, you wish you could have watched over the shoulder of the developer or the designer that was making it.
This is for the clients who say, "I want a wow factor." And if this is the kind of style that you want to get good at, it's a long learning curve. There are skills that have multiple layers, from design to UX, some really serious coding knowledge. And because of all those requirements, it typically takes a team to build it. That doesn't mean that a one-person show can't pull it off. You have to be patient and steadily keep adding skills. And the good news is there's some great tools out there that will get you there quicker, like Unicorn Studio or, or Spline. Those will help any level of designer punch way above their weight.
Chris Misterek, https://selfmadewebdesigner.com/
You must be logged in to post a comment.