Thinking Outside the Box with Design and Code

Our team was inspired by talks at Smashing Conference 2017 that presented unique approaches to everyday design challenges.

Smashing Conference, hosted by Smashing Magazine, comprised of a series of workshops and presentations by industry experts. Topics ranged from UX/UI design patterns to technical discussions on front-end development techniques with CSS, JavaScript, and SVGs.

Here are our team’s top takeaways from the conference that will help to inform our interactive design approach and process at Maga Design.

Design Systems FTW!

Several speakers focused on pattern libraries and design systems: storing and sharing modular, repeatable components to build digital interfaces. What makes this mission critical? Teams are able to save time and stakeholders to save money.

Design systems create a shared vocabulary across teams and enable faster feature development via reusability. However, they can be costly and difficult to maintain, so it’s worth examining specifics to your organization—including team size, brand maturity, and goals—before devoting resources.

At Maga Design, digital design systems are a key consideration as we scale our interactive practice.

Image uploaded from iOS (2)

 

Enable Intuitive Data Storytelling

There are many frameworks and tools available to visualize big data (e.g., D3), but we shouldn’t let these technologies constrain our approach to data viz. Combining and transforming chart types can lead to unique solutions tailored to specific data sets, use cases, and audiences.

Despite the explosion of big data, quantitative methods like surveys and site analytics can be dangerous if we rely too heavily on them—human error, biases, and interpretation can skew the real story. We can’t overlook the importance of understanding human behavior to inform design decisions.

Performance = Perception

In the last 15 years, the average size of a webpage has exploded while our expectations for page load time continues to shrink. So how do we manage effective performance against technical constraints?

Optimize the user’s perception of load time. Most users won’t notice changes that affect page load time by less than 20%. This threshold can be achieved by increasing the time the user spends in the active phase. For example, YouTube doesn’t wait for a full video to load to start playback, which decreases the amount of time spent passively waiting.

Image uploaded from iOS

Accessibility

Designing and developing for accessibility were common themes throughout both days. Despite how far we’ve come with web development, designing for visually impaired users and screen readers is still overlooked.

The (<a href=”#”) and buttons (<button>) elements links are often misused and misunderstood. Many designers use the two interchangeably, using CSS to achieve a specific style, which is just one example of unnecessarily compromising on accessibility and hindering users with screen readers.

 

We <3 San Francisco

Loaded with insights from the conference, we put our “Ever Curious” rubber to the road and took advantage of every spare moment to explore the Bay. Juraj, our SF-based designer, led us on a tour to see the redwood trees at Muir Woods National Monument early one morning. We made pit stops at Equator Coffee in Mill Valley and the breathtaking Hawk Hill, a lesser known but unbelievable vantage point of the city.

After the conference, we had a team jam session at the Maga Design studio in the Presidio, a beautiful location that put DC commutes to shame.

To be considered among a vibrant community of designers and developers in Silicon Valley was a great honor. We left with a lot of expert insights from SmashingConf and had a smashing time in San Francisco.


Learn more about the presenters: