“EMOJI MEMO: A Glimpse Into the World of Emoji” by Claire Yang
“Emoji Memo is a website that allows you to write stories using emojis. Try to figure out what others “said” and continue the story!”
Abstract
The emergence of Emoji, a graphic symbol based on the Internet and mobile terminals, has made communication in the digital age smoother. In today’s globalized world, where movement between different cultures and regions is increasingly frequent and digital communication is part of everyday life, convenient, efficient, and easy-to-understand identifiers are playing an increasing role.
Emoji is a universal language that can convey emotions, actions, and ideas in a way that is easily understood by people of all ages, cultures, and languages. They were first introduced in Japan in the late 1990s and have since become an integral part of our digital communication.
The beauty of emojis is that they can tell a story without the need for any words. Each emoji has a specific meaning and can be combined with others to create a more complex message. For example, a string of emojis depicting a beach, food, and an airplane can tell a story of a person’s vacation to a tropical paradise.
The use of emojis as a universal language is especially valuable in today’s world, where people from different cultures and backgrounds often communicate with one another. Emojis can break down language barriers and help people connect on a more personal level, making communication more effective and meaningful. Since emojis are a fun and creative way to express ourselves and tell stories through digital communication. They have become an important tool for connecting with others, and their universal language function will continue to grow in importance as the world becomes increasingly interconnected.
—————————————————————————————————
Process: Design and Composition
The overall design of the “Home⌨️” page is basically composed of a navigation bar, an intro video, instructions, and the main interactive emoji keyboard. On top of that, a click on the “About📖” button on the navigation bar or the “More🔍” button at the very end of the Home page can direct you to the “About📖” page, which includes some short descriptive texts of the concept behind and some contact information about myself.
->Intro Video<- I designed the appearance of the home page to be a video. The main reason for this is to get users interested in the web page and stay to explore it further. To make an ideal video for the opening screen, I set the point that it should be interesting, eye-catching and can make people catch the theme of emoji at once. So I found two sets of emoji floating from left to right on pixabay.com and edited them together, adding a dynamic down arrow at the bottom of the video to guide the users to scroll down.
->Instructions Design<- Originally, I decided to make instructions directly in the video, but after my first meeting with Prof. Leon, I noticed that texts on the page can already do the job well. As I also wanted to spend more efforts on the web design, so I immediately decided to change my idea and put guidance only in the form of texts.
->Navigation Bar + Background Design<- The navigation bar with two buttons “Home” and “About” is designed to always appear on the top of the screen for convenience. To achieve the effect, I added “position: fixed” in CSS. When it turned out that the navigation bar actually hid behind the video and appeared again as I kept scrolling down, I found this small accident actually embellished the overall effect!! Thus, I kept this design and began to explore more interesting things I can do with “position: fixed”. Then, I thought I can add background texts on both left and right sides while taking advantage of the colors to make cool effects. After creating divs for an “EMOJI” and a “MEMO”, I positioned them in the center of the page on both sides and hide part of the texts outside the screen to make them more like background. At that time, my background color of my entire page is consistent, so the effect of the text only reflected in the fact that it will be hidden behind in the video. Hence, I reset the color of the page to a yellow-white tone (the same as the main color of the emoji), so that the white text will only show up against the yellow background, and it seems that it disappears in the white part.
->Emoji Keyboard Design<- The most important and interactive part of my project mainly consists of three components: the reference area, the input area, and the display area. Specifically, in the reference area, I imitated the arrangement of the first four rows of the keyboard on MacBook to set up an emoji keyboard at the bottom of the screen. The main purpose is to let the user type emojis according to the keyboard. But the special part is that the two shift keys are designed as two randomized buttons, which means it will randomize the last row of emojis when pressing. In the input area, it shows what the user typed instantaneously. And the display area is designed to show the “old” stories created by the previous users. When someone finishes typing the story and presses the “return/enter” key, the emojis in the input area will pop up at the bottom of the previous stories with “stars” exploded and the corresponding sound effect played.
->About Page Design<- The texts here are all about the reason why I developed the idea of using emoji as a way to express and communicate. I chose another video clip from pixabay.com as the background to make the atmosphere more vibrant. The decorative texts on both sides were adjusted to the top of the video to show consistency between the Home page and the About page. The scrolling effect of different divs in a section was created for better reading the texts. Another bonus effect I added was a word “EMOJI” spelled by various small emoji, which appeared at the end of the web page. Actually, it’s a png image with transparent background downloaded from the same website pixabay.com.
Process: Technical
->Flexible Layout<- Before I stated coding, I’ve already decided to make my web pages flexible and suitable for different sizes of the window. To achieve this goal, I wrote “width: 100%” instead of a fixed number for the width of some divs. In that sense, the width became flexible as expected!! During the coding process, I happened to notice that if the width is too small, it’s easy for the users to select the div of the background texts by mistake, which is sometimes really annoying. So I added a “user-select: none” in CSS to avoid this phenomenon.
->Link<- The experiment on adding little effects on links enabled me to learn a new style of codes in CSS. The way to manipulate the style of links is not the same as “p{}”, “.container{}”, or “#id{}”, so I searched via Google and found it worked by writing “a: hover”, “a: visited”, etc.
->Keyboard<- At the beginning of building the keyboard, I wasn’t sure about how to build the layout with CSS and HTML. Hence, I googled and searched in video platforms for online tutorial and ended up creating something like this⬇️ by using CSS Flexbox model.
Nevertheless, I had no idea how to link the key pressing action (especially the randomizing function) to the appearance of emoji in the placeholder (input area) after completing the seemingly well looking keyboard.
Therefore, I asked Prof. Leon for help with the interaction part. Then I was advised to delete the texts(emojis) I had directly typed in the HTML file and create a dictionary with an array which is composed of a series of arrays including the original characters, the corresponding emojis and the tab index number (id names) in the script.js file.
The creation of this dictionary facilitated access to other functions I wanted to implement later, including having emoji displayed on the virtual keyboard, the random function, the input emoji function, and the completion function by calling them through the arrays.
Accidentally, in the process of building the dictionary, I discovered an interesting thing about javscript: if you want to use a backslash in your code, you have to use “\\” instead of “\” to avoid default settings.
Reflection and Future Development (Still working on this part)
For future development, I could think of much space for me to dive deeper into . For instance, the current appearance of the virtual keyboard doesn’t satisfy me as it’s stretched too much when the website is open fullscreen on a big device. This may confuse the users which emoji correspond to which key to type since I didn’t have enough time to add reference characters on the virtual keyboard.
