Project Description
As we started our work of developing a dedicated marketing site for the Clinical Genome Analysis Platform (CGAP), we realized that our current portal login page had been doing double-duty: providing both some basic marketing content and the ability to login. We wanted a clearer distinction between the portal itself and the marketing content, and for the portal login to more closely match the style of the renovated marketing site. This is what we came up with.
How I contributed:
I worked with our UI/UX Designer and Lead Front End Engineer to iterate on a series of mockups for this page. We tweaked this thing endlessly; trying to figure out how to keep the visual themes of the marketing site's design, while not getting too complicated with the structure, since we only had a couple of weeks to implement this change. Then, once we had a mockup we were happy with, the Lead and I developed the page together with React.
What challenged me:
We agonized over how to position the polygon images so that they were in approximately the same position at each screen size. The Lead and I tried several different approaches, including absolute and relative positioning. In the end, I decided to just try tossing all of the polygons onto a transparent canvas and saving it as a SVG and PNG, and then applying that as a background image over the solid background layer. That actually ended up scaling beautifully with minimal tweaking, and was nearly as lightweight and quick to load as our other attempts.
What I learned:
Sometimes the best solution is the easiest one.