I have the good fortune to have a software engineer as a partner, so we frequently work on fun side-projects together like websites, mobile apps, plugins, tools, and more. We started out doing this for family and friends, branched out by adding on a few volunteer projects for non-profits, and are now working on the occasional commissioned project.
As our presence grows, we see the need to have our own website so I designed a single-page site for our little "collective." I built the site in Webflow and prototyped some of the more advanced animations in Adobe Premiere Pro as samples for my partner to review while coding the live site.
Together with my partner, we scribbled down some ideas for the site including what kind of brand voice and style we wanted and what we planned to highlight for our skills and services.
I knew that I wanted to create a simple website, so I went on a hunt for some really beautiful single-page sites for inspiration.
While I was designing the site, I realized that this would be very different from the typical product design work that I do. Since it would not be feature-heavy, I knew that I had to take special care with every graphic, each piece of content, and all interactive elements. Therefore, I spent a significant amount of time considering page-load animations and interaction triggers.
For this project I went straight to Webflow after a very simple outline sketch. Since much of the impact would be created by moving elements, I didn't waste time drawing things on paper.
The first step was to simply create the static site in Webflow, focusing on images, icons, and content. Here are a few screenshots of the major sections.
Note: Click to view larger.
For this site, I wanted to make an immediate impression by including some unique animations on page load. I accomplished some of these animations in Webflow, but in the end I also created an animation demo in Adobe Premiere Pro to show exactly what I wanted to achieve.
Rather than having a bunch of graphics plainly sitting stationary on the page, I wanted to spice things up by making items fade and move into view while the page scrolls. I also animated the navigation bar on the right side of the page to match the section changes.
For the final touch, I also considered individual interactions for mouse clicks and hovers on various elements. Below is a sample of one type of hover and click animation.
Until the site is built, check out the demo that I created on Webflow!
— Nabil Cheikh, Member of Aquilo Collective