- Hey designers.
Today, I wanna do a bit of a show and tell
of one of the projects
that I'm honestly most proud of having designed and built
throughout my design career.
So I'm really excited to walk you through the website
that I designed and built
for our I Am A Creator project at ConvertKit.
I'll talk you through some of
the design decisions that I made
and show you some of the cool features
of the build of the site in Webflow.
I think it'll be fun.
I'm really proud of this project.
So let's get in, and let me show it off to you.
(upbeat music)
So this site, like I said,
is for our I Am A Creator project.
That project is a coffee table book.
It's also a short documentary film series.
Basically it's us chronicling the stories
of creators on their journey,
of the struggles that they've overcome,
the decisions that they've made on their journey.
I'm really proud that as a company,
we put resources and effort into something like this.
And I was also really stoked
to get to design and build a website to show it all off.
I think it'll be over actually
by the time this video goes out,
but we've been running a giveaway,
like a promotion for the book.
And that is what the homepage of the site
was like focused on explaining,
it was explaining the giveaway
and getting people to take part in it.
So that was like the main brief that I was working to.
It was designed in Figma.
It was built in Webflow.
And I actually streamed a lot
of the design and build process.
So I'm gonna leave links in the description
to where you can go watch replays
of those streams that I did.
I streamed them over on Twitch.
So if you're not following me on there,
please go follow me on Twitch
to catch future streams like this.
'Cause this was a fun project
where I really did capture sort of
like many points from the beginning
right till the very end on a stream
and had support of people along the way, which was cool.
Anyway, let's get into talking about the design.
So, the sort of style guide for the design itself,
a lot of the elements came from the book.
So the book, and let me just scroll down to this page here.
This is an actual screenshot
of a page from the book print file.
So you can see the book designer, Taylor Roy,
she did a fantastic job,
created the style with the thin lines and the all caps,
the overlapping there,
the line running down.
I was trying to make the site fit in with the style
that had already been established for the book.
And so that's where a lot of
the, yeah, design decisions came from,
like this little menu here with the line up the side.
Which reading this project
as a thing ConvertKit is doing for the creator community,
rather than like a marketing thing for ConvertKit,
and we didn't want to ConvertKit to be the focus,
we wanted the creators to be the focus of this project,
so that's why I have up here, a project by ConvertKit,
and a link back to our main site to learn more.
But the rest of the site itself
is sort of treated as its own entity.
This was my first project
that I really played around a lot with Webflow interactions.
So as you can see here,
if I reload all this text like moves into place,
which I thought was really cool.
And let me show you a little bit how I did that.
So I have here on page load,
this home header content loads in, animation starts,
and what happens is each element is set,
as an initial state, a little bit lower down
than its final position,
and also zero percent opacity.
So I've got it with the heading,
the paragraph, and then the small text below it as well.
So we do that, and then we move them into place,
into a zero Y position,
turn on the opacity to 100,
offset the timing of them a little bit,
so that they wouldn't all happen at once as well,
just by setting a delay.
And I think it turned out really cool.
Gives it like a nice air of quality
when you first load the page.
Another cool thing that I was pleased
to have figured out how to do
is have this line here follow you down.
So you can see on load that this line like grows down.
And then as you scroll,
the line continues in this section and follows you.
My hope was that would keep people scrolling on the page.
So how this is done is, it's actually two separate lines.
You can't see this one in a build
'cause I have it turned off on the start.
But I have one line here that is just set to,
it grows from a 0% height to 100% height.
It's 100% of this div here.
This is a grid.
There's a big long, I believe,
yeah, lots of padding at the bottom there
to make all the space for the line to follow down.
And then it connects to this line here
that is actually a completely separate line
in the bottom container.
And again, this is just a div with a border on one side,
a one pixel blue border.
And it's set to be 100% of the height
of the container that it's in.
So that's how it's doing that.
And then how I got it following you down the page
that is an interaction on this container.
And it says that while this container
that has all this giveaway information is scrolling in view,
we play this homepage line extends animation,
which is essentially just it starting from 0% height
and going to 100% height.
And I just played around with the position of like,
you know, the speed of it by dragging this around,
and it turned out that 5% and 80% looked right to me.
I don't know, this is what I like about Webflow interactions
is that you can just sort of
like drag and drop your experiments
and like figure out how you wanna do things from there.
What else about this homepage?
Okay, so we also have this,
here is a video that explains the giveaway.
'Cause I know the not everyone likes to read information,
some people prefer to watch or listen
to information instead.
So you click this and it opens up in a modal,
a video that explains it all.
And I wanted to have this follow you down
as you scroll down the page.
So that I did with just using positions sticky,
which sticks the element to the top of the container
as soon it goes into view.
That was a terrible explanation,
but that's what position sticky is like kind of built for.
It used to be a lot harder to do that in CSS,
but they added that as an attribute, which is great.
I also have an interaction on this bit here that I use.
I use this on a bunch of different things
just sort of a pre-made animation,
that when it scrolls into view,
when this element comes into view,
it slides in from the right.
And I have that happening if I reload again
for a few things like this here as well,
with these loading in.
I just had fun with the little interactions like that.
This bit here on the site
goes into a bit more detail about how to nominate.
And so I have a template for Instagram
and a template for Twitter.
With this one here, you push copy to a new tweet,
and it'll open up a,
it's a click to tweet link,
which is like a service
where you can basically just create a link that does this.
I don't know. I use it all the time for stuff like that.
And then this right here, Instagram was a little bit harder.
I have these images here that you could save,
when you're on your phone as well, it also works.
And if you push copy caption,
it copies to your clipboard.
I'll just show you in this tweet example here.
We delete that, and I push paste now, boom.
My example is in there.
So that was really fun to figure out.
That did involve a little bit of JavaScript.
I found a tutorial for how to do this that I just copied.
It basically involved putting in this bit of script here.
And then on the button itself,
you need to put this data clipboard text attribute
onto the link,
and it automatically copies whatever's in the value
to the clipboard.
So pretty simple, honestly,
but I was stoked to have figured it out.
This cool interaction here,
how these photos sort of are like sliding as you scroll,
that is happening as a like continuous,
while scrolling in view animation.
So while scrolling in view,
creator photos, and they start out at 0% capacity,
and a little bit further down,
and then they get up to 100%, and higher up on the page.
So it's similar idea of what I was doing
for the content in the homepage header,
but instead this is happening all the time.
So you can sort of like roll back and forth
between these two like points in the animation.
On mobile, these are coming from the side.
So I had that, just do something slightly different.
I have an animation on my book rotating as well,
which is working the same way.
It's while scrolling in view,
the book is going from a 0% on the Z rotation
to minus 9% on the Z rotation.
And it ends up being that you can sort of
like see the book going back and forth,
just ever so slightly.
For my menu at the top,
I really wanted to have this bottom border
sort of like slide along as you hover on the others.
But that turned out to be a little too complex for me,
but I was happy with where I ended up with this.
See how it sort of looks like it emerges from the bottom?
And that is just an interaction on the height of the border.
If I come back in here I believe,
I can show you that pretty easily.
The border width is a transition, a CSS transition,
and so that means that as you hover,
it goes from a zero pixel border width
to a six pixel border width.
And that's why it does sort of like that growing animation,
which is kind of cool.
I made sure to add something interactive
to most of the links.
So see, when you hover on the arrow,
it sorta just moves to the side a little bit.
Same for the play buttons.
They like grow a little bit,
while the background is also changing opacity.
I just think that makes it more,
a little more interactive, you know,
a little more fun.
Another main page of the site
was to tell people a bit more information
about the book itself.
Because like why would they want to participate
in the giveaway if they didn't understand
that the book itself was a valuable object, right?
So there was this book page that I made,
and this is using a background video,
which is pretty easy to set up in Webflow.
And clicking this button here
opens up the book trailer in a modal,
and that's using the light box element in Webflow.
I have these loading in as you saw just then.
This I used a CMS collection to set up all of our creators.
So this is all the creators featured in the book.
So setting them up in a CMS collection
meant it was really easy for me
to create this block here that displays them all.
'Cause I just pull in a collection list.
Let me show you what that's like in case you're interested.
And then any changes that I made,
like, say, for example,
if I wanted to make the font size bigger of this,
I just change it here,
and it would change on all of them.
Let's undo that though
because we don't want that to be a thing that happens.
I made sure on each of the sub pages
to put a link back to the giveaway page as well.
So yeah, there's this note here
to help us give the book away for free.
So you click that and you head back to the homepage
to find out about the giveaway.
Then we have the films page.
This is again in the CMS collection.
This is a pretty basic page.
This is something I definitely see myself
doing more with in the future.
I think once the giveaway is over,
a little bit in the future,
when there's time to get back to the site,
I'll work on making the homepage
a little bit more focused on the films, I think.
But for now, they're just sitting in here
on this page as a collection list,
because again I put these into the CMS.
So each time we publish a new film,
I could actually set up a zap
to go from our YouTube channel into here,
whenever a new film is posted to our playlist on YouTube.
Let me give you a quick look
of how the site is looking on mobile.
So the same interactions and like load-in animations
happen on mobile.
The menu looks a little bit different.
The choice I decided to make with this
was to have it dropped down
and be like on a blue background,
and have the thick border at the side
instead of at the bottom.
But yeah, things slide in.
There is not the line following down the page here
on this screen size
because that meant the content was too constrained.
So instead I just hoped that, you know,
seeing the line extend at the start, you'd scroll more,
and I think people naturally scroll more on mobile anyway.
Yeah, you can use this.
The copying caption works on mobile as well, which is nice.
And then, like I said, these sort of slide in like that,
and book still does its cute rotating thing.
The book page on mobile, again, very similar
but the creators sort of load in a line instead,
and all of these are linked as well.
So that anyone who wants to learn more
about a particular creator
who was featured in the book can easily do so.
Down the bottom on every page,
you might have noticed this
'cause it's on the desktop as well.
We have this opt-in in the footer,
sort of encourages people to take the next step
on their journey.
And this is a, like a pack of wallpapers,
a journaling sheet, just like some inspiring stuff
to help you kickstart your journey.
And so this a ConvertKit form, naturally,
that delivers that.
And how I embed a ConvertKit form in Webflow
is through an HTML embed element.
So you just paste the JavaScript code in there,
and you can't see the form until the site is published,
either to the staging or the live site.
But yeah, that's how it works
to get ConvertKit form into Webflow.
I used a symbol for the footer,
so that if I wanted to make a change to it,
it'll automatically update across
all of the pages on my site.
This little promo block here that appears
on the film page, and on the book page,
I also made into a symbol
because again, I wanted it to be easy to keep it updated.
And of course, my navigation, is also a symbol,
including this bit up here.
I think that's all I have to show you?
I don't know if you've got any more questions
about the build of this site,
please feel free to let me know.
Oh yeah, you can scroll through these examples as well.
Yeah, I would love to hear
what other questions you have about this project,
if there's anything I can answer for you.
But also like I said, I did stream the whole thing,
so I'll leave links if you wanna go and watch that.
And there was also a video that I uploaded
just a week or so ago
about the initial stages of the build,
sort of like a cut down version of one of my streams.
I'll link that on a card if you wanna go and watch that.
This was a fun project.
I'm looking forward to making more micro sites like this,
as we at ConvertKit make more cool projects like this
for the greater community.
And of course, I will look forward
to documenting it all for you
and like showing you the process on YouTube as well.
So thanks for watching.
Hope you enjoyed seeing some of my thought process
about the website and I'll see you in a next video.
Bye!
(gentle melodic music)