With any project it is important for me to get a clear and straight understanding of the product that I am designing, for me, this means creating digital mock-ups or in this case digital wireframes to clarify each design choice of my interface is justifiable and reasonable.
Colour Codes
- Turquoise – Elemental Backdrop
- Pink – Iconography, images, gifs…
- Red – Buttons
- Black – Headings
- Grey – Paragraphs/text
Digital Wireframes
After my initial sketched wireframes (and a few more tweaks) I felt like I was instantly ready to start digitising them. After considering the brand, artistic style and overall visual grammar I was ready to create a semi-modular wireframe (see above). I decided to create the 5 main pages for my site, the only things that are missing are the actual stories and mini-games that are included within each character as I have not begun sketching the stories/mini-games. I feel like these wireframes that I have made are almost identical to my original vision and has given me an even more clearer objective than before as it shows my structural layout/interface more clearly.
What’s next?
The next part is sketching the stories for each of my elemental characters, this shouldn’t be difficult as I already have a general idea of what each story will be about.