Weekend Design Session with James and Juan

DSC 6983

Jamming with James and Juan at Expa.

It was cool jamming with these guys this afternoon. Their passion for design is just infectious, and I feel I’m learning a tremendous amount from this group.

DSC 6984

Setting up all the fonts now so I don’t have to do it again later.

As much as I want to jump ahead and design new features on Input, I actually have to take a step back and clean up our sketch files and really look at the entire system. Since we’re redesigning everything, I’m taking the time to set up everything—the fonts, the spacing, the symbols, and the asset naming. The future is looking brighter.

DSC 6985

Juan doing some amazing illustrations.

I’m hoping I can keep the system as simple as possible. It’ll evolve over time, but I’d like to stick to a foundation that we can build on top of for the years to come.

By the way, I’m really looking forward to reading this tomorrow:
Design Systems Handbook

And I’m currently watching a YouTube video of John Vino designing live. It’s pretty cool to watch his process.
Live UX Design with John Vino

The Difference of a Few Pixels at Facebook

1 wVbXLamvms92BPrapEBigw

Comments refinements on Facebook before (L) and after (R).

Vitor shared an article with me recently about how FB did a ton of testing and research to arrive at their latest design iteration. It’s pretty amazing how dozens of small refinements working together can make a huge difference.

Small changes, like a few extra pixels of padding or the tint of a button, can have large and unexpected repercussions.

On a side note, it looks like Facebook has integrated a ton of design cues from Instagram—rounded corners, chat-like comment bubbles, outlined icons, and overall a lighter interface.

Inspired by Facebook

I’m currently working on a comments feature as well on my project and I’m going to borrow some design cues from our friends at FB.

New

Revised version of comments, following a similar style as FB

I think that the icon shape, bubbles, and avatar sizes creates a better visual hierarchy. I’m pretty sure I’m going to change it again in the future, but this looks like a nice improvement. Anyway, we have some good stuff coming soon. Really looking forward to shipping this new design.

Evolving the Facebook News Feed to Serve You Better
Hat tip: Vitor

Beautiful Pills by Takecareof.com

Screen Shot 2018 02 13 at 10 04 18 PM

Takecareof.com (Hat tip: Erin)

I’m really digging this site. The photography, the typeface, product packaging and the aesthetics are 👌. The product itself seems pretty cool—personalized vitamins. It even says “Hi [your name]” to give it that personal touch.

Typeface

Let’s start with the font… I really like the combination of bold san serif for the headers, and serif for the body. The combination of short punchy headlines make it feel kind of handmade and human.

DLR GRP 2359

Ginger

It kind of reminds me of a modern day Futura, but more refined.

125733

Gauthier

Love this font as well. I’d could imagine using this for a print project… something with debossed type on a nice thick stock. It just has such a tactile feel to it.

Photography

I have nothing but good things to say about the photography. I absolutely love the pictures of ingredients on a solid color background. The neutral pastel colors combined with the strong accent colors of the ingredients are absolutely tasty.

Img prenatal hero

Img turmeric hero

Img vitaminc hero

And when you combine type on top of these images, it just looks 🤘. I’m guessing that they did a bunch of photo composites… but it looks good.

White Space

And their use of white space is pretty boss. It’s like a breath of fresh air when you scroll through their site.

Screenshot

Anyway, I thought this was a good one to bookmark. They made a bunch of pills sexy, approachable and human. 💊

Takecareof.com

Hanging Out With SF Designers

IMG 3833

James Donovan and #squad doing a design review during lunch.

I spent the majority of this afternoon hanging out with some other designers in SF. The caliber of talent here is amazing. I had a great time doing a design review and talking about trends, philosophy, and our current challenges as designers.

It was refreshing and these guys lifted my spirit. They were passionate about design… and they really cared about the details. They’re also specialized at what they do–like a surgeons knife–illustrators, systems design, visual design, interaction, etc. It’s fascinating to see how deep their expertise goes in each discipline.

It’s been a while since I’ve had a chance to do a design review with other creatives. A lot of times I’ll get feedback from people, but you really have to un-package what they’re trying to say. I enjoy the challenge, but working with folks in the creative field gives you a chance to talk in the same language. Sometimes it’s nice to talk about pixels. It was a breath of fresh air and it makes me want to step up my game when I hang around these guys.

So let’s recap some of the trends we talked about in our design review…

Trend #1: Circular Font

Circularintro

Circular is the new Helvetica.

As far a design trends go, we felt like certain fonts like Circular have been pretty much adopted by everyone. AirBnb was one of the first to really make this font mainstream, but it’s pretty much everywhere now. Even Atlassian is using it–check out their graphic standards manual. Eeeeeeveryone is on the circular train. But my god, it looks so good.

Trend #2: Flat Illustrations

72987bf6946786f2879ee44fd42b05f2

A flat illustration from Slack’s website.

Again, it seems that this trend has been going strong for a while, and we’re starting to see everyone adopt it. Not to pick on Atlassian again, but they are also using this exact style in their illustrations. Even Uber uses a variation of it if you scroll down parts of their site. Same goes with Evernote, and our friends at Shift.org. It’s hot right now.

Google Hotels, by German Kopytov for Google.

One of the more popular styles that’s starting to catch on is isometric illustrations and renderings. And the folks that can add subtle animation to it are the champions.

Trend #3: Studio photography with solid backgrounds.

Portrait danny bowien 2500w

Photograph from Squarespace.

I’m really digging this style of photography, and I love how the background color matches the color of the model’s sweater. I think the other important thing to notice is that the model has a tattoo and a little swagger. He feels human–a person that you could approach and talk to. The last thing to note is the lighting seems like it’s coming from a single source, most likely a large lightbox/strobe. The entire photo is sharp, so they’re probably shooting with an 85mm at f8. The edges are crispy, and the exposure is perfect. I’m going to see if I can replicate this on my own… heh.

Aaaaaaaand, the people that add some subtle movement to it are going to be the champions.

Ps. if you want a little more inspiration, you should check out these other two sites:

Screen Shot 2018 02 09 at 10 46 37 PM

Makemepulse.com, Hat tip: James

Screen Shot 2018 02 09 at 10 46 58 PM

Zinus.com

Pss. After hanging out with these guys, I’m wondering if I should do a video series of designers talking about their tools, process, and potentially doing design reviews of new products. I wonder if other designers would geek out watching them pixel push their sketch files. Selfishly, I want to pick their brains and learn all their trade secrets! Hah!

Hearthstone Design Inspiration

For those of you who don’t know, Blizzard (the company that created Hearthstone, World of Warcraft, Heroes of the Storm, StarCraft, Diablo, Overwatch…) is like the Apple of game design. Their attention to detail is insanely meticulous. When someone says their product was built with love, Blizzard is the bar.

Hearthstone is filled with all sorts of Easter eggs, micro interactions and tiny little details. While most apps and games try to minimize long load times, Hearthstone celebrates it.

Hearthstone loading 2

Hearthstone’s match making load screen.

They could have slapped in a boring screen with a load bar, but they had some fun with it. I think there’s a lesson to be learned in these little details.

Recently, I saw a cool animation on Dribbble by Kyle Decker that was inspired by Hearthstone. To bring in these kinds of details to a product, a culture has to be built around going the extra mile. It’s pretty crazy that he was able to do this all with code.

Dat motion blurrrrrr tho.

As I work on Input, I’m trying to balance between building the essentials versus adding the special touches that add a wow factor. Here’s an example of a small animation tied to a micro-interaction when a user posts. Notice the tiny little animation in the button that resembles our logo. The animation prevents the user from double clicking and communicates that a post is being sent.

Button animation during posting.

I know these kinds of things won’t help us find product market fit… but there’s just something about exercising your love for details and the small things. I’m tickled by cool hover states, minimal transitions and micro-interactions. The best designs are often unnoticed… but on the other hand, I think there are times where users will welcome personality and a little extra somethin’ somethin’.

By the way, I made a Hearthstone video with my buddy Justin Ho. It’s a quick pilot to see if: a) it’s something that he’s interested in doing long term, and b) it’s something that I have time to edit. If you didn’t know, Justin (aka Lyrondak) was ranked #11 in the world last season. I actually believe he could be #1 in the world if he really tried.

The Greedy McGreeds original Hearthstone Deck.

This was our first attempt, so the audio and lighting is a little janky. Creating these videos is just a good excuse to fly drones and play crazy troll decks in Hearthstone.

Anyway, I’m not sure if this is something that we’re going to commit to yet… but I’m pretty determined to work on a video project at some point. I’m just waiting for the right opportunity. You’ll see some more experimental YouTube content soon.

Photos from the Box Office

DSC_8018

Beer bus at the Box office in Redwood City.

I spent the afternoon trying out different headphones and amps at the Box office with Patrick and company. While we were there, Raymond gave us a tour of the multi-floor office. I have to say, they have some pretty cool stuff there, and the space is wide open.

DSC_7995

Fancy uncomfortable chairs.

DSC_7993

Chairs made from skis in their ski lounge.

DSC_7990

Indoor basketball.

DSC_7989

Themed rooms.

DSC_7994

Standing desks and plants.

DSC_7997

Lovely view of Redwood city.

DSC_7999

Gong.

DSC_8009

Full kitchen and cafeteria.

DSC_8015

Strange chairs that make you feel like you’re going to fall over.

DSC_8017

Every vintage game you can think of.

DSC_8019

No tech office would be complete without a bar.

DSC_8025

Insane conference rooms.

DSC_8020

Branded billiards table.

DSC_8021

Custom plaque from one of their board members.

DSC_8008

Curtain dividers. This is clever.

DSC_8000

Fun murals.