ToneStone UI

Introductory video showcasing Tonestones V1 desktop build.

Clip of preliminary concepts for menu popup transitions (v1) made in Aftereffects.

Concept clip demonstrating an example of how a new recorder tool or tools tab might be implemented into V1s UI.

Identifying accent color exploration for a V1 UI refactor.

Identifying accent color exploration for a V1 UI refactor.

Clip demonstrating the V1 first UI refactor. Worked on both updated design and assets for this refactor.

(1) Mockup for a potential dashboard for Tonestone V1.

(1) Mockup for a potential dashboard for Tonestone V1.

(2) Mockup for a potential dashboard for Tonestone V1.

(2) Mockup for a potential dashboard for Tonestone V1.

(1) Second set of mockups for revised v1 dashboard, including new accent highlight colors. Two panels, one with the 'session' list and one to highlight the selected session.

(1) Second set of mockups for revised v1 dashboard, including new accent highlight colors. Two panels, one with the 'session' list and one to highlight the selected session.

(1) Second set of mockups for revised v1 dashboard, including new accent highlight colors. Two panels, one with the 'session' list and one to highlight the selected session.

(1) Second set of mockups for revised v1 dashboard, including new accent highlight colors. Two panels, one with the 'session' list and one to highlight the selected session.

(2) Second set of mockups for revised v1 dashboard, including new accent highlight colors. One panel, immediately launches selected session instead of highlighting it on another panel.

(2) Second set of mockups for revised v1 dashboard, including new accent highlight colors. One panel, immediately launches selected session instead of highlighting it on another panel.

Mockup for end screen/session completion screen, including callouts to implement theoretical social sharing feature and how that would be implemented into UI.

Mockup for end screen/session completion screen, including callouts to implement theoretical social sharing feature and how that would be implemented into UI.

(1) Mockup of V2's start screen.

(1) Mockup of V2's start screen.

(2) Mockup of V2's start screen. this version includes the suggestion for interactive music, or social feeds in the background of the main menu.

(2) Mockup of V2's start screen. this version includes the suggestion for interactive music, or social feeds in the background of the main menu.

(3) Mockup of V2's start screen. This version includes the suggestion of an interactive mini board players would use to compose small demos of music before getting into the app.

(3) Mockup of V2's start screen. This version includes the suggestion of an interactive mini board players would use to compose small demos of music before getting into the app.

(1) Mockup of V2's song/deck selection screen. V2 refactor involved a lot of exploration with color gradients and glass style UI shapes.

(1) Mockup of V2's song/deck selection screen. V2 refactor involved a lot of exploration with color gradients and glass style UI shapes.

(2) Mockup of V2's song/deck selection screen. V2 refactor involved a lot of exploration with color gradients and glass style UI shapes.

(2) Mockup of V2's song/deck selection screen. V2 refactor involved a lot of exploration with color gradients and glass style UI shapes.

(3) Mockup of V2's song/deck selection screen. V2 refactor involved a lot of exploration with color gradients and glass style UI shapes.

(3) Mockup of V2's song/deck selection screen. V2 refactor involved a lot of exploration with color gradients and glass style UI shapes.

(1) Refined mockup designs for new Glass style UI for Tonestone's V2 art direction. Settings menu.

(1) Refined mockup designs for new Glass style UI for Tonestone's V2 art direction. Settings menu.

(2) Refined mockup designs for new Glass style UI for Tonestone's V2 art direction. Popup panel options.

(2) Refined mockup designs for new Glass style UI for Tonestone's V2 art direction. Popup panel options.

(3) Refined mockup designs for new Glass style UI for Tonestone's V2 art direction. Song/Session select screen.

(3) Refined mockup designs for new Glass style UI for Tonestone's V2 art direction. Song/Session select screen.

(4) Refined mockup designs for new Glass style UI for Tonestone's V2 art direction. Dashboard/Home screen.

(4) Refined mockup designs for new Glass style UI for Tonestone's V2 art direction. Dashboard/Home screen.

A selection of examples from my time working as as a UI Designer and Game Artist at Tonestone.