Blog

Designing AddThis Smart Layers

blog_image1_jul2013

These days mobile and tablet rule the web, and we’re realigning our focus to create retina-ready sharing tools at AddThis. There are several trends happening, but we chose to focus on the following principles for Smart Layers: flat design, svgs, and the road to responsive, retina-ready tools.

blog_image2_jul2013

1. Bevel Be-Gone

The team settled on a flat visual direction for Smart Layers across the board. The decision-making was built on a common goal: simplicity. Flat design, while popular, also happens to best express our visual identity. This direction serves our sharing tools well by providing a clean user experience.

A general rule of thumb is to keep it simple––no one likes to hunt for their content. Minimalism is becoming a popular style in the design community, and I’m beginning to see more white space, app-style interfaces, and design focused on clean typography. And what’s not to love about scalable graphics, adaptive content, and fast loading?

blog_image3_jul2013

2. Scalable Vector Graphics

Since the UX team is moving away from bevels and gradients, one might ask, What does that mean for our sharing tools? Answer: vectorize & update 300+ service icons. I had an arsenal of designers sitting around me, and one thing’s for sure I couldn’t have done it without them or the beloved espresso machine.

The Basics:

  • Zooming preserves clarity
  • Scalable implementation
  • Support by popular browsers
  • Static file size regardless of proportions

SVG usage is on the rise, and the push for better browser support and performance will continue to increase.

blog_image4_jul2013

3. Instantly Responsive

Your life just got easier with one set of code. It’s that simple: copy and paste our tools onto your site, and you’ll see the them work cohesively between mobile and tablet. This release was a giant milestone for the team, and I look forward to what the team brews up next.

Enough about our design process. What’s your take on flat design and other principles? How have you found ways to improve performance through these techniques?

  • Selcuk

    SVG & flat design is way to go especially where we pinch & zoom ;)

    I had to do it myself for addthis Share button for Turkish and adjust via CSS
    http://cdn.chip.gen.tr/images/asn/nsc01chip.svg

    So when we will be able to see SVG across all share services?

  • AddThis smart layers is leading the way, great work.

  • Thank you! It looks great on your site, btw.

  • Sorry we missed this message before! We’re making the updates, so stay tuned. :)

  • How can we get the share buttons that appear right above the comments in this blog post? The flat design is great! But it doesn’t appear anywhere else on addthis.com where you can get this style. Or more specifically, why can’t we see the new .svg flat icons anywhere else on addthis beyond this blog post? It doesn’t even show with smart layers.

  • Glad you love the flat design! We love it too. Rolling it out very soon… Stay tuned!

  • yay! :) Also, note the Google+ logo/badge has since changed (it is no longer ‘cut off’ at the bottom left) and you can see the entire logo now [centered] (https://developers.google.com/+/web/badge/)

  • Have you considered building something similar to Sharrre where we can have a standard, custom, flat icon based on a G+1/FB Like? i.e.: http://sharrre.com/example1.html

    I think if you all did this with built-in Addthis capability, would be perfect. The one issue I have with the ‘share’ buttons is they aren’t as needed much anymore since +1 and Like are now also ‘share’ built in. But the only way for a consistent design is through your share buttons. If you can do it like Sharrre (like, +1, etc.) it would be perfect. Please!

  • Thanks for the feedback. We’ll take it to the team. :)

  • Today is my first day of using AddThis but I am having trouble getting the transparent layers at the bottom of the page to show up on my blog. How much of a delay should there be before I know if I have a technical issue with the code? I have disabled all pop up blockers.

  • It can take a couple days to generate information to show on the Recommended Content Layer, but it also depends on your site’s traffic. Is it still not showing?

  • Yes, it did finally show up on my blog but for whatever reason, I couldn’t get it placed properly on my page where I wanted it so I just deleted that part of the code. I was already running Disqus which basically does the same thing. I’m still loving the rest of the code though! Thanks for the reply.

  • Guest