Purpose: The purpose of this experiment is to teach me prototyping and animation. This UI design is a deliberately raw experiment in Figma as a UI design tool. It includes callbacks to vintage hardware as an ode to predecessors.
Constraints: Limited time due to life responsibilities, Limited budget requiring me to stick to anima's free plan.
Anima's free plan offered:
-5 Chat messages
-5 code copies (I can only export code from figma 5 times)
-20 code inspects
-Hosting: 5 screens(pages), 1 project
Tools: Anima for jagged prototypes, Anima, Adobe Creative Clowd. No polish—just visible seams.
Process: When I started this project I was going to do a traditional portfolio, create a few carousels, in a hi-fi prototype. I was going to use anima to create and host the website. I looked over how anima works and the plan that I was on. I didn't want to pay more for a portfolio than I was already paying. At the time of designing this, my adobe portfolio subscription was included in the creative cloud package. For a laid off independent contractor, adding another $24 a month to a project I am not being paid for, was out of the budget. The free anima plan includes 5 website pages. Any time I was learning design, working within constraints and keeping projects as inexpensive as possible served as a good exercise for real-life problems.
At first it looked like a roadblock. I don't like business cards. Most of them get trashed or lost. I can make a lot of money brokering print sales to my clients, but I can't ethically do so knowing there are more effective in getting a call back. Instead I use a qr code that links to my website. I give the new acquaintance several social media options for contact. This keeps me from getting lost and allows me to reach out to new contacts. I use my website during networking events to give people multiple platforms to contact me through. If all else fails, I put my number directly into their phone and save the contact with a keyword to help them find me later. "It's spelled like 'DJ Khaled' and if you forget my name just type designer into your contacts," The limitations the anima free plan meant that I needed to design the website for mobile and desktop. Instead of creating a 5 page website for mobile and desktop I needed to consolidate both versions down to a maximum of two pages.
I ended up settling on turning each page into an animated component and put them all on one page. The second page for each version will be reserved for embedding and displaying projects. The extra page I have will be used for privacy policies, services, or anything else required by payment providers and other aspects of my operation.
After researching the development process I took advice from several forums to design the website for the smallest screen it would be viewed on and adjusting for bigger screens. I used auto layout and size minimums and maximums to create a website that would expand and contract according to screen size. When the design is ready I plan look more into CSS, javascript, and jQuery to better understand how it will be coded.
In designing the traditional website, I was struggling to get the smart animation to do what I wanted it to do and I was rushing the project because I wanted to have my portfolio ready for when I apply to jobs. This is ultimately a learning exercise. If I wanted to grow, I needed to create something new and interactive, that drew people in, and pushed the boundaries of what was already out there. I decided to slow down, take a deep breath, and like my anxiety, throw tradition out the window.
I started by sourcing assets. Most of these I found on stock websites. I modified the colors and added some personal details in order to make them more me and fit my personal brand. These were all devices and interfaces that I had used as a child. Things that resonated with me and brought back personal memories. It wasn't important for users to experience the same things I did when they see them, however it was important that it drew a reaction from anyone born before the year 2000.
TV Cart: Known as your favorite day at school. When this TV came into the classroom your day was about to be a lot more relaxed.
Tamagochi: It was gamified responsibility and a way to teach kids about death.
TI-89 Calculator: This calculator was my introduction to vectors. In 8th grade algebra one of my assignments was to plot the vectors of a drawing I made on a calculator. After hours of meticulous equations to draw Marvin the martian, I finally did it. I am forever grateful to Adobe and Corral for turning this process into a point and click.
Nokia: Infamously known to be the most unbreakable cellphone in history. I wasn't old enough to own this phone but I played snake on my dad's Nokia for hours draining his battery on multiple road trips.
Gameboy Color: I never actually owned this one. I had the Gameboy Advanced SP (GBASP) but a lot of people might thing it was a laptop. This one is more visually iconic. They were almost the same in function with a few distinguishing features. My SP came with me everywhere. Even after the DS came out I kept playing the GBASP.
Desktop Computer: This one still exists, but the one I remember had a Pentium something processor and ran flash games at the speed of a snail over a dried up salt lake. My dad used to buy hundreds of these at auction. He would order newer processors and bigger hard drives, install wifi adaptors, and change out the ports. He did all of this in order to create computer labs for the underfunded schools he ran as a principle, cutting the costs by thousands of dollars and giving kids a better learning environment. He isn't a tech or math person, he studied liberal arts in college, and doesn't dig deep into science. He was resourceful and he thought of it like putting legos together. He saw what needed to be done and learned to do it. I spent spring break at school with him, running around the empty halls, and watching him do this. It was one of the most valuable skills he taught me. With his boss' permission, the otherwise trashed spare parts, would end up becoming another computer or 4 in our home office. I didn't realize how lucky I was at the time to be exposed to this tech.
Wood panel TV: Another relic from before my time. We found one at a garage sale, when I was 6 years old. It eventually ended up in my bedroom. It only got 3 channels and had no remote. At 3 Am every morning one of those channels aired 3rd Rock From the sun. I would get caught
The pizza box desktop: These were where we learned to type, learned a bunch of office software that would become irrelevant by the time we graduated*, and best of all learned to use proxy servers to bypass school's internet restrictions, deviate from the curriculum and get the skills we actually needed.
*Excel is still great and powerful but I have never in my life balanced a checkbook or even used a check. I do my business expenses on an app that lets me sort through my bank account like tinder, tracks subscriptions, and helps me budget. I really wish they taught us how to code while I wasn't worried about paying rent.
Misc Assets: I made these just in case I would need various buttons and interactions for the components.
Instead of a traditional navigation bar, I decided to use a remote that came before my time. I drew a tv remote in Figma using frames and vectors to create a TV-Remote from the 70's. Each button would bring a different device in a relevant context onto the screen. I didn't label the buttons yet because I wasn't sure what each asset in the component would display.
This is what the prototype looked like when I was half way through my second idea(Game Changer flow). The remote component had over 30 variations with animations and transitions. Exporting it would be time intensive, buggy, and difficult. I do understand how code works, but at the time of designing I did not have the nuances of syntax within various languages memorized. With only five exports, I would be very limited and possibly end up stuck midway through. However in the process of prototyping my second idea I learned the mistakes I was making in my first idea. I learned how to revise the naming conventions I was using for the auto animate to function better. I learned how to break apart and nest my components to ease the development process later. I decided to use my time better, create my website in anima, then embed the second flow in the website, to showcase this awesome design.
