Smashing Conference SF — A review

San Francisco, California. Golden Gate Bridge, Alcatraz, steep hills. A sold-out conference with some of the best people in the industry. It’s safe to say that my expectations for my trip to this year’s Smashing Conference SF were sky high. And it sure delivered!

The best way to start off a conference? Balloons. (Photo: Marc Thiele)

This was my second time attending Smashing Conf (first time was in Oxford 2015). I’ve always liked Smashing Magazine and they have managed to create a cozy and including atmosphere which really shows in their conferences. Besides a conference with some great speakers there was a lot of stuff going on outside office hours (a conference party, photo walks, morning runs etc).

An organised morning run was appreciated. (Photo: Drew McLellan)

The conference itself took place at the Fort Mason Center which had some nice views of the Bay and Golden Gate Bridge. New for this year’s conference was that no presentation slides were allowed, everything had to be done live. The hands-on approach was very appreciated since you had the chance to see how the speakers handled a problem in real-time and follow their train of thought throughout the entire process.

Speaker sessions

One thing I really like about Smashing Conference is the fact that you’re able to listen to all of the talks, there are no parallel sessions going on at the same time. During the two-day conference we got to listen to 14 talks from some of the best within UX, UI and front-end development. They were ranging from very technical talks like “Differential Serving in Javascript” by Jeremy Wagner, to more “soft” topics like “How to use the Power of Facilitation to Align Minds and Include People” by Dropbox.

Brad Frost — Let’s Build A Design System

First speaker of the day was probably the one I was looking forward the most, Brad Frost. Brad is the guy behind Atomic Design, Pattern Lab and a bunch of other things. His mission during his one-hour talk was to build a design system, crazy but not impossible. Brad demonstrated how to use Pattern Lab to simultaneously build front-end components for the design system as well as several screens of a real pilot project.

Throughout the talk, he also discussed topics like front-end code architecture, designing in the browser, modular development best practices, designing with dynamic data, and more.

Brad Frost during his session. (Photo: Drew McLellan)

Notes & Key takeaways

• Build your design system through the lens of real products.
• Build real components and simultaneously build up the library. It may take a lot of effort in the beginning but saves a lot of time later when you rapidly need to churn out designs for different platforms and media.
• Have an atomic design mindset. Organise components from smaller to larger with smaller components comprising the larger ones. (Example: Atoms → Molecules → Organisms → Templates → Pages).
• It doesn’t have to be perfect - Build and iterate.
• You continue to feed the design system with every new thing that you’re about to produce. A cycle between the system and the product it serves.

See the talk here.

Darin Senneff — Animating with Emotion

Another session I looked forward to was Darin Senneffs animation session with SVG, JS and CSS. Darin Senneff is a freelance designer and developer based in Brooklyn, NY and probably most known for this login animation. In his talk Darin took the vectorised Smashing mascot and animated it to create a more fun and memorable user experience in the context of a pizza delivery app. A really fun and creative talk that generated a lot of new ideas!

Darin Senneff. (Photo: Drew McLellan)

Notes & Key takeaways

• Animation on the web can be one of the most powerful tools in a creator’s toolbox. It can help users understand changes in context, visualise content or data in easier ways and reinforce actions.
• Keep the user informed of and during waiting stages.

See Darin’s session here and the rest of the talks here.

Workshop — Smart responsive UX Design patterns (with Vitaly Friedman)

This year I was also able to attend a full-day workshop after the two conference days. The workshop called “Smart responsive UX Design patterns” had a very hands-on approach where we in small groups faced multiple tricky design challenges. We spent the entire day drawing and designing responsive interfaces, starting from accordions, to date/time pickers, feature comparisons, car configurators all the way to insurance calculators and trip planners.

Workshop discussions around our ticket app.

After each design task we graded the design proposals from all other groups, and they graded ours. This was very rewarding (and scary) since you had a room full of designers from all over the world judging your ideas and UX approach. A great workshop overall, a lot of good discussions and ideas were created, as well as getting valuable feedback on your own design process.

Summary

I’m happy to say that Smashing Conference delivered quality once again. The friendly and welcoming atmosphere of the conference combined with a great venue and city was a hit. This together with a good mix of speakers and topics certainly provided a lot of new knowledge and insight. I’ll definitely be back!

Oh, I also had the pleasure of visiting Google at their headquarters in Mountain View before heading back home. That was as crazy as I imagined it to be.