Tag Archives: creativity

11 Awesome Popup Design Examples – Scored by The Delight Equation

I admit it. I’m a geek. Or am I a nerd? Definitely not a dweeb, but probably a keener (that’s a Canadian term).

One of my favorite things to do (as a marketer) is to reverse-engineer marketing experiences – good and bad – to define an equation that can be used to score them. It’s primarily a heuristic exercise, but I find it’s an incredibly helpful way to analyze a design, especially when it has the ability to leave you with a simple checklist of things to consider to make it better.

In the past, I’ve created The Clarity Equation (for value propositions), and The Testimonial Equation (for customer social proof).

For today’s post, I focused on popup design examples that exude positive characteristics, to create The Popup Delight Equation.

What Makes a Popup Design Delightful?

Hands up if you thought “That’s an oxymoron.”? I know, I know, how can a popup be delightful? Well, just like any other aspect of marketing and web design, it’s all about the details, and finding those magical ways of combining what makes your brand special, with a dose of responsible interaction design.

I see delightful popups all the time, usually because the copy is hilarious, or the design is surprising.

If your perception of a popup is one of those ugly WordPress template type things with three big green checkmark bullet icons (see below), and a Johnson box (those fat dashed red lines that resemble a coupon cutout), then no, that’s not delightful. That’s just shitty.

It is possible to make a popup delightful, and it’s not that hard if you know which aspects of interaction and visual design are required to do it right. Which brings me to…

The Popup Delight Equation

The equation (shown in the image at the top of the post) is broken down into 7 principles; Clarity, Control, Creativity, Relevance, Charm, Value, & Respect.

Each principle has a few checklist questions that build up a score between 0 and 1 (you can choose 0.5 for any of them if you like) for a maximum score of 7. These are then combined and turned into an overall percentage score as shown below:

0 1 1 1 0 1 0 57%

I’ll explain each of the delight principles, and then I’ll get to the popup designs.
(skip to the examples)

Principle #1 – Clarity

The clarity principle represents how easy it is to understand the offer presented by the popup. First, there’s the immediacy factor, can you read and understand it very quickly. The second part concerns the use of a primary “hero” image and whether it helps or hinders visual communication.

Clarity = ( Immediacy + Hero ) / 2
Immediacy Can you explain what the offer is after looking at it for only five seconds? Yes 1, No 0
Hero Is there a primary image (not a logo) that shows what you will get (or who you will get it from)? Yes 1, No 0
If it’s a generic site-wide offer like a discount that doesn’t need an image, score 1.

Principle #2 – Control

The control principle represents a visitor’s ability to fully control the experience. This includes being able to easily accept, reject, or discard the interruption.

Control = ( Close [On] + Close [Out] + Close [Esc] + Continue + Cancel ) / 5
Close [On] Is there a close button (typically an x) on the popup? Yes 1, No 0
If it’s a fullscreen “Welcome Mat” you can take a 1 here unless there’s no “No thanks” button.
Close [Out] Does the popup close if you click on the background surrounding it? Yes 1, No 0
If it’s a fullscreen “Welcome Mat” you can take a 1 here.
Close [Esc] Does the popup close if you press the escape button on your keyboard? Yes 1, No 0
Continue Is it clear what you need to click in order to accept the offer? Yes 1, No 0
Cancel Is it clear what you need to click in order to decline the offer? (Score 1 if there’s only one option) Yes 1, No 0

Principle #3 – Creativity

Like any type of marketing communications, a creative popup will be more likely to be well received. This principle is comprised of visual design esthetic, the inclusion of (non-tacky) animation, and how on-brand it is.

Creativity = ( Design + Animation + Brand ) / 3
Visual Design Esthetic Is it unique looking (non-rectangle), or just look awesome to you (some subjectivity is okay here)? Yes 1, No 0
Animation Does it include some motion as it appears that makes it more noticable. Yes 1, No 0.5, Yes, but it’s annoying 0
On Brand Does it match the site’s design or look like a cheap template that could be from any site? Yes 1, No 0

Principle #4 – Relevance

A popup that isn’t highly relevant will convert poorly and moves you closer to the wrong end of the interruption spectrum. This principle includes congruence (how aligned the offer is with the page you are visiting) and targeting.

Relevance = ( Congruence + Targeting ) / 2
Congruence Does the offer feel related to the page you’re on? Yes 1, No 0
If it’s somethng like a site-wide discount it’s a 1, but if it’s a blog subscribe popup on a homepage, product or pricing page etc. (not your blog), that’s a 0.
Targeting Score 1 unless one of these scenarios is true: it doesn’t apply to you (such as wrong country), or it’s referring to you coming from a page/partner/place that you didn’t come from (and in general if it’s making assumptions about you that are incorrect), in which case it’s a 0

Principle #5 – Charm

You know a charming marketing experience when you see one. Same goes for popups. If the design and/or copy make you laugh, or smile, or want to share it with someone, it’s a winner.

Charm = ( Smile [Design] + Smile [Copy] ) / 2
Smile [Design] Does the visual design make you smile? Yes 1, No 0
Smile [Copy] Does the copywriting make you smile? Yes 1, No 0

Principle #6 – Value

Some popups only contain information, some have a discount, others ask you for personal information in order to claim the offer. The value principle is concerned with how fair of an exchange it is, and it’s completely binary. If the reward is equal or greater than the ask/effort, you win.

Value = ( Reward >= Ask )
Reward > Ask Is the offer worth more than or equal to the requested information/effort? Yes 1, No 0
Score a 0 if it seems unfair, such as a ton of form fields for very little in return.

Principle #7 – Respect

The respect principle leans on the concept of “a responsible use of technology”. The biggest offense in this regard is the idea of “Confirm Shaming”. This is where there are two options (continue or cancel), but in order to cancel, you have to click a button/link with offensive copy – such as “I don’t like free money”. You get penalized extra for this offense.

Respect = 1 – 2*(Confirm Shaming)
Confirm Shaming If this is a two-button Accept/Decline popup, and the decline button is offensive in any way, it’s confirm-shaming. Yes 1, No 0
A 1 here results in a -1 score for principle 7.

Mid-post call to action: click here to subscribe to the weekly updates.

Brands Appearing in Today’s Popup Design Examples

Thanks to these awesome companies/people for inspiring me to include them: Tim Ferriss, Leesa, ClassPass, How-To Geek, Groupon, Tasting Table, Get Response, Lemonstand, PetSmart, Travelzoo.

Note: None of these popup designs score 100%

I’m sure you’ll like some, and dislike others. I’m including a wide variety of examples because they each show different aspects of the delight criteria.

Popup Design #1: Tim Ferriss

0.75 0.8 1 0.5 0.5 1 1 83%


This fullscreen “Welcome Mat” popup takes over the screen when you’re leaving. I dislike this style when it happens when you arrive, but on exit, it’s totally cool. It’s a simple and classy design. Let’s score it!

    I gave it 0.5 for immediacy as I had to figure out what the content was (fortunately I just bought a book about Seneca so I caught on). Having Tim in the background makes it very clear it’s coming from him.
    The only failing here is the lack of the escape button working, which is my favourite way of dismissing a popup (I’m a big keyboard shortcut fan). It’s much faster than hunting for a close icon/button.
    I love the design. It’s fresh and open. The visual hierarchy of the buttons is perfect: dominant continue, secondary cancel.
    It loses out a bit on relevance, as it’s a speaker contact page, making this popup incongruent.
  • CHARM:
    Visually, yes. His authentic smile makes you feel welcome.
  • VALUE:
    It’s a 2-step opt-in form (email address if you click “Unlock”), which is a fair deal.
    “No thanks, I’m not interested.” is great. It’s all you need to do on your cancel button. No confirm shaming here.

Popup Design #2: Leesa Mattress – Countdown Timer

1 1 0.83 1 0 1 1 80%


There are so many mattress 2.0 companies out there now, it’s hard to tell them apart aside from the colour. This one’s really plain, and quite boring, but it does get bonus points for the countdown timer, and not breaking any of the fundamental delight rules.

    Full control.
    It got it’s creativity 1/3 only for being on brand, but I added a 0.5 bonus for the countdown timer, which is a nice touch for ecommerce.
    Timely and on point.
  • CHARM:
    Nah. They could do way more with the copy and the visuals are kinda bleh.
  • VALUE:
    Hard to argue with a discount.
    No problems here.

Popup Design #3: Tasting Table

1 0.8 0.17 1 0 1 1 71%


I like the use of a question headline in this popup. If you aren’t then you probably shouldn’t be on the site, so they’re helping to self select their ideal customer/subscriber. I’m not a foodie, however, so I’m closing it ;)

    Get an email, about food. Easy.
    No escape button close on this one either. Grrr.
    It gets a few points for being on brand, but nothing original otherwise.
    It’s food.
  • CHARM:
    Lots of potential, but doesn’t deliver.
  • VALUE:
    I was going to ding it for asking for a zipcode, but it probably increases the value so it get’s a pass.

Popup Design #4: Get Response

1 1 0.67 1 1 1 1 95%


Simple and a bit weird (and basic) looking, but it rocks the scores beacuse it doesn’t break the fundamental delight rules, and adds some playfulness to stand out. Give it a little wiggle animation to go with that cute little alien thing and it would get a perfect score.

    Pretty clear, and they get a few extra seconds of reading because it’s cute.
    Full control.
    Not the slickest design, but I think it’s got a lot of fun in it.
    It’s SaaS, and this is for a free trial. Totally relevant.
  • CHARM:
    This one made me smile based on the copy and the design. Nicely done.
  • VALUE:
    It’s no different than clicking any other signup button on the site, so it’s regular ol’ fair.

A quick contrast break…

Some pretty amazing score so far, and that’s because they’re doing it right. Before I continue, I just want to run one of the examples from yesterday’s “6 Really Bad Website Popup Examples” post through The Popup Delight Equation to provide some perspective.

0.5 0.6 0 0 0 0 1 30%

NOT delightful.

Popup Design #5: Groupon

0.75 0.4 0.67 1 0 1 1 69%


    I would’ve given it a higher score if there had been a photo of Vancouver in the popup, as it gives that immediate sense of locale.
    Neither the escape key or clicking the background close the popup, which is really annoying when the “No thanks” link is so tiny. I dinged it extra for that.
    This is what I’m referring to re: looking different from a shape perspective. Yes, it’s a circle and not a rectangle, but that’s the point. 99.999999% of popups are rectangles. So this simple change makes a world of difference. And the transparency allows lots of breathing room, and for it to not look like it’s completely shutting out the site.
  • CHARM:
  • VALUE:
    Hard to argue with deals.
    Good job.

Popup Design #6: How-To Geek

1 1 0.17 1 0.25 1 1 77%


I bet you didn’t expect a score like that. Which just goes to show that when you do some of the fundamentals correctly: it’s very clear, it’s easy to control, relevant, fair value, and respectful. It looks pretty awful, but that’s why it scores so poorly on creativity and charm. The fundamentals matter a lot. Get those right, and you can spend your time being exceptional.

    Super obvious.
    All functional.
    On brand but nothing else positive from a creative standpoint.
  • CHARM:
    I gave it a tiny bit cos of the nerdy logo guy.
  • VALUE:
    Standard newsletter value.
    All good.

Popup Design #7: ClassPass

0.5 0.4 0.33 1 0 1 1 60%


I thought this would do better when I first saw it, then after playing with the interaction it let me down a bit.

    This is an entry popup, so the visuals are covered. Having a photo in the popup would help with the clarity around what kind of class they’re talking about for a first-time visitor.
    no on, out or esc. The reason having no visible close button is undelightful is because it forces you to choose (and read) one of the buttons to close it. That’s too much effort when I’ve decided I want to get rid of it.
    On brand, nothing else.
  • CHARM:
    A bit cold.
  • VALUE:
    Without question.
    Good job.

Popup Design #8: Lemonstand – Squishy Animation

1 1 0.67 1 0.25 1 1 85%


I stuck an animated GIF in for this one so you could see the animation. It’s a prety plain looking popup aside from that, but you can see how it does add that extra attention-grabbing effect.

    Ebook with an image of a book. Done.
    Full control.
    Scores for animation and being on brand. Mix in a different shape or a design like a lemon stand for bonus points :D
    It’s on the blog, so full points.
  • CHARM:
    Only the squishy animation saves it here.
  • VALUE:
    Fair indeed.
    No confirm shaming here.

Popup Design #9: PetSmart

1 1 0 1 0 1 1 71%


Granted, this is the lamest of the bunch, but I included it because of its simplicity. Sometimes an offer is just an informative statement.

    Nope. Sorry.
    It’s an ecommerce store. Yes.
  • CHARM:
    Nope. Add some kittens!
  • VALUE:
    All good.

Popup Design #10: Travelzoo << The worst!

1 0 0.67 1 0 0 -1 24%


Looks sure can be deceiving. At first glance I really like this one. Then I started playing with it. And it became the worst popup of them all.

    Yep, super clear with the photo of Ireland.
    Can’t click the background to close. Oh, and wait, no matter what you do, IF you manage to close it you get turfed to the homepage. Horrible.
    Minor points for the rounded corners.
  • CHARM:
    Started with zero, got worse from there.
  • VALUE:
    See respect, below.
    Wow. If I were critiquing this solely on a screenshot, I’d have given them a 1 for respect. But I just tried to interact with it. If you close the popup (without signing up) it redirects you right back to the homepage. You can’t even see the deal. That’s seriously gnarly. Shoulda put this one in yesterday’s post.

Popup Design #11: Tim Ferriss

1 0.6 0.67 1 0.5 1 0.5 75%


We close it out with another from Mr. Ferriss. It’s from the same page as the first one, but instead of being an exit popup, it’s triggered when you click a small banner that appears in the lower-left as you scroll down the page. Because it’s an on-click triggered popup, you typically get full points for relevance and clarity as you asked for it specifically.

    Super clear
    No escape key function, and the close (x) button doesn’t always show up.
    Looks great,and on brand.
  • CHARM:
    As before, the friendly photo works.
  • VALUE:
    As expected.
    Not quite as nice as the other one on the cancel link, so I’m dinging him a little.

Alrighty then, that’s a wrap for those 10 delightful popups, and one most certainly not delightful (Travelzoo) popup. Let me know if you agree/disagree with my ratings.

How Delightful are Your Popups?

I showed you mine, now show me yours! I hope you enjoyed learning about the delightful side of the website popup. I’d really love to see some of your popups, and how you score them, so drop a URL in the comments with your score and we can see if I agree.


p.s. Don’t forget to subscribe to the weekly updates.

This article is from – 

11 Awesome Popup Design Examples – Scored by The Delight Equation

10 Mistakes That Will Kill Your Relationships With Influencers

Influencers can be your long-term advocate and brand ambassadors. Spending even $1000 on influencers can yield amazing returns. You don’t want to kill your influencer relationships because of some overlooked or careless mistake. You can build invaluable relationships with your influencers that can be mutually beneficial. Truth be told: Relationships are fragile. When it comes to business, you have to maintain relationships with your partners, customers, and employees. Influencers are interesting people because they are your partners, customers, as well as employees. With your stringent timelines and busy schedule, you might lose track of your relationships with influencers. In an…

The post 10 Mistakes That Will Kill Your Relationships With Influencers appeared first on The Daily Egg.

See the original article here:

10 Mistakes That Will Kill Your Relationships With Influencers

8 Things You Need to Know to Improve Your Influencer Marketing Campaign


You’re going to start your very first influencer marketing campaign, and you want to make sure it’s a success. Or maybe you’ve executed a few campaigns before, and you want the next one to deliver better results. Either way, knowing how to manage your campaign effectively is crucial if you want influencer marketing to work for you. While it’s not always easy to manage influencer marketing campaigns, you’ll find it much easier if you remember the following steps: 1. Set Up a Goal You should always start with a defined goal, regardless of whether it’s influencer marketing or any other…

The post 8 Things You Need to Know to Improve Your Influencer Marketing Campaign appeared first on The Daily Egg.

Continued – 

8 Things You Need to Know to Improve Your Influencer Marketing Campaign

Inspiring Illustrations With Plenty Of Bright Colors And Cool Patterns

It’s almost time to leave winter behind us here in the Northern Hemisphere. Most of the time, the weather can’t quite make up its mind, and so the days pass by with half of the sky sunny while the other half gray. Nature usually tends to have a strong impact on my mood, and so these days I feel like I’m literally in a gray zone — between winter and spring.

View original article:

Inspiring Illustrations With Plenty Of Bright Colors And Cool Patterns

Copy If You Can: Improving Your UI Design Skills With Copywork

There’s a technique for improving one’s user interface design skills that is the most efficient way I know of expanding one’s visual vocabulary but that I’ve rarely heard mentioned by digital designers.
What’s going on here?
I’m talking about copywork. Copywork is a technique that writers and painters have been using for centuries. It is the process of recreating an existing work as closely as possible in order to improve one’s skill.


Copy If You Can: Improving Your UI Design Skills With Copywork

Disrupting the norm: 4 ways to tap into your team’s creativity

Reading Time: 6 minutes

It’s easy to get stuck in a work routine.

To go to the office every Monday to Friday, use a particular set of skills, sit at the same desk, talk to the same team members, eat at the same lunch spot…

While routine can be a stabilizing force, it can also lead to stagnation and a lack of inspiration (a worrisome situation for any marketer).

Companies take great care to put structures in place to improve productivity and efficiency, but too often de-prioritize creativity. And yet, creativity is essential to driving innovation and competition—two vital components of business growth.

At WiderFunnel, we believe in the Zen Marketing mindset. This mindset recognizes that there is an intuitive, inspired, exploratory side to marketing that imagines potential insights, as well as a qualitative, logical, data-driven side that proves whether the insights really work.

In order to come up with the very best ideas to test, you must have room to get creative.

So, how can you make creativity a priority at your company?

Last month, the WiderFunnel team set out to answer that question for ourselves. We went on a retreat to one of British Columbia’s most beautiful islands, with the goal of learning how to better tap into and harness our creativity, as individuals and as a team.

It’s hard to not be creative with a view like this.

We spent three days trying to unleash our creative sides, and the tactics we brought back to the office have had exciting effects! In this post, I’m going to share four strategies that we have put into practice at WiderFunnel to help our team get creative, that you can replicate in your company today.

As Jack London said,

You can’t wait for inspiration. You have to go after it with a club.

An introduction to creativity

There are many ways to think about creativity, but for our purposes, let’s consider the two types of creativity: technical creativity and artistic creativity. The former refers to the creation of new theories, new technologies, and new ideas. The latter revolves around skills, technique, and self-expression.

As a company, we were focused on tapping into technical creativity on our retreat. One of the main elements of technical creativity is lateral thinking.

Your brain recognizes patterns: faces, language, handwriting. This is beneficial in that you can recognize an object or a situation very quickly (you see a can of Coke and you know exactly what it is without having to analyze it).

But, we can get stuck in our patterns. We think within patterns. We problem-solve within patterns. Often, the solutions we come up with are based on solutions we’ve already come up with to similar problems. And we do this without really knowing that our solutions belong to other patterns.

Lateral thinking techniques can help you bust out of this…well…pattern.

While structured, disciplined thinking is vital to making your products and services better, lateral thinking can help you come up with completely new concepts and unexpected solutions.

The following 4 tactics will help you think laterally at work, to find truly original solutions to problems.

1. Put on a different (thinking) hat

One of our first activities on the island was to break into groups and tackle an internal company challenge with the six thinking hats. Developed by Edward de Bono, the “six thinking hats” is a tool for group discussion and individual thinking.

The idea behind the six hats is that our brains think in distinct ways that we can deliberately challenge. Each hat represents a direction in which the brain can be challenged. When you ‘put on a different hat’, your brain will identify and bring into conscious thought certain aspects of the problem you’re trying to solve, according to your hat.

The Six Thinking Hats.

None of these hats represent completely natural ways of thinking, but rather how some of us already represent the results of our thinking.

In our exercise, we began a discussion each wearing one of the six hats. As the conversation progressed, we were forced to switch hats and continue our discussion from entirely different perspectives. It was uncomfortable and challenging, but the different hats forced each of us to explore the problem in a way that was totally alien.

Before we could have our discussion, we had to make our own thinking hats.
Our thinking cards.
Our thinking cards.

The outcome was exciting: people who are normally quiet were forced to manage a discussion, people who are normally incredulous were forced to be optimistic, people who are normally dreamers were forced to ask for facts…it opened up totally new doors within the discussion.

In WiderFunnel’s main meeting room, there are six cards that represent each of the six hats. Whenever I find myself stuck, dealing with a challenge I can’t seem to solve, I wander into that meeting room and try to tackle the problem ‘wearing each hat’. Disrupting my normal thinking patterns often leads to ‘A-ha!’ moments.

To encourage lateral thinking, you could: create something physical and tangible (cards, hats, etc.) that your team can utilize when they are stuck to challenge the ‘normal’ ways in which they think.

2. Solve puzzles (literally)

A man jumps out of a window of a 30-story building. He falls all the way to the ground and lands on solid concrete with nothing to cushion his fall, yet he is completely uninjured. How is this possible?

There are 20 birds on a fence. A woman shoots one of the birds. How many birds are left?

There is an egg carton holding a dozen eggs on a table. Twelve people take one egg each, but there is still one egg left in the carton. How?

During our retreat, we spent some time solving word problems just like these, in order to disrupt our day-to-day thinking patterns.

A recently completed WiderFunnel puzzle!

Riddles like these challenge our brains because they are difficult to think through using straightforward logic. Instead, you have to think outside of the content within the puzzle and use your knowledge of language and experience to solve it.

Puzzles require you to use reasoning that is not immediately obvious, and involve ideas that you may not arrive at using traditional step-by-step logic.

When you are faced with a puzzle like one of the riddles above, your mind is forced to think critically about something you might otherwise dismiss or fail to understand completely.

The thinking involved in solving puzzles can be characterized as a blend of imaginative association and memory. It is this blend…that leads us to literally see the pattern or twist that a puzzle conceals. It is a kind of “clairvoyance” that typically provokes an Aha! effect.

– Marcel Danesai, Ph.D. in “Puzzles and the Brain

To encourage creative, critical thinking, you could: incorporate puzzles into your day-to-day. Email your team a word problem every morning, or set up a physical puzzle somewhere in your office, so that people can take puzzle breaks!

3. Unpack your assumptions

Often, when we are faced with a question or problem, we have already classified that question or problem by its perceived limitations or rules. For example, you have assumptions about your users (most likely backed by data!) about what they want and need, what their pain points are, etc.

But, these assumptions, even if they are correct, can sometimes blind you to other possibilities. Unpacking your assumptions involves examining all of your assumptions, and then flipping them upside down. This can be tough because our assumptions are often deeply ingrained.

On the island, WiderFunnel-ers listed out all of our assumptions about what our clients want. At the top of that list was an assumption about what every marketer wants: to increase ROI. When we flipped that assumption, however, we were left with a hypothetical situation in which our clients don’t care at all about ROI.

Various WiderFunnel-ers unpacking their assumptions.

All of a sudden, we were asking questions about what we might be able to offer our clients that has nothing to do with increasing ROI. While this hypothetical is an extreme, it forced us to examine all of the other areas where we might be able to help our clients.

To encourage creative problem-solving, you could: advise your team to list out all of their assumptions about a problem, flip ‘em, and then look for the middle ground.

4. Think of the dumbest idea you possibly can

The worst enemy to creativity is self-doubt.

– Sylvia Plath

To wrap up day 1 of our retreat, we did an activity called Dumbest Idea First. We walked around in a circle in the sunshine, shouting out the dumbest ideas we could think of about how to encourage more creativity at WiderFunnel.

The circle was quiet at first. Because being dumb, sounding dumb, looking dumb is scary. But, after a few people yelled out some really, really dumb ideas, everyone got into it. We were all moving, and making ridiculous suggestions, and in the midst of it all, one person would shout out a gem of an idea.

For instance, someone suggested a ‘brainstorm bubble’: a safe space within the office where you can go when you’re stuck, and your co-workers can see you and join you in the bubble to help you brainstorm.

(We have since started doing this at the office and it has been awesome!)

I don’t know about you, but I sometimes limit myself during a brainstorm—I find myself trying to be creative while still being pragmatic.

But, when you give yourself permission to be dumb, all of a sudden the possibilities are endless. And I guarantee you will surprise yourself with the great ideas you stumble upon.

Encourage creativity by allowing yourself and your team time and space to be unapologetically dumb.

What are some of the strategies you use to keep things creative at your company? Have you tried or improved upon any of the aforementioned strategies? Let us know in the comments!

The post Disrupting the norm: 4 ways to tap into your team’s creativity appeared first on WiderFunnel Conversion Optimization.

Excerpt from: 

Disrupting the norm: 4 ways to tap into your team’s creativity

A Guide To Personal Side Projects

Personal side projects are a cornerstone of creative growth and discovery. While they might not always result in financial gain, the long-term benefits are often much more useful. Benefits such as personal growth, creative exploration and generation of professional opportunities are some of the reasons to engage in them.
In this article, we’ll explore these benefits, as well as learn how to decide on a project and how to effectively manage our time (using my recently launched project as an example).

View article – 

A Guide To Personal Side Projects

Lessons Learned From A First-Time Appreneur

There are over 2 million iOS apps and almost as many Android apps in the growing app economy. However, for every Flappy Bird app that gets lucky and goes viral, there are thousands of apps that take time and hard work to launch and persistence to maintain, grow and avoid the app graveyard. While we typically hear about overnight success stories, this article explores the more typical experience of an appreneur, or app entrepreneur.

Taken from: 

Lessons Learned From A First-Time Appreneur

13 Cheerful Easter Icons [Freebie]

Easter is only a week away, and it’s time to add a few icons to your projects. Or perhaps just freshen up your good ‘ol Easter cards for your family, friends, colleagues, and perhaps even strangers. Today, we’re happy to release the Easter Icon Set, a set of 13 icons available in AI, PSD, EPS, PDF, SVG and PNG formats.
This icon set was designed and created by Manuela Langella and, as always, is free to use in private and commercial projects.

From – 

13 Cheerful Easter Icons [Freebie]

Design Principles: Compositional Balance, Symmetry And Asymmetry

A balanced composition feels right. It feels stable and aesthetically pleasing. While some of its elements might be focal points and attract your eye, no one area of the composition draws your eye so much that you can’t see the other areas.

Balancing a composition1 involves arranging both positive elements and negative space in such a way that no one area of the design overpowers other areas. Everything works together and fits together in a seamless whole. The individual parts contribute to their sum but don’t try to become the sum.

An unbalanced composition can lead to tension. When a design is unbalanced, the individual elements dominate the whole and the composition becomes less than the sum of its parts. In some projects, unbalanced might be right for the message you’re trying to communicate, but generally you want balanced compositions.

Note: This is the seventh and final post in a series on design principles. You can find the first six posts here:

Happiness is not a matter of intensity but of balance, order, rhythm and harmony.

– Thomas Merton

Physical And Visual Balance

Balance is easy to understand in the physical world, because we experience it all the time. When something is unbalanced, it tends to fall over. You’ve probably been on a seesaw or a teeter-totter at some time in your life — you on one side and a friend on the other.

Assuming you were both about the same size, you were able to easily balance on the seesaw. The following image appears to be in balance, with two equally sized people equally distant from the fulcrum on which the seesaw balances.

Symmetrically balanced seesaw8
Symmetrically balanced seesaw. (View large version9)

The person on the left makes the seesaw rotate counterclockwise, and the person on the right makes it rotate clockwise by an equal amount. The force of each person acts in a different direction, and their sum is zero.

If one of the people was much bigger, though, the balance would be thrown off.

Unbalanced seesaw10
Unbalanced seesaw. (View large version)

This image doesn’t feel right because we know the person on the left isn’t big enough to balance the person on the right. The clockwise force should be much greater, and the seesaw should be touching the ground on the right.

However, if the larger person slid in toward the center, then the seesaw would be balanced again.

Asymmetrically balanced seesaw11
Asymmetrically balanced seesaw. (View large version12)

Here, the force of the larger person is reduced by being closer to the fulcrum on which the seesaw balances. I’ll trust you’ve been on a seesaw before or at least watched others play on one and that you have a pretty good sense of what’s going on.

Visual balance is similar. Physical weight is replaced by visual weight. The direction in which the physical weight acts is replaced by visual direction.

As a reminder, below are definitions for visual weight and visual direction, although I’ll refer you back to the fourth post in this series13 for more details.

  • visual weight
    This is the perceived weight of a visual element. It’s a measure of how much anything on the page attracts the eye of the viewer.
  • visual direction
    This is the perceived direction of a visual force. It’s the direction in which we think an element should be moving if it were given a chance to move according to the forces acting on it.

You don’t use instruments to measure the forces. You don’t use formulas to calculate whether everything is in balance. Rather, you use your eye to determine whether a composition is balanced.

Why Visual Balance Is Important

Just as in the physical world, visual balance is a good thing. It’s desirable in and of itself. An unbalanced composition can feel uncomfortable for the viewer. Look back at the second of the three seesaw images — it looks wrong because we can tell that the seesaw shouldn’t be in balance.

Visual weight is a measure of the visual interest of an element or area in a design. When a composition is visually balanced, every part of it holds some interest. The visual interest is balanced, which keeps viewers engaged with the design.

Without visual balance, viewers might not see all areas of the design. They probably won’t spend any time in areas with less visual weight or interest. Any information in those areas could easily go unnoticed.

You would balance a design visually because you want to balance the points of interest in your composition, so that viewers spend time with all of the information you want to convey.

Four Types Of Balance

There’s more than one way to balance a composition. The images in the previous section show two of them. The first image is an example of symmetrical balance, and the second is an example of asymmetrical balance. Two other types of balance are radial and mosaic.

Symmetrical balance14
Symmetrical balance. (View large version15)

Symmetrical balance occurs when equal weights are on equal sides of a composition, balanced around a fulcrum or axis in the center. Symmetrical balance evokes feelings of formality (it’s sometimes called formal balance) and elegance. A wedding invitation is a good example of a composition that you’d likely want to be symmetrically balanced.

The downside of symmetrical balance is that it’s static and sometimes regarded as boring. Because half of the composition mirrors the other half, at least half of the composition will be rather predictable.

Asymmetrical balance16
Asymmetrical balance. (View large version17)

Asymmetrical balance results from unequal visual weight on each side of the composition. One side of the composition might contain a dominant element, which could be balanced by a couple or more lesser focal points on the other side. One visually heavy element on one side might be balanced by a handful of lighter elements on the other.

Asymmetrical balance is more dynamic and interesting. It evokes feelings of modernism, movement, energy and vitality. Asymmetrical balance offers more visual variety, although it can be more difficult to achieve because the relationships between elements are more complex.

Radial balance18
Radial balance. (View large version19)

Radial balance occurs when elements radiate from a common center. Rays of sunlight and ripples in a pond after a stone is tossed in are examples of radial balance. Maintaining a focal point (fulcrum) is easy because it’s always the center.

Because everything radiates from a common center, everything also leads to that center, making it a strong point of attraction.

Mosaic balance20
Mosaic balance. (View large version21)

Mosaic balance (or crystallographic balance) results from balanced chaos. Think Jackson Pollack paintings. The composition lacks distinct focal points, and the elements share a uniform emphasis. The lack of hierarchy leads to visual noise at first glance. Somehow, though, it all works together.

Symmetry And Asymmetry

Both symmetry and asymmetry can be used throughout a composition, independent of, yet while contributing to, the final balance. You can have symmetrical forms in an asymmetrically balanced composition and vice versa.

Symmetry is usually seen as beautiful and harmonized; however, it can also be seen as static and dull. Asymmetry tends to be more interesting and dynamic, despite not being regarded as intrinsically beautiful.


There are three primary types of symmetry.

Reflection symmetry (or bilateral symmetry) occurs when everything is mirrored around a central axis. It’s probably the first thing you think of when you hear the word “symmetry.” The axis can be in any direction or orientation, although it’s often vertical or horizontal.

Everything on one side of the axis is mirrored on the other side. Natural forms that grow or move across earth’s surface develop reflection symmetry. A human face and a butterfly are examples.

When the reflection is a perfect mirror image, the symmetry is said to be pure. Much of the time it won’t be perfect and each side will have slight variations. This is near symmetry, and it’s more common than pure symmetry.

The symmetry can even occur over multiple axes at the same time. For example, the left and right half of a composition could mirror each other, while the top and bottom also mirror each other. Snowflakes show reflection symmetry over more than two axes.

Rotational symmetry (or radial symmetry) occurs when everything rotates around a common center. It can occur at any angle or frequency, as long as there’s a common center. Natural forms that grow or move perpendicular to the earth’s surface develop rotational symmetry. The petals of a sunflower are an example. Rotation without reflection can be used to show motion, speed or dynamic action. Think of the spinning wheels of a moving car.

Translational symmetry (or crystallographic symmetry) occurs when elements are repeated over different locations in space. Repeating fence posts are an example. The repetition creates translation symmetry. It can occur in any direction or at any distance, as long as the basic orientation is the same. Natural forms develop translational symmetry through reproduction. You can create rhythm, motion, speed and dynamic action through translation symmetry.

The butterfly is an example of reflection symmetry, the fence posts show translation symmetry, and the sunflower is an example of radial symmetry22
The butterfly23 is an example of reflection symmetry, the fence posts24 show translation symmetry, and the sunflower25 is an example of radial symmetry. (View large version26)

Symmetrical forms are commonly seen as the figure, as opposed to the ground. A symmetrical form will carry more weight than a similarly sized and shaped asymmetrical form.

Symmetrical forms convey balance in and of themselves, but they could appear too stable and too balanced, leading to a lack of interest. Symmetrical forms also lead to passive space because the negative space is equal all around the form.


Asymmetrical forms lack the balance of symmetrical forms, although you can asymmetrically balance an entire composition. Asymmetry is rather common in natural forms: you’re probably right- or left-handed; fiddler crabs have different sized claws; trees branches grow in different directions; clouds have random shapes.

Asymmetry creates more complex relationships between elements, and so it tends to be more interesting than symmetry. Because it’s more interesting, asymmetry can be used to draw attention.

Space around asymmetrical forms is more active. Unpredictable patterns are created, and overall you have more freedom of expression with asymmetry than with symmetry. The tradeoff is that it’s harder to achieve.

Much in the same way that similarity and contrast work together, you can combine symmetry and asymmetry27 to good effect. Balance symmetrical forms in an asymmetrical way, or balance asymmetrical forms symmetrically. Break up symmetrical forms with a random mark to add interest. Contrast symmetry and asymmetry in your composition to make elements get more attention.

Gestalt Principles

Throughout this series I’ve tried to point out how many design principles arise from gestalt principles. I also hope that as you’ve followed along you’ve seen how different design principles build on each other.

One of the gestalt principles specifically addresses symmetry and order and certainly applies to compositional balance. It’s hardly the only principle that applies, though.

The simplicity of symmetrical forms is predicted by the Law of Prägnanz. Gestalt principles such as focal points and similarity contribute to visual weight. Principles such as continuation, common fate and parallelism impart visual direction. I also mentioned that symmetrical forms are more likely to be seen as figure rather than ground.

I hope this idea that the principles of gestalt lead to many of the design principles that guide us has become clearer as you’ve read through this series. The design principles we follow didn’t arise out of thin air; they emerged from the psychology of the way we perceive our visual environment.


It’s time for screenshots. I have a few more websites than usual for this last article in the series, and I’ve grouped them according to the four types of balance.

As I’ve reiterated throughout the series, what follows is my opinion. This is how I see the balance in these designs. You might see it differently, which is fine. Thinking critically about the designs is more important than our agreeing about what we think.

Examples of Symmetrical Balance

The design of Helen & Hard’s entire website is symmetrically balanced. The screenshot here is from the “About”28 page, but the other pages of the website are similarly balanced.

Screenshot of Helen & Hard’s “About” page29
Screenshot of Helen & Hard’s “About” page. (View large version30)

Everything reflects around a vertical axis down the center of the page. The logo is centered, the navigation bar is centered, the circular images are centered, the heading is centered, and the three columns of text are centered.

The balance isn’t perfectly symmetrically. The columns have different amounts of text, for example.

However, notice the top of the page. Both the logo and navigation bar are centered, but they don’t appear to be visually centered. My eye wants the logo to be centered on the ampersand, or at least closer to it. The three menu items on the right side of the navigation bar have more letters than those on the left. My eye wants them to be the same and wants the center to be in between the “About” and “People” links.

I think moving these two elements out of center to make them look like they’re visually centered would balance the composition a little better.

The home page of Tilde31 is another design that’s symmetrically balanced. Like Helen & Hard, everything here revolves around a vertical axis running down the center of the page: the navigation, the text, the people in the image. It’s the same as you scroll down the page.

0Screenshot of Tilde’s home page32
Screenshot of Tilde’s home page. (View large version33)

As with Helen & Hard, the symmetry isn’t pure. Centered lines of text aren’t mirror images, for one thing. Also, a couple of elements are off: the “Meet the Team” arrow pointing right and the text at the bottom of the page ending in another arrow pointing right.

Both are calls to action and both break the symmetry, calling extra attention to themselves. Notice how both arrows use colors that contrast with their background, further increasing the attraction of these elements.

Examples of Asymmetrical Balance

The home page of Carrie Voldengen’s portfolio exhibits an overall asymmetrical balance around a dominant symmetrical form. Looking at the overall composition, I see several discrete shapes.

Screenshot of Carrie Voldengen’s website34
Screenshot of Carrie Voldengen’s website. (View large version35)

The mass of the page is a large rectangle that’s composed of a grid of smaller rectangular images. On its own, this grid is symmetrical around both the vertical and horizontal axes. It feels very strong and stable. On its own, it’s very balanced and looks like it’s not going anywhere.

To the right, a block of text pulls down on the shape. It’s counterbalanced by text and the circular logo in the upper left. Both provide a relatively equal amount of visual weight acting on the grid in opposite directions.

The distance to an imagined fulcrum is about the same as the weights. The text on the right is larger and darker overall, but the blue circular logo gives more weight to its general area. The circle even connects to the top-left corner of the grid through a single color.

The text below the grid seems to hang from it, and it’s light enough on its own not to throw the composition out of balance.

Notice that the space also feels balanced. The areas down the left, along the top right and down the right, including a bit of the bottom right, all balance each other. The area on the left is larger than the area on the right, but the right has additional space on the top and bottom.

The images at the top of Hirondelle USA’s36 home page rotate. I grabbed a screenshot of this one specifically to talk about the asymmetrical balance established at the top of the page.

Screenshot of Hirondelle USA37
Screenshot of Hirondelle USA. (View large version38)

The column in the image is slightly off center, and it anchors the composition with a strong vertical line — it’s an object we know weighs a lot. The railing on the left provides a strong connection with the left edge of the screen. It, too, feels anchored. It’s hard to imagine any design element on the page throwing either out of balance.

The text above the railing feels supported by the railing; however, it’s also visually balanced by the image of the boy on the right. You might view the railing as hanging off the left side of the pole, pulling it out of balance, but I think the intrinsic interest of the boy as well as the darker values in the background behind him counterbalance both the rail and the text on the left and keep things in balance.

There’s a sense of translation symmetry as the gold lines of text repeat in the upper left and lower right of the image, as well as in the button further down the page. The white text is repeated as well.

Examples of Radial Balance

The home page of Vlog.it39 exhibits radial balance, which I hope is clear from the screenshot. Other than the shape in the top-right corner, everything revolves around the center of the page, as the three rings of images rotate around the center circle.

Screenshot of Vlog.it40
Screenshot of Vlog.it. (View large version41)

What you can’t see in the screenshot is how the page loads. A line is drawn from the lower-left corner to the center of the page. From that point on, just about everything that appears on the page does so by revolving around the center or radiating from it, like ripples in a pond.

The smaller circle in the upper right adds a little translation symmetry and some asymmetry, increasing visual interest in the composition.

Opera’s Shiny Demos42 home page isn’t circular, but the text links all seem to emanate from a common or near common center. It’s easy to imagine the whole shape spinning around one of the squares in the middle or maybe one of the corners where four squares meet.

Screenshot of Opera’s Shiny Demos43
Screenshot of Opera’s Shiny Demos. (View large version44)

The Shiny Demos heading in the upper left and the Opera logo in the lower right counterbalance each other and also appear to radiate from the same center as the text links.

It’s a good example of how radial balance doesn’t necessarily require the use of circles.

Examples of Mosaic Balance

You might expect mosaic balance to be the least used online, especially after I offered Jackson Pollack paintings as an example of mosaic balance. Many more examples are online than you might realize.

The home page of Rabbit’s Tale45 is a good example. There’s certainly a random and chaotic feel with the letters strewn about, but the balance in the composition works.

Screenshot of Rabbit’s Tale46
Screenshot of Rabbit’s Tale. (View large version47)

There are close to equal areas of color and space on both sides (right and left) to balance each other. The rabbit in the middle even serves as a fulcrum. It might also stand out a little after you’ve seen it, but overall the elements don’t call attention to themselves individually.

I’m not going to try to figure out which elements counterbalance each other, one element at a time, but hopefully you agree that there’s an overall balance. If anything, the chaos is weightier on the right, but not to the point of throwing off the balance.

Content-heavy websites such as news and magazine websites exhibit mosaic balance as well. You might recognize the home page of The Onion48. In the screenshot, I’ve removed the background image behind the top of the page.

Screenshot of The Onion49
Screenshot of The Onion. (View large version50)

There’s a lot to look at. The layout isn’t symmetrical. The columns aren’t equal in size. It’s hard to identify what counterbalances what. The blocks of content have different amounts of content inside and, consequently, are different sizes. Nothing radiates from a common center.

There’s a bit of chaos and randomness in the different-sized blocks, some denser than others. Because the stories on the website change daily, a different chaos will appear each day. Overall, it works.

Perhaps it’s a stretch to say that it’s a mosaic balance, but again I would argue that it is and that many websites exhibit this sort of chaotic balance, although something tells me that much of the chaos we see online wasn’t planned.


It’s taken a while to get here, but that concludes our series on design principles. I hope you’ve enjoyed it, learned something new or found the series to be a good review of fundamental design principles.

As you can guess, I think the fundamentals are important. I started this series to show how all of these principles arise out of human perception and gestalt theory. I didn’t make them up. The principles are based on how we all perceive and interpret our visual environment.

For example, one reason we notice focal points is because they contrast with the elements around them. They stand out as different. That’s important when you need to quickly determine friend from foe. That ability was important for our survival as a species, and so our eyes developed to make the determination quickly.

However, design principles aren’t hard and fast rules. They’re guidelines. There’s no one right way to communicate that two elements are similar or different, for example. You don’t need to follow any of these principles, although you should understand them and have a reason for breaking them.

Again, I hope you’ve enjoyed this series, and I hope even more that something in the series has given you more control over the visual communication in your designs.

Additional Resources

(il, ml, al)


  1. 1 http://www.vanseodesign.com/web-design/visual-balance/
  2. 2 http://www.smashingmagazine.com/2014/03/28/design-principles-visual-perception-and-the-principles-of-gestalt/
  3. 3 http://www.smashingmagazine.com/2014/05/16/design-principles-space-figure-ground-relationship/
  4. 4 http://www.smashingmagazine.com/2014/09/22/design-principles-connecting-and-separating-elements-through-contrast-and-similarity/
  5. 5 http://www.smashingmagazine.com/2014/12/12/design-principles-visual-weight-direction/
  6. 6 http://www.smashingmagazine.com/2015/02/27/design-principles-dominance-focal-points-hierarchy/
  7. 7 http://www.smashingmagazine.com/2015/04/29/design-principles-compositional-flow-and-rhythm/
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2015/05/see-saw-symmetry-opt.png
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2015/05/see-saw-symmetry-opt.png
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2015/05/see-saw-unbalanced-opt.png
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2015/05/see-saw-asymmetry-opt.png
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2015/05/see-saw-asymmetry-opt.png
  13. 13 http://www.smashingmagazine.com/2014/12/12/design-principles-visual-weight-direction/
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2015/05/symmetry-opt.png
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2015/05/symmetry-opt.png
  16. 16 http://www.smashingmagazine.com/wp-content/uploads/2015/05/asymmetry-opt.png
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2015/05/asymmetry-opt.png
  18. 18 http://www.smashingmagazine.com/wp-content/uploads/2015/05/radial-opt.png
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2015/05/radial-opt.png
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2015/05/mosaic-opt.png
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2015/05/mosaic-opt.png
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2015/05/03-types-of-symmetry-opt.jpg
  23. 23 http://www.publicdomainpictures.net/view-image.php?image=48493
  24. 24 http://www.publicdomainpictures.net/view-image.php?image=58672
  25. 25 http://www.publicdomainpictures.net/view-image.php?image=90065
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2015/05/03-types-of-symmetry-opt.jpg
  27. 27 http://www.vanseodesign.com/web-design/symmetry-asymmetry/
  28. 28 http://www.helenhard.no/index.php/about
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2015/05/04-helen-and-hard-opt.jpg
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2015/05/04-helen-and-hard-opt.jpg
  31. 31 http://tilde.io
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2015/05/05-tilde-opt.png
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2015/05/05-tilde-opt.png
  34. 34 http://www.smashingmagazine.com/wp-content/uploads/2015/05/06-carrie-voldengen-opt.jpg
  35. 35 http://www.smashingmagazine.com/wp-content/uploads/2015/05/06-carrie-voldengen-opt.jpg
  36. 36 http://hirondelleusa.org
  37. 37 http://www.smashingmagazine.com/wp-content/uploads/2015/05/07-hirondelle-usa-opt.jpg
  38. 38 http://www.smashingmagazine.com/wp-content/uploads/2015/05/07-hirondelle-usa-opt.jpg
  39. 39 http://vlog.it
  40. 40 http://www.smashingmagazine.com/wp-content/uploads/2015/05/08-vlog-it-opt.jpg
  41. 41 http://www.smashingmagazine.com/wp-content/uploads/2015/05/08-vlog-it-opt.jpg
  42. 42 http://shinydemos.com
  43. 43 http://www.smashingmagazine.com/wp-content/uploads/2015/05/09-shinydemos-opt.png
  44. 44 http://www.smashingmagazine.com/wp-content/uploads/2015/05/09-shinydemos-opt.png
  45. 45 http://rabbitstale.com
  46. 46 http://www.smashingmagazine.com/wp-content/uploads/2015/05/10-rabbitstale-opt.jpg
  47. 47 http://www.smashingmagazine.com/wp-content/uploads/2015/05/10-rabbitstale-opt.jpg
  48. 48 http://theonion.com
  49. 49 http://www.smashingmagazine.com/wp-content/uploads/2015/05/11-the-onion-opt.jpg
  50. 50 http://www.smashingmagazine.com/wp-content/uploads/2015/05/11-the-onion-opt.jpg
  51. 51 http://www.vanseodesign.com/web-design/web-design-balance/
  52. 52 http://www.sitepoint.com/a-study-of-symmetry-when-where-and-why-to-use-it/
  53. 53 http://www.designscience.ca/LODs/LOD_Visual_Balance/interpretation.html
  54. 54 http://daphne.palomar.edu/design/bsymm.html
  55. 55 http://blog.digitaltutors.com/understanding-balance-graphic-design/
  56. 56 http://www.ultimate-photo-tips.com/photography-rules-of_composition.html
  57. 57 http://char.txa.cornell.edu/language/principl/principl.htm
  58. 58 http://designobserver.com/feature/a-fine-balance/38598/
  59. 59 http://www.idemployee.id.tue.nl/g.w.m.rauterberg/lecturenotes/JFS-lecture/leymarie-2001.pdf
  60. 60 http://www.geog.nau.edu/courses/rh83/pl431/workbook/MapDesign.PDF
  61. 61 http://www.amazon.com/Cartography-ArcView-Software-Borden-Dent/dp/0072822023

The post Design Principles: Compositional Balance, Symmetry And Asymmetry appeared first on Smashing Magazine.

View the original here:

Design Principles: Compositional Balance, Symmetry And Asymmetry