HEY-CSS!
HTML/CSS, JS, UI/UX
Hey-CSS! is an animation game that explores the functions of CSS by creating a personalized character. By pressing a key on the keyboard, users can experience what CSS is and how it functions.
COURSE
Core 2: Interaction Studio
PROJECT DURATION
Apr 2021 – May 2021
SOFTWARE
Visual Studio Code
Challenge
How might I create a set of rules that lead my website to generate content and form through audience input?
Target Users
People who are interested but unexperienced CSS beginners
Concept
• 8-bit game
• Coding
User Testing
with the first prototype
Observations
GOOD
• Actively engaged in experiencing CSS
• On/off functions well
BAD
• Hard to find an individual's name
• Didn't use the 'arrow', 'numbers', 'spacebar' keys
• An error due to turning on caps lock
Feedback
GOOD
• "Interesting and love to click"
• "Straightforward to experience CSS"
BAD
• "Confusing to know what to press"
• "Backspace function is counterintuitive"
• "Hard to understand next step"
Product Design
Keyboard Pad
Users can see available and unavailable keys visually on the screen. They can also directly see what key they are pressing and what function they are experiencing.
Character
I designed a simple character with a neutral mood in order for users to focus on functions. As soon as you enter the website, it will appear from above.
KEYBOARD PAD
Users can see available and unavailable keys visually on the screen. They can also directly see what key they are pressing and what function they are experiecing.
CHARACTER
I designed a simple character with a neutral mood in order for users to focus on functions. As soon as you enter the website, it will appear from above.
There is no order to play the game. Users can press any available key.
Each key has a toggle effect in two different ways: on/off and change.
Basic Functions
[Arrow]
Move
[+] / [-]
Size
[Spacebar]
Jump
CSS Functions
Most of the keys indicate the first letter of the function.
[R]
Rotation
[B]
Background color
[Z]
Z-index
Error Message
The 'Caps Lock' key prevents users from running interactions, so a pop-up box alerts them to turn it off when they press it.
Special Thanks
I want to mention the 'N' key, which is for name changes. I designed this project in Interaction Studio class, so I put all names of my classmates and instructors to celebrate our finals and to enable them to enjoy my project by finding their names.
