Educational Webflow website to explain what the heck AI is
Brand
Location
Client
Budget
Industry
- Technology
Environment
- Webflow
Release
Live
Check livePROBLEM
SOLUTION
VALUE DELIVERED
AI UNCERTAINTY
Artificial fear?
AI has been talked about and studied for many years now. However, the recent emergence of user-friendly and accessible large language models and image-generating tools thrust it into the limelight. With the public expressing a wide range of emotions, from fear and doubt to hope and optimism, little was said about where AI came from. That's when we came up with the idea for the entire project.
SCOPE OF WORK
Test of skill
Our projects often force us do things for the very first time. The AI Takes Over project was no exception. After brainstorming ideas and researching the topic, we had to craft some unique copy. At the same time, the designers created UX and UI designs in Figma and sculpted a few eye-catching 3D models using Blender. Finally, the developers put everything together using Webflow.
TEAM
AI enthusiasts and AI helpers
Apart from having a bunch of creative individuals to work on the project, we've also handed over a few tasks to AI itself. GPT-3 helped us write a few key content pieces present on the AI Takes Over website. It even told us a bit about itself!
NO-CODE SOLUTION
No code, no problem
One of our goals was to showcase our proficiency in using Webflow. In short, it's a no-code web design platform that's great when it comes to ensuring design cohesiveness and crafting low-budget solutions.
THE UNICORN EMOJI
Meet our host, the Rainbow Unicorn!
We decided to make the unicorn emoji the main protagonist of the project. Combining curiosity, adorableness, and quirkiness, it helped make some of the more serious parts of the AI Takes Over website more engaging and easier to digest.
THE UNICORN EMOJI
… is asking questions
The unicorn’s conversation with the robot that goes on as the user scrolls down the page is meant to symbolize the messages we use to communicate with AI language models. The idea here was to present human-machine interaction in an engaging and positive way. Because of that, the entire conversation resembles regular conversations we all have in messaging apps every day.
3D ASSETS
Eye-catching, unique
Our visual direction for the website was to make the project appear innovative both when it comes to the technology that powers it and its visual side. For the first time ever, we used our in-house resources to create 3D visual assets. We also took advantage of Blender's model-building features. The Octane Renderer helped us improve the shading and get the final look of our assets just right.
PAST
Going way back
We start off by outlining the history of AI and how it evolved over the years. We touch upon how AI was perceived by the public, as well as what scientists had to say about it. GPT-3 helped us make the entire section more engaging and to-the-point.
PRESENT
It's already here
The next section is about the current state of AI. It's supposed to make the website visitor reflect on how AI is developing and how it can be used in a variety of different industries. The title of the section ("Already Here") is a pop culture reference. In the context of our website, it's a response to popular misconceptions about AI that can be found throughout the internet, usually held by users who are unaware of AI's omnipresence.
FUTURE
A force for good
With the past and present already explained, there had to be a chapter with predictions regarding what’s in store for AI. We’ve gone with an encouraging, positive message of embracing AI-related global changes. Instead of being a threat, they can be viewed as an opportunity to make our lives better.
COLORS
Color coding in action
The visual side of the project is based on how the entire website changes colors depending on which chapter we're currently viewing. The color change helps signal a change in tone and the overall vibe of the section we're reading about.
Reds symbolize fear of the unknown. Next, there are violets, which represent the present. They are at the intersection of the past and the future. Last but not least, blues illustrate progress and change. Each of these colors stands in contrast with the dark background colors, making the entire website even more visually striking.
TYPOGRAPHY
Futuristic and legible
The bitmap typeface Offbit 101 does a great job of setting the tone for the whole project. Visibly associated with programming and computers, it helps establish a connection with the digital world. To balance it out, we used the General Sans typeface for sections in which the font size is smaller. Consequently, the website text looks great and is fairly easy to read.
CONTENT MANAGEMENT
Own the product like never before
For all things technical, we utilized Client-First by Finsweet, a user-friendly and highly-accessible add-on for managing website content. What convinced us to use it is its ability to support real-time website changes. With additional features like user roles and permissions, it allows website managers to control their site’s contents with ease and confidence.
ARE YOU READY?
Let’s build your next digital product
