{"id":13823,"date":"2017-12-12T09:33:05","date_gmt":"2017-12-12T09:33:05","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=13823"},"modified":"2020-11-05T11:00:46","modified_gmt":"2020-11-05T11:00:46","slug":"lightbulb-moment-modular-design","status":"publish","type":"post","link":"https:\/\/www.shopjessicabuckley.com\/blog\/lightbulb-moment-modular-design\/","title":{"rendered":"My Lightbulb Moment with Modular\u00a0Design"},"content":{"rendered":"

How my Sketch file started: a separate artboard for every type of Yammer thread. There were\u00a0lots.<\/p>\n

Reducing our design handoff from 30 mockups to just\u00a0one<\/h2>\n
\"\"<\/a>

Yammer\u2019s vertical rhythm grid, which evenly spaces all UI elements and text baselines.<\/p><\/div>\n

I\u2019ve recently begun working on a design revamp of Yammer\u2019s Android app, beginning with conforming all Yammer conversations to a 4px vertical grid for better readability. Because a single misaligned pixel could throw off the grid, we began with the painstaking process of taking app screenshots and dragging each one on top of my original mockup for comparison. After many sessions designing and coding alongside Victor Alcazar<\/a> and Ozzy Thebe, two very patient Yammer Android engineers, each individual chunk of a Yammer thread was looking perfect.<\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

However, when we combined the chunks into an actual thread, the grid was thrown off. Once stacked on top of each other, the perfect chunks were not so perfect.<\/p>\n

\"\"<\/a><\/p>\n

<\/p>\n

We soon figured out the problem: certain combinations required some extra margin in order to fit on the grid. Because a Yammer thread can have hundreds of permutations \u2014 some have documents or images attached, some have multiple types of metadata \u2014 we would need to define hundreds of special margin sizes. Even if it were possible to catalogue and special case each of those margins, it would seriously slow down the app.<\/p>\n

I took the problem to our lead designer Manuel Mu\u00f1oz-Solera<\/a> to mull over. He had plenty of experience designing modular UI before \u2014it\u2019s a common and well-documented approach for CSS frameworks\u00a0<\/a>\u2014 but due to several years of fast product cycles and the resultant code and design debt baked into our mobile and web applications, we\u2019d never had the chance to implement a modular approach at Yammer.<\/p>\n

After dragging all our chunks around in a giant file and reworking a few of them, we came up with a simpler, more modular approach to our thread design, one that solved our margin problem.<\/p>\n

Here\u2019s what we\u00a0did.<\/h2>\n
    \n
  1. We grouped each chunk of a Yammer thread the same way our developers were grouping them in the code. To help out our eyes, we assigned each one its own color. At this point we also started referring to the chunks as modules, because we fancy.<\/li>\n
  2. We stopped defining margins between<\/em> modules. Instead, all the spacing in the app would come from padding within<\/em> the modules \u2014 specifically, top padding. Bottom padding would have worked, too; just not both. The key is to choose one of the two and stick with it. This kept things simpler when we did need to define top and bottom margins in some special cases.<\/li>\n
  3. We threw all of the individual modules into one super long artboard. It looks pretty weird, because this is not a conversation that would ever actually exist in Yammer. It\u2019s okay, though. All we need it for is checking alignment on our grid and making sure every type of element is accounted for.<\/li>\n
  4. When everything was laid out vertically, we still had three specific combinations that were throwing things off. This was okay with us \u2014 three was much easier to deal with than hundreds. Our engineers went to work defining special \u201cif\u2026\u201d statements for each of them.<\/li>\n<\/ol>\n

    \"\"<\/a><\/p>\n

    <\/p>\n

    \"\"<\/a><\/p>\n

    <\/p>\n

    In the end, instead of having 30 different artboards for different types of Yammer conversations, we have just one master artboard. We can drag the modules around and re-stack them however we please, and when we turn our vertical grid lines on to check it, everything lines up. It\u2019s perfect, it\u2019s only one artboard, and it matches the code perfectly. Needless to say, our Android engineers were very pleased.<\/p>\n

    It\u2019s super easy to drag modules into an actual mockup and know that everything will stay\u00a0on-grid:<\/h2>\n

    \"\"<\/a><\/p>\n

    <\/p>\n

    It\u2019s been a long time since I had any epiphanies around the fairly boring process by which I hand over my designs, but this switched on the proverbial lightbulb over my head. Maybe you already approach your mobile designs in a modular way, in which case I salute you. We\u2019re a design team with many collective years of experience among us, so the fact that we had never structured our work this way made me want to share my lightbulb moment with you.<\/p>\n

    We\u2019re now working on \u201csymbolizing\u201d these modules using some of the new symbol functionality in Sketch to make an extensive library of pixel-perfect, scalable UI elements<\/a>. Stay tuned for a demo, it\u2019s pretty nifty.<\/p>\n

    This article was originally published on Cameron's Medium page<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

    How my Sketch file started: a separate artboard for every type of Yammer thread. There were\u00a0lots. Reducing our design handoff from 30 mockups to just\u00a0one I\u2019ve recently begun working on a design revamp of Yammer\u2019s Android app, beginning with conforming all Yammer conversations to a 4px vertical grid for better readability. Because a single misaligned pixel could throw off the… Read More ￫<\/a><\/p>\n","protected":false},"author":194,"featured_media":13824,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-13823","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"\n\n\n\n\n\n\n\n\n\n\n\n\n\t\n\t\n\n\n\n\n\t\n