Fish Zodiac Calculator
Discover which fish species your zodiac sign corresponds to with this interactive zodiac calculator designed on Figma and developed using HTML, CSS, and JS.
Role: UX/UI Design Student @Drexel University
Tools: Figma, Visual Studio Code, GitHub, Netlify
My Process
Brainstorming
I began by brainstorming what theme I would like my Zodiac calculator to have. As a travel and ocean lover, I decided on a fish species theme!
Zodiac Results Screen Design
Once my homepage was done, I began designing my zodiac results screen. For this screen, I went through the same process as when I designed the home screen, to ensure consistency. Apart from the text, the main component of this screen is the fish image design. In my fish image design, I collected images and composed two of each fish together in a fun circular composition. Once I had finished making all twelve versions of this screen. I was ready to move on to coding.
HTML, CSS, JavaScript
To make my design come to life, I began coding my HTML using the Visual Studio Code app. Once my HTML was finished, I began styling my HTML using CSS. Once all my styling was complete, I began adding functionality to my buttons using JavaScript. The last thing I did, was sound incorporation. Once all of my styling and functionality was completed, I decided to add a different sound for each of the twelve zodiac signs. I downloaded telve different bubble sounds for each zodiac and applied the audio to my code. Once this step was completed, I was all done!
Publishing and Hosting
I published my finished product using GitHub and hosted my site using netlify!
Feel free to explore my site here!: https://idm231-mdc389.netlify.app/
Home Screen Design
After deciding on my theme, I began designing my home screen using Figma. I first decided on my background color and made the design choice to make my color a blue gradient to resemble the ocean. I then added the relevant text I needed. My last step for the homepage was to design my buttons. I used a combination of shapes, text, images, and the Figma drop shadow effects. Once all twelve zodiac buttons were all designed, I arranged them in a grid layout on the homepage.