Now that I have a clear understanding of what direction I want my elemental app to go in I can now focus on sketching the first wireframes for it. Below you can see sketches for my brand and wireframes.
The Brand
For my logo, I tried to think of things that are all symbolic with the periodic table such as the elements and atomic systems. I did however try to go out of the box and sketch things such as potion glasses but ultimately this is too far of a stretch for it to be safely considered relateable to the periodic table.
In the sketch shown above, I decided to go both unconventional and conventional in developing and creating new visible logos I can use. I then developed a few extra descendants of the original logo allowing for me to have more of a variety when choosing my final logo. I feel like logo A.2 would be a good design for an app icon but not for an actual logo. My favorites were both B.2 and C.1 as I thought B.2 was very simplistic in nature but ultimately I settled for C.1 as the logo captivated me and reflects my app more coherently and consistently. One of the first things a user will see is my logo so I want to convey the rich personality (artistically) that my app will have. Similarly, Dumb Ways to Die done this by slapping one of their character’s whole faces onto the icon.
Although I feel like I picked the best illustration for my logo I could think of I still wasn’t 100 percent satisfied with it so I decided to do a few more renditions of it. I decided to combine B.2 with A.1 and got similar results. I decided to create a few more sketches and made them as minimalistic as possible (two at the bottom). I was instantly happy with the outcome through its simple and friendly nature. Additionally, I can animate the atoms that surrounded the character for a more interactive experience. This was the part when I needed to remind myself that I am designing for kids so the best thing is to make every part of the design as understandable and simple as possible. Sometimes the best solution is the easiest.
Wireframes
After drawing up a few and if I’m being honest reasonably horrible wireframes I decided to sketch more in-depth and cleaner ones.
This wireframe sketch outlines the main route that the app takes. This is crucial for me as I would not have seen the structural flow of my website without this wireframe.
This shows the character creator page (left) and achievements (right). After a few variations of the character creator page, I eventually landed on something I think looks good.
Doing these wireframes I feel confident in my design and am ready to move to XD.
User Flows
I created a user flow to show how they will navigate through my app. Creating user flows is very beneficial for this exact reason. It helps me better visualize the process which my users will go through in a quick and easy-to-understand way.
How has this benefited me?
Creating the brand, wireframes and user flows have ultimately helped me grasp a tighter vision on my app both structurally and visually. These past few processes have been extremely helpful to me and vital for any UX designer.
What now?
I will now create a style guide to create a set of standards for my work.