Pixel Art | Web Design Basics


Maths and art share many commonalities - they are everywhere we see, and the best way to learn them in my view is by getting hands-on and building a practice. Interestingly, many learners today find it a mystery why the math book is gridded the way it is and using digital technologies for learning does not necessarily deepen their understanding of the digital world. 

This mini-project is great for getting some basic concept of computer science underway and luring them into doing coding that is different to what they are used to, i.e. coding for games.

In a nutshell:
  • Most learners are familiar with the look of pixel art but designing it requires some serious counting.. 16x16 grids can be downloaded here;
  • Making links to favicon is a great way to introduce web design and web interface, expanding on learners' idea of what graphic design/coding encompasses;
  • This Pixel Art Code Club Project is a godsent with easy to use web-based interface on Trinket great for iPad, too!


Some pre-learning to introduce 8-bit. To young learners the binary environment does not seem natural at all... 🤯 

Each colour was based on a set of integers, 8 being the highest number of integers that could be stored at the time by that machine. So the colour profile that was used held 3 bits (or bytes of data) of red, 3 bits of green, and 2 bits of blue, creating 256 colours that were displayable. - https://design.tutsplus.com/articles/what-is-pixel-art--cms-21759



Use the above material to link geometry to designing a favicon: starting with an 8x8 then use a range of transformation to build a 16x16.

The great thing about this journey is the dual practice on paper and online. Love activating learning by involving a range of senses. 




Special thanks to OJC learners Toni & Sean for sharing their awesome work.

Love it. Do it!

Sylvie Huang

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.