Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Design With Dissonance

You might consider yourself knowledgeable, but you’ve probably never heard of this powerful communication and design technique that I’m about to share. I’m sure you’ve seen it in practice but never knew it was working on you — that’s how good it is. I’m here to shed light on this technique so that you can use it as an approach to your design or writing.

See what I did there? I introduced you to dissonance by using the technique itself. If used correctly, it can enhance your approach to design and copywriting in certain projects. Welcome to designing with dissonance!

What Is Dissonance? Link

To understand dissonance, knowing first what consonance is would help. Consonance is when you feel comfortable with your beliefs; a certain harmony exists in how you’re feeling right now. You feel good. Dissonance occurs when something disrupts your consonance. It challenges your beliefs and makes you feel uncomfortable. You feel bad, or you think to yourself, “What the heck is going on?”

So, why should you know about dissonance and consonance? How are they relevant to design and writing? They are relevant because they are the key ingredients in cognitive dissonance1, one of my favorite theories of Leon Festinger2.

Festinger’s basic hypotheses for cognitive dissonance are as follows:

  1. The presence of dissonance, of being psychologically uncomfortable, will motivate the person to try to reduce the dissonance and achieve consonance.
  2. In addition to trying to reduce dissonance when it is present, the person will actively avoid situations and information that would likely increase it.

Why Should You Use Dissonance? Link

We are going to focus on the first hypothesis as a new way to design and write. Put simply, it stipulates that we always want to reach consonance when we experience dissonance. May the persuasive madness begin!

We often try to convince people to use our solutions through our writing and design. In your attempt to persuade them, design with dissonance as a way to challenge their beliefs, and then introduce your service as a way to help them achieve consonance.

Writing With Dissonance Link

My introduction to this article uses dissonance. I suggested you were knowledgeable but that you haven’t heard of this technique. If you felt uncomfortable about not knowing this technique, then perhaps you chose to read on in order to learn it and feel comfortable again. And because I’m also a detective (well, not really) and possess mad deductive-reasoning skills, I can infer from the fact that you’ve read this far into my article that the dissonance may have worked on you! Aside from my attempt in the introduction, some amazing articles in our industry use dissonance beautifully.

An Essay by Paul Scrivens Link

A good example is Paul Scrivens’ essay, “You Are Not A Designer And I Am Not A Musician.” I love this essay, and many designers have shared it with their peers. Here’s an excerpt, in which he begins to use dissonance:

No, you are not a designer. You are someone that can piece together some stuff in Photoshop or add the right pieces of code in XHTML/CSS. You aren’t the person that creates experiences. You aren’t the translator of ideas that people never thought could be produced visually. You aren’t the person that can toss their own style to the curb and come up with something even greater because of it.…

We live in a world of hobbyists and the majority of our peers are hobbyists parading as professionals. They are not designers.

But you could be. Maybe. Just take the time to study like the greats before you. Push your limits. Test your boundaries. Designers like to work within their comfort zone because they know what they will like. Make something ugly to help you come up with some ideas on how to make something beautiful. When you need inspiration create your own.

Scrivens has disrupted your consonance here, which created dissonance. He challenged your beliefs. He blatantly told you that you are not a designer. But in the midst of your dissonance, Scrivens offers solutions: he suggests that you study like the great designers before you, and he makes recommendations on how you can find your own inspiration to become a designer. These are solutions you could follow to bring you back to consonance. Cognitive dissonance at its finest. Yes, you could have simply dismissed Scrivens’ attempt at dissonance, but then the theory would have worked even then; you wanted to maintain your beliefs and feel comfortable.

An Article by Whitney Hess Link

In her article “You’re Not a User Experience Designer If…3,” Whitney Hess demonstrates wonderful writing with dissonance. She could have taken the easy way out and written it as the “Top 10 Ways to Be a Better User Experience Designer,” but I doubt it would have had the same impact as the real article had on that glorious day when user experience designers shared it with their peers to defend their work.

Dissonance was possibly created when designers read the title of the article. I’m sure many designers must have thought, “How dare she say what I am and am not. I must read on to refute this nonsense!” But as they read the article, they would have found Hess offering a list of things that do not make them user experience designers. The list might have made them psychologically uncomfortable (dissonant), but they may have decided to act on the list items to make themselves feel more comfortable and to bring back consonance. The article challenged beliefs and fostered great discussions.

A Project Built On Dissonance Link

You can base an entire project on dissonance. McKinney4 made an amazing online game about surviving poverty and homelessness, called Spent5. Visitors are challenged to live on $1000 a month. Most people think that it’s easy to make a living and act like no one has an excuse. They accept the challenge because it seems easy enough. In the end, they walk in the shoes of someone less fortunate and begin to understand their hardships.

We see dissonance right away on the main page, “But you’d never need help, right?”

Spent Intro6

We feel psychologically uncomfortable and try to correct it by accepting the challenge. We are then presented with the following narrative:

Over 14 million Americans are unemployed.

Now imagine you’re one of them.

Your savings are gone.

You’ve lost your house.

You’re a single parent.

And you’re down to your last $1,000.

Then we are asked whether we can make it through the next month or would like to “Find a job.” If we choose the latter, we are presented with current job openings: restaurant server, warehouse worker or temp.

When we make our choice (in this case, warehouse worker), a description of the job is shown and we continue:

Spent Health Insurance7

We continue to face more choices that make us uncomfortable, such as whether to opt in for health insurance. If we opt in, we see the impact on our finances, which helps us understand something meaningful about low-income workers.

Spent Result8

We then need to choose where to live relative to our place of work. Living closer means higher rent, while living further away means higher transportation costs. You are then asked to pay your rent and transportation costs.

Spent Find Home9

And then we are presented with even more uncomfortable situations that create yet greater dissonance!

Spent Small Apartment10

When we finally reach our tipping point and want to correct the dissonance, we can get out at any time. A small link in the corner reads, “I can’t do this.” And then we are asked to take action and help by getting involved:

Spent Final11

As you can see, the website creates an intense experience of dissonance. And it offers a way to help us reach consonance by donating, sharing and getting involved with Spent12.

More Dissonance In The Wild Link

As mentioned, dissonance is already being used, and you might not have even noticed its power. Let’s look at some attempts at cognitive dissonance, where businesses challenge our beliefs and then suggest their services as a solution.

Adobe Link


If you’re a PHP developer, Adobe will definitely disrupt your consonance by asking, “Who needs PHP?” The ad leads to Business Catalyst, where Adobe explains how you can build database-driven applications without writing code!

A Book Apart Link

HTML5 - A Book Apart14

The HTML5 spec is 900 pages and hard to read. HTML5 for Web Designers is 85 pages and fun to read. Easy choice.

HTML5 is the longest HTML specification ever written. It is also the most powerful, and in some ways, the most confusing. What do accessible, content-focused standards-based web designers and front-end developers need to know? And how can we harness the power of HTML5 in today’s browsers?

In this brilliant and entertaining user’s guide, Jeremy Keith cuts to the chase, with crisp, clear, practical examples, and his patented twinkle and charm.

The introduction to HTML5 for Web Designers15 creates dissonance by suggesting that we don’t have the time or energy to get through the HTML5 spec. It recommends that we use this book to learn the important parts of the spec, which will bring us back to consonance.

37signals Link

Projects Manage Themselves with Basecamp. Millions of people use Basecamp, the leading online project collaboration tool.16

The subheading for 37signals’ Basecamp17 is powerful. Knowing that millions of people are using Basecamp to get stuff done and that you’re not one of them might challenge your thinking. Are you missing out? Are those people more efficient than your team? You might consider using this product to gain efficiency.

Blinksale Link

Send Invoices. Accept Cards. Tired of PayPal? Signup for Blinksale with Blinkpay. Just $24/month for both.18

For those of us who use PayPal, Blinksale attempts to create dissonance through its ad on The Deck19 by asking whether we are tired of our current service. Some of us feel that PayPal is a good enough service, but Blinksale claims to be the easiest way to send invoices online. With our beliefs challenged this way, we might decide to look further into what Blinksale has to offer in order to resolve our dissonance.

Where To Start? Link

If you’d like to apply cognitive dissonance, I suggest starting simple so that you can A/B test and gather feedback more easily. Then, you could incorporate more of it as you become comfortable with applying the theory. For now, start by using dissonance in a few of the headlines on your website to convince people to do business with you. Take the boilerplate headline that we see on most freelancers’ websites:

Hello. My name is Tad Fry, a Web developer and designer who makes websites.

Apply some dissonance:

Your competitor’s website is better than yours. Let’s work together to change that.

This might be blunt, but we want to challenge beliefs. If someone feels that their website is better than their competitors’ but then is challenged by your headline, they might be inclined to call you to resolve their dissonance. If you want to appear less provocative, you could phrase it as a question.

Is your competitor’s website better than yours? Let’s work together to change that.

Even though we are phrasing it as a question and the potential customer might agree (consonance), we are still creating dissonance because they might not have even considered that their competitor’s website might be better. We’ve now made it less direct and perhaps less insulting. Getting the right balance between dissonance and a respectful tone is sometimes difficult, but as with most of our work, gathering feedback and making changes based on it is important. This brings up another part of the theory.

In his book A Theory of Cognitive Dissonance (see pages 3 to 18), Leon Festinger writes (18):

The strength of the pressures to reduce the dissonance is a function of the magnitude of the dissonance.

We might prefer to be more direct, because that will create greater dissonance, which would put more pressure on the audience to reduce it. Again, it comes down to how much dissonance you want to create without insulting the visitor or completely missing the target. After all, the visitor could achieve consonance simply by choosing not to listen to you at all — which is why testing your work is so important.

Now Go Forth And Challenge Beliefs! Link

Hopefully I’ve whetted your appetite for this approach. I encourage you to look more into the theory, which is more involved than this introduction. And that’s the beauty of it. The various degrees of dissonance offer new approaches to your next design. Try adding dissonance to just a headline or page element at first. Be careful not to insult; you simply want to challenge beliefs and offer your product as a solution.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook


Tad Fry is a web developer who likes to combine design & theory. He can be found on Twitter @tadfry and enjoys writing, sketching, and problem solving. Get Ratio is one of his favorite projects, and he loves to learn and discuss design at Drawar & Forrst.

  1. 1

    Love this article! I have learnt a lot and this will definitely help me with my marketing design! Thanks.

  2. 3


    This is simply amazing. For starters I always love it when writers blend academic theory with practical advice. When researching on academic portals such as ACM and IEEE I find excellent papers that very few designers and developers know about, which is a pity really. The thing is – whilst they may have practical application, very few people will actually know how to apply them in real life. Blending them like you did here is a difficult feat but you did it excellently so kudos for that.

    Secondly I loved the subject. I see a lot of potential in applying dissonance to prolong the length of time a user stays on a site. Also, I think it’s a technique that can elicit more calls to action.

    Once again, awesome job! Keep it up!

    • 4

      Wow Justin! I know I already said thanks via Twitter, but thanks so much for the kind feedback, and sharing your appreciation of the combination of design and theory :)

    • 5

      Love the article Tad, and n

  3. 6

    wow. great article, a bit long, but good stuff in there! I will definitely be using this to change around my approach!

    • 7

      I agree Kegan, it took quite a bit of time to write it, but I’m a very visual learner; therefore, examples, examples, examples! Appreciate the feedback, and hope it helps with your projects!

  4. 8

    Very well put up!!
    How everything boils down to basic and systematic principles.

  5. 10

    Great article! So simple yet effective. I will definitely try this, thanks smashing magazine!

    • 11

      I’m glad you’re going to incorporate dissonance Suety! Thanks for reading :)

  6. 12

    Great article! I don’t think it was too long. The examples really helped me understand various ways dissonance can be used. I’m already trying to think of ways to integrate this into my own marketing projects. Thanks!

    • 13

      That’s awesome Erin. Thanks for taking the time to leave feedback; I appreciate it!

  7. 14

    Great article! Open my eyes to discover more about this technique. Can you help me with some links where I can read more about dissonance ? Thanks and again, Great Article Tad!

  8. 16

    The Problem-Solution format you’ve laid out so well in this post certainly is one of the best ways to advertise a product or service. Thanks for the stimulating examples.

    • 17

      You’re welcome Andy! I think some people manage to pull off this technique without realizing it, but having some understanding can make it that much more powerful.

  9. 18

    this is awesome and very deep advice

  10. 20

    Really liked the article and coming to the realisation that I was reading it to make myself feel comfortable again. A nice additional piece of thinking to include in my design and marketing process..! how can I make the user engaged though dissonance…

  11. 24

    This article was not challenging to me at all. I’ve heard all this noise before and never seen it truly necessary in design. I won’t be using these points in my current projects nor my writings.

    I’ll use it in all of my future projects as I know understand fully the concepts and how it can drastically impact design. This wasn’t challenging to me, it was life-changing.


  12. 26

    Loved this article as well. Well done. Very useful information that can be applied to many different aspects of life, not just design. Thank you again.

    • 27

      Thanks Juan! It’s used in public speaking a lot, persuasion and fear appeals mostly; especially in politics. Did you have specific aspects in mind?

      • 28

        Yes, that is exactly what I was thinking; use in public speaking and persuasive writing.

  13. 29

    Yes, being blunt can have its place, but remember to find the balance of not insulting. Just make sure you test the messages. Thanks for reading :)

  14. 30

    Some insights from Spent to back up what Tad said here:

    92% of visitors clicked “accept the challenge.”

    Across 1.2 million visits the average time on site is 10:30.

    Those numbers crush anything else I’ve worked on in 13 years making things for the web.

    Thanks for writing this Tad.

    • 31

      Nick, thanks so much for sharing the stats. Spent is wonderful; excellent work and thanks!

    • 32

      alex mitchell

      October 14, 2011 1:33 am

      What a project indeed and such great results. fantastic work!

      • 33

        Thanks guys. It was a great learning experience to work on. Most importantly, as designers we need to find a great writer to work with for our work to reach its full potential.

  15. 34

    Wow, I agree we will be talking about this tonight from 8pm to 11pm , so log on to and give your opinion !!!! So join us!

  16. 35

    This article is way too boring! That would have been anybody’s response if one were to just quickly skim through. That is; reading it without giving it a thought – while, at the same time, constantly not thinking of practical ways to apply it in real life.

    • 36

      Thanks for the feedback Sang. What would help engage someone who just quickly skims through? Reading without giving thought is not the best way to learn.

      • 37

        hey Tad, thanks for the response.

        I was trying out “Dissonance,” with my comment :) Hope the first sentence was the reason that made you (or anybody else) read the whole comment.

        The message I was trying to convey, actually, was that the article was NOT boring at all. In fact, it was great! It was deep! And that’s why one should read it carefully. Not just skim through – to know its value. Give it a thought. And think about its applications.

        • 38

          Ah, thanks Sang! I understand now :) Your first sentence definitely made me read the rest of the way :D

  17. 39

    What a great article Tad!!!! Super Thanks for this great article!!
    Smashing Magazine you Rock!!! With out you I am not what I am today!!!

  18. 41

    Great post – this goes hand-in-hand with persuasive design imho

    • 42

      Definitely Jez! While there’s the foundation of using logic, expert, or emotion, I think using some dissonance can really help if done properly.

      • 43

        Definitely Tad – and thanks again for writing the article, I really would like to see more articles of this calibre on smashing magazine in the future

        • 44

          Appreciate your follow-up comment Jez! It was fun writing this with the help of Francisco and the rest of the Smashing crew; the bouncing of ideas and feedback created an awesome experience.

  19. 45

    Good persuasion technique, although putting someone in an uncomfortable situation might not always be the road to victory. Nevertheless great article.

    • 46

      I agree Thomas. Dissonance doesn’t always need to be used, but its a nice tool to keep with our other techniques we use to engage our audience. Choosing when to use it is just as important as knowing how to use it.

  20. 47

    Cool article, while I’d never heard of dissonance or consonance before for me they refer to one of the fundamental elements of UX design, namely user engagement. From instinct being provocative can be risky on one hand but kinda sexy on the other, and as we all know from that old tried and tested marketing proverb, sex sells. I like to think there are plenty of other ways to engage users other then pushing them from dissonance to consonance though. On the opposite side of the scale I’d expect there are lots of examples of design that re-affirm viewers/users consonance from the beginning to end of their engagement with the design.

    • 48

      Thanks for reading, and I certainly agree there are other helpful ways to engage users. However, it’s a great exercise trying new techniques. A brainstorm session beginning with dissonance could potentially lead to another idea that doesn’t involve it all; I think that’s why I love communication theory in general. Picking a theory and trying to design from it is always fun for me.


↑ Back to top