Wireframing
Below was some inital sketches showing the resemblance to Tinder. I wanted to keep the layout as similar as possible as it would be more recognisable and easier to understand by a lot of people. Each screen doesn’t show a lot of detail but the general idea I was going for each screen was as follows;
Screen 1 is the information about the element.
Screen 2 is the elements as they appear to swipe on,
Screen 3 is like the gold swipes but it could be a mini game
Screen 4 is the login page.
Screen 5 is the dashboard for the user.
Screen 6 is a different alternative view for Screen 1.
Some more wireframes, but these are more details and display more. I also played around with where each page would take you, so login to the topics page and then from there you can go anywhere. Although some revisions are made in the next wireframe set below this one.
Further revisions include a mini game example for the app. There are some other extra details included such as icons drawn below the wireframes.
These are all just first iterations, the overall way the app will work is still up in the air at the moment, put I have a rough idea on how it will all play out, once the mockups are made there will be a much better picture of how the app will function along with a lot of refined details in place. The next considerations are colours. I will have to do some further research and testing to see what colours work just like I did on the portfolio website.