AddThis Blog

Designing AddThis Smart Layers

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.

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?

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:

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

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?