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).
- 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.
- 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 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.
- 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.
- 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.
- 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.