Today I am continuing with the Daily UI Challenge #015. This brief was to design an ON\OFF switch. I decided to design the a switch for a Lights out/ Lights on app perhaps for a smart home setup.
Today's hint:
Consider what's being turned on/off and how it should be done.
Tools:
AdobeXD, Adobe Photoshop.
ON/OFF Switch Checklist:
1 - Toggle switches take effect immediately and the user does not need to click Save or Submit to apply the new state.
2 - The toggle labels describe what the control will do when the switch is on.
3 - Use of a clear color scheme vs an Inverted scheme. The current state is obvious to the user. It can be confusing when only one factor changes between the ON and OFF states.
4 - More than 1 visual cue used for the “ON” state.
~~ Saturated and vibrant shade of Sunrise Orange vs. neutral
~~ Bold text label vs. light or regular
~~ Slightly darker orange border vs. light or neutral
Colors:
Navy for OFF and Sunrise yellows and oranges for ON.
Navy for OFF and Sunrise yellows and oranges for ON.
Fonts:
Montserrat
Montserrat