Developing Stages: Part 4— Monochromatic Particle Colliders

Chronicles of an interaction design student turned UI engineering intern.

This isn’t what the final product will look like, by the way.

Week 4, Day 1: Particle Colliders and Theoretical Meetings

Taking a fresh look at the website ideas from Friday, I boiled it down to three concepts to flesh out. Breaks between sketches were rationalised away as research and spent testing how well I remember physics class while reading up on particle accelerators (mainly colliders) and molecular bonds. It is applicable to the project, I swear.

A casual intern check-in and first official meetup with all the available managers to determine project direction rounded out the day and set us on course for a week of pitching ideas and wireframing.


  • Don’t dismiss an idea simply because it seems a bit outside the brief. A wild concept I knew would never fly but roughly sketched for a minute unlocked another idea I had been struggling with and made it 100% better.
  • Never assume a meeting is not happening just because you have not been alerted. Show up for a few minutes just to be sure. In this case, it made the difference between missing the meeting and a nice catch up to showcase early ideas and determine what information we need.

Week 4, Day 2: Sassing it Up

The manager is back which means lots of catching up to do. But first: meetings! While he is busy with that, I take the opportunity to flex those (nonexistent) SCSS muscles and pull one of my old projects off GitHub to give it the Sass treatment. It’s wonderfully straight forward and the only hiccup was figuring out how to actually process the file. Thankfully all that command line git has toppled the terminal from its pedestal of fear and so it was a matter of trying out a few commands and fixing a typo.

Then it was on to some proper work as all those sketches began to take shape as mockups/higher fidelity wireframes in Sketch (all rough and unpretty, but still).


  • Don’t let the command line intimidate you. The computer is (probably) not going to catch on fire because you’re trying to cd into a repository.
  • Stop thinking “but that’s not how I normally do it”. Everyone has a different process and sometimes it’s about finding a happy medium (or experimenting with different approaches altogether), especially when you’re starting out in a new team after working on your own.

Week 4, Day 3: In Appreciation of Grey

More wireframing, playing with grids, and converting some super quick designs from yesterday to greyscale. Experiments with Vivus-ing the logo led to planning out how some of the logo animations I am considering incorporating into the site might actually work. Sufficiently daunted by the task I’d set myself, I took the opportunity to go in a completely different direction and start learning how to use InVision so I can take my wire frames to the next level.


  • If you don’t know what colour scheme will be used, greyscale/monochrome designs are so much easier and actually make you consider the colours more because you’re not just looking at the pretty hues (would this button be the same colour as the headings? But then what about this icon?).

Week 4, Day 4: Mockups and Mobiles

Straight from monochromatic mess to playing with colour palettes before a morning review of our designs so far with the rest of the local UI team. Then it’s back for refining ideas and, crucially, experimenting with mobile layouts. I know, I know, “mobile first”, but hear me out. I want the best possible experience across all platforms and, most importantly, the same story, but that doesn’t necessarily mean the same layout. If I start with the mobile view of a website, I find it boxes me in and I start adding features for the desktop version. Working the other way around, I’m thinking about how those features translate rather than adding/discarding so the experience remains intact. Naturally it varies by the project but personally I like designing for a responsive experience.


  • Outside of uni there are a lot more people asking you for things and far fewer helping you decide.
  • Keep iterating. Does working on the mobile view inspire some new idea? Try incorporating it back into the original. Your mockup in Sketch may look more polished than a sketch but at this early stage it is no more set in stone than one.

Week 4, Day 5: New or Better?

Working out the kinks in the concepts before the proper presentation next week. Of course now when I should be working on this a new idea pops up and it’s too good to ignore. I spend a while sketching it just to be sure before developing it further and starting a more fleshed out design to replace one of my earlier ideas which was working less and less the closer I examined it. With that, it’s time to head home for the weekend with a whole month now complete!


  • Stop and think. Is the idea better or just new?
  • Even if you don’t have the final copy, don’t give up on using actual text. This also means variety. You might not know the official headings but in the mean time, make something up (and not just the what/who/etc labels you may use in your head.. unless that’s appropriate for the project). Use a variety of lengths, words, etc. This helped me identify potential problem areas in the design early, even if it might not look quite as pretty.