Research
With previous assignments, I was able to start experimenting with code without much pre-planning. For this assignment, planning and research were the most important parts of the process. Before I got anywhere near coding, I looked for examples of how the keyboard could be used in an interactive way. I also researched what keyboard functions are possible in JavaScript. I created an Are.na channel of different sites to help me organize my ideas and see what was possible.
Ideation
A challenge I had was deciding which way to take the project, as it’s a rather open-ended assignment with lots of room for experimentation. To help bring my thoughts into actual plans and decide the best course of action, I created a brainstorming document. This list of ideas was purely based on concept, not code. I took the three that I thought were most realistic with my coding abilities and then started experimenting with coding.
Iterations
When brainstorming the most notable ways a keystroke could impact a webpage, image and colour change came to mind. The first idea I experimented with used images of things that start with the same letter as the pressed key. The next idea was a more functional webpage, which displayed different pages based on keys pressed. When you typed a letter, it would take you to that letter's page where you would either guess the correct colour of the displayed letter, or change the colour based on what was typed. The third idea was a simple word guessing game where you have 10 chances to choose letters and get the correct answer.
Selection
I liked all these ideas, but the first idea was the most visually and conceptually appealing to me and the more abstract of the three (as per the assignment requirements). The guessing game was fun and interactive, but not original. The colour idea was original, but more functional than abstract or entertaining. The keyboard creating a visual response seemed the most appropriate. However, the randomness of the images made it difficult to understand from the user perspective. To fix this, I had the idea to create an architectural alphabet. My mother was a photographer and for a long time she made prints featuring letters she found in architecture. I created a Pinterest board with her photos to use as source material for the alphabet.
Refinement
This refinement made it much clearer what the images represented while still being an artistic and original expression of type. I realized it would be even more interesting if there was a pool of potential images for each letter so that each time a letter was clicked there would be a different representational image. This required me to change my JavaScript code and experiment with randomization. I also had to create code for the backspace key and the enter key so that a user could experience typing like they would on a word document. After this, a lot of the changes were based on design rather than function. For example, my first code used blocks to display the title page, but I decided to replace that with an image I created which was cleaner and easier to scale down.
Final Design
This resulted in my final webpage design. After a lot of adjustments, I ended with a functional and abstract alphabet that creates a visually intriguing keyboard experience. The page can be used for a variety of purposes. This project taught me a lot about JavaScript. Though it is not my preferred way to code, I am glad to have a better understanding of it.
