For some time the Design Team at Fueled have had a fortnightly Design Challenge, whereby a loose brief is given to each member of the team and a two-hour window in which to create something fitting. As the frontend team has grown at Fueled, it felt like the right time to start doing something similar… and so was born the Frontend Dev Challenge.

It follows the same format: a loose brief is given to the team on a Friday (with the briefs being decided by any of the team with a suitable idea), between Monday and Wednesday we build our solutions, and then on our weekly team call we each present our submission providing rationale and opening up a discussion – typically people talk about the bits they enjoyed, found tricky, and areas they’d have further elaborated on if they’d had the time.

The Brief

Dark/Light UI Toggle
Create a toggle to switch between dark and light, or day and night mode.

The Submissions

Timo Jedai

“Transforming a checkbox shape and keeping the check state is always interesting to build. So I went for coffee machine button playing with shadows and front perspective to give the feel that your coffee is on its way.”
See Timo’s bio

See the Pen
Switch by Timo (@timo_j)
on CodePen.

Harriet McMahon

“I wanted to create a simple slider transforming from a sun to a moon and back. I used an illustration of moon and edited it to create the sun state. With more time I think I would like to see the sun set and moon rise inside the toggle.”
See Harriet’s bio

See the Pen
Day N Night by Harriet McMahon (@harrietmcmahon)
on CodePen.

Joe Richardson

“Using a design challenge I did back in 2016 I decided to play around with some animation to create a soothing sunrise/sunset toggle.”
See Joe’s bio

See the Pen
Dev Challenge, Week 1 by Joe (@dope)
on CodePen.

Rob Sterlini

“I wanted to play around with a masking technique I’d used on the Dayo case study a while ago, and the sun to moon transition felt like a great way to do so.”
See Rob’s bio

See the Pen
UI Toggle | Fueled Dev Challenge by Rob Sterlini (@robsterlini)
on CodePen.

Next time…

This is a fortnightly endeavour, so stay tuned!

You can get updates each time a new challenge is added by watching or starring the GitHub repo.