Building the Trulytell website
All hail the wireframe gods
When we create a website, step one is always a detailed wireframe. We love octopus.do, but you do you. Getting outlined and organized up front gives us a roadmap for the whole project. Trulytell doesn’t have too many pages but has a lot to say. If we didn’t stay organized, it would’ve been a mess.
A few homepage options
Want to see a few early explorations of the Trulytell Home page? Fine, but don’t tell anyone. Created in Figma, these were ultimately revised into the Trulytell Home design you know and love.
The initial chaos of the hero sections were distilled down to a more restrained, controlled design, but still retained the color, texture, and fun.
Accessibility is a necessity
Not much to say here. Good design is accessible. Check your colors, people. We like to use abc.useallfive.com.
Animation makes everything fun
We’re always searching for ways to elevate web experiences. Animation is a fun way to not only add visual interest and sometimes, interactivity. We used a combination of Icon Scout and custom-made Lottie animations. For those unfamiliar, Lottie is a fantastic .json file-format that is used for super lightweight, high quality vector animation. Think gif, but a fraction of the file size, and higher quality. We used Lottie files throughout the homepage, and linked the call to action animation to user scroll, just for fun.
Nested CMS collections: why Webflow, why?!
At Absurdity, we love Webflow. We have and will continue to support the product and the community. So we say this with love and respect: Webflow, please allow more than a single nested Collection per page. This is going to get a little technical, so if you’re not a Webflow nerd, you might want to skip this section.
Here’s what happened… The Pricing section popup on every page of the site is a CMS-driven element. The features within are Multi-reference Collection item within that CMS section, which means we have created a nested CMS Collection. No big deal. That is, until we needed to use another one on the Resources page for tag filtering to be completely CMS driven as well. That meant that there were two nested Collections on the Resources page, which Webflow does not allow.
This situation forced us into a solution where we removed the nested Collection from the Resources tag system, requiring a manual adjustment every time a Resources tag is added going forward. It’s a relatively easy add, but could be completely automated with a nested Collection, if multiple were allowed on a single page. We can dream.
We’re live!
Every project has highs, lows, bugs, and things that finally worked after two hours of trial and error. Trulytell had it’s tricky parts – we even ran up against a Webflow limitation. After workarounds, problem solving, and other such trickery, though, we got the site live! It’s beautiful, fun, functional, and we couldn’t be happier with the results.
Does your startup need help with a pitch deck, presentation consulting, or startup resources? Visit our friends at Trulytell at trulytell.co!
