Striking The Right Tone

For those of us who work on interface and website copy every day, these messages seem like no big deal. We might write them quickly, without thinking about the person reading them. But for that person, those messages sometimes are a big deal. A credit card decline could be due to a mistype or expired card, but think of the worst-case scenario: What about the person who’s out of credit when they need to make a purchase? An account suspension could be an easy fix—or it could mean someone’s going to get in big trouble at work because of their mistake. Unsubscribe notifications and warnings can make people feel embarrassed, scared, or insecure.

Nobody likes receiving bad news but when it comes to delivering it in your UI, finding the right tone can soften the blow to your users a lot. In this issue of MailChimp’s UX newsletter, Kate Kiefer Lee explains how she goes about doing this following her four principles: get right to the point, save the jokes for later, stay calm and read it out loud.

Fonts For All Languages

Noto is Google’s font family that aims to support all the world’s languages. Its design goal is to achieve visual harmonization across languages.

Noto already covers an impressive 395 languages (including several minority and historical languages) ranging from English and French to Hebrew and Malayalam. The family is still being improved with support for Simplified Chinese, Traditional Chinese, Japanese and Korean having already been added this month.

Monotype Acquires FontShop International

Erik Spiekermann:

As a typeface designer who cares deeply about the industry in which I work, I have watched Monotype not merely survive, but grow and prosper. They have become respected experts in the business and the technology of type. Having my typefaces become part of the Monotype foundry will make sure that they, as well as the other FontFonts, will benefit from Monotype’s strengths. The industry-at-large will be stronger once FontShop adds its creative prowess to Monotype’s business.

The $13 million deal (approximate) includes FontShop International GmbH as well as FontShop International Inc., FontShop’s FontFont library, FontShop AG of Berlin and 13 typeface families.

Aprilzero

A few months ago, I started tracking everything about myself. 104 days, 9 countries, 60 cities, 1280 commits and 14 burritos later, this site was born.

With the help of Foursquare, Moves, Mapbox, Facebook, Apple, GitHub and Nike, Anand Sharma has been tracking everything about himself for the past few months and today published Aprilzero, a gorgeous site displaying of all of the data collected to date. I lost track of the number of nice little details there are on this site.

iBeacon Fun at Panic

With the arrival of iBeacons in iOS 7, Apple was clearly moving into retail and public spaces in a whole new way. [...] With this new technology in-hand, it wasn’t too long before I put together a brand new office In/Out tracker called PunchClock. It uses a combination of a geo-fence and iBeacon tracking, plus a simple Sinatra backend hosted at Heroku.

The guys at Panic have been experimenting with iBeacons and have open-sourced the result, an internal app that tracks who is and isn’t at the office (although, as they put it, “it’s not for the faint of heart”).

There was a great CocoaRadio episode about iBeacons a few weeks ago as well.

Breaking Down Sketch’s Vector Tools

I’m going to teach you some secrets of Sketch power users, including how to customize and combine basic shapes into your own illustrations, letterforms, or icons; how to address technical issues that can be totally bewildering even to professional designers; and how to leverage several tips and best practices for your workflow.

This great guide by Peter Nowell gives a comprehensive explanation of Sketch’s vector tools. It covers both basic and advanced techniques as well as explaining how to work around common problems that you may have come across.

An Introduction to SVG Stroke Attributes and Animation

Using SVG inline provides total access to the graphic for complete customization and control over its output. This is especially handy when creating shapes by hand in the browser, or making edits to an existing graphic.

If you haven’t worked with SVG strokes before, this article by Joni Trythall is a great place to get started. It covers the related attributes and as well as the basics of animating them, all with code examples.

Codrops also published an article a while ago showing off some of the things that can be achieved with SVG strokes.

Better Onboarding for Web Apps

Better introductions for websites and features with a step-by-step guide for your projects.

If you have a web app, intro.js by Afshin Mehrabani looks like a great way to improve your users’ onboarding experience. It has good compatibility with anything above IE8, is fairly lightweight and as an added bonus supports keyboard navigation.

There are a few demos available as well as a far more in-depth look at it’s capabilities on GitHub.

Live Stream Your Photoshop Documents Privately

With LiveShare PS you can now broadcast any Photoshop document to as many people as you want through an instant LiveShare meeting. If you make a change to your Photoshop document, they’ll instantly see your changes in the LiveShare meeting—you don’t even have to hit the save button!

This looks like a great way to share what you’re currently working on, privately, with team members, friends et cetera. Whilst I think it could have done without the mobile mirroring feature (Skala Preview’s the best tool I’ve come across for that), this is still undoubtedly one of the more useful plugins out there.

It has a few more features, all of which are shown in the demo:

How Instagram Onboards New Users

Instagram, now well over 150 million users strong, exploded on the scene as one of the most rapidly-adopted products in the history of the world. How are things looking these days, over two years after it was acquired by Facebook?

If you don’t already read User Onboarding by Samuel Hulick, you’ve been missing out. As usual, in his latest teardown Samuel has highlighted both the good and the bad aspects of—in this case, Instagram’s—onboarding experience and provided some very valid thoughts on what could be improved.

Side Project Advice by Justin Mezzell

This is your chance to do something you actually care about it. Regardless of how impractical it may be. If you’re super into underwater basket weaving, underwater basket weave like everyone is watching. If you do something just because it has mass appeal and other designers will probably like it, that’s a flimsy motivation. Eventually, your preference for other things in life that you actually care about is going to win out.

Justin shares some solid advice in this article. If you want to work on a side project but aren’t sure where to start (or even if you’re already working on one at the moment for that matter), this is definitely worth a read. TL;DR?

Make something worth a damn about something you give a damn about.

Web Technologies Hanging Out Together

As a beginner, understanding how the different languages you learn interact with each other can be confusing. I thought we could pair up a variety of languages to see where they intersect and communicate.

Whether you’re just getting started with web development or want to get into it but are not sure where to start, this article by Chris Coyier is a must-read. He gives a great overview of HTML, CSS, Javascript and PHP, explaining their usage, best-practices and how each of these languages interact with one another.

Stefan Sagmeister on The Great Discontent

Stefan Sagmeister:

I’m completely flabbergasted that almost no one talks about beauty within the world of design. If someone does, it’s often, “Well, this is not what we’re about.” Fuck you! If you made something today that was actually beautiful, you did a lot. I think that’s something to be embraced and be proud of. There is this notion out there of designers being seen as people who only make things pretty as if that’s somehow lesser. Just look at the world right now, be it American strip malls or public housing. How much of it is so extremely ugly and built under the guise of functionality, even though it doesn’t work all that well? You can drive for hours and hours through this country, on highways and byways, without encountering beauty. It’s amazing.

The quality of the content on TGD is always good but this fascinating interview with Stefan Sagmeister is possibly my favourite one to date.

Michael Bierut Talks About Massimo Vignelli, Logos & How Designing Has Changed

Michael Bierut talks about his mentor Massimo Vignelli, how the internet has changed the way we do design work in the 20th century and what makes a logo endure.

This is a great interview with Michael Bierut for The Creative Influence. Michael worked with Massimo for 10 years, starting in 1980 right out of school and leaving in 1990 having become the vice president of graphic design at Vignelli Associates.

He has a fantastic perspective on design and there are a few great quotes in this video; my favourite possibly being:

I learnt specifically from [Massimo] the impact a designer can have in the world and the responsibility that goes along with that impact.

Check out the full interview:

Banksy’s Artwork in LEGO

This is a fantastic series by photographer Jeff Friesen who, with his daughter, has recreated some of Banksy’s most iconic work in LEGO.

Banksy Balloon Girl Banksy bouquet thrower Hanging Man

Check out the rest of the “Bricksy” gallery here.

All the RGB Colours in One Image

But in every coder’s life there comes a problem that would take real amounts of time to solve in a “fast” language, and using Python would be out of the question. That problem for me was filling in every RGB colour in one image.

The result of this experiment by Max Golden is a series of 4096px x 4096px PNGs containing 16,777,216 unique colours. I like that he took it a step further and filled each pixel based on nearby colours to make the images little more visually appealing. His article explains the algorithm used but he’s also included full-size PNGs at the bottom of the post (as well as the the source code on GitHub). Whilst maybe not pretty, the results are definitely interesting:

1

2

Generate ICNS Files in Sketch

Sketch.app plugin for generating an Apple Icon Image .icns from a sequence of artboards OR automatically from a single layer. Includes standard OS X icon sizes and @2x versions for high-density displays.

This is a useful Sketch plugin by Nathan Rutzky that allows you to generate an ICNS file from your artboards (or from a single layer but please don’t do that) without having to go through the terminal. It uses the recommended “iconutil” command to convert them so your ICNS file will be compressed and ready to go.

If you want to know how to do this manually, I wrote an article explaining the process a while ago.

Are Hollow Icons Really Harder to Recognize Than Solid Icons?

By studying the data from more than a thousand test participants, I found that hollow icons are not necessarily less usable than their solid counterparts. However, the results are actually a bit more complicated.

This is a good article by Curt Arledge, finally putting some solid research behind the hollow vs solid icon debate. As it turns out, Aubrey Johnson’s original article on the matter was technically correct but once you dig down a little further, there is actually very little difference between the two styles.

Curt’s results are based on 20 icons, tested by 1260 people over a 10-day period. Of these 20 icons, the hollow versions were selected about 0.1 seconds slower on average than the solid ones, however, of those 20 icons 3 were selected faster when hollow and 9 were selected in exactly the same amount of time whether hollow or solid.

The full article is well worth a read but I think the difference between the two is so minimal that it doesn’t really make any difference as long as you draw clean, simple and recognisable icons.

Eyes on the Road

Volkswagen:

Mobile use is now the leading cause of death behind the wheel. A reminder to keep your eyes on the road.

Volkswagen are renowned for their clever ads but this public service announcement is one of the most effective pieces of media I have ever seen from the company.

Adobe Creative SDK

The Creative SDK is a rich set of iOS components creating a new era of connected creativity and a seamless workflow between your mobile applications and Adobe Tools and Creative Cloud services, reaching millions of new users.

Adobe announced a lot of stuff at their event yesterday but I found this particularly interesting. Whilst it’s currently only available to a select few, it will eventually allow any 3rd party developers to work with Adobe’s Creative Cloud (which currently has 2.3 million members) to extend the capabilities of their apps. This includes things like pulling layers and groups directly from Photoshop files into your app and access to photo editing tools on any device as well as the ability to work with Adobe’s new hardware. I’m really looking forward to seeing what people do with this!

Visit the Archive for more posts