medium bookmark / Raindrop.io |

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.