I usually sketch my idea as one long scroll so I can get the user experience and how the user might feel when visiting the site. I took the liberty of breaking it down into digestible chunks so I am able to talk about the individual sections in detail.
If you would like to see the original, click here.
In total this project took 7 days, I had limited myself to a week. However I believe it could have benifited from more time.
First I come up with goals for what I want the website to have and what I want to show.
For this project, I wanted to make a site for an AI translator app, and went for a flashy website with a demo of the product and a non-intrusive pricing guide to coax users into getting a plan.
For the main page, I try to ease the user in and wow them with a big splash screen. I decided on the idea of focusing on the world, as language is a very global product.
When I first started coding it, I didn't really take into account the weight of the globe so it felt very small as there were no background objects to set the scale.
As I didn't want to clutter the first page, I changed the camera's field of view to make the moon really big when close and normalized when far away. This in effect makes the earth look very big in comparison. I also made it interatable for users to explore the globe for themselves. The tag line was moved to the bottom to be less intrusive on the users eyes as the contrast from light to dark was very distracting.
Notes: The text feels a little out of place, I with I had spent more time with the 3D models, as I would have loved to have a UNIVERSAL like 3D text effect over the globle that independently orbited around instead of the moon.
The first transition I had was very simple. I knew I wanted the background to change to dark, but the earth just fading upwards didn't feel complete. Also I knew I wanted the moon to move independently of the user.
So when updating the transition, I made the globe shrink to make it feel as though it was getting further away, the words underneath were very important to the whole message and I felt as though it should feel disconnected from the globe, so instead of making it move with the globe as I had done, I instead made it stationary and fade, to see the new words with the moon. The moon finally moved in a delayed pattern from the scroll from behind the sand dunes.
However, it felt very stiff. I tried adding a dynamic backdrop for the moon to fade into, but the moon felt as thought it was not independent from the user.
I found that instead of creating a sense of wonder, the words sticking to the page was seen as a bug. So before moving on, I changed the fade to be faster, and made sure the text moves downwards comparative to the earth.
The moon's path was only linear. The original code looked something like this for the moon's path seen above.
motionPath: {
path: [{ x: 0, y: 0 }, { x: "50%", y: "-150%" }],
}Simply moving the moon from bottom to top. Adding an oliptical shape to it was easy, but I was stuck on the design problem of how much of a good thing is too much. I wanted users to notice the curve but also over scrolling without making progress annoys the user.
I also changed the background of stars to be stationary when scrolling. Moving stars made little sense, and the fading effect from the main bright screen to the darker stary night was more coherent.
Though crude, the code looked something like this.
const progress = self.progress;
const xPos = Math.sin(progress * Math.PI * 2) * (moonContainer.offsetWidth * 0.5);
const yPos = -(Math.cos(progress * Math.PI * 2) * (moonContainer.offsetHeight * 0.3));
gsap.set(moonModel, { x: xPos, y: yPos }); // Update the moon model positionI decided to split the difference and stop the animation at a half circle to still show the user the animation, but also create a finality to the piece.
The x postion for the moon only goes half the distance of a circle. I could have made custom pathing, however I felt as thought with the time limit I had it was good enough.
The code for which looks like this now.
const progress = self.progress - .50;
const xPos = Math.sin((progress + (progress * .10)) * Math.PI) * (moonContainer.offsetWidth * 0.4);
const yPos = -(Math.cos(progress * Math.PI) * (moonContainer.offsetHeight * .6));
gsap.set(moonModel, { x: xPos, y: yPos }); // Update the moon model positionNotes: If I were to do it again, I would combine where the moon stoped in the second iteration, and have it move at a non-linear ellipses. However, to some users, it felt strange that the moon would stop so abruptly, so it dependent on a user to user basis. Also, the way the background waits for the moon to be done to fade, makes it still light when the moon is out, which is an undesirable affect. This was the stage where I added a navigation bar which was defintely too late into the process to account for. I should have thought of it in pre-production.
The page where I show how the product works had to be consice and easy to understand, so I came up with an animation which would play as you scrolled of a mouse cursor highlighting a word and translating it right on their laptop.
This was easily done with a highlighitng library I found, and gsap's animation toolset, by creating a path for the sprite to move across the screen.
The animation was broken into two but that was fixed by changing gsap pins. However from here the issue I was facing was time. I had set a hard limit and design decisions made in a limited time frame had to be iterated on, and sometimes not for the better.
The laptop animation changed, the background turned into a skybox which was panned over, and the demo wasn't clear. The way I had invisioned and the way I developed had diverged. The dissonence of not knowing what the client wants when you are the client was not lost on me. However, as this was the last day, I had to make a difficult choice and move on.
Notes: The animation for the laptop was changed from a zoom out to a spin, which was a bad choice. I believe it was changed to accomidate for other elements on the page, but it could have been solved with better planning. As I was out of time to design, I had to focus fully on developing which put me in this prediciment.
My original plan was to hide the prices behind another scroll to show the user the value of paying a small amount per use, by having the user scroll past many features that were not checked in the free tier.
The last page I worked on was the pricing page, and the lack of time shows. The pricing elements were not designed for a page like this, and it feels awkward compared to the rest of the website. The bootstrap buttons are obvious and took tacky, and the overall feeling of seeing the different price points next to each other in organized rectangles overall was not my vision.
Notes: Overall the page is inoffensive. It has little personality and offers only the bare minimum. When creating a page like this, every good designer must wonder "why?" From my experience, I feel ashamed that this was my last page, the ending to my story.
I believe the website is a little plain, however, with another week of work, the page could be significantly better. It was very fun learning how to use gsap and scroll trigger, and I am glad I did this project to learn the libraries. However, I cannot see myself using this website for an actual product. Next time I will use what I have learned here and use it to make a better website.