Having researched prototyping more and tried to make the idea I had work and run smoothly, I still had no success. So, I had taken my concerns to Kyle. He told me that this is one of those cases that the idea can’t work and in the “real world”, you could take your idea to a UX Engineer and they will tell you that it’s not possible.
I think the next best way to lay out the same design is to have a main navigation. I am going to use this first screen as a main navigation page and each of the coloured dots can be used as the nav for each of the sections.
Along with the main navigation page, I want to have some sort of navigation on every other page so I drew up ideas of this using the coloured circles. I also think there is opportunity for a nice micro-animation if I am to have the circles pop out of the screen some way and show the. headings.
I also wanted to change the order I want the colours to correspond to the headings so that it was in order with the rainbow and looked better on the main navigation page.
Initially, I thought I would have a smoother animation if I was to use the “squashed” circles as my nav icon…
I added variants so that when the squashed circle icon was clicked, it could pop out and show the different sections. I also added subsections within each as I have more than one page under each section. For example, there are three pages under the section ”Launch” therefore there are three red circles in total (once selected.)
After adding this squashed circle nav icon to my prototype, I didn’t like how much of the side of the screen it was taking up. You also couldn’t read the text very well when it popped down (unless I was to dim the main screen in behind.) So I then had a look at pop-out side navigations whereby if I press my icon in the top corner, the nav will pop out from the side and overlay my main screen.
