SPEAKER_00
Hey guys, my name is Lucas Crespon, the creative director here at Every, and this is Daniel, our super talented design star here at Every as well. We want to talk to you about how we made the landing page for Monologue in Framer. Monologue is one of our products here at Every. It's an AI detection tool, a competitor to Whisperflow and other AI detection tools that will remain nameless. From the very beginning, we really leaned into visual impact when creating this brand and product. Everything we have done has come with the idea that we really wanted it to differentiate itself as much as possible.
SPEAKER_00
And that translates itself to the brand and the choices we made in the web design and the product and everything really. We'll take you guys through the entire project. You can see how it looks when a creative director and designer work together to create something that we get really, really excited about. We hope you like it. We want to share how we build this entire site in Framer. First of all, as you can see, we're greeted by this awesome, very dynamic hero section that has embedded in the middle of it our monophone, which is basically our star. It's basically the very main character of the entire Monologue app, at least on Mac OS.
SPEAKER_00
And we wanted to create something extremely skeuomorphic and showcasing it at the very top of the page makes it really clear who we are designing this for more than anything. So when we really wanted to create this page, we wanted to accomplish two things. Number one, and the most obvious one, is be able to tell the story of Monologue and who it is for and all that. But the second goal and the main reason why we made it the way it looks is because we really wanted to differentiate it from the rest of the minimalist approaches that other people take when they make landing pages. We really wanted to go dark mode when the rest of our competitors are going light mode.
SPEAKER_00
We really wanted to go more skeuomorphic when they're going more minimalist. We wanted to be more loud when they're going quieter. I think all of that goes to show the type of page that we have here in front of us right now. Framer really allowed us to iterate extremely quickly and have the team reacting quickly and giving feedback quickly and all that. So maybe what we can do now, Daniel, is go part by part of the site and maybe we can talk briefly about the hero section and why it looks the way it looks right now.
SPEAKER_01
Yeah, definitely. For the hero section, especially, we wanted to make an impact knowing this was a launch for this app. Monologue didn't exist before and we wanted to make a great first impression. So that was the intention here. Initially I did it on Figma, but the good thing about Framer is that I translated pixel by pixel just as it is and even better because I can add animations on top of it. So the intention here, Lucas, was actually to create a gradient as a first impression. So using the assets that we already built on the product, we incorporated them here in Framer really easily. We actually have the wave. We even have some light ray effects on the top.
SPEAKER_00
So if you zoom out, you can see the madness behind the method and all the layers and everything that goes into making something like this, as well as all the animations. And you can see all the connectors and it can look like a spider web to some, but it really goes to show that the canvas really lets us move away from Figma the closer we are to launching. And start moving faster through the design of the page. Another interesting thing that I wanted to point out—this is one of those things that we've been trying to start doing in a lot of our different apps.
SPEAKER_00
So if you go to our Spiral app, or if you go to our Sparkle app or Cora, you're going to notice this little stamp in the landing page. And that's basically one of the main recurring things that we use through all of our Framer sites for all the landing pages of all of our products. It's one of those components that we reuse over and over again. And it's our little signature that we use as a company to let our users know who's behind each one of our products. I think something really interesting that's super worth talking about is our paper shader animation. How do we even make that?
SPEAKER_00
[SPEAKER_01] Yeah, this paper shader animation was made using one of the shaders that we have built on Paper.
SPEAKER_01
This app that we have over here—you can actually export this and translate it really easily using the workshop of Framer. So the good thing is that you're not using a ton of bandwidth on your account and it will translate really easily on the actual website. [SPEAKER_00] We originally created this in Paper, but then we recorded them and exported them as videos. [SPEAKER_00] And the more traffic that the page got, the more expensive our website got because we started getting a lot of traffic.
SPEAKER_00
So we started thinking, how can we optimize this? How can we make this run better and be less expensive? So using the actual Paper shaders, which I think is just React code basically. Video is no longer a thing. There's no media consumption and the bandwidth just disappears and makes it really easier for us to continue working here. This section was really interesting because we had to work with Valerio, who is one of the best animators in the game right now for anybody looking for sick motion design. Valerio basically made this animation here that helps tell a little bit more of the story around Monologue.
SPEAKER_00
[SPEAKER_01] So we have this animation that basically explains all three features that are included on the dictionary thing in Monologue. [SPEAKER_01] And basically the best way to do it is just create a Rive animation.
SPEAKER_01
[SPEAKER_00] Yeah, I think we wanted to use Rive because we needed the animation to be interactive. [SPEAKER_00] So we couldn't do that with an MP4 or with a Lottie file in and of itself.
SPEAKER_00
So Valerio really helped us do it this way. And then I wanted to showcase how responsive this is. [SPEAKER_01] Yeah, different breakpoints and the idea that it changes depending on the breakpoint you're in. [SPEAKER_01] And right now mobile should look like this. Yeah. I think we wanted to use Ripe because we needed the animation to be interactive, right?
SPEAKER_01
[SPEAKER_00] So we couldn't do that with an MP4 or with a Lottie file in and of itself. [SPEAKER_00] So Valerio really helped us do it this way. [SPEAKER_00] And then I wanted to think it'd be a good idea to showcase how responsive this is.
SPEAKER_00
Right. [SPEAKER_01] Yeah. [SPEAKER_01] Different breakpoints and the idea that you have it change depending on the breakpoint you're in. [SPEAKER_01] And I think right now mobile should look like this. We are able to have the same animation, but completely constructed for different breakpoints and adapted that way in a way that looks more specific to the actual intention of the screen size in and of itself. And it has a nice little loading indicator that rotates between each section, which I think is pretty sick.
SPEAKER_00
I think something really cool also about this page in general are all the textures and all the shadows and all the depth that we have. If you keep scrolling down, for example.
SPEAKER_01
[SPEAKER_00] Yeah. [SPEAKER_00] Let's talk a little bit about how do we get the feeling of the app into the website? [SPEAKER_00] Because the app is this very skeuomorphic thing that feels very physical, that feels like you can touch it, that has depth and volume to it. [SPEAKER_00] And obviously we wanted the website to feel very connected to it because we really think product and brand are extremely linked and almost one in the same. The way we did it is we know that Moloch has physical devices on a digital world. So the way we make this look a little more real is just by adding textures and making it more skeuomorphic, the more we can, the better.
SPEAKER_01
What we did here, I have a texture all over the whole page and add some noise through the whole page.
SPEAKER_00
[SPEAKER_01] I have this noise on top of all the website. [SPEAKER_01] This is all over the place and this gives you a feeling that you can touch it. [SPEAKER_01] That's the feeling that we were looking for. [SPEAKER_01] And because we have these recorders, voice recorders, and it makes sense in the whole branding to have this type of texture and depth on everything we do. I'm also super excited about how the footer looks. A lot of people usually use the footer as a site map type of thing, right? They front load their footer with a bunch of links and stuff to help you navigate. But for us, it was more a final CTA, right?
SPEAKER_00
We wanted to make it clear that Monologue is a completely different animal. It's a completely different beast. With having just a really big typography, a really big device in the middle with the wave and the really bright download for Mac button right there. I think it connects it and brings it full circle from the very top and the beginning of the site.
SPEAKER_01
[SPEAKER_00] It has a very continual type of experience I would say. [SPEAKER_00] And I think the coolest part to me is the page is full of tiny Easter eggs, right? [SPEAKER_00] That's a good thing about a framework that you can add over the effects, light effects on little things. [SPEAKER_01] And even adding animations all over the whole site is three degrees easy. You just have to watch a two minute video on YouTube and that would be nice.
SPEAKER_00
I think what's really different and interesting is that our main system CTAs for download for Mac are not a normal button, but a button in the device. It's actually as if you were pressing the actual product that you're going to be able to use. So it's giving users a little bit of a sneak peek or a taste of what they're going to get. And that's the actual product. I think my favorite part is actually the above the fold section about the notes, which is the new feature we launched. [SPEAKER_01] I love this speaker that I did here.
SPEAKER_01
It was so simple just to have shadows and light effect. It actually feels like this is part of the product. I like this. I don't know if it's because I'm biased because I just did it. That was the last section I built, but I actually love the above the hero section a lot because it creates a good impression. As I said before, it was even promoted and besides Mobbing and even Land Book and these other websites. I think also the other cool thing to mention. [SPEAKER_00] To mention obviously is that this whole site was made for when we launched the macOS app, but then very rapidly our team shipped the iOS app.
SPEAKER_00
So we wanted to create its own section, its own little banner to connect it. Initially we had only the macOS app as Lucas said, and we found a problem where the good thing is that we were doing this all in Framer. [SPEAKER_01] So it was really easy just to add these little Easter eggs to promote the iOS app on top of it.
SPEAKER_01
Quick question about this section of the iOS section, the little holes or circles that are part of the space. [SPEAKER_00] There are speakers that ask, are those currently PNGs or are those actual vectors?
SPEAKER_00
Actual vectors. [SPEAKER_01] The good thing is I built it on the product.
SPEAKER_01
So it was just so simple just to copy what I did. I added some inner shadows and make it even more realistic. Adding another shadow to it. You can always make it more realistic, right? [SPEAKER_00] Yeah.
SPEAKER_00
[SPEAKER_01] Always.
SPEAKER_01
There's always a way to make it even better. Yeah. [SPEAKER_01] I was just following that and that's the same way I did it on the product. [SPEAKER_00] The product, the site, everything is one in the same. [SPEAKER_00] And I think that's the coolest part of it—you don't really have to make a super traditional website that's easy. We're adding another shadow up to it. Hey, you can always make it more realistic, right? [SPEAKER_00] Yeah.
SPEAKER_00
[SPEAKER_01] Yeah. [SPEAKER_01] Always. [SPEAKER_01] There's always a way to make it even better. [SPEAKER_01] So yeah.
SPEAKER_01
I was just following that and that's the same way I did it once on the product. So.
SPEAKER_00
[SPEAKER_01] Yeah, exactly. Like the product, the site, everything is one in the same. And I think that's the coolest part of it that you don't really have to make a super traditional website that's easy. You can really do something hard, which I think is the cool thing about Framer that you can try to be a little bit more ambitious and play, have a little bit more fun with how things look, et cetera. You know, combining components, shaders and animations in Framer, anything is possible in my opinion. [SPEAKER_01] And I'm super fast at Framer.
SPEAKER_01
I think this is probably one of the most polish sites that we have ever launched, from every angle. Obviously we're always trying to beat our own bar that we set for ourselves. [SPEAKER_00] But the fact that this site has appeared in mobbing as a design reference and the website starts appearing in different taste or design publications or whatever, just really goes to show how designing with difference as being the main thing that we want to achieve, really goes to show how you can just get traffic from having a beautiful experience. You know? [SPEAKER_00] Yeah. Yeah. Yeah. That was even the intention. I remember, Hey, we want to make this look super cool.
SPEAKER_01
I remember speaking to you and that was one of the goals, like, Hey, how do we make this cool? So I think Framer was the go-to for this. So yeah.
SPEAKER_00
[SPEAKER_01] All right. [SPEAKER_01] Awesome. Well, Daniel, thank you so much for sharing for a second. I really appreciate you and I'll see you later in Slack. See ya, man. [SPEAKER_00] Bye.