Lubalin 100

Lubalin 100 is maintained by the Herb Lubalin Study Center to celebrate Lubalin’s centenary, directed by Annabel Brandon (@_annabelbrandon).

Herb Lubablin would have turned 100 on March 17th, 2018.

A storied designer, artist, typographer and apparently — party-goer. Lubalin is probably most well-known for producing the ubiquitous geometric font: Avant Garde.

The one, the only.

For me, Patagonia, VHS tapes and disco come to mind initially, but his type work is no doubt most prolific in the music industry. While, Lubalin’s contribution is not limited only to typography, his design studio produced some breathtaking work. Lubalin definitely defined an era.

Mad respect. What a collection of work. I just love that World Trade Center logo. The play between positive and negative space drive me nuts.

I particularly enjoyed this quirk about Lubalin’s studio:

There was only one Herb Lubalin. His studio, however, had many names.

The name, and associated logo, of the agency which Herb Lubalin founded upon leaving Sudler & Hennessey, underwent several iterations. Although first named Herb Lubalin, Inc in 1964, the name was changed a number of times to reflect the various partnerships, and each repetition required a new logo.

Many names indeed, in fact there were 8 different studio iterations.

  • 1955–1964, Sudler, Hennessey & Lubalin
  • 1964–1967, Herb Lubalin, Inc.
  • 1967–1975, Lubalin, Smith, Carnase, Inc.
  • 1969–1971, Lubalin, Burns & Co, Inc.
  • 1975–1978, Lubalin, Smith, Carnase & Peckolick
  • 1978–1980, Herb Lubalin Associates, Inc.
  • 1980–1981, Lubalin, Peckolick Associates, Inc.
  • 1970s, Lubalin & Co

It should be noted that The Study Center (short for The Herb Lubalin Study Center of Design and Typography) has an extensive archive of Lubalin’s. The Lubalin Center is free and open to the public by appointment. Located at The Cooper Union, it’s a must-visit if you ever find yourself in NYC.

Further Reading

Noe Display

An unapologetically expressive display from Schick Toikka, a Berlin/Helsinki type foundry.

A while back, Trent Walton tweeted a couple of fonts in his shopping list:

Those numerals though! 🤤 

Noe Display is a pretty downright sexy. I enjoy display fonts, they tend to be on the more expressive side. Great for headlines, labels or unique packaged goods. A good display face can do a lot of heavy lifting in communication design.

I took a peak at the specimen website from Schick Toikka, an independent type foundry run by a two-person team in Berlin and Helsinki. You can read more about them here. But here's a sampling from the specimen:

Noe Display Regular Italic
Noe Display Black Italic
Noe Display Medium Italic
Noe Display Medium

A note from the foundry about the origin of Noe Display:

Classic formal attributes of serif display type in the ‘rational’ mode include: a strong contrast between thicks and thins, fine details, elegant curves, and a vertical stress axis. This tradition goes back several generations to the showiest variants of Transitionals and Didones. Noe Display adopts these characteristics, along with features that reflect modern fashions of the mid-20th-century, such as a large lowercase and compact spacing. Beyond that genre-mixing combination, what makes this particular display face unique is the audacious way its strokes end. Large, wedge-shaped serifs come to a sharp point. Arches are capped with prominent triangular beaks. These features add a certain fierceness to the usual elegance of the genre, without detracting from its poise and finesse. It is a seamless dialog between slow, round curves and brisk, spiky terminals. The italic is especially fluid, with a blatantly cursive construction and long, tapering entry and exit strokes. Noe Display’s four weights have a nearly constant hairline weight, increasing the overall contrast as the stems thicken from Regular to Black, offering several degrees of drama and impact. This is distinguished display type with sparkle and bite.

What a lovely and whimsical summary from the designers. The atoms that make-up this type seem to have a complicated lineage, which is probably why this is such a fun display. The fluidity, heights and geometric appendages definitely adds "sparkle and bite." There's a certain salaciousness with the Black Italic, where the Regular Italic is refined and vogue.

Noe definitely has a bit more spunk than the last font I wrote about.

Design Canada Trailer

Through the lens of graphic design, Design Canada follows the transformation of a nation from a colonial outpost to a vibrant and multicultural society.

Cast (Designers): Burton Kramer, Rolf Harder, Fritz Gottschalk, Hans Kleefeld, Stuart Ash, Heather Cooper, and more

With Commentary by: Massimo Vignelli, Douglas Coupland, George Stroumboulopoulos, Hannah Sung, and more.

designcanada.com

This looks so great. I’m glad to see Vignelli is in the documentary as well. He (and the infamous Helvetica documentary) were huge inspirations to me in high school. May he forever rest in peace.

I’m also a huge rail-nerd. So seeing Vignelli critique the 1969 CN logo is going to be mind-blowing for me. You can read more about the Allan Fleming re-branding here, and more about CN’s history, here.

Sketch macOS UI Library

The other day, a friend of mine asked me if I could help design a fun little website that emulate's macOS. I thought it would be a fun project, and looked around for some design resources to get a head start. Low-and-behold, I came across this amazing gem (get it?! 🤣):

If you're not familiar with Sketch, it's a design and prototyping tool. Totally worth checking out their free trial. Sketch makes a good habit of releasing these, but for some reason the macOS UI Library didn't get any notoriety on their blog.

At any rate, it's a badass resource for rapid prototyping. You can install the maOS UI Library here or click on the image below.

A screenshot of the Sketch website showcasing the macOS UI Library

If you don't have Sketch installed, clicking on the big orange button to install won't do anything. If you do have it installed, it will open Sketch and prompt you for installation. At which it will be available in your Sketch Preferences.

Sketch app preferences on the library tab

Once it's here, you're done! The biggest upside to this Library is it works with Sketch Runner out of the box (a must have for you Sketch users out there). You can quickly plop any macOS component by pressing command-apostrophe (⌘ ') at any time and it should bring up the Sketch runner dialog. Search for a component and:

Sketch Runner dialog search query

Press enter, and drop the component onto your artboard.

Sketch App running with a macOS window component

Congratulations! You’ve're ready to start prototyping! Enjoy! 🎉

The iPhone X Home Indicator Color

I thought this was such a great read. Nathan Gitter (@nathangitter on Twitter), a fellow Texan, designer and engineer wrote a deep-dive into the what and behind the new iPhone X home indicator color. Chock-full of charts, observations and experiments — Nathan really went the extra mile.

I especially enjoyed the hidden SpringBoard debug menu he discovered in his investigation. Which begs the question, should we start calling the home indicator the “grabber” now? I mean, I’m all for it. Check out Nathan’s findings below:

View at Medium.com

In a Praise of Trends

Why do design trends happen in the first place? Armin Vit wrote in (the now defunct) Speak Up:

Where does it come from? Are designers in the various fields just tuned into the same wavelength? Is there data to be looked up that steers designers in the same direction? Do creatives look over each others shoulders in bars to see what’s developing on cocktail napkins? Or is there a “stand-out, new direction” one year that is being implemented by everyone else a year behind? Which of course could mean that the “creative” or “innovative” element in our respective fields is not that big after all.

Armin Vit is on to something here in that last sentence. The design world is so small. And the front-end world is even smaller. Between Dribbble and Twitter alone, the transmission of ideas between creatives never stops. It’s no wonder that when a web design trend starts, it spreads like a conflagration.

I would argue that getting caught up in trends can be a nasty habit to get rid of later. However, I also believe trends are great for junior designers. Juniors can get their feet wet on something “new” and can help a portfolio feel fresh and modern. It comes at a cost though, as the trend waxes and wanes away it can leave your portfolio feeling out of date. But I think the long-term advantages of selectively “breeding” trends into your portfolio is overall, a net-positive.

I don’t think all trends are bad either. Most trends in web design crop up as a response to a design problem.

Gradients for example, became a huge hit when Webkit added linear-gradients in 2008. First arriving on background‘s and then later in typography. Previously if you wanted gradients, you had to use a background-image. Eww.

An interesting emerging trend nowadays is softness and harmony in compositions. Which I have to say are not terrible things to come across on the web. Easy to come by with a triad color palette, some box-shadows and background gradients and presto!

 

 

All joking aside, trends can guide your path forward (in any line of work for that matter). While I was attending university, trends in design anchored me. I was flying blind without them. And furthermore, reading about what came before me, was even more important. It was all boring stuff — sure. Inspiring? Meh. Trends may be boring, but mastering them will keep you  employed. There’s no denying that.

I’d argue that mastering trends can lead to greater, more important self-discoveries in future work. Trends get a bad rep, but they’re pretty important to foundational skill-building.

 

Sketch Will Buy Figma

Chaker Bejaoui, writing for Prototypr:

The ecosystem that Sketch has built around it is impressive. If you put Sketch together with Craft, InVision and Zeplin, the package suddenly becomes very competitive and attractive. You can go from designing, prototyping, to testing and shipping the ideas. And if on top of that you add simultaneous collaboration, a better shared revision history and a browser app allowing Windows users to play with Sketch, you are still ahead of Adobe.

Currently there are 3 tools facing each other to win the love of designers: Sketch, Adobe XD & Figma.

There is not enough space for 3 big players. Only 2 at the end will remain to hold most of the market share (e.g. Windows/Mac, Android/iOS, Uber/Lyft). Other smaller competitors will share what is left behind.

For sure XD will be one of the two.

If Sketch wants to remain one of the biggest player, it has to buy Figma.

He’s completely in the right. There’s just simply too many players on the field. If Figma and Sketch knows what’s good for them, this sale will happen sooner rather than later.

Web Design and The Z-Layout

Introduction

The state of Web Design continues to evolve every single day. It has always been in a constant state of flux — pretty much since the iPhone was released in 2007. The iPhone was a doozy, because it forced developers and designers to find workarounds with Flash. Steve and Apple were not intent on bringing flash to mobile users. However, the web really became an exciting place when Google Chrome overtook Internet Explorer sometime in between 2011-2012. It signaled a shift in usage, technology and design thinking — and that just about brings us to now.

 

Layouts

When designing a layout, it’s important to keep an objective in mind. For example, Stripe is a product for developers and web-stores so their main objective is to completely wow developers from all walks of life (Stripe.com has some insanely cool cutting edge Front-end CSS). Another example is Lyft, whose primary goal is to convert visitors into users. What it really comes down to, what is this layout supposed to do for us and for visitors?

Even though we all know above-the-fold is kind of bullshit, it’s still important. Just so we’re all on the same page, we’ll call anything above-the-fold, The Hero. Designing a Hero component of a webpage can be really fun!

First, we figure out an objective: e.g. convert visitors into customers, signup users for a newsletter, or maybe there is no objective at all. Second, we need to figure out a design strategy. This is where the Z-Layout comes in.

 

Z-Layout Design Variations

Let’s take a look at some classic examples. If you are the head of product for an app, or wish to drive visitors to a specific page elsewhere on the website — chances are you want to go with a Z-Layout optimized to move customers around. Let’s look at some variations on this theme.

Slack – The E-mail replacement app has a lighthearted design, and aims to convert visitors into users.

 

Lyft – No paragraphs of copy, just high contrast, a simple form to become a driver and that’s it. If half of your visitors just want to become a driver, or a customer — make it easy for them.

 

Asana – Project management can be a hard sell, but communicating a simple product can be more effective than talking about bells-and-whistles.

 

Southwest – This airline gets an honorable mention. It’s not very sexy, and booking a flight itself is not fun here. But it is important to note that a vast majority of visitors here probably go straight to the booking form — so at the risk of being annoying to repeat users, it seems Southwest values their reward program over actual ticket sales. In fairness, this Hero area above the form likely changes all the time for various promotions and deals.

 

Coinbase, Caviar, Medium and Blue Bottle Coffee – more examples of Z-Layouts (yeah yeah some are stretching it) that promote engagement (e.g. interacting with a form or scrolling down). A single input on the form is key here. If there’s more than one, such as First Name and Last Name… forget about it. Medium is the exception because the product is reading. If you’re not into scrolling and reading, you’re probably not an ideal user for the platform.

 

Various – Above are some examples of heroes that are designed to convert visitors into customers. Key takeaways here on these, high contrast, elements along a “Z” path for eyeball scanning, and a button. The button is very important to driving engagement. It is 100x easier to just click a button than fill out a form.

 

Conclusion

Before I get destroyed in the comments, a layout is not a blueprint. If you’re a product designer looking to spice up your homepage or wish to drive customers to a sale happening at your webstore — look to the examples above for inspiration. The basic rule of this layout is this: simply align elements along a Z-shaped path above-the-fold. The secondary objective is: keep it simple. The less copy, the better. High contrast helps a lot. Make sure to check your colors for accessibility’s sake. And lastly, add your objective last along the Z-path (e.g. a button, form, or link). I hope this helps anyone in need of inspiration or direction!

If you have any questions, feedback or comments drop me a line below 🙂

MVPs Are The Hair of the Dog

There’s been an article floating around the web lately, maybe you’ve seen it. It’s time to talk about MVPs.

WP Engine dissects a lot of the problems with MVPs. I have to agree overall, too often do you see entrepreneurs rushing their products only to fail disastrously. However, MVPs don’t suck. Entrepreneurs are just becoming more and more reckless. I have a problem with creating a new-hip pneumatic called “SLC.” It isn’t going to rally everyone to arms about how to deliver a badass product.

In the article they claim:

MVPs are great for startups and product teams because they maximize validated learning about customers as quickly as possible. But it’s a selfish act.

Well… learning about your users is not selfish. In fact, it’s the very opposite of selfish. It’s a huge reason why the Dot Com Bubble happened in the first place. Too many companies were cannibalizing each other’s features without considering the consequences of users. To make matters worst, VC’s and investors were moving too much money into bad ideas without sound research.

In the old days, startups had little to lose with money moving that fast. Just build it, gather feedback, iterate and repeat.

But things have changed haven’t they? MVPs are a symptom of a new problem post Dot Com Bust — user expectations have inflated.

Products have become increasingly complex. Solving problems becomes more and more difficult and that tends to follow a quadratic curve. Naturally, competition does too. That should go without saying.

Since users grow along that curve too, customers will have loftier and loftier expectations. You’ve’re up against the likes of Google and Apple. It ain’t easy being a startup.

Users have grown drunk with their expectations, and while that sounds bad, it’s not. MVPs are the hair of the dog.

It forces us to focus on delivering complete products out of the box. It forces engineers to deliver, designers can ideate further, sales teams can unify under one message and users can more efficiently share products via word of mouth.

Everyone wins.

There’s no reason to think that MVPs suck. Customers just want a complete experience. No one wants to go to a carnival with no rides.

Stick to your wits and make a damn fine product. Focus on what you want. Focus on what users want. Make it fast, make it complete. Table your conquer the world ideas for later and simplify your product design before launch.

 

While I have a lot of problems with WP Engine’s take on things in the valley, I do agree that delivering a complete product from the beginning should be your highest priority.

 

But there’s no reason to create a new pneumonic device for product development. Just maintain focus and never lose sight of satisfying the experience of the users.

Don’t Pigeonhole Yourself

Recently I was asked, “Stephen are you a web designer, or a web developer?”

Wait a minute. I have to choose? I can’t do a little bit of both? What are you implying?

There was a lot of questions. The problem in corporate workspaces is mainly flexibility. And by flexibility I mean transmutability. Older, deep-rooted conservative organizations prefer pigeonholing their employees into neatly organized genres like this:

He’s a dev…

She’s an accountant…

She’s the copywriter….

Instead of organizing people into cookie-cutter shapes, organizations should be putting people into larger teams of well-rounded doers:

He’s on the web team….

She’s on the marketing team….

She’s on the web and email team…

I’ve always wanted to be part of that kind of culture in an organization. I want to be able to transmute from one task into the other. I would prefer to be where I’m needed as opposed to being pushed through a cookie-cutter.

Food for thought I guess.

 

The test of a first-rate intelligence is the ability to hold two opposed ideas in mind at the same time and still retain the ability to function.

–F. Scott Fitzgerald

 

[poll id=”2″]

Photoshop Template iOS Play Button

At Six Flags, we deliver an immense amount of newsletters.

Each park has several thousand subscribers. Every so often, the parks have videos they would like to share in their newsletters. We discovered an issue with these thumbnails that have an overlaid play button.  It either distorted the image, or it was too dark or too light. So we did some research on who reads our newsletters, and what devices/browsers are normally visiting sixflags.com from the newsletters.

Turns out we have mostly iOS users (with Android shortly behind) that were the highest openers. So it was discussed we could use the iOS play button on the thumbnails since most users would be seeing the newsletter in on an iOS device. Besides we weren’t a fan of emulating Android Chrome’s play button due to the fact the play button might get lost in our thumbnails.

android-play
Not exactly the most legible. Image: Android Central

So, I went to imgur.com and found a .gifv of Homer on my iPhone.

Aye Homer! Cheer up bud!
Aye Homer! Cheer up bud!

With that out of the way I started to replicate the gaussian blur in Photoshop. Here’s the setup:

setup

We got our Artboard, a Group containing all our stuff suffixed with .jpg so Generate Assets will do its thing, and Icon Group and a Smart Object containing our source photo and just a nice background because aesthetics.

icon-group

In the Icon Group, we have a Play Icon, and Play Circle. Each containing a duplicated copy of the Smart Object source photo. This is pretty nifty, because when we save changes in the Smart Object it is updated everywhere else in our document. 😌 Both of which are a clipping mask, and have their corresponding shapes underneath (i.e. Ellipse and Triangle) Each Object also have a Gaussian Blur Smart Filter whose value is set to 8px.

blur

I also added Color Overlays to the shapes to distinguish one from the other. The Ellipse which was rgba(255, 255, 255, 0.5) and the Triangle is set to rgba(0, 0, 0, 0.6 Now if you edit the Smart Object, Save and return to the Document, you have yourself a nice little iOS Play Button thumbnail image! Enjoy!

iOS-Safari-Play-Button

[button type=”primary” size=”lg” link=”https://www.dropbox.com/s/xcjjb9kcl3qzwai/20160630-Play-Template.psb?dl=0″] Download the Template [/button]

Designers or Ingenieurs?

A few nights ago, I was re-watching The Prestige. Then I heard a mysterious word. Ingenieur. In the film, Angier’s ingenieur is Cutter, played by Michael Caine. In the closing narration of the film Michael Caine utters these final words:

Now you’re looking for the secret. But you won’t find it because of course, you’re not really looking. You don’t really want to work it out. You want to be fooled.

We should start calling modern-day Designers, Ingeneiurs instead. Literally, the french word translates to engineer. This conjecture exists on the notion that a designer should be engineering interactions, emotions, and feelings that are ripe for consumption. Bruno Munari once said,

[A designer] is a planner with an aesthetic sense.

Was Munari an Ingenieur? I think he was. I believe all designers should aspire to become an ingenieur of some variety. Wether, you’re an architect, an illustrator or a interface designer—it’s all relative to me. All of humanity’s knowledge is at our fingertips on the web, so who doesn’t want to get fooled every now and then?

Emily Pilloton’s Design Process

This was originally published on my first, deprecated website.

Let’s face it. Education is important as hell.

Enter Emily Pilloton and Project H. They are eager to bring design education to kids in Bertie County, North Carolina. These guys are amazing, and they work on some really cool projects that can be seen on their flickr photostream, here. My mother is a teacher. So, when I see creatives working on something that not only challenges the current educational paradigm and empowers design, I get a little excited.

Project H's Design Process

Emily Pilloton’s Design Process is not playing around.

Emily Pilloton, is a designer, a teacher, and an engineer. She is hell-bent on changing education in the U.S. and abroad. Her weapon of choice, the iterative process. Her vision, has helped children understand problem solving is highly important. It has effectively, benefitted the kids, and the surrounding town of Bertie as well.

Re-designing a school system can be troublesome. Working in tandem with a avant-garde superintendent, and a dying town set on revamping itself. They set their goals on four simple words:

  1. Humanity
  2. Habitats
  3. Health
  4. Happiness

Students work on developing ideas revolving around these four pillars to improve the town and schools while learning everyday mathematics, reading skills, etc. Not surprisingly, the curriculum hinges on the final examination. Which typically involves re-appropriating an old building, or building a more effective chicken coop design.

For more information head over to Project H

Make sure to check out here compelling TED Talk too.

%d bloggers like this: