
<Image
  publicId="external-references/matter-a-whole-thing/cover"
  alt="Cover slide: MATTER - a whole thing about design"
/>

From a talk I gave at my then-home-base [Hygge Coworking](https://wearehygge.com/) at a community event. The thesis: we're all designers, and you should give a damn about the things you put into the world.

Slides are [available on slideshare](https://www.slideshare.net/mbifulco1/matter-a-whole-thing-about-design).


Matter - a whole thing about design


<Image
  publicId="external-references/design-matters-zero-day/cover"
  alt="title slide: Design Matters, Hygge Zero day"
/>

These are slides from an empassioned talk I gave about design during a community event called Zero Day at [Hygge Coworking](https://wearehygge.com) in Charlotte, NC, USA.

The thesis: good design is important, and you should be paying attention to good-and-bad design in the world around you. Contributing to making the world better for everyone **is** everyone's job.

Slides [are available on SlideShare](https://www.slideshare.net/mbifulco1/design-matters-hygge-zero-day-93804671)


Design Matters, Hygge Zero day


<Image
  publicId="external-references/your-app-is-ugly/cover"
  alt="Title slide from the presentation which accompanied this talk"
/>

A rehash of a talk on the basics of design and aesthetics, covering color theory, swiss design, and some of the historical roots of modern design.

Authored with Andrew Miller, Jeremy Osborn, and Leah Cunningham

Slides [are available on SlideShare](https://www.slideshare.net/mbifulco1/your-app-is-ugly)


Your App is Ugly


<Vimeo vimeoId="84388498" />

This is a talk I gave at [Blend Conf](http://2013.blendconf.com/speakers/mike-bifulco/) in Charlotte, NC USA in 2013, when I was working for [Microsoft](https://www.microsoft.com) as a UX Designer. If you're interested in learning how to design apps for a version of Windows that came out in 2012, this is your day!

Slides are [available on Slideshare](https://www.slideshare.net/mbifulco1/designing-windows-81-apps-from-the-ground-up)


Designing Windows 8.1 apps, from the ground up


One of the most famous ad campaigns in history is Yellow Tail wine's "Crazy Rooster" campaign. **It's so famous because it broke two cardinal rules of advertising:**

1. You don't want to be memorable for the wrong reasons.
2. You don't want to offend your customer base.

What made this campaign so effective was that it didn't just break these rules, but completely shattered them by doing the exact opposite of what conventional wisdom would tell you.

They built their entire brand around being offensive. They were known for making crazy claims like, "Yellow Tail tastes like s\*\*t." They put up billboards in airports saying, "If it wasn't for stupid people, we wouldn't have any customers." And they even used slogans like, "The only thing yellow about Yellow Tail is the color of our piss."  These things wouldn't actually make anybody want to buy Yellow Tail wine… Right?

What they found was that people loved it. And when people love something, they tell other people about it. The end result? A $500 million brand in Australia with no marketing spend. Why? Because they focused on the right things.

**Von Restorff Effect: Bonkers Marketing Campaigns Spawn Successful Brands**

<Colophon />

Ok... so _now..._ this is an important place to take a pause.

<Aside type="warning">

Up to this point, every word you read was written by AI. It's also **completely untrue**.

</Aside>

<Colophon />

I've been playing around with the idea of using AI to generate blog posts for my site, mostly out of curiosity. I wanted to see if AI could produce quality writing content, with the hope of comparing analytics for a few AI-generated articles to some that were written entirely on my own.

There are tools available online which let you feed a couple bullet points into a generator and select the type of writing you're looking for (article, email copy, bulleted lists, etc). You pick a few options and hit go, and in moments you've got some fresh new prose to use for whatever you please.

## Validating the "Crazy Rooster" campaign

After reading the generated article stub above, I wanted to find some images of the marketing campaign mentioned in the text, so off to the search engines I went. This, for me, was a truly jaw-dropping moment: There wasn't a single image I could find which mentions or references the "Crazy Rooster" campaign.

I dug deeper. I soon found that not only were there no images from the campaign, but I couldn't find any references to that ad campaign anywhere. Yellow Tail's site, marketing blogs, search engines, all returned _nothing._ I even searched for smaller fragments of text from the article above, and came back with nothing meaningful.

<Image
  publicId="posts/product-marketing-defy-expectations/crazy-rooster"
  alt="Search results for 'yellow tail crazy rooster' on DuckDuckGo showing nothing relevant"
  caption="A web search for the Crazy Rooster campaign"
/>

As far as I can tell, it never happened. It doesn't exist.

**In other words, AI had written a really compelling article which was _completely and utterly fabricated!_**

What I suspect really happened is this: the information I fed to the algorithm that this particular AI used weaved together partial anecdotes from a large number of publicly available external sources, creating a believable, compelling, yet non-existent story about a real brand's marketing strategy.

That is _fucking_ impressive... and kind of terrifying!

Friends, I'm here to tell you: the AI tools that are available right now can author content which is _shockingly_ good -- but **there is a massively important caveat** that we all need to understand about AI-powered writing:

<Aside type="info">

**Remember:** AI is just _guessing_ at the "Intelligence" part of its job (at least for now).

</Aside>

Can you imagine if I had accepted this as truth, and published it without surrounding context? The only reason I discovered this wasn't true was because I took the time to look up corroborating information - but it would be _super_ easy to skip that step, especially if you don't understand some of the fundamentals of AI.

### How this post came to be

For articles on this site, I keep a list of topics that I think I want to write about in a big list. I slowly add to individual topics over time, and once I feel like there's enough information on a given topic to produce a meaningful article, I spend some time organizing thoughts from the note into prose, and then publish.

To generate this article, I grabbed one of the ideas from that list, which was this _Von Restorff effect,_ which is a [very real psychological phenomenon](https://en.wikipedia.org/wiki/Von_Restorff_effect) that caught my attention some time back.

I fed the topic and a few cliff notes into an AI tool to see what it could generate - really it was just, a few bullet points and the thesis statement for the article. I wanted to talk about how the Von Restorff Effect can be used in product marketing, to create something sticky; something that will be memorable.

And so I fed the tool and I clicked `go`. The article above is what came out of it. What I was really really impressed with initially was the _quality_ of the writing. No grammatical changes were needed, there was a beginning, a middle, and an end, and it put together a super compelling story that served the points I was hoping to make.

In short, I was really impressed... and then absolutely stunned when I realized what happened.

## Learning from this experience

So I came away with this experience with two important learnings:

<Aside type="note">

1. Ironically, this experience in itself was an extremely salient example of the Von Restorff Effect for me. It completely defied my expectations, and it is something I won't soon forget.
2. This is a really important lesson in working with AI, and how powerful it is. If you're not aware of the capabilities _and limits_ of the tools you're using, you are entering dangerous territory.

</Aside>

## The Von Restorff Effect and product marketing

The nugget here for people building products is simple: **if you can create an experience that completely defies expectations, your product will be far stickier with your potential customers.**

## A caveat on AI tools

It's worth noting that I have intentionally omitted the names of the AI tool that led me to this experience. For me, this is because I'm struggling with whether or not it's responsible to point my readers to tools which can easily lead you into a false sense of certainty. _With great power,_ as they say...

This is a story that I've struggled to tell because of how important I feel like this is.

I can tell you this much: I certainly won't be writing blog posts with AI any time soon, but I will be periodically checking in on this stuff to see how much better it's getting. I think there's an ethical responsibility to understand the limits and capabilities of AI content creation tools.

## AI and Code Generation with GitHub Copilot

If you're a software developer, you may have come across [GitHub Copilot](https://copilot.github.com/) - billed as "Your AI Pair Programmer", it's a freely available tool which will **generate code for you** with little prompting. You can do as little as writing a few comments, and copilot will generate everything from classes to algorithms to complex patterns login flows and cryptography.

<Image
  publicId="posts/product-marketing-defy-expectations/github-copilot"
  alt="Screenshot from a demo on GitHub Copilot's home page"
  caption="Copilot will write code with you.. for you... and alongside you."
/>

There are also tools available for general consumption to _generate writing_ using AI - in other words, feed a couple ideas into a tool, and in moments you'll have an AI-generated block of text which takes cues from some of the best publicly available writing in the world.

## More reading

- 📖 If you're interested in learning about AI fundamentals, I recommend reading <a href="https://www.amazon.com/gp/product/0465094279/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0465094279&linkCode=as2&tag=irreverentm02-20&linkId=3b9fba7a06bd067249ef768ce946c146" target="_blank" rel="noopener noreferrer">The Master Algorithm, by Pedro Domingos</a> (Amazon affiliate link). It's a great primer on various types of AI.
- 🎨 If you're into design and usability, check out my thoughts on why [you should never center paragraph text](https://mikebifulco.com/posts/dont-center-paragraph-text)


Why no one talks about the best marketing campaign in history


import CenteredTextDemo from '../../components/demos/CenteredTextDemo';

<Aside type="note">

This is an experimental post, meant to demonstrate to you the topic we're discussing. I'd love to hear what you think about it. [Drop me a line](https://twitter.com/irreverentmike) if you find this compelling - I'm hoping to create more like it!

</Aside>

<CenteredTextDemo>

This is -- without exception -- my biggest design-related pet peeve. You've probably come across it yourself from time to time, and if you're lucky, it's not something you noticed. Centering text on a web site, email, or flyer is an easy way to make it appear like a designer's spin has been put on a document. It's an easy change to make in most editors, and in many cases it's probably done without a second thought.

I'll cut to the chase: _center-aligning text is really bad_ in most cases. From a young age, we're trained to read text by starting at the beginning of the line and moving our eyes across the page to the end of the line. From there, it's a relatively low-effort thing to move your eyes back to the beginning of the next line. That all changes when text is centered, since the start of each line is aligned inconsistently. It takes more effort to find the beginning of the next line, to make sure you've only moved down _one_ line, and to continue reading.

## Three great reasons you shouldn't center-align text:

1. A ragged leading-edge makes it harder to move your eyes to the next line of text
2. People with dyslexia may find centered text challenging to read.
3. Lists (like this one) become disorienting to read, and harder to scan

The British Dyslexia Association provides a <a href="https://www.bdadyslexia.org.uk/advice/employers/creating-a-dyslexia-friendly-workplace/dyslexia-friendly-style-guide" target="_blank">dyslexia-friendly style guide</a>, which calls out a simple rule for text:

<Aside type="note">Left align text, without justification.</Aside>

As a designer, this is _such_ an easy win. As a developer, it's often as easy as:

```css
/* change this */
.some-style-rule {
  text-align: center;
}

/* ...to this! */
.some-style-rule {
  text-align: initial;
}
```

## When you _can_ use centered-text

Generally speaking, if you're certain that your text will fit on _one line,_ it may be okay to center it. This generally applies to page titles, captions on pictures, and things of that nature. Even then, generally speaking my guidance is to avoid it. Like many other things in design, if there's not a good reason _to_ do it... you're better without.

## Summary

If you're working on a design that relies on centered text, consider other options. If you come across a big blob of centered text in your workplace, or out in the world somewhere, please feel free to use this post as a demo.

</CenteredTextDemo>


Don't center align paragraph text


I often joke that to learn about design is to doom yourself to be lightly annoyed by everything. After some repetition, you'll start to internalize some of the basic rules of industrial design, or print design, or fashion design, or mechanical design, or whatever it is that gets you excited. You'll start to find design quirks in the world which were once hidden to you. After all, every single thing in the built environment has been put there by someone who took their time to bring it to life. The downside, of course, is that you'll also start to see designs that downright suck. I find that it's helpful to think of it as finding opportunity for improvement.

Today's opportunity for improvement is brought to you by [Wikipedia](https://en.wikipedia.org/wiki/Ralph_Waldo_Emerson), which had me going cross-eyed as I read through an article in the early hours of this morning.

<Image
  publicId="posts/all-about-ch/wikipedia-4k"
  alt="Screenshot of a wikipedia article on a wide monitor. Text spans fully from left to right, taking up the full width of available space."
  caption="A fullscreen desktop view of wikipedia on my 4k monitor."
/>

## What is a ch, and why you should c(h)are

It's simple, actually - ch is a CSS unit which represents the width of a character! If you're using a proportional font (where not all characters are the same width), 1ch is the width of the 0 character in the typeface you're using. This is particularly helpful for usability as it relates to reading long passages of text.

## Line length and reading usability - err, readability

Limiting the line width for text in long passages is a great tool for making things more readable. [Studies have shown](https://baymard.com/blog/line-length-readability) that for optimal reading, text should be limited to somewhere around 60 characters per line. Think about it - this is why paperback books are generally smaller than an A4 page. This is why people love reading on their kindle. This is why Barnes and Noble sells Nooks like hotca — well, it's why the Nook is shaped like it is, at least.

In practice, what does this look like? Let's take that same wikipedia article and limit its paragraphs to 60 characters:

```css
p {
  max-width: 60ch;
}
```


Here's what it looks like:

<Image 
  publicId="posts/all-about-ch/wikipedia-ch-applied"
  alt="The same wikipedia article with a limit set on p max-width for ch yields a page that is much easier to consume visually, and is more readable."
  caption="Column width adjusted using the CSS ch unit."
/>

Okay, so that's not a fully-baked design update, but with a few tweaks we can make it a little nicer by bumping up the font size, and adjusting the layout of the right-hand column (side note: wikipedia uses float: right on that column, surprisingly!)

<Image 
  publicId="posts/all-about-ch/wikipedia-ch-adjusted"
  alt="With a few additional layout tweaks, the page can be reflowed around the ch-limited paragraphs, making the entire article more coherent and easier to read."
  caption="Font size bumped up, and right-hand column adjusted to snap in place next to it.  Much easier to read!"
/>

That's not bad at all! One of the nice things about using a character **count** for setting the width of that section is that it scales nicely for folks who use the browser's zoom functionality. You can also put your text passages inside of pixel-size-limited divs to make them work in responsive layouts at smaller sizes:

```html
<style>
  @media screen and (min-width: 800px) {
    .blogpost {
      max-width: 400px;
    }
  }
  .blogpost p {
    max-width: 60ch;
  }
</style>

<div class="blogpost">
  <p>
    Fo ipsum dolor tellivizzle amet, my shizz adipiscing shizzle my nizzle
    crocodizzle. Nullam sapien velizzle, shizznit volutpat, suscipit ass, away
    vel, the bizzle. Dizzle fo shizzle tortizzle. Sizzle erizzle. Fusce izzle
    dolizzle dapibus fizzle tempus dope. Maurizzle pellentesque hizzle et
    turpis. Shiznit check out this fo shizzle. Pellentesque eleifend rhoncizzle
    shiznit. In hac habitasse platea dictumst. Donec dapibizzle. Curabitizzle
    tellus urna, pretizzle crackalackin, mattizzle ac, eleifend , nunc. Nizzle
    suscipizzle. Integizzle rizzle you son of a bizzle sizzle mofo.
  </p>
  <p>
    Dizzle ut dolizzle. Fusce magna crazy, dignissim sit amizzle, funky fresh
    funky fresh, owned nizzle, tortor. Maecenas a nisi. Tellivizzle ghetto neque
    izzle get down get down. Shut the shizzle up stuff. Cras aliquet tristique
    turpizzle. Suspendisse gizzle ultricizzle dope. Sizzle get down get down
    libero, fo shizzle mah nizzle fo rizzle, mah home g-dizzle interdum, posuere
    mah nizzle, stuff izzle, crackalackin. Da bomb mofo tellizzle. Boom
    shackalack aliquizzle gangster sizzle amet dolor. For sure dapibizzle sheezy
    id mah nizzle. Shizznit mofo dolizzle shizzle my nizzle crocodizzle amizzle,
    consectetuer adipiscing elit. Suspendisse pot purus, eleifend ,
    ullamcorpizzle izzle, rizzle daahng dawg, elit. Nizzle porta rutrum nunc.
  </p>
</div>
```

I dropped this stuff in a [codepen](https://codepen.io/mbifulco/pen/rgxryB) if you'd like to play around with it. You'll see a green background when the media query activates.

_Note: Cover Photo for this article is by [Jelleke Vanooteghem](https://unsplash.com/photos/2OCh8tuNsBo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/). Thank you for your work!_

CSS talk: you should really know about the ch unit


I wish I could do as much as I can to spare you the pain of hearing about the horrible shooting that happened in New Zealand last week.

But, as it works out, I'm really (really) mad about it.  So I made these angry little eggy guys, in honor of a particularly [woke-ass seventeen year old](https://www.youtube.com/watch?v=aht5XZFflzQ) who has made the news for publicly rebuking an Australian Senator who had some pretty disgusting views on the matter.

So, I've had a small run of these stickers made.  I'm going to sell them from my site, with 100% of proceeds going to the LaunchGood charity for the [United for Christchurch Mosque Shootings](https://www.launchgood.com/campaign/support_for_the_families__victims_of_the_new_zealand_mosque_shootings).

# So, want some stickers?

I'm not sure the best way to make this happen, but I'm thinking $5 for the pair of them.  They'll come die-cut, on a small sticker sheet which is about 2"x4" in size (so the stickers will be just smaller than half that size)  Want a set? Jump over to the [shop page](https://mikebifulco.com/shop#angry-little-egg), and we'll make it happen. Thanks in advance for putting some good energy into the world.

# Update: Sold out!

Thanks for all of your support - I had a small run of stickers made up, and they were all gone within 48 hours! Next time I do something like this, I'll double the order.  Thank you all for your help.  It means the world ❤️

<Image
  publicId="posts/egg-them-all/sold-out"
  alt="Screenshot of a donation to the Cristchurch Mosque charity for $173.33 USD"
  caption="We donated $173.33 to charity, thanks to you."
/>


Egg them all.


It's one of those things. Once you see it, you absolutely cannot _un-see_ it. I apologize if I'm doing this to you, but it bugs me, and I want it to bug you, too.

## Enter the yeti

If you're a hobbyist podcaster, you've almost certainly come across recommendations for the [blue yeti](https://www.bluemic.com/en-us/products/yeti/) microphone. For about a hundred bucks, you get a decent quality condenser microphone that will plug into your computer via USB. Frankly, for the _vast_ majority of people getting into podcasting, it'll be more than you ever need, particularly if you use it correctly.

Funny enough, there is one other yelly-screamy article about [if you're going to use a blue yeti, please use it right](https://www.bestpodcastinggear.com/if-youre-going-to-use-a-blue-yeti-please-use-it-right/), but even that diatribe doesn't cover what I'm so peeved about. The Yeti has a problem - its audience is casual enough not to be expert on high end microphones, and they're not incentivized to learn about their new device.

Check this out:

<Image
  publicId="posts/my-favorite-design-problem/getting-started"
  alt="Excerpt from the user manual on Blue's website"
  caption={
    <>
      Excerpt from the user manual on Blue's{' '}
      <a href="https://www.bluemic.com/pdf/manuals/yeti/Blue_Yeti_QuickStartGuide-EN.pdf">
        website
      </a>
    </>
  }
/>

Most peoples' exposures to microphones are limited to weddings and bar mitzvahs, and the occasional rock concert or other public event. They're used to seeing folks using a handheld mic, and speaking into the top of it -

<Image
  publicId="posts/my-favorite-design-problem/performer-with-mic"
  alt="A performer singing into a handheld microphone"
  caption={
    <>
      A performer singing into a handheld microphone.
      <br />
      <span classNamec="credit">Ana Paes on Unsplash</span>
    </>
  }
/>

If you take apart a Yeti, underneath that chic metal-grate dome, you'll actually find 3 microphone capsules - none of them pointed upwards. There is no combination of settings on the Yeti that will yield great audio if you're speaking into the top of the device.

If you ask me (and you do), this isn't user error. The physical design of these types of microphones is ambiguous enough that their proper use isn't apparent. Folks who buy a Yeti are generally only exposed to microphones with a drastically different form factor - how are they supposed to know better?

## What to do about it

At some level, as long as they're selling like gangbusters, there's nothing that should motivate Blue to ever change the sleek design of their Yeti. In fact, they've expanded their Yeti lineup since its inception. You'll notice this design challenge is now present across a good few of [Blue's microphones](https://www.bluemic.com/en-us/).

<Image
  publicId="posts/my-favorite-design-problem/blue-lineup"
  alt="A few of Blue's microphones from their website - all of which have the same design challenge"
/>

If, hypothetically, Blue wanted to improve on this design to ensure that users of their mic had the best possible recording results, what could they do? Since they already include a whole-page sized warning in the bundled instruction manual for the product, I think the next best step is to physically change the product. Something as simple as a graphic silkscreened onto the mesh dome might do the trick:

<Image
  publicId="posts/my-favorite-design-problem/target"
  alt="Why not just put a target on the thing?"
/>

## Footnote

I should add that I don't mean to target Blue specifically. This isn't just about their microphone. This happens with any number of other mics from other companies with similar design. The Yeti just happens to be the most popular. In fact, I have one, and I use one - and it's great! Maybe that's why this burns me up so much.


#design: 9 posts tagged

Why no one talks about the best marketing campaign in history

Don't center align paragraph text

CSS talk: you should really know about the ch unit

Egg them all.

Matter - a whole thing about design

My favorite design problem

Design Matters, Hygge Zero day

Your App is Ugly

Designing Windows 8.1 apps, from the ground up

.css-1fb0br2{color:#A0AEC0;}#design: 9 posts tagged

Matter - a whole thing about design

Design Matters, Hygge Zero day

Your App is Ugly

Designing Windows 8.1 apps, from the ground up

#design: 9 posts tagged