<commit_before>---
layout: post
title: "Digital Design Class: Students Create Animated Sticker Packs for Facebook Messenger"
image: /media/FBsticker.jpg
dark: true
video: false


---

<em>
<ul>
  <li> Designers: 8th graders </li>
  <li> Where: International School of Amsterdam </li>
  <li> Design Challenge: Create an Animated Digital Sticker Pack </li>

I'm so very proud of my students and all their awesome creations for this project. I'm happy to share my design tech unit on animated sticker packs, as well as student examples below.
</em>


## Getting started: How is communication changing in the digital age?

For this design tech unit plan, I prompted students to think about how communications have changed over the ages. We started our process of inquiry by discussing the first written communications in Mesopotamia via cuneiform tablets, to hieroglyphics, to Morse Code, and finally to mobile and online communications. I used the following tweet to get the kids thinking about the connection between more pictoral forms of written language and emoji and/or sticker packs used in modern day communications.

{% include image.html url="/media/tweet.png" width="70%" description="The tweet that inspired me to create this unit plan" %}

## Implementing the IB Design Cycle in this project

The IB Design Tech program utilizes the IB Design Cycle to guide all project-based learning. As you can see below, we start out researching the topic and then move on to prototyping. Next, we create the actual product and finally  evaluate the test the product for effectiveness based on the design specification.


{% include image.html url="/media/designcycle.gif" width="70%" description="My animated hack of the IB MYP Design Cycle graphics by Jac Gubbels" %}

## Researching the topic


In order to research the topic of emoticons in modern day communications, I enlisted the help of our Head Librarian <a href="https://twitter.com/michellerandis"><NAME></a> who curated an amazing <a href="http://isa.nl.libguides.com/content.php?pid=652934&sid=5407276">Lib Guide </a> for my students with tons of resources on emoji research.

One particularly interesting resource from the Lib Guide is the <a href="http://www.emojitracker.com"> Real Time Emoji Tracker </a> from which many students pulled data to create charts in Google Spreadsheets that highlighted the top used emojis at a given time.

{% include image.html url="/media/seohyungraph.png" width="100%" description="Inquiring & Analyzing with the IB MYP Design Cycle, graph by Seo Hyun" %}


## Prototyping

In order to rapidly generate ideas for the project, students first interviewed their target users. Then, based on the information they gathered about their target users, students engaged in a '100 Ideas' brainstorming activity based on the methodology of <a href="http://dschool.stanford.edu/wp-content/themes/dschool/method-cards/brainstorm-rules.pdf">Stanford's dSchool </a>.

In the following image you can see the evolution of Kanna's sketches into digital images using the <a href="https://itunes.apple.com/us/app/adobe-illustrator-draw/id911156590?mt=8"> Adobe Draw iPad app </a>.

{% include image.html url="/media/developingideas.png" width="100%" description="Developing Ideas with the IB Design Cycle, designs by Kanna" %}

##Learning to use new software

In order to learn how to make animated GIFs using software like Photoshop and GIMP, students delved into online tutorials and videos to teach themselves these new skills. My students were self-directed learners in this unit and truly taught themselves this new animation skill with online articles and tutorials. Some students even chose to create their own tutorials to show others how to use the software to create animated GIFs.

In this tutorial by Chris you'll learn how to create animated GIFs using Photoshop CS6.

<iframe width="560" height="315" src="https://www.youtube.com/embed/XxpozP6V14A" frameborder="0" allowfullscreen></iframe>

Jason walks you through how to use the free and open source Photoshop alternative, GIMP, in the following tutorial video.

<iframe width="560" height="315" src="https://www.youtube.com/embed/efTOBSKmXcw" frameborder="0" allowfullscreen></iframe>

Finally, here's a tutorial by Neha on creating animated GIFs using the web-based GIF generator, Picasion.

<iframe width="560" height="315" src="https://www.youtube.com/embed/fgQBzXyNyp0" frameborder="0" allowfullscreen></iframe>



## Final designs

Students created 8-10 stickers for their Facebook Messenger sticker packs showing a variety of different emotions. Below I have highlighted some student work which represents a couple of the stickers out of their pack.


<img src="/media/melina.gif" width="30%" style="float:left" />

{% include image.html url="/media/Car.gif" width="50%" description="Some examples from the Roger the Shark sticker pack by Melina" %}

<br>

<img src="/media/fabulous.gif" width="25%" style="float:left" />

{% include image.html url="/media/luca.gif" width="30%" description="Some examples from the Goldfish sticker pack by Luca" %}

<br>

<img src="/media/flowerdog.png" width="40%" style="float:left" />

{% include image.html url="/media/margot.gif" width="40%" description="Some examples from the Maddie the Dog sticker pack by Margot" %}

<br>

<img src="/media/rainbow.gif" width="40%" style="float:left" />

{% include image.html url="/media/magic.gif" width="40%" description="Some examples from the Llama sticker pack by Yoo Jin" %}

<br>

<img src="/media/eyebrows.gif" width="33%" style="float:left" />

<img src="/media/mad.gif" width="33%" style="float:left" />

{% include image.html url="/media/fire.gif" width="33%" description="Some examples from the Turtle sticker pack by Seo Hyun" %}


Some students even chose to create mockups showing how their sticker packs would look if in use in Facebook Messenger. Seo Hyun even created an animated mockup, which really took the concept to the next level.

{% include image.html url="/media/seohyunmockup.gif" width="100%" description="An animated mockup by Seohyun" %}

{% include image.html url="/media/mockup2.gif" width="70%" description="Another animated mockup by Seohyun" %}


## Evaluation

Students sought out expert appraisals from teachers, graphic design professionals and IT experts from within the International School of Amsterdam and beyond for feedback on their work. One expert, the International School of Amsterdam's IT Director, Warren Apel, was so enthused that he tweeted out Victorine's emoticon to his followers on Twitter.

<blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">No Way! Students in <a href="https://twitter.com/fiberopticnow">@fiberopticnow</a> Katie&#39;s grade 8 Design class made some AMAZING animated GIFs! <a href="http://t.co/JQjsNox9P1">pic.twitter.com/JQjsNox9P1</a></p>&mdash; <NAME> (@warrena) <a href="https://twitter.com/warrena/status/581118464640880640">March 26, 2015</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Of course, students also surveyed their target user, as well as conducted user tests to see which stickers best expressed the emotions that their target user wanted to communicate online.

Some students chose to change their stickers based on feedback from their target user and/or experts. As you can see, Kylan chose to add color to his stickers, as well as animations, based upon the feedback from his target user and expert.



##Reflection

Overall, I was truly blown away by my students' hard work and determination on this project. It takes a lot of inquisitiveness and perseverance to self-direct one's own learning in a project-based setting. Furthermore, the IB Design Cycle is a very robust rubric that requires students to complete essay-length documents for sixteen criteria. Therefore, students are not only learning the new software and creating their product, but also thoroughly documenting their design processes.

If I could do the project over again, I would have urged my students more strongly to submit their sticker packs for the <a href="https://creator.line.me/en/"> Line Creator Market </a> , which is a marketplace where artists can submit their emoticon packs for use on the Line Messaging App to receive 50% of all profits. However, in order to submit stickers for Line, one must create 42 very professional prototypes. Perhaps this is something that high school design classes can take on. I'd love to hear of students' work making it into the actual Line store!

##Let us know what you think!

I hope that you were inspired by this unit plan to try an animated GIF lesson in your own classroom. Whether you're a design teacher, homeroom teacher, or other subject teacher, it is possible to integrate animated GIFs into your lessons. They're not only a great way to show motion, but also processes, or change over time. Please let us know what you thought of this design unit, as well as reach out if you decide to try something similar!
<commit_msg>changes<commit_after>---
layout: post
title: "Digital Design Class: Students Create Animated Sticker Packs for Facebook Messenger"
image: /media/FBsticker.jpg
dark: true
video: false


---

<em>
<strong>
<ul>
  <li> Designers: 8th graders </li>
  <li> Where: International School of Amsterdam </li>
  <li> Design Challenge: Create an Animated Digital Sticker Pack </li>
</ul>
</strong>

I'm so very proud of my students and all their awesome creations for this project. I'm happy to share my design tech unit on animated sticker packs, as well as student examples below.
</em>


## Getting started: How is communication changing in the digital age?

For this design tech unit plan, I prompted students to think about how communications have changed over the ages. We started our process of inquiry by discussing the first written communications in Mesopotamia via cuneiform tablets, to hieroglyphics, to Morse Code, and finally to mobile and online communications. I used the following tweet to get the kids thinking about the connection between more pictoral forms of written language and emoji and/or sticker packs used in modern day communications.

{% include image.html url="/media/tweet.png" width="70%" description="The tweet that inspired me to create this unit plan" %}

## Implementing the IB Design Cycle in this project

The IB Design Tech program utilizes the IB Design Cycle to guide all project-based learning. As you can see below, we start out researching the topic and then move on to prototyping. Next, we create the actual product and finally  evaluate the test the product for effectiveness based on the design specification.


{% include image.html url="/media/designcycle.gif" width="70%" description="My animated hack of the IB MYP Design Cycle graphics by <NAME>" %}

## Researching the topic


In order to research the topic of emoticons in modern day communications, I enlisted the help of our Head Librarian <a href="https://twitter.com/michellerandis"><NAME></a> who curated an amazing <a href="http://isa.nl.libguides.com/content.php?pid=652934&sid=5407276">Lib Guide </a> for my students with tons of resources on emoji research.

One particularly interesting resource from the Lib Guide is the <a href="http://www.emojitracker.com"> Real Time Emoji Tracker </a> from which many students pulled data to create charts in Google Spreadsheets that highlighted the top used emojis at a given time.

{% include image.html url="/media/seohyungraph.png" width="100%" description="Inquiring & Analyzing with the IB MYP Design Cycle, graph by <NAME>" %}


## Prototyping

In order to rapidly generate ideas for the project, students first interviewed their target users. Then, based on the information they gathered about their target users, students engaged in a '100 Ideas' brainstorming activity based on the methodology of <a href="http://dschool.stanford.edu/wp-content/themes/dschool/method-cards/brainstorm-rules.pdf">Stanford's dSchool </a>.

In the following image you can see the evolution of Kanna's sketches into digital images using the <a href="https://itunes.apple.com/us/app/adobe-illustrator-draw/id911156590?mt=8"> Adobe Draw iPad app </a>.

{% include image.html url="/media/developingideas.png" width="100%" description="Developing Ideas with the IB Design Cycle, designs by Kanna" %}

##Learning to use new software

In order to learn how to make animated GIFs using software like Photoshop and GIMP, students delved into online tutorials and videos to teach themselves these new skills. My students were self-directed learners in this unit and truly taught themselves this new animation skill with online articles and tutorials. Some students even chose to create their own tutorials to show others how to use the software to create animated GIFs.

In this tutorial by Chris you'll learn how to create animated GIFs using Photoshop CS6.

<iframe width="560" height="315" src="https://www.youtube.com/embed/XxpozP6V14A" frameborder="0" allowfullscreen></iframe>

Jason walks you through how to use the free and open source Photoshop alternative, GIMP, in the following tutorial video.

<iframe width="560" height="315" src="https://www.youtube.com/embed/efTOBSKmXcw" frameborder="0" allowfullscreen></iframe>

Finally, here's a tutorial by Neha on creating animated GIFs using the web-based GIF generator, Picasion.

<iframe width="560" height="315" src="https://www.youtube.com/embed/fgQBzXyNyp0" frameborder="0" allowfullscreen></iframe>



## Final designs

Students created 8-10 stickers for their Facebook Messenger sticker packs showing a variety of different emotions. Below I have highlighted some student work which represents a couple of the stickers out of their pack.


<img src="/media/melina.gif" width="30%" style="float:left" />

{% include image.html url="/media/Car.gif" width="50%" description="Some examples from the Roger the Shark sticker pack by Melina" %}

<br>

<img src="/media/fabulous.gif" width="25%" style="float:left" />

{% include image.html url="/media/luca.gif" width="30%" description="Some examples from the Goldfish sticker pack by Luca" %}

<br>

<img src="/media/flowerdog.png" width="40%" style="float:left" />

{% include image.html url="/media/margot.gif" width="40%" description="Some examples from the Maddie the Dog sticker pack by Margot" %}

<br>

<img src="/media/rainbow.gif" width="40%" style="float:left" />

{% include image.html url="/media/magic.gif" width="40%" description="Some examples from the Llama sticker pack by <NAME>" %}

<br>

<img src="/media/eyebrows.gif" width="33%" style="float:left" />

<img src="/media/mad.gif" width="33%" style="float:left" />

{% include image.html url="/media/fire.gif" width="33%" description="Some examples from the Turtle sticker pack by Seo Hyun" %}


Some students even chose to create mockups showing how their sticker packs would look if in use in Facebook Messenger. Seo Hyun even created an animated mockup, which really took the concept to the next level.

{% include image.html url="/media/seohyunmockup.gif" width="100%" description="An animated mockup by Seohyun" %}

{% include image.html url="/media/mockup2.gif" width="70%" description="Another animated mockup by Seohyun" %}


## Evaluation

Students sought out expert appraisals from teachers, graphic design professionals and IT experts from within the International School of Amsterdam and beyond for feedback on their work. One expert, the International School of Amsterdam's IT Director, <NAME>, was so enthused that he tweeted out Victorine's emoticon to his followers on Twitter.

<blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">No Way! Students in <a href="https://twitter.com/fiberopticnow">@fiberopticnow</a> Katie&#39;s grade 8 Design class made some AMAZING animated GIFs! <a href="http://t.co/JQjsNox9P1">pic.twitter.com/JQjsNox9P1</a></p>&mdash; <NAME> (@warrena) <a href="https://twitter.com/warrena/status/581118464640880640">March 26, 2015</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Of course, students also surveyed their target user, as well as conducted user tests to see which stickers best expressed the emotions that their target user wanted to communicate online.

Some students chose to change their stickers based on feedback from their target user and/or experts. As you can see, Kylan chose to add color to his stickers, as well as animations, based upon the feedback from his target user and expert.



##Reflection

Overall, I was truly blown away by my students' hard work and determination on this project. It takes a lot of inquisitiveness and perseverance to self-direct one's own learning in a project-based setting. Furthermore, the IB Design Cycle is a very robust rubric that requires students to complete essay-length documents for sixteen criteria. Therefore, students are not only learning the new software and creating their product, but also thoroughly documenting their design processes.

If I could do the project over again, I would have urged my students more strongly to submit their sticker packs for the <a href="https://creator.line.me/en/"> Line Creator Market </a> , which is a marketplace where artists can submit their emoticon packs for use on the Line Messaging App to receive 50% of all profits. However, in order to submit stickers for Line, one must create 42 very professional prototypes. Perhaps this is something that high school design classes can take on. I'd love to hear of students' work making it into the actual Line store!

##Let us know what you think!

I hope that you were inspired by this unit plan to try an animated GIF lesson in your own classroom. Whether you're a design teacher, homeroom teacher, or other subject teacher, it is possible to integrate animated GIFs into your lessons. They're not only a great way to show motion, but also processes, or change over time. Please let us know what you thought of this design unit, as well as reach out if you decide to try something similar!

{'fraction_non_alphanumeric': 0.08490878938640133, 'fraction_numerical': 0.014372581536760642, 'mean_word_length': 4.935367454068241, 'pattern_counts': {'":': 0, '<': 112, '<?xml version=': 0, '>': 112, 'https://': 16, 'lorem ipsum': 0, 'www.': 8, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1193373', 'n_tokens_mistral': 5150, 'n_tokens_neox': 4686, 'n_words': 2363}