Having good content is great, but we wanted the portfolio to be funky, special, interactive and playful, yet clean and simple. Scroll and "mouse over element" interactions are something we enjoy ourselves, so we wanted to bring it in as part of the project.
What it does
The graphic hero elements are moving along with your cursor, smoothing you down before you get to enjoy the view. The photos have a parallax Lottie effect when you move mouse over them, creating a more realistic effect and allowing you to control the perspective.
How we built it
First we've created Lottie animations and came up with a design style to match the mood of the imagery. Then we've created the hero section with animations and overall structure of the website. Added the content and parallax effect and voilà!
Challenges we ran into
24h for a project while being in 2 different time zones was chellenging. Cutting very detailed images into layers is a bit of a pain, so that took a very long time to do. We also had quite a few ideas for animations, so all that had to be tested and not everything worked as intended.
Accomplishments that we're proud of
It's the type of website which actually entertains you. There are things to try out, to play with. In the age of informational overload it's nice to see something clean and soothing, distracting from everything else.
What we learned
Don't plan too many things for 24h design-a-tons!
What's next for Night cityscapes
We'd like to expand the gallery and add more photos to it, as well as more information about the locations.