Friday, March 15th, 2019
Thursday, February 28th, 2019
Writing on your own website associates your thoughts and ideas with you as a person. Having a distinct website design helps strengthen that association. Writing for another publication you get a little circular avatar at the beginning of the post and a brief bio at the end of the post, and that’s about it. People will remember the publication, but probably not your name.
Monday, February 25th, 2019
For my hack day project I made the avatar on each post in my website change depending on the emoji I use in the post!
Tuesday, January 29th, 2019
My goodness, Meagan’s new site design is absolutely gorgeous! The colour palette, the typography, the texture, the motion design …it all communicates character and personality. Beautiful work!
Saturday, December 29th, 2018
Craig’s slow walk away from Instagram:
I want to have a place very far apart from that, where I can post photos on my own terms. Not have an algorithm decide which of my posts is best (have you noticed Instagram making the second photo in series appear first in the carousel?). And I don’t want to be rewarded for being anodyne, which is what these general algorithms seem to optimize for: things that are easily digestible, firmly on the scale of “fine, just fine.” It becomes a self-fulfilling prophecy, as the more boring stuff we shove into our eyeballs, the more boring our taste becomes.
Friday, December 21st, 2018
Facebook isn’t really all that much better or more convenient than having your own website, or sending emails or chats. But for some reason, Facebook (and Instagram) are where we post now.
Sunday, December 16th, 2018
A personal history of personal publishing from Ana—it’s wonderful!
When I was feeling low and alone I would recall how happy I used to be before I was working in tech. I would remember my silly fan sites, my experiments, my blogs and everything that I loved so much that made me become a developer.
Monday, November 26th, 2018
Paul was at the Material conference in Iceland too, and we had some good chats. Here, he speaks his brains with Deep Thoughts prompted by the event.
I really get where he’s coming from when he says that “certain websites feel more ‘webby’ than others”, but it sure is tricky to nail down.
Sunday, November 25th, 2018
Thursday, September 13th, 2018
This is something I struggle to articulate to friends who are suffering because they feel tied to silos like Facebook and Twitter:
What self-publishing does is provide me a choice, which makes me feel good. I feel like I can step away from platforms at will and I don’t feel as shackled as I have done previously.
Sunday, September 2nd, 2018
I’m telling you this stuff is often too important and worthy to be owned by an algorithm and lost in the stream.
Sunday, July 1st, 2018
Before social media monoliths made us into little mechanical turks for advertising platforms, we had organic homes on the web. We had pages that were ours. And they could look however you wanted. And you could write whatever you wanted on there.
There weren’t comments if you didn’t want them. There were no photo dimensions to adhere to. No 140-character limits. No BS. Or lots of BS. Either way, the choice was yours because you owned your site and you could do whatever you wanted.
Tuesday, June 26th, 2018
Building More Expressive Products by Val Head
The products we design today must connect with customers across different screen sizes, contexts, and even voice or chat interfaces. As such, we create emotional expressiveness in our products not only through visual design and language choices, but also through design details such as how interface elements move, or the way they sound. By using every tool at our disposal, including audio and animation, we can create more expressive products that feel cohesive across all of today’s diverse media and social contexts. In this session, Val will show how to harness the design details from different media to build overarching themes—themes that persist across all screen sizes and user and interface contexts, creating a bigger emotional impact and connection with your audience.
I’m going to attempt to live blog her talk. Here goes…
This is about products that intentionally express personality. When you know what your product’s personality is, you can line up your design choices to express that personality intentionally (as opposed to leaving it to chance).
Tunnel Bear has a theme around a giant bear that will product you from all the bad things on the internet. It makes a technical product very friendly—very different from most VPN companies.
Mailchimp have been doing this for years, but with a monkey (ape, actually, Val), not a bear—Freddie. They’ve evolved and changed it over time, but it always has personality.
But you don’t need a cute animal to express personality. Authentic Weather is a sarcastic weather app. It’s quite sweary and that stands out. They use copy, bold colours, and giant type.
Personality can be more subtle, like with Stripe. They use slick animations and clear, concise design.
Being expressive means conveying personality through design. Type, colour, copy, layout, motion, and sound can all express personality. Val is going to focus on the last two: motion and sound.
Expressing personality with motion
Animation can be used to tell your story. We can do that through:
- Easing choices (ease-in, ease-out, bounce, etc.),
- Duration values, and offsets,
- The properties we animate.
Here are four personality types…
Calm, soft, reassuring
You can use opacity, soft blurs, small movements, and easing curves with gradual changes. You can use:
- scale + fade,
- blur + fade,
- blur + scale + fade.
Pro tip for blurs: the end of blurs always looks weird. Fade out with opacity before your blur gets weird.
You can use Penner easing equations to do your easings. See them in action on easings.net. They’re motion graphs plotting animation against time. The flatter the curve, the more linear the motion. They have a lot more range than the defaults you get with CSS keyword values.
For calm, soft, and reassuring, you could use
easeInOutQuad. But that’s like saying “you could use dark blue.” These will get you close, but you need to work on the detail.
Confident, stable, strong
You can use direct movements, straight lines, symmetrical ease-in-outs. You should avoid blurs, bounces, and overshoots. You can use:
- quick fade,
- scale + fade,
- direct start and stops.
You can use Penner equations like
Lively, energetic, friendly
You can use overshoots, anticipation, and “snappy” easing curves. You can use:
- overshoot + scale,
- anticipation + overshoot
To get the sense of overshoots and anticipations you can use easing curves like
easeInOutBack. Those aren’t the only ones though. Anything that sticks out the bottom of the graph will give you anticipation. Anything that sticks out the top of the graph will give you overshoot.
If cubic bezier curves don’t get you quite what you’re going for, you can add keyframes to your animation. You could have keyframes for: 0%, 90%, and 100% where the 90% point is past the 100% point.
Stripe uses a touch of overshoot on their charts and diagrams; nice and subtle. Slack uses a bit of overshoot to create a sense of friendliness in their loader.
Playful, fun, lighthearted
You can use bounces, shape morphs, squashes and stretches. This is probably not the personality for a bank. But it could be for a game, or some other playful product. You can use:
- squash and stretch (springs.
The easing curve for elastic movement is more complicated Penner equation that can’t be done in CSS. GreenSock will help you visual your elastic easings. For springs, you probably need a dedicated library for spring motions.
Expressing personality with sound
We don’t talk about sound much in web design. There are old angry blog posts about it. And not every website should use sound. But why don’t we even consider it on the web?
We were burnt by those terrible Flash sites with sound on every single button mouseover. And yet the Facebook native app does that today …but in a much more subtle way. The volume is mixed lower, and the sound is flatter; more like a haptic feel. And there’s more variation in the sounds. Just because we did sound badly in the past doesn’t mean we can’t do it well today.
People say they don’t want their computers making sound in an office environment. But isn’t responsive design all about how we don’t just use websites on our desktop computers?
Amber Case has a terrific book about designing products with sound, and she’s all about calm technology. She points out that the larger the display, the less important auditive and tactile feedback becomes. But on smaller screens, the need increases. Maybe that’s why we’re fine with mobile apps making sound but not with our desktop computers doing it?
People say that sound is annoying. That’s like saying siblings are annoying. Sound is annoying when it’s:
- not appropriate for the situation,
- played at the wrong time,
- too loud,
- lacks user control.
But all of those are design decisions that we can control.
So what can we do with sound?
Sound can enhance what we perceive from animation. The “breathe” mode in the Calm meditation app has some lovely animation, and some great sound to go with it. The animation is just a circle getting smaller and bigger—if you took the sound away, it wouldn’t be very impressive.
Sound can also set a mood. Sirin Labs has an extreme example for the Solarin device with futuristic sounds. It’s quite reminiscent of the Flash days, but now it’s all done with browser technologies.
Sound is a powerful brand differentiator. Val now plays sounds (without visuals) from:
- Outlook Calendar.
They have strong associations for us. These are earcons: icons for the ears. They can be designed to provoke specific emotions. There was a great explanation on the Blackberry website, of all places (they had a whole design system around their earcons).
Here are some uses of sounds…
Alerts and notifications
You have a new message. You have new email. Your timer is up. You might not be looking at the screen, waiting for those events.
Apple TV has layers of menus. You go “in” and “out” of the layers. As you travel “in” and “out”, the animation is reinforced with sound—an “in” sound and an “out” sound.
When you buy with Apple Pay, you get auditory feedback. Twitter uses sound for the “pull to refresh” action. It gives you confirmation in a tactile way.
Marking positive moments
This is a great way of making a positive impact in your user’s minds—celebrate the accomplishments. Clear—by Realmac software—gives lovely rising auditory feedback as you tick things off your to-do list. Compare that to hardware products that only make sounds when something goes wrong—they don’t celebrate your accomplishments.
Here are some best practices for user interface sounds:
- UI sounds be short, less than 400ms.
- End on an ascending interval for positive feedback or beginnings.
- End on a descending interval for negative feedback, ending, or closing.
- Give the user controls to top or customise the sound.
When it comes to being expressive with sounds, different intervals can evoke different emotions:
- Consonant intervals feel pleasant and positive.
- Dissonant intervals feel strong, active, or negative.
- Large intervals feel powerful.
- Octaves convey lightheartedness.
People have made sounds for you if you don’t want to design your own. Octave is a free library of UI sounds. You can buy sounds from motionsound.io, targetted specifically at sounds to go with motions.
Let’s wrap up by exploring where to find your product’s personality:
- What is it trying to help users accomplish?
- What is it like? (its mood and disposition)
You can workshops to answer these questions. You can also do research with your users. You might have one idea about your product’s personality that’s different to your customer’s. You need to project a believable personality. Talk to your customers.
Designing for Emotion has some great exercises for finding personality. Conversational Design also has some great exercises in it. Once you have the words to describe your personality, it gets easier to design for it.
So have a think about using motion and sound to express your product’s personality. Be intentional about it. It will also make the web a more interesting place.
Monday, June 4th, 2018
I continue to write stuff down on my little corner of the Web (does it have corners?) and I encourage you to do the same, as all these little bits of flotsam and jetsam become something a lot lot bigger.
Saturday, May 26th, 2018
I wish there was a place where I could read the story of a person. Everybody’s journey is so different and beautiful; each one leads to who we are. It would be the anti-LinkedIn. And because you wouldn’t “engage with brands”, it would be the anti-Facebook, too. Instead, it would be a record of the beauty and diversity of humanity, and a thing to point to when someone asks, “who are you?”
Tuesday, April 17th, 2018
A thorough run-down of the whys and wherefores of being part of the indie web, from Chris.
Friday, April 6th, 2018
This is so great! I don’t just mean the Kickstarter project itself, but this write-up of the origins of pitas.com—it’s a fascinating, heartfelt, genuine piece of web history.
The whole point behind Pitas was, and is, being a simple way to blog. You just open the site, type something into the entry box, and click POST.
And now it’s coming back …if this project gets funded.
I guess if the site gets infested by Nazis we’ll probably not do anything about it for 10 years, then make a bunch of wimpy statements, do nothing, maybe finally request free help from the community and still do nothing about it.
Just kidding, their asses will be kicked off immediately.
Wednesday, April 4th, 2018
I approve of Dries’s plan!
Friday, March 30th, 2018
On moving from silos to your own website:
Over the last year, especially, it has seemed much more like “blog to write, tweet to fight.” Moreover, the way that our writing and personal data has been used by social media companies has become more obviously problematic—not that it wasn’t problematic to begin with.
Which is why it’s once again a good time to blog, especially on one’s own domain.
But on the other hand…
It is psychological gravity, not technical inertia, however, that is the greater force against the open web. Human beings are social animals and centralized social media like Twitter and Facebook provide a powerful sense of ambient humanity—the feeling that “others are here”—that is often missing when one writes on one’s own site.
That’s true …which is why brid.gy is such an incredibly powerful service for, well, bridging the gap between your own personal site and the silos, allowing for that feeling of ambient humanity.
Tuesday, March 27th, 2018
Anil documents the steady decline of empowering features from web browsers: view source; in-situ authoring; transclusion, but finishes with the greatest loss of all: your own website at your own address.
There are no technical barriers for why we couldn’t share our photos to our own sites instead of to Instagram, or why we couldn’t post stupid memes to our own web address instead of on Facebook or Reddit. There are social barriers, of course — if we stubbornly used our own websites right now, none of our family or friends would see our stuff. Yet there’s been a dogged community of web nerds working on that problem for a decade or two, trying to see if they can get the ease or convenience of sharing on Facebook or Twitter or Instagram to work across a distributed network where everyone has their own websites.
(Although it’s a bit of shame that Anil posted this on Ev’s blog instead of his own.)