Spiral UI menu design concept

This is a high-level design concept for a spiral menu structure that I developed right along side my touch-screen circular menu concept that I uploaded yesterday. Since it was just a design exploration in an attempt to find a layout that would work for our menu, this isn’t a very polished and refined PSD file. Just like yesterday’s concept, I was just throwing stuff on the screen playing around with shapes and forms. So beware – there’s a lot of work you’re going to have to do to this file if you want to use it for your own UI!

Once I had this laid out like I wanted, I quickly realized that the spiral structure that I created would be very limiting and wouldn’t allow for very much growth. That wouldn’t have been a problem if we had a fixed set of menu items that would never change, but our list was going to be dynamic and changing over time. So yeah – while interesting, this concept died quickly after our first design review.

I built the center spiral section in 3d, and then brought it into Photoshop to lay the text and other graphic element over it. If we would have decided to go with this design for our final UI, I would have probably built the entire thing in 3d (including the text) so that I could freely animate everything around that center swirl element. The idea was that pressing on one text link would spin the entire menu around to refocus on what was just pressed, and then there would be some sort of transition effect to go to the next screen. Ambitious, I know, and it was one of the primary reasons why we ditched it very early on!

This menu design represents the last of my circular menu uploads (for now). It was a phase that I went through quickly, and I haven’t had much of a desire to build any of these complex UI’s as of late. They are really hard to get right!

Download the PSD file

Leave a Reply