Home lighting Interface
Daily UI #015 — On/Off Switch
To better my visual design skills, I’m taking the Daily UI prompts a little farther, by discussing the design choices I’ve made.
I put together a Figma prototype of an On/Off Switch, inspired by where I use switches IRL. I designed a single interface allows users to turn the lights on and off in a home. Here’s some of the rationale behind my designs.
Main Switch
‘All lights’ gives you the option to turn them all on or off. This feature was the most complicated to design, as I had to design a state in which some of the lights where on, making the statement false. While also giving users the visual cue that they can still select the option. The element you see now is the 2nd version of it, after exploring sliders/switch states, I was inspired by a preview of one and modeled it similarly. (apologies for losing the inspiration link)
Cards
A few small things I added to make the turning on/off of the lights in a room more apparent to users was to use a shadow effect and having the photo become full color. I added the yellow color for the Switch, as I associated it with lighting.
When I know more about watch UI, I hope to come back and play with a watch interface version of this considering how many people take a lap around their home turning lights off or forget to turn the lights off when they leave, and may not have their phone reachable to turn them off via the mobile UI.
For now, play with the prototype of this interface on Figma! ▶
