Developing Stages: Part 3 — Messing with Magic

Chronicles of an interaction design student turned UI engineering intern.

Week 3, Day 1: IT’S ALIVE!!

I have conquered SVGs! Actually, that’s a lie. But I read a heap ton of articles by people who have conquered SVGs and the rough mockup of the logo now drops and bounces and bubbles and moves with custom eases, all from a single image.

Observations:

  • SVGs are extremely useful but tricky to wrap your head around because they require a different approach while designing and while coding and you need to bear both in mind no matter which side you are working on.
  • Altogether, designing and animating an SVG underscores the importance of designers who are aware of how coding works and developers who are aware of the design process.

Week 3, Day 2: The Little Things

The morning is spent compiling a mood board (and messing around with the surprisingly powerful Giphycapture to experiment with micro-interaction GIFs). Then it’s back to the demo logo animation as I wrestle to control the sorcery that is ScrollMagic.

After plenty of googling, reading, and mucking about with no success, I turn to the UI Engineer with the unenviable task of showing me the ropes. He fixes it in less than 5 minutes.

Observations:

  • You only learn to spot and correct stupid mistakes by making them. Dust yourself off and file it away for later reference.

Week 3, Day 3: Error 404: Day Not Found

Public holiday so no work. I did actually plan to fiddle around with more animation and refine the logo but instead I went to the beach and got ice cream. What can I say, I’m only human.

Observations:

  • Nothing wrong with taking it easy once in a while.

Week 3, Day 4: Not So Scary After All

Between pulling our demo animations into a single presentable webpage and wrangling outdated timesheets with much assistance from the manager, there was plenty to keep us busy before our afternoon meet and greet/video conference with the manager of managers. Sounds scary but she’s actually nice and asked the kind of insightful questions that drive straight to the root of a situation.

Observations:

  • Nothing makes you burn with righteous anger against popups like primordial timesheet interfaces that forcee you to double confirm seemingly every input.
  • ScrollMagic + Greensock = Smooth demo animations that look more complex than they actually are to make.

Week 3, Day 5: When the Cat’s Away, the Interns Will Play

What do two intern/placement students do when left alone for the day in UI corner of the office? Turn it into a design studio, of course! No fancy code, it was back to paper to generate ideas and start sketching some rough wireframes to lay the groundwork for next week and where the project may from here.

A video chat with one of the contractors in America answered more SVG questions and was a refreshing way to break up the afternoon. Then it was time to post the latest versions of the logo to GitHub for feedback from the wider group and call it a week. Hard to believe the internship is already 1/4 of the way complete!

Observations:

  • Sometimes you need to stop thinking about all the things you can’t code and focus on getting ideas out there. They can always be stripped down later (which helps weed out the gimmicky ones) but, more often than not, they are more possible than you realise.