A Smashing Good Time

From the Berlin Wall to Casa Batlló

I discovered the Smashing Conference when a colleague of mine suggested it during my struggles to find a suitable UX conference to attend this year. However, I discovered Smashing magazine loooong before I became a Product Designer. It was my go-to source for all things web & design. Now it’s just one of my many outlets for sourcing amazing inspiration.

As it was cold and dreary in Berlin during October, I was pretty stoked to be in warm Barcelona for a few days. Although, the workshop and schedule kept me pretty busy during those three days, I still managed to visit some tourist sites within the Gaudi city. The morning after I arrived to the hotel, which turned out to be less of a hotel and more of a hostel with paper-thin walls and loud Germans, I mapped out my route to a workshop for responsive design and user experience. Here are some snippets of what I learned…

Responsive UX with Marko Dugonjić, Founder of CreativeNights.com

Even though there were four great workshops to choose from, I decided, early on, to go with Marko Dugonjić’s take on what a responsive user experience really is. He had some really good examples and kept all of us, adult children, entertained with some card sorting UX projects that really tested one’s craftiness with markers and glue. Nonetheless, the exercises were very effective in teaching us to work together and fight through the awkwardness that comes with new acquaintances. Overall, the workshop had a few takeaways like the importance of information architecture and engaging users in the checkout flow. I could dissect it piece by piece or give a detailed account of the all-day event but, really, you’ll just have to ask him or take his workshop.

Joe Leech, UX consultant at MrJoe.uk

Had I not been obsessed with learning the industry secrets to e-commerce checkout flows, I would have attended Joe Leech’s workshop on Psychology for Design and UX. Thankfully, he was also speaking at the conference. His talk on How to Design with Science without Losing the Magic was less about user experience psychology but more about being a savvy designer. This hit the nail right on the head. As I enter further down my career path, it can sometimes feel like creativity gets lost in the mix of KPIs, OKRs, CRs, YoYs, NRs and SIs (I made that last one up… or did I?) but luckily Leech designed a lecture that acknowledged this phenomenon.

He started by quoting “Schlimmbesserung”, which is German for trying to make something better but actually making it worse in the process. As a professional working in Germany for over three years, I am very aware of the effect that has on a product and a design. All joking aside, every culture does this or has this saying in some way AND for all the same reasons. He spoke about the myth of the “above the fold” logic and made a very poignant statement that if the content is strategically spread throughout the page with implications of more, then users will explore more within that 3–20 second visitation time.

Within the hour long lecture, he also touched on the psychology of product users but more so on the psychology of inter-office politics. One thing I’m constantly reminding myself to do is to describe my designs in a less personal way. This is not something I often do but I feel that it’s inherently better to let go of your projects emotionally in order to be more effective. Leech went on to say that describing your work in terms of conversion and user stories has more of a substantial influence. This way, the decisions are more data driven — something that might seem very uncreative but actually gives more value to the overall design. Plus, it stops your team of developers from thinking that you are a subjective designer who just wants more pretty, little things with flamboyant animations. It’s better to throw aesthetic reasoning out the window and start thinking about the “Why?” of your work.

Chris Coyier, Web Designer & Co-founder of CodePen.io

Chris Coyier, who is not only a Designer but a Developer and, an overall, SVG enthusiast. He has a podcast called ShopTalk. His lecture on the Wonderful World of SVGs really showed the benefits of the SVG and how powerful they are compared to the legacy of PNG and JPG files. One thing I appreciated about his lecture were the slides showing basic code tags used to create certain SVG files, from simple to complex. Another thing I enjoyed was his conversational presentation. Even though his time slot was at 9:30am and followed the morning Mariachi band, he was more than ecstatic to share his knowledge and make it entertaining for the large decaffeinated audience that sat under the ceiling of the Palau de la Música Catalana in Barcelona. If there was one criticism I could give, it’s aimed toward the Smashing organizers for NOT supplying any food. For the money that workshop and conference cost, I would’ve easily sacrificed the sunglasses and other pieces of swag for a bit of bread and breakfast!

Anyhow, SVGs! I learned that gzipped files are compressed SVGs that maintain the code, size and quality of the file. They can be created through CSS, Sketch, Illustrator or Photoshop but I must say that I have a preference for Sketch over the others since it involves the least amount of tools to export. Using SVGs are more flexible in that they can be manipulated with JS and animated for UX transitions… or non-UX transitions. I would advise using UI animation responsibly to avoid ruining the user experience and distracting from the focus of the UI. For instance, you may want a calendar module to slide up as a bottom sheet after the user hits a date field. You wouldn’t want to use animated SVGs throughout your site if your aim is to use them strategically for a focused user experience. Some examples of where animations are appropriate are in the context of an online infographics, custom brand loading UI, or screen transitions. Optimizing SVGs are referred to as SVGOs. This helps to eliminate larger file sizes and removes the background similar to how a PNG uses transparency. However, for the aforementioned reasons, SVGs are better. They are crisper and cleaner than image files and with proper exporting, you’ll be less likely to have a blurred, pixelated icon when deployed.

Some frameworks for building an icon system that optimizes SVGs to fonts are Icomoon and Grunt. However, like most frameworks, it’s important to choose one that works best for the team environment. Grunt may be something worth looking into if your website has a large IE audience. It’s a building tool that allows SVG files to default as high-quality PNGs if the browser is not compatible. Now that you’ve read “SVGs” 12 times over throughout this summary, you’re completely indoctrinated and will convert to SVG formats, right?

So long, farewell…

I work as a Product Designer for an e-commerce website and app that sells in-destination travel activities. With Barcelona being one of the world’s top destinations, it would be a shame if I didn’t visit one of the attractions offered on GetYourGuide.com. But which one to choose from? Well, as someone who has studied art history and design since grade school, I had to go for the Casa Batlló. Art Nouveau is one of my favorite design movements. The organic architecture of the interior was like walking through a funhouse that displayed Gaudi’s sexual innuendos within each authentic fixture. From the windows to the walls, everything had a unique characteristic, color and story. The video device that the Skip the Line: Casa Batlló Ticket and Video Guide offered gave tourists a better history of the artist and also displayed how the house interior looked back in its original state. Today it's used for office space and #curious tourists. I explored each floor and photographed every abstract nook until I nearly dropped my camera phone down the winding wood stairwell. All together; I spent two hours in Gaudi’s funhouse, six hours in Gaudi’s palace of music and at least one hour in Murphy’s Irish pub because, in Barcelona restaurants were expensive, and I fell to the Irish charms of a 2 for 1 appetizer special.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.