Three styles of on and off toggle switches for touch screen mobile interfaces

Designing parts and pieces for touch screen mobile devices is a lot of fun. As a matter of fact, it’s pretty much all I’m doing these days – not really by choice, but mostly because it’s a hot sector right now that everyone its trying to get in on. Seems like most of my incoming work requests are from folks designing a mobile app.

Anyway, here are three different styles of a simple on and off toggle switch that I was recently working on. The goal was to design a list item that could be turned on or off (think of a settings menu). It’s difficult to think of new ways of doing such common every day buttons and switches, but I really like my horizontal light switch concept (at the bottom of the page).

It fit really well with my clients UI, but we both felt that it was a bit too over the top and not as simple as a simple slider element. So I tried two versions of sliders: a small one that fit directly within the list item, as well as a version that made the entire list item the slider. I also made one more concept, but I can’t show you that because that’s the one they picked…

Anyway, click on the image above to download the fully editable Photoshop PSD file.

Give a Comment