Today we launched our biggest feature endeavor yet, a new layout called simply called “Grid”. Although it’s a simple and straightforward name, the process of creating it was anything but simple. The biggest challenge on Flavors has always been designing for dynamic data. This means trying to account for a million different possibilities and combinations. The design approach had to be systemized, or else it would be insanely complicated to maintain. Allow me to describe the system.
20+ Services with 1-4 sub-sections each = 80 designs
Each service on Flavors may have anywhere from 1 to 4 subsections. (Example, Facebook has Status and Photos). If I tried to design a unique layout for every one of these subsections I would have jumped off the design cliff a long time ago.
Break down “Services” into “Sizes”
I first started by separating the different ways each service can be presented. I can take these views and mix and match them in any number of layouts.
Break down “Sizes” into “Types”
After designing services in Flavors you start to see many similarities between them. Each size gets its own design for each type. Here’s how a few services share similar data designs.
- Blog (Tumblr, RSS)
- Gallery (Vimeo, Youtube, Flickr, Picasa)
- Status (Twitter, Facebook)
- List (Lastfm, Foursquare)
- Audio (Soundcloud, Tumblr audio)
This speeds up the process of us adding new services by 100x. We want to add a new Blog service? Sure, create 4 size views and use the “Blog” css style for each size. Baddabing!
My design partner Rob Morris came up with the brilliant idea of creating a hierarchical algorithm within grid. We realized that people may want to organize their services based on personal importance. If they move a feature to the #1 spot, its large, if they move it down to spots 2-7 it becomes medium, below that its rendered small.
The hardest part of this layout was trying to fit data into a 300 x 300 and 170 x 170 box (medium, small). Using custom scrollbars and dropdowns, we managed to fit every single piece of data into the medium sizes and bite-sized bits into the small sizes. Our awesome dev Sean Jackson came up with the idea of showing scrollbars and arrows on hover so that the page would look less cluttered when first loaded.
Since this is a LOT of data, Sean is going to be implementing lots of new speed features that will dramatically decrease load times. Right now we have deferred image loading and lazy loading js scripts, to make sure things are only loaded as needed. This is an ongoing process and will continue to get better over the coming weeks.
Now that we have all of these sizes to play with, there is UNLIMITED ways we can combine these to create new layouts. In our view, Flavors has gone from a “great little aggregator” to a full-fledged data visualization and personal identity magical machine.
Big thanks to Rob Morris, Sean Jackson, Jason Moiron, Ray Salinski, John Wehr, and Keith Bourgoin.