Category archives for "design"

Slack app icon comparison

Yesterday I looked at my phone and something was off with the Slack icon. I didn’t know what it was, but there was this feeling about some “more”. I couldn’t put my finger on it, then I realized: Slack design team has done a facelift on the app icon. Let’s fire up the good old zoom-to-pixel rockets and see them side by side:

A little more focus was given to the letter “S”, it’s now dark gray with a dash of gradient, the pink has become a little more red. A lot more clarity, the “S” is not cramped any longer into the tablecloth pattern, can breathe – and with that I can breathe more with my online communications.

update: here is the official post on Dribbble with nice looking animations illustrating it for different platforms.

Product vs. marketing illustrations

Meg Robichaud (illustrator at Shopify) wrote a nice piece on the different types of illustrations both for product and marketing (~brand). Icons, spot, scene and editorial illustrations get introduced and looked at both from product and brand perspective. Here is the gist of it:

Icons in product: power and available features
Icons in brand: navigation, to inject some branding
Spot in product: to be read, “hey look at this thing” and just straight up show you the thing
Spot in brand: marketing illustrations say “holy butts did you know about this tho??”, feature call outs
Scene in product: explain complicated ideas, mainly in onboarding
Scene in brand: explain, but also why is it relevant, “how it works”
Editorial: complement the content, capture the mood

I also liked her checklist on icon design consistency:

– Corner radius
– Line treatment (stroke weight; cap treatment; ect)
– Overall weight (ie. if each pixel was a drop of paint, would they all make more or less the same tone when you mix them together?)
– Use of colour
– Are they all tilted (or not tilted) at the same angle?
– Do they handle connecting pieces similarly (either by leaving spaces or by finding ways to connect multiple objects)?
– Do they have either relatively similar silhouettes (eg. all contained in circles) or relatively unique silhouettes?

If you’re this far in reading, read the whole thing.

Visual design comparison between Chrome 51 and 52

New window chrome visuals land in Google Chrome 52 by the fantastic Sebastien Gabriel. Here is Chrome 51 versus 52 animated (click to see the 1:1 version, sorry no retina):

There is a new incognito design, which is now dark, like a sith lord. I dig this, very tight and fresh. You could argue about the tab shapes (I’m expecting an outcry from users), but it doesn’t hurt to go bold at times.

Since I’ll be working on Android apps too, I’m going to read his excellent article with lots of detail on how he redesigned Chrome for Material Design (part 1, part 2).

7 Problems Growing Design Teams Face

Aarron Walter on growing design teams:

Designers are finding themselves embedded in cross-functional teams with engineers and product owners. It’s a great opportunity to learn from others with different perspectives, but it often leaves designers craving the feedback and camaraderie of other designers that’s needed to improve their craft.

Having worked in a larger design team this really hit home. I don’t think we were able to figure out how to work in cross-functional teams yet be together as a design unit with our own set of culture and rules. I really enjoyed being among designers, but siloing designers does not work either.

There is a new type of team emerging around design systems: Design System Ops.

I think I have my own understanding what this could be in a smaller organization. The 20% rule to help you grow is also something worth considering, but it’s not exclusive to designers. Good article.

Thoughts on Hyper-reality

Keiichi Matsuda made this video that shows what a mixed-reality world could look and work like:

The graphic design is vivid, crazy and pops all the time. To the fresh eye it’s very chaotic and is very difficult to comprehend what’s going on, but that lasts only for a couple of seconds and suddenly you immerse in the rich interactions and visuals. It’s not very hard to draw a parallel line between the user in the video and one who has a miriad of apps installed on their Mac. If we showed a video of that Mac screen to someone living in 1981 the effect would exactly be the same.

At 3:50 in the narrative the AR device is being restarted, so you get to see how many layers were composited on top of the original footage:

If you notice there is a fake ceiling in the AR version of this scene. What is the extension of actual structures are good for? If you’re walking on the street and you see people with augmented objects around them, your senses get confused after a while and you might end up doing things that can end up in potential danger. In the video the AR shows incoming traffic on the street with expressive visuals, but I see this something working the other way around in practice:

What if some visual obscures real traffic on a busy street like this? Seeing stuff appearing around people on the street you won’t even be able to walk among people. By forcefully pushing the line from real to augmented you’ll inevitably end up creating real chaos. Then again, this is nothing different than having many apps running at the same time.

The last iOS vector resource you’ll ever need

You’re probably thinking, “I already use Facebook’s and/or Design+Code’s iOS 9 GUI document for Sketch. Why download another one?” Put simply, ours is better.

But there is more:

Along with an extensive collection of navigation bars, segmented controls, table views, keyboards, and other reusable system components to help you build iPhone app mockups more quickly and efficiently, this kit includes a near complete set of Apple’s system icons for navigation bars, toolbars, tab bars, activity sheets, quick actions, settings, and weather.


Our kit also includes a collection of over 80 recreated full-screen Apple system app screens to review, study, and reference. This is by far the largest resource of system apps you can find.

This is all true. Just click the link and you’ll have 78 mb large .sketch file on your desktop with all this. Amazing, meticulous and outstanding work, it’s like if Apple had released its iOS resources.

(I wish we had a similar file for OS X, too.)

Creating hover states that click in InVision

I think it’s not very well articulated how you can make a hover state that clicks when building an InVision prototype. It’s actually very easy to do:

1. set up a hover state hotspot and link it to your hover screen

2. go to the hover screen and define a link hotspot then link it to the next screen

The end result:

Re: Dribbble and The Creation of The Useless Designer

Michael Abehsera:

Today the Dribbble community grew into desiring complete aesthetic Porn, with “function” going out the window and only caring about “form”. Designers are sitting there for hours trying to make a “shot” beautiful (…) Last time I checked design was about solving problems, and that’s why I was excited about becoming a designer. I think we should start penalizing and neglecting designs like the above examples and reward with more “likes” the designers that post different work that has a fresh approach on different problems.

I think Dribbble solves a different problem: it allows designers to showcase their visual skills, to experiment, act like cool etc. It is also big and thus full of mediocre, me-too designs, overdone animations, shadows and blurs. If you can accept this, then you can also deduct the fact that solving design problems might just happen somewhere else, and Dribbble is just fine the way it is and people can give likes any way they want. (Ironically on his homepage Abehsera is not solving any design problems, but showcases screenshots one after the other.)

Visuals in El Capitan

I’m not the first to say that in Yosemite this entry field looks like a button, but since in El Cap made the buttons more like buttons, it’s even worse. Mind you, I was fine with Yosemite, but I feel the next iteration is a step backward. In El Cap there is a subtle gradient, and the visuals had been changed also – to be even more like buttons. I don’t understand why. Why fix something that wasn’t broken?

See what’s next

Client: Netflix
Strategy: Gretel
Design + Animation: Gretel
Typefaces: Gotham Bold, Gotham Book

And then some:

Netflix needed a brand through-line: a conceptual and visual thread to connect everything. Our challenge was to create something broad enough for a global brand but still unique and identifiable. To create something variable yet systematic and bulletproof. It had to be visually striking, adapt to any format, and hold up to interpretation by agencies and vendors around the globe.

Our solution: The Stack, a visual metaphor and an identity system in one.

It’s worth paying attention to this. E pluribus unum.

Adobe releases Acumin

Sally Kerrigan over at TypeKit:

Coming in with a staggering 90 different weights and styles, the Acumin family is the latest typeface from Robert Slimbach, the principal designer at Adobe Type. It’s our pleasure to add this to our library for use on the web and for syncing. (…) Type historian John Berry wrote an extraordinary background on the history of neo-grotesques and the design process that Robert went through to shape Acumin. Take a look at the Acumin site for more details, as well as suggestions from Robert about usage and an interactive type specimen.

She is not kidding, the Acumin site is amazing, I’ll set some time aside to enjoy it from A to Z. It’s so great that with my Creative Cloud subscription I’m able to use this font right away.

iOS 9 GUI from Facebook design

Ever since Teehan+Lax transformed into something different and Facebook-ish, I’ve been all but wonder: what’ll happen to their otherwise fantastic iOS GUI Sketch? Good news is that it’s part of Facebook Design now and it is now meticulously recreated for iOS 9. You can download the whole thing here.

There is more: they made available the diverse Origami device hands, which is also excellent for design work, and they have a good spot for learning about the design at Facebook.

The hardest thing to do

I once tried to build a meaningful Quake level, it didn’t work out. I wasn’t planning the level structure, I got lost in the details, it was a mess, I gave up. With Super Mario Maker, the challenge, although it’s just 2D instead of 3D, still stands. You tought sprite drawing is hard? Level designing is hard. Here is a portion of the World 1-3 from the original NES Mario:

They did this on paper in 1985. Every level has a consistent theme, fits to the gameplay progression, scale to the characters attributes, and more importantly, is fun to play. The goombas drop to the lower platform just about the time you reach that part, there are coins scattered around, but not too many, often there are multiple paths you can take. Sometimes the power-up is not hidden in the harder path, but is in plain sight. The level occasionally contains a simple bonus room to collect items.

Looking at it from the outside, everything feels natural. That’s what I find the hardest to do: designing something that feels natural to the user. Whenever it’s the use of keyboard shortcuts, onboarding a software or presenting options, taking away the frustration until it feels natural is incredibly hard.

The other day I watched a recorded video of Roger Federer practicing. You know, where he’s not hitting power shots but, just sparring. It seems effortless. It feels simple. He doesn’t seem to move his legs, a couple of steps here and there, he doesn’t seem to put much effort into the shots, but they do go to the baseline with a huge kick. It looks like this is the most trivial way to play tennis: you go out there and hit some balls, then they’ll end up at the other baseline with a fat topspin.

NASA’s Graphic Standard Manual is now available for download

A couple of days ago NASA decided to release the iconic 1974 guide by designers Richard Danne and Bruce Blackburn. The iconic “Worm” logo and the graphic system was rescinded by NASA in 1992.

Why release the PDF now? It may have a connection to designers Jesse Reed and Hamish Smyth who are reproducing this wonderful piece of graphic design manual in 2015. They bootstrapped it over on Kickstarter with an enourmous success. This is what they have to say:

As design nerds, we think the Worm is almost perfect, and the system behind it is a wonderful example of modernist design and thinking.

But for everyone, we think the Worm and its design system represent an agency whose goal is to explore space and push the boundaries of science. Where the Meatball feels cartoon-like and old fashioned; the worm feels sleek, futuristic, forward-thinking. All good things for a space agency at the bleeding-edge of science and exploration.


Rendering of the NASA Graphics Standards Manual Reissue.
Detail of page 2.14, NASA Red: Color Swatches.

I suggest you watch their pitch video as well, it’s beyond awesome.