Speaker A
Playful websites are slowly being replaced with corporate AI mush like this.
Learn 4 UI design hacks to transform boring corporate designs into playful, engaging websites with motion, storytelling, and finishing touches.
Key Takeaways
- More contextual elements can enrich a design rather than clutter it.
- Motion and animation should be purposeful and add delight, not just decoration.
- Storytelling through text animations and micro-interactions enhances engagement.
- Friendly, natural language improves user experience over corporate jargon.
- Creative finishing touches like unique 404 pages leave a memorable impression.
Summary
- Modern websites often feel sterile and uninspired compared to playful, well-designed sites.
- Adding more contextual elements can make a design feel richer rather than cluttered, as seen in invoicing and crypto websites.
- Use playful illustrations, doodles, and subtle decorative elements while maintaining good spacing to avoid clutter.
- Motion should enhance delight, not just utility, with animations like rotating stars or flying balloons to add personality.
- Parallax scrolling and easing effects create a more lifelike, engaging user experience without overwhelming complexity.
- Animated narratives and micro-interactions help draw attention to text and make storytelling more engaging.
- Friendly, natural language improves user connection compared to corporate jargon.
- Finishing touches like creative 404 pages add personality and delight in unexpected places.
- Tools like Mobbin help find inspiration by curating the best playful and colorful website designs.
- The goal is to balance playfulness with professionalism to create bespoke, delightful user experiences.
Full Transcript — Download SRT & Markdown
Speaker A
Somewhere along the way, modern became a synonym for sterile.
Speaker A
Like Mailchimp pre-2020 and Mailchimp now.
Speaker A
Nothing is wrong with it.
Speaker A
It just doesn't have the fun, the curiosity that well-designed websites do.
Speaker A
So, here's how to take a frankly uninspired design like this and turn it into something delightful for the user.
Speaker A
More is more.
Speaker A
For example, take a look at this invoicing website.
Speaker A
There are a lot of things on the screen, however, if we remove them, it doesn't make the website clearer, it just makes it feel empty.
Speaker A
And there's a lot of helpful context in those elements, like the money, the invoice, and the crypto.
Speaker A
Without even reading anything, we start to get a pretty good idea of what the product is for.
Speaker A
Or this fun crypto website, very similar layout and idea.
Speaker A
The core message is clearly laid out in the center, and everything else, like the coins, Ethereum, and fun character are there to give context to what the landing page is about.
Speaker A
And then we can apply those same principles to our own landing page.
Speaker A
First, let's trash this image and then we can center our text and change a few of our other styles.
Speaker A
Then let's add in a few images and grab a few doodled illustrations of them.
Speaker A
Throw in a few twinkles, as I'm calling them.
Speaker A
And then a couple tasteful scribbles.
Speaker A
But not overdoing it is important.
Speaker A
For example, we do have some empty space up here.
Speaker A
So, if I was to grab another illustration, we could pop it in here.
Speaker A
But that pushes our design over the line to cluttered.
Speaker A
Notice that with all designs, they maintain good spacing around the text so that the elements are context, not cluttered.
Speaker A
Since we're breaking the box and not arranging elements in line with the grid, we need to be very selective in how we arrange them.
Speaker A
There's a lot of eyeballing it, but generally, you want the elements to draw the user's attention to the center.
Speaker A
That's why in this crypto site, you'll notice that the elements trail off the further you get from the center.
Speaker A
For example, on our design, if I was to tilt these like so.
Speaker A
It's not objectively wrong.
Speaker A
Something just looks off.
Speaker A
But nailing the vibe of the website is important too.
Speaker A
The crypto website is by far the most playful with blobs and fun colors.
Speaker A
Whereas this invoicing website is more on the side of professional with more realistic imagery.
Speaker A
We probably land somewhere in the middle with our doodles.
Speaker A
To give you another example, Gumroad has a neo-brutalist vibe that probably falls pretty close to our own design for playfulness.
Speaker A
But honestly, finding examples like this used to take forever.
Speaker A
But recently, a tool I've been using a lot is Mobbin sites.
Speaker A
The sponsor of this video, which curates thousands of the best websites and landing pages online.
Speaker A
So, if we're looking for playful sites, we can filter by colorful and fun and immediately find gems like this.
Speaker A
To see how real design teams approach the same problems that you and I are.
Speaker A
You can see the full preview, all the sections, and even the live site.
Speaker A
If you're interested, you can check out Mobbin using the first link down below to get 20% off.
Speaker A
Motion for delight, not utility.
Speaker A
But just because things don't have to move, doesn't mean they shouldn't.
Speaker A
For example, Paste app doesn't need to have all these scroll animations.
Speaker A
This could be presented statically and get the point across.
Speaker A
Or Daniel's portfolio.
Speaker A
It's pretty subtle, but right at the bottom, you can see these images rotating in.
Speaker A
On a side note, these animations with the graffiti and realistic pins really make this a very diverse and engaging portfolio to scroll through.
Speaker A
Anyways, moving on to our own example.
Speaker A
Our doodled elements like this could have no entrance or a really robotic fade in.
Speaker A
But that's no fun.
Speaker A
For example, with this small star, what if we had it rotate and pop into view?
Speaker A
And for the hot air balloon, instead, let's have it literally fly in from off the screen and very slowly bob up and down once it's in place.
Speaker A
Finally, our calendar will move and rotate in as well.
Speaker A
Here's what it looks like before.
Speaker A
And here's after.
Speaker A
We can even apply some easing, which we talked about in a previous video on mobile swipe effects.
Speaker A
To create even more natural motion.
Speaker A
And because we have these elements in our large and fairly spacious margins, we can leverage a bit of parallax on scroll.
Speaker A
To get a much more lifelike feeling website without needing to layer in crazy backgrounds like this.
Speaker A
And this is exactly how Delassus makes their website feel 3D along with some fantastic mouse interactions.
Speaker A
Animated narratives.
Speaker A
But because text is like 80% of most websites, it's neither fun or interesting.
Speaker A
Adding on to our last point about motion, Apple does a magnificent job of incorporating motion into their Mac Mini landing page.
Speaker A
And it is magical.
Speaker A
Let me show you again.
Speaker A
A slightly simpler but very interesting storytelling website is Reboot.
Speaker A
Where they explain their product with text animations and micro-interactions.
Speaker A
So, on line one of our own design.
Speaker A
I'll start with a simple fade in, slide down for track, but we'll make deadlines into an actual progress bar that fills up.
Speaker A
Then rises up and out with the word deadline replacing it.
Speaker A
Then on line two, we'll start the same way, but paid will be replaced with dollar signs that bounce and then slide down.
Speaker A
And paid will actually drop down.
Speaker A
Finally, I'll add in a little checkbox out at the end.
Speaker A
All together, it looks something like this.
Speaker A
And while these effects were pretty simple, combined with the motion we set up above, the website really starts to come to life.
Speaker A
The goal isn't to be as complex as possible, but to draw attention to the text because it's moving.
Speaker A
For example, Logan's portfolio, which is entirely text, except for this one blur effect, which reveals some fun message bubbles.
Speaker A
Or take Chester's website.
Speaker A
It's refreshingly simple, but with the variety of small hover interactions of pretty much everything, means that simplicity isn't bland.
Speaker A
But while I'm no copywriter, it's not just about motion.
Speaker A
It's also about having friendly text.
Speaker A
Like here, how they say they sweat the details instead of something like we take pride in our attention to detail.
Speaker A
Or look at Basecamp's entire website, it's built around natural, easy to understand language instead of corporate jargon.
Speaker A
Finally, we have some finishing touches since design is often more about the things you don't see than the details that you do.
Speaker A
Finishing touches.
Speaker A
For example, 404 pages, these are the ultimate time to be quirky and fun.
Speaker A
Because the user literally doesn't belong there.
Speaker A
Mobbin's 404 page is an interface guessing quiz.
Speaker A
While Pixar's is a character from one of their movies.
Speaker A
And this pizza website automatically redirects you once the snake eats all the pizza from the tree.
Speaker A
This is our simple 404 page for our website, tying in with the personal text from the previous example.
Speaker A
And some smooth animations too.
Speaker A
And that is how we take a boring corporate AI generated design and turn it into a playful bespoke masterpiece.
Speaker A
If you do want to check out Mobbin, my link below will get you 20% off.
Speaker A
And the link to grab all of the assets we used in this video will be down below too.
Speaker A
Thank you so much for watching.
Speaker A
And I'll see you in the next one.
Topics:UI designweb design hacksplayful websitesmotion designanimated narrativesmicro-interactionscreative 404 pagesMobbindesign inspirationuser engagement
![The Wounded Spirit – Timothy Keller [Sermon] — Transcript](https://i.ytimg.com/vi/pkL3R27ZV1o/maxresdefault.jpg)
