---
title: Delightful Design
teaser:
tags: design
author: Edward Loveall
published_on: 2012-06-25
---

![::Hug::](http://media.tumblr.com/tumblr_m66ctiFGxq1qbxxsk.jpg)

There's a feeling you get when you go to a particularly delightful website, when
the designer has put more into it than an engaging logo or some trendy jQuery.
There's a feeling of fun that people will remember and have an emotional
connection to.

## What do you mean, emotional

There's a sense of thrill around these websites; a _want_ to find little easter
eggs. This is different than finding a site that's pretty or easy to use. It
hits us at a lower level than that. If you've ever smiled quietly to yourself
while on a website in your small office cubicle, you know what I'm talking
about. There's just something about that site that's uniquely intriguing.

## But who cares

Everyone does. This isn’t just a gimmick, this is a tool. That feeling of
delight leaves an impression in the visitor's mind. That impression will last
and they’ll remember and revisit your site. [Studies have
shown](http://www.wikidoc.org/index.php/Emotion_and_memory) that emotion invokes
memory. If you can convey a fun or pleasant emotion, it will be remembered
pleasantly. In contrast, a difficult or painful emotion (such as your local
DMV's website) will invoke a distinctly opposing memory.

## So how can I do that

Look at your site. Is it well designed? Do you have a cool beta tag on your
logo? Great. Now, what can you do to make that fun instead of just pretty?

Try thinking about motion and depth. Consider interactivity where you have
static elements. How about making something come alive that is currently just
sitting there? How about a subtle joke? You need to have a certain sense of
humor and playfulness to design for your audience's emotion. After all, these
are the emotions you're trying to hit, and they have the same effect on you that
they'll have on everyone else.

## Prerequisites

All this is fun, but you can't even begin this process if your site is hard to
use, slow and poorly laid out. That all comes first. Think about a geocities
site. Now give it [parallax
scrolling](http://en.wikipedia.org/wiki/Parallax_scrolling). Now die a little
inside.

## Is anyone actually doing this

Lots of people. Here are a few:

* Panic uses interactivity to show off features for
  [Transmit](https://panic.com/transmit/).
* [Shaun Inman](http://shauninman.com/pilation/) uses magnetism and momentum to
  show off his portfolio.
* You can see a parallax effect on the vines at the top of
  [Silverback](http://silverbackapp.com/)'s  page when you resize your browser
  window.
* There's a great story told by [Frank
  Chimero's](http://www.frankchimero.com/intro.php) site when you scroll down.
* [Kaleidoscope](http://www.kaleidoscopeapp.com/) uses animation to very subtly
  rotates the colors on their logo.
* I thought [Ben the Bodyguard](http://benthebodyguard.com/index.php) was a game
  at first. They use scrolling as the timeline for a movie-like trailer. Turns
  out it's a secure storage app.

Take a look at these, start keeping a list for your self, but don't just mimic
what you see. People can tell, and it won't have nearly the same effect. These
aren't standards, they're proposals. They say, **"come see why I'm different
than everyone else"**. And that's exactly what you want.

## Further Reading

[Designing for
Emotion](http://www.abookapart.com/products/designing-for-emotion) is a great
book that looks at this concept and many others in much more depth. It's highly
worth the read.

The [Little Big Details](http://littlebigdetails.com/) Blog collects examples of
these details from all over the web.