Loading

Brainstorm

Custom front-end and scroll-driven interaction work for Brainstorm’s agency website

It began in 2018 as an outsourced assignment: building Brainstorm’s own agency website while its design was still being developed.

I built the website UI in HTML, CSS and vanilla JavaScript, with custom animation and hand-written scroll-event logic. The finished site led Brainstorm to invite me onto its team, where I went on to work on client stores - those are separate projects.

Role:
Front-end Developer
Relationship:
Outsourced project, May–Jul 2018Then employee, Jul–Dec 2018
Scope:
Agency website UICustom animationScroll-driven interactionsResponsive layouts
Stack:
HTMLCSSJavaScript

What the work involved

Brainstorm needed its own site built while the design was still taking shape.

  1. Context

    The agency’s own website, with the design still being developed and refined as the front end was built.

  2. An evolving design

    Working directly with the design as it changed, rather than waiting for a final version.

  3. Layouts and responsive UI

    Every layout implemented and made responsive, in step with the visual concept.

  4. Custom animation

    Animation built as part of the experience, not added on top of it.

  5. Scroll-triggered events

    Scroll-driven events and transitions, coded by hand in JavaScript rather than taken from generic animation templates.

  6. What changed

    • An animated, custom front-end site for the agency
    • An invitation to join Brainstorm as a developer

  7. What this shows

    • Independent front-end delivery
    • Custom JavaScript motion, implemented by hand
    • A client engagement that grew into a longer working relationship

Principles

How the site was built while its design was still moving.

  • Work with the design

    Build directly against an evolving design.

  • Motion with a job

    Animation as a working part of the experience.

  • Explicit scrolling

    Scroll interactions controlled in code, not by templates.

  • Responsive concept

    Responsive behaviour kept true to the visual idea.

In detail

Two parts of the work, and how each was approached.

1. Scroll-driven animation, by hand

The site’s animation and interactions are driven by scrolling.

Rather than relying on generic animation templates, I implemented the JavaScript event behaviour myself, so each page animates the way it was meant to.

2. A design still taking shape

The designs were still evolving while the front end was underway.

Building in step with them meant the finished site matched the final design, not an early draft of it.

Have something similar in mind?

Tell me what you’re building. I reply within 2 business days.

Start a project

A new website, a product interface, a design system, or improving what’s already live.

Start a project