Back to all projects

Aquilo.Solutions Website

From a blank page

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.

Crafting elegance

Hashing it out

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.

Research and compare

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.

Rethink priorities

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.

Prototype

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.

Static site

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.

screenshot of website with dark galaxy background and text that says "You Dream It. We Build It. Creating solutions together to help you succeed."screenshot of website that says "About Us" and includes pictures of a designer, developer, and a cat.screenshot of a webpage that says "What We Do" and describes web design, development, and strategy services

Landing page animation

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.

Scroll animations & parallax

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.

Interaction design

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.

Live demo site

Until the site is built, check out the demo that I created on Webflow!

https://aquilo-solutions.webflow.io/
...

— Nabil Cheikh, Member of Aquilo Collective
Contact me