Design | Jeff Wong

Hanging Out With SF Designers

February 10, 2018 / Design

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

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

February 8, 2018 / Design, Video

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

March 26, 2017 / Design, Photo

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.

Fancy uncomfortable chairs.

Chairs made from skis in their ski lounge.

Indoor basketball.

Themed rooms.

Standing desks and plants.

Lovely view of Redwood city.

Gong.

Full kitchen and cafeteria.

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

Every vintage game you can think of.

No tech office would be complete without a bar.

Insane conference rooms.

Branded billiards table.

Custom plaque from one of their board members.

Curtain dividers. This is clever.

Fun murals.

Farewell Flare

February 8, 2017 / Design, Me, Product

DSC 7076

Reflecting on next steps.

After working on Flare for the last 2 years, weâ€™re shutting it down. I hold my head up high knowing that I worked with an awesome team, and I tried my best in an extremely tough space. I want to thank my comrades, my co-founders, my mentors, our investors, Expa and all the Flare users for giving me the chance to build this. I also want to thank Annie, my family, and all my friends for being so supportive of this dream.

This has been the most humbling experience of my life. I’ve learned some lessons along the way, and I wanted to pay it forward by sharing the insights. I’ll be posting a little more over the next few days, so stay tuned.

Bunch is in the app store!

August 2, 2016 / Bunch, Design, Me

We officially started on Bunch on July 6th according to Justin, and in less than a month, the app is out in the app store. So first thing’s first, download the app if you have an iPhone.

So, in a nutshell, Bunch is the fastest way to video message your 8 best friends. It’s kind of like a walkie talkie, and you just message friends back and forth. I’m really proud of the team for having faith in the concept and putting their hearts into building something so quickly. When I see them put in the hours and effort, it inspires me. It’s that kind of attitude that gets me pumped up.

I’m really proud of this app, and I’m happy that something like it exists. It’s something that I genuinely use with my best friends and I’m hoping that they like it too. I want to thank all the beta users and all our supporters that rooted for us.

This time around, I learned that it’s best to build, experiment and create a playground, versus wait for permission/approval of others. I’m not sure if it’s the right way to build products, but it’s the only way I know how to do it. Building momentum is everything.

I’ll share more on this soon, but I just wanted to let everyone know that it’s out. Now it’s time to see if we can get some traction. Please give the app a try and let me know what you think. This one comes from the heart, and I hope that you guys like Bunch.

Interview with Scott Belsky, via Expa

May 11, 2016 / Cali, Design, Me, Product

Last night I attended an Expa event with Scott Belsky. He shared his story and a ton of startup lessons. Scott co-founded Behance and is now a general partner at Benchmark. He also served as a VP of products at adobe when they got acquired. Here are some memorable quotes from the evening.

“Products are like a bonsaiâ€”Sometimes you have to cut some of the most beautiful branches to make sure the trunk is healthy.”

“Process is the escriment of misalignment.”

“The easiest decision is not to make a decision.”

“As a leader you have to short circuit your reward system.”

“Acquisitions are like feeding a domesticated lion. You have to aggravate the lion by shaking the meat in front of it, until it finally gets fed up and eats it.”

“Focus on verbs and actions, versus documenting everything.”

And his favorite question to ask people who are raising money, “How do you hire people?”.

This was definitely illuminating, and the timing is so relevant. As I work on Flare, I really have to think about all these things.