Can you design icons for different screens?
Acting as a “graphic designer” for a new, 2D video game, learners create icons or characters through pixel art. By designing the same icon or character in two different sizes, learners ensure the “game” can be played on phones (simplified images for smaller screens) and/or desktop computers (larger images for bigger screens).
Safety Notes
Ensure you are familiar with Let's Talk Science's precautions with respect to safe delivery of outreach to youth.
What To Do
- Ask learners to select one of the two grids (10x10 or 15x15) and to design a simple icon, character, or object, using only black squares and white squares. Share Appendix A for examples, if learners need some ideas.
- Once complete, learners then scale their design onto the other grid. Learners can add or subtract details as needed, but they should try their best to keep it recognizable and of the same proportions.
- Once complete, facilitate a brief discussion:
a. What do you think is easier? Scaling up to make a design larger or down to make it smaller?
b. Which design did you like better?
Discovery
Computers and digital screens use tiny points of colour arranged in a grid, called pixels (or “picture elements”), to display images. Pixels are red, blue or green and these colours are combined in unique ways to form all other colours. On many modern screens, the pixels are too small to see, but sometimes on older screens, viewers can make out the little square pixels. The more pixels in an image, the more detailed the image can be. However, the more pixels there are, the more data there is to be stored and processed by the computer. The number of pixels in a screen or image can also be referred to as its “resolution.” The more pixels, the higher the resolution.
When working with images and on computers, it’s important to understand how resolution affects them. On the one hand, high resolution images with lots of pixels will look clear and crisp even on large screens, or when printed out. On the other hand, lower resolution images with fewer pixels will load faster on websites and take up less computer memory to store. Smaller screens will also not have as many pixels as large screens, so a high-resolution image will still get scaled down, and icons might need to get redesigned to still be understandable.
As technology advances, it is more important than ever that people contribute to the digital world. Building computational thinking skills helps learners prepare for the future.
- Task learners with trying to scale someone else’s design.
- Task learners with encoding their images into a new format, like the way a computer translates images into code. They can try a string of symbols (ex. having 0 = white square and 1 = black square) or a “tune” using two sounds, or any other format they can imagine!
- What would someone need to know to translate their newly designed code back into an image?
- If they encoded both of their designs, how do the designs compare in the amount of information they’d have to convey?
- How could the code be shortened without losing any information?
What's Happening?
Computers and digital screens use tiny points of colour arranged in a grid, called pixels (or “picture elements”), to display images. Pixels are red, blue or green and these colours are combined in unique ways to form all other colours. On many modern screens, the pixels are too small to see, but sometimes on older screens, viewers can make out the little square pixels. The more pixels in an image, the more detailed the image can be. However, the more pixels there are, the more data there is to be stored and processed by the computer. The number of pixels in a screen or image can also be referred to as its “resolution.” The more pixels, the higher the resolution.
Why Does It Matter?
When working with images and on computers, it’s important to understand how resolution affects them. On the one hand, high resolution images with lots of pixels will look clear and crisp even on large screens, or when printed out. On the other hand, lower resolution images with fewer pixels will load faster on websites and take up less computer memory to store. Smaller screens will also not have as many pixels as large screens, so a high-resolution image will still get scaled down, and icons might need to get redesigned to still be understandable.
As technology advances, it is more important than ever that people contribute to the digital world. Building computational thinking skills helps learners prepare for the future.
Investigate Further
- Task learners with trying to scale someone else’s design.
- Task learners with encoding their images into a new format, like the way a computer translates images into code. They can try a string of symbols (ex. having 0 = white square and 1 = black square) or a “tune” using two sounds, or any other format they can imagine!
- What would someone need to know to translate their newly designed code back into an image?
- If they encoded both of their designs, how do the designs compare in the amount of information they’d have to convey?
- How could the code be shortened without losing any information?