Developing Stages: Part 8 — When SVGs Hit the Fan

Chronicles of an interaction design student turned UI engineering intern.

Week 8, Day 1: Git Good

Nothing like starting the day with a merge conflict. Trying to undo it naturally led to another conflict but my new friend git rebase helped resolve the situation. Once that was cleared up, colour theory took over. The colour scheme languished in limbo due to brand guidelines questions (that is, are we limited to the official scheme? The secondary palette? Are there limits?) and solving that proved to be bigger task than we anticipated (as with most colour palette decisions).

Observations:

  • Every time I think I’ve got a handle on Git, something goes wrong. But hey, at least I have yet to accidentally overwrite anything and no longer need to consult my cheatsheet.
  • For this project in particular, I struggled to draw the line between personal colour preferences, especially in regards to how I interpreted the theme, and what is in keeping with the brand. Finally making the distinction unlocked the problem and resulted in a colour scheme consistent with both brand and theme that we can all enjoy.

Week 8, Day 2: Colour, Components, and So Many Considerations

Adventures in colour continue as we test for accessibility and consistency before applying it to the design (and then testing again). Meanwhile development continues as the new icons and illustrations are fully integrated which led to some challenging component considerations.

Observations:

  • Don’t dismiss suggestions out of hand because you ‘already tried/thought of that’. If you’re stuck, sometimes what you need is a fresh attempt.
  • I need to practice the art of determining when a component becomes more of a hassle than a benefit and vice versa. So far I’ve been erring on the side of caution and scrapped some items I originally envisioned as components because they were too unique. However, there are other cases where I’m sure a component could be used but sometimes it’s hard to determine if it will make the design more efficient or not (especially on a rather small, self-contained project like ours).

Week 8, Day 3: Throwing the Sock In

So…. animation. The trouble is, nothing is moving at the moment. We planned on using GreenSock due to its many excellent qualities (cross browser compatibility and powerful timeline, to name a few) but integrating it in React is proving a challenge for a total Javascript and ReactJS newbie such as myself. I think I have a handle on the necessary syntax changes but the virtual DOM is still making things troublesome when it comes to targeting the necessary bits. Time for more research!

So instead of reading my prattle, check out this brilliant presentation by Sarah Drasner to see someone who actually knows what they’re doing when it comes to react and SVG animation.

Observations:

  • A lot of React articles assume you know Javascript and so put lessons in those terms. As a clueless designer who only started using CSS and HTML last year, this is not always helpful. The answer of course is to learn Javascript (on the to do list) but for the mean time, it makes things interesting. I have subscribed to 8 Day React for Designers, so we’ll see if it’s more helpful for someone with my level of experience.
  • React is great but the GSAP challenge made me realise that it can be a closed ecosystem when used out of the box (or by someone with limited experience, such as myself).
  • All this time I thought getElementById was only fetching an element based on its html ID. I never realised the true impact of the DOM nodes. No wonder I couldn’t figure out how to get GSAP working within React.

Week 8, Day 4: Testing Love

My new found love of SVGs reached the inevitable trial by fire. That is, my plan for the responsive view seemed fine in theory but fell apart when it came to the actual coding which meant reworking the SVGs to better integrate CSS rather than relying solely on the viewBox and inline styling.

Still love them, but talk about learning lessons the hard way. Still, I now have a better understanding of yet another aspect of SVGs and couldn’t be further from the me of 9 weeks ago who had never even made one.

Observations:

  • How you make a SVGs (actually make them in the vector editing program) is critical. It can be the saving grace or ruin your life when it comes to code.
  • ViewBox is an insanely flexible tool, so much so that it’s easy to get overwhelmed (or think you understand more than you do) when diving into the more complex uses.

Week 8, Day 5:

The weekly critique with the product design team is a refreshing break from development woes and then it’s back to put the nail in the proverbial coffin of buggy SVGs. Correctly sized? Check! Responsive? Check! Improved mobile layout? Check! (Future iterations still necessary? Also check).

That rounds out not only the week but two whole months(!) with some of the most pressing issues resolved and new challenges ahead.

Observations:

  • Don’t beat yourself up, live and learn. We went from slightly behind schedule thanks to GSAP + SVGs challenges to ahead of schedule due to clearing up the responsive versions at the same time as addressing the issues. Is there still work to be done? Of course, but you make up no time stressing over it.
  • Don’t give up, pivot and adapt.