In my first three years at Genius, I introduced lots of software, templates, and guides to improve the design, handoff, and implementation processes.
I introduced Sketch and Origami, and created a library of components, plugins, and data files to make rote tasks easier. This transformed mockups at Genius from rough illustrator files with lots of cropped screenshots and duplication, to high fidelity mockups and prototypes that take less time to make.
Using Sketch templates and a library of symbols decreased project startup time, gave us more fine-grained control over every element, improved each mockup’s consistency with the real product, and made it easy to hand off a project to another designer.
As the engineering and mobile teams grew, the design team was less and less likely to implement its designs. I introduced Zeplin and Origami to improve the way we communicated our design choices to other teams.
z_index_variablesand end its name with
$variables, otherwise they’ll render their contents as many times as they’re imported.
imports/_helper_mixins.scssdoesn’t indicate the role of its contents very clearly, and
imports/_song_page_padding_variables.scssis too specific and can’t be reused.
_leaderboard.scssshould style the
.leaderboardcomponent and all its modifiers and descendants.
shared/_leaderboard.scss— in these cases, the shared version should be the master reference, with the platform-specific overrides/additions being as small as possible.