I started with an icon image. I liked the orange border and could see that being used for the frame in the PsiLoops app. I wanted to create a perceptually simpler interface than what is currently in place, utilizing modern design practices to accomplish this goal.
I used Adobe Photoshop to modify the icon image. It took a series of steps to get from a basic square to the more complicated end result.
This was a fun, quick project with an outcome that is both aesthetic and functional, with a thinner frame I created more space for additional features at the bottom of the page.
There are two prominent challenges to designing the main page of PsiLoops:
1. The user has a lot of options all on the main page, bpm slider, 3 drum set buttons, 12 melody loop buttons, 8 one shot buttons, volume sliders, effects, etc.
2. The user must not be overwhelmed by these options.
The previous version was asymmetrical which can lead to feelings of uneasiness when viewing; for example, the drum set section did not extend the full width of the screen even though the melody set and one shot sections did, and the effects section was it's own little box. I chose to make all sections extend the full width of the page. This also allowed for a "fibonacci" layout, with the largest section at the top, and each section below it is smaller. This provides a more seamless viewing experience for the user, they are able to break the information down into visible chunks that are easier to process.
Additionally, the previous versions frame appeared to not fit properly, with certain areas of the frame going out of screen. The frame was visually thicker and had some design elements that, although cool, were taking up vital real estate and were distracting, particularly because of their detail and some elements could be mistaken as buttons.
I produced a size-adjusted version for iPhone SE, iPhone 14/15 Max Pro, iPad Mini, and the iPad 12''
