A deep dive into Pixar’s sci-fi masterpiece, featuring entertaining detours to communist propaganda and Disney theme parks.
Thursday, December 6th, 2018
Tuesday, December 4th, 2018
The newest Gary Hustwit film is a documentary about Dieter Rams, featuring plinkity music by Brian Eno.
Rams is a design documentary, but it’s also a rumination on consumerism, materialism, and sustainability.
Monday, November 26th, 2018
Prototypes and production
When we do front-end development at Clearleft, we’re usually delivering production code, often in the form of a component library. That means our priorities are performance, accessibility, robustness, and other markers of quality when it comes to web development.
We do a lot of design sprints, where time is of the essence. The prototype we produce on the penultimate day of the sprint definitely won’t be production quality, but it will be good enough to test.
What’s interesting is that—when it comes to prototyping—our usual front-end priorities can and should go out the window. The priority now is speed. If that means sacrificing semantics or performance, then so be it. If I’m building a prototype and I find myself thinking “now, what’s the right
class name for this component?”, then I know I’m in the wrong mindset. That question might be valid for production code, but it’s a waste of time for prototypes.
So these two kinds of work require very different attitudes. For production work, quality is key. For prototyping, making something quickly is what matters.
Alternating between production projects and prototyping projects can be quite fun, if a little disorienting. It’s almost like I have to flip a switch in my brain to change tracks.
When a prototype is successful, works great, and tests well, there’s a real temptation to use the prototype code as the basis for the final product. Don’t do this! I’ve made that mistake in the past and it always ends badly. I ended up spending far more time trying to wrangle prototype code to a production level than if I had just started from a clean slate.
Build prototypes to test ideas, designs, interactions, and interfaces …and then throw the code away. The value of a prototype is in answering questions and testing hypotheses. Don’t fall for the sunk cost fallacy when it’s time to switch over into production mode.
Of course it should go without saying that you should never, ever release prototype code into production.
Heydon recently highlighted an article that offered this tip for aspiring web developers:
As for HTML, there’s not much to learn right away and you can kind of learn as you go, but before making your first templates, know the difference between in-line elements like
spanand how they differ from block ones like
That’s perfectly reasonable advice …if you’re building a prototype. But if you’re building something for public consumption, you have a duty of care to the end users.
Friday, July 13th, 2018
A nice walkthrough of a CSS grid in production. I was surprised to see percentages used as units—I wonder if it would feel “cleaner” if they were converted to
Tuesday, July 10th, 2018
I really, really like the way that this straightforward accessibility guide is subdivided by discipline. As Maya wrote in the blog post announcing its launch:
Each person on a team, whether you’re a manager, designer, or developer, has a role to play. Your responsibilities are different depending on your role. So that’s how we structured the guide, with a separate section for each of five roles:
- Product management
- Content design
- UX design
- Visual design
- Front-end development
Tuesday, June 26th, 2018
Prompted by his time at Clearleft’s AI gathering in Juvet, Chris has been delving deep into the stories we tell about artificial intelligence …and what stories are missing.
And here we are at the eponymous answer to the question that I first asked at Juvet around 7 months ago: What stories aren’t we telling ourselves about AI?
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.
Tuesday, May 29th, 2018
The transcript of a talk that is fantastic in every sense.
Fans are organised, motivated, creative, technical, and frankly flat-out awe-inspiring.
Sunday, April 22nd, 2018
An interesting piece by Jessica Kerr that draws lessons from the histories of art and science and applies them to software development.
This was an interesting point about the cognitive load of getting your head around an existing system compared to creating your own:
And just because I’ve spent most of last year thinking about how to effectively communicate—in book form—relatively complex ideas clearly and simply, this part really stood out for me:
When you do have a decent mental model of a system, sharing that with others is hard. You don’t know how much you know.
Wednesday, November 1st, 2017
Advice on building design systems:
- If you can avoid being ambiguous, please do.
- Favor common understanding over dictionary correctness.
- Make great operations a priority.
- Don’t get trapped in defining things instead of explaining things.
Monday, October 2nd, 2017
Great advice from Jen on writing a book:
- Write emails to Ted. Try to find a little comfort zone inside the larger uncomfortable task.
- Don’t write a Book. Write Chapters. Break a large chore into smaller tasks and focus on one at a time.
- Trap yourself. Set up a workspace that limits distraction and procrastination.
- Don’t despair the zero-word-count days. Give yourself credit for behind-the-scenes work, even self-care.
- Get amnesia. Keep your eye on the prize.
Monday, September 11th, 2017
From Designing Products with Sound by Amber Case and Aaron Day:
Sound eases cognitive burdens.
Sound is also a powerful brand differentiator.
Sound is emotional.
Finally, sound impacts productivity.
Not every product needs sound design.
Wednesday, July 5th, 2017
Stop dilly-dallying and just get this work done, okay?
I frequently see web developers struggling to become better, but without a path or any indication of clear direction. This repository is an attempt to sharing my experiences, and any contributions, that can help provide such a direction.
It’s broken down into four parts:
- 10 Domains of Web Development
- Events and Interaction
- Internationalization / Localization
- Understandability / Content
- Interviewing for Web Developers
- Productivity for Web Developers
- Web Training Hierarchy
- Level 1 - Writing Code
- Level 2 - Accessibility and Security
- Level 3 - Architecture
- Level 4 - Innovation
I don’t necessarily agree with everything here (and I really don’t like the “rockstar” labelling), but that’s okay:
Anything written here is open to debate and challenges are encouraged.
Monday, January 23rd, 2017
Ben has been quietly blogging away, documenting beautiful design.
Friday, January 6th, 2017
When a solid 67% of your soul is engaged with battles elsewhere, how do you continue on with our ongoing, non-revolutionary work?
Tuesday, September 15th, 2015
Nick Foster has put the audio of his fantastic dConstruct talk together with his slides.
It’s a terrific, thought-provoking presentation, superbly delivered …and it even has some relevance to progressive enhancement! (you’ll know what I mean if you watch/listen to the whole thing)
Tuesday, September 1st, 2015
dConstruct 2015 podcast: Nick Foster
dConstruct 2015 is just ten days away. Time to draw the pre-conference podcast to a close and prepare for the main event. And yes, all the talks will be recorded and released in podcast form—just as with the previous ten dConstructs.
The honour of the final teaser falls to Nick Foster. We had a lovely chat about product design, design fiction, Google, Nokia, Silicon Valley and Derbyshire.
I hope you’ve enjoyed listening to these eight episodes. I had certainly had a blast recording them. They’ve really whetted my appetite for dConstruct 2015—I think it’s going to be a magnificent day.
With the days until the main event about to tick over into single digits, this is your last chance to grab a ticket if you haven’t already got one. And remember, as a loyal podcast listener, you can use the discount code ‘ansible’ to get 10% off.
See you in the future …next Friday!
Monday, June 22nd, 2015
This one-day workshop that Cennydd is running in London on July 22nd looks like it’s going to be really good.
Wednesday, March 25th, 2015
Get your next design game off to a quick start with this handy generator of nonsensical-yet-vaguely-plausible product ideas.