Calvin Iwata
Front-endIndependent

Freelance

Freelance

Sites designed and hand-built after hours, plus a motion campaign coded in CSS rather than exported.

A laptop on a desk showing a completed client website with a photographic hero

The problem

This is the work I do outside a job description, which means it’s the clearest evidence of what I choose to practise when nobody assigns it. Two kinds: end-to-end client sites, and design challenges I took as a way to learn something specific.

What I did

On the client sites I ran the whole thing — research through deployment. Card sorting to find the categories users actually had in their heads, personas to keep the team arguing about the same person, wireframes, visual design, then the build.

A card sorting exercise with labelled cards grouped into candidate navigation categories
Card sorting. The fastest way to find out your information architecture is a guess.
A persona document with a user profile, goals, frustrations, and behaviours
Personas exist so a disagreement about a feature becomes a disagreement about a person.
Desktop and tablet wireframes of a site layout shown side by side
Wireframes across breakpoints, before any visual design.
Finished responsive website pages for a restaurant client, shown at an angle
Shipped. Designed and hand-built, not handed to a developer.

The Wish drone campaign was a design challenge: demonstrate campaign execution for a prospective drone delivery capability, aimed at animation that would appeal to their user base. I built vector assets, then produced three deliverables from them — a looping GIF for email and digital placements, a ten-second social animation carrying the campaign’s three selling points, and, because I wanted to prove the point rather than assert it, the same illustration rebuilt in HTML and CSS with a hover state and continuously rotating propeller blades.

That last one is the one I’d point at. Exporting an animation shows you can animate. Rebuilding it in CSS, with transform-box: fill-box on the rotor groups and keyframes doing the work, shows you understand what the browser will actually do with it — and it ships at a few kilobytes instead of a few megabytes.

Outcome

Client sites shipped end to end, and a motion brief answered in code. The CSS and SVG version of the drone still runs, and it’s the artifact I’d hand a student who asked how to animate on the web without reaching for a library.

More work

All work