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:

Our 5 Favorite New York Times Visualizations

Given the many problems facing traditional publishing, old-fashioned newspapers like the New York Times have had to adapt to keep up. One way the NYT has done this is to experiment with stories online that change depending on viewer input, allowing readers to, in part, shape the stories they’re reading.

This has taken many forms, from simple infographics and data maps to complex human interest stories with videos and moving images that appear upon scrolling. Here are five of our favorites. Feel free to share yours in the comments!

1. Mapping Migration in the United States (image)

1This “Voronoi treemap” shows how many people living in a particular state were born there, following on from this interactive article showing population changes by state. And it does it in style, with eye-catching, colorful shapes depicting each percentage. As the article points out, one drawback is that the shapes don’t always match the percentages exactly, but overall, this kind of chart is a solid choice. It also lends itself well to certain kinds of financial data.

2. How the Recession Reshaped the Economy, in 255 Charts (see image here)

2255 is a big number, especially when it comes to charts. Nobody wants to sit through a presentation with 255 slides or graphs. But somehow, this visualization makes it work. Combining and overlaying graphs is not a new concept, but by overlapping so many lines in one image, overall patterns and trends emerge that might not have been visible on their own.

Combining so many graphs might be ill-advised in most situations, but careful overlapping keeps each line separate and visible. Additionally, scrolling causes overlays to appear that explain various trends in housing, healthcare, and other fields, highlighting related graphs. This puts each industry into context in a creative, visual, visceral way and drives the enormity of the economy home in a way that separate graphs might not.

3. Up Close on Baseball’s Borders (image)

3This fun visualization puts Facebook data to good use to settle a few perennial questions: where, exactly, does the line between Yankees fans and Red Sox fans lie? And how big are the disputed territories? By using an algorithm to smooth out data for how many people in a particular zip code “liked” a particular team on social media, this nifty little image was born, no doubt settling a few bets along the way.

4. In Georgia, Politics Moves Past Just Black and White (full article here)

4How do you map the changing face of a city? In this story, a simple population map comparing the demographics of Atlanta, Georgia in 1990 to its makeup in 2010 drives the image home. With simple interactivity highlighting particular counties, this visualization provides clear data, grounding a complex piece highlighting the new diversity in the Old South.

5. Norway, the Slow Way (read story)

5For something completely different, this human-interest travel piece on one person’s quest for the Midnight Sun uses video of the Norwegian coastline, excerpts from Norwegian TV programs, hand-drawn graphs illustrating relatively minor points, and charming animated maps to bring its story to life. Are they completely necessary? No. But they are delightful moments that change the pace of a long story, maintaining interest and inviting reflection.

In a story that is so much about pace and the visual details of Norway’s culture, these moving and interactive images contain more than a thousand words. They set the stage as well as dress it and guide us along the narrative in a way that words alone might not have accomplished. Scrolling almost seems too clunky a way to navigate the wonders of sea, sun, and land as it is presented here.

Data is often used to bolster arguments, clarify complex issues, or settle disagreements. Visualizations can be beautiful enough to be art. But used properly, data – in the form of graphs, maps, or images – can also tell a story, the bottom line that unites each of these articles.

How can you use interactive visualizations to tell your story in a more engaging way?

Visualizing a Year’s Worth of Food

Our Visualization of the Week comes from GOOD magazine, profiling New York City-based designer Lauren Manning‘s data visualization.  She kept track of all the food she consumed for a year, and then used 40 graphs and charts to visualize the data she collected as part of her thesis. Continue reading Visualizing a Year’s Worth of Food

The ABCs of Maga: A is for “All-Nighter”

If we have done anything in the past (almost) 5 years at Maga, it has been to establish a unique kind of personality and culture.  Founded in the Affinity Lab space in Adams Morgan, Maga’s culture is based on the notion that a creative firm in DC must operate in all kinds of environments (many not that creative), partnerships, customers etc.  We worked hard at the lab, and then later in our own space, to build a company that is dedicated, team-oriented, fun loving…an alternative to the larger, more corporate environments that are strewn across the beltway in the Metro DC region.  We wanted to cultivate a local, walk-to-work mentality, where people would have a bit of the ‘third place’ to find their passion. Continue reading The ABCs of Maga: A is for “All-Nighter”