IXD301 – Digitising Wireframes for The Element Project

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.


Leave a Reply

Your email address will not be published. Required fields are marked *