Here is some web and packaging design that I’ve found inspiring. Hopefully, it’ll inspire you too!
Glossier is an online skincare and makeup company known for making fun, simple essentials (like Generation G and Boy Brow). They also have a distinctly youthful, feminine brand, right down to the millennial pink. They’ve been on my radar for a while and recently I decided to order some products from them.
The Website
Glossier has a rather minimal site: they have a small selection of products, and stick to a classic black and white color scheme with some splashes of pink. Right away, they add a playful twist: their loading icon is a rotating Saturn. When you hover over an image, the cursor changes to a different icon of a palm tree or lightning bolt or piano. It’s an unexpected surprise and invites you to hover over other images, if only to see what icon you’ll get.
Learning Moment! If you’d also like to use custom cursor icons for your website,
you can use the CSS cursor property!
<div class="fun-cursor">
This div will have its own unique cursor.
</div>
.fun-cursor {
cursor: url(‘cute-icon.ico’), default;
}
I added the default there in case your cute-icon.ico doesn’t load
for some reason. Always good to have a backup plan!
The Glossier product line is full of other small details that feel playful and original: their Cloud Paint blush comes in what looks like a paint tube. If you’re not familiar with blush, it usually comes as a powder in a circlular case. The Cloud Paint packaging is radically different, and it’s delightful to see how Glossier found a way to innovate in a space with such standard designs.
On a UX note, their checkout process is also refreshingly clever. Rather than going through a series of pages, you see everything on the same page. The triptych design allows people to scan all the important information at once, while still making it clear where they are in the process. You don’t need a progress bar if everything’s right there in front of you!
By the way, you may have noticed the G logo at the top of the website and on a few of their products. That logo is inspired by blackletter. Which leads us to another…
Learning Moment! Blackletter is a Western European script that is no longer commonly used, as it can be hard to read. However, it’s great for headers, logos, or fashion.
Glossier mostly uses the same sans-serif font throughout their website, which makes the blackletter logo stand out even more. By mixing up the typography, they instantly liven up their website and brand. It has an illustrative quality, without requiring any illustration skills.
If you want to learn more about blackletter, try it out as a Google font or look at over 300 examples. There’s a dizzying amount of variety amongst blackletters, and you may find it’s just the extra little flourish you need to distinguish your own website. Have fun with it!
Now if you thought the website was cool, wait till you see the box.
The Packaging
The Glossier package is immediately recognizable by the huge logo on the packaging tape, a smart way to repurpose something utilitarian. Though the outside of the box looks nondescript, the inside is entirely pink with a cute brand message (“SKIN FIRST. MAKEUP SECOND. SMILE ALWAYS.”) Both details already make the box more noticeable and exciting than a regular delivery box. You feel like you’re getting a special gift just for you, rather than a routine online delivery.
The products I bought came in this cute, reusable bubblewrap pouch. Many things we order online come delivered in bubblewrap, which inevitably ends up in the trash. While we don’t necessarily need a pink bubblewrap pouch with every online delivery, it’s still fun to see how delivery boxes can be reimagined for reuse. I will definitely be using this pouch to store makeup when I travel!
Lastly, who can forget the surprise stickers, and the additional branding on the inside of the makeup boxes themselves? At this point I shouldn’t be surprised that Glossier will add cute details everywhere they can, but I am, and I love it.
Closing Thoughts
Overall, Glossier’s website and packaging feel fun and delightful without ever getting in the way: I wouldn’t care about the cursor icons if it was difficult to buy something on their website. They’ve managed to find ways to innovate on tried and true conventions (even bubblewrap!) and whether or not you’re into makeup, you too can pull some inspiration from Glossier.
At thoughtbot, we may not have done any packaging design or had a cosmetics client (yet), but we’re always looking around for design inspiration, especially outside our areas of expertise. By looking to other industries, we can learn more than if we stay in our comfort zones.
By the way, if you order something from Glossier now, you’ll get their new summertime sticker! Treat yourself~
This is not a sponsored blog post. We just really like Glossier’s design.