- Hey designers.
Today I wanna give you a walk-through
of a recent web design project that I just wrapped up.
I wanna give you a tour through the project
and tell you about the design decisions
that I made along the way.
If you're new around here, then hi, I'm Charlie.
I'm the creative director at ConvertKit.
And this project that I'm gonna walk you through
is a website for Creator Session.
It's a series that we produce at ConvertKit,
where artists come on and share songs, share their films,
and share the behind the scenes of the making of them.
And it's kind of like a sub-brand for us.
So I got to explore a very different design style
for this project, which was really fun.
So let's get into it
and let me walk you through my design decisions.
(bright electro music)
Okay. So here we have the homepage.
Now, as you can see, the brand for this project
is kind of like in dark mode in a way,
especially compared to our main ConvertKit website
which is very like light, and bright.
One of the reasons I wanted to go for that color scheme
for this is because it's primarily a video-based project
at least for now.
And I just think that videos look great
when they have like a dark border around them,
the colors and everything within the video
really pop out more.
So yeah, that was the thinking behind that.
Also it just looks cool
and sometimes that's like a good enough reason as well.
So for this homepage,
I have up here this project by ConvertKit.
I actually went through many iterations
as part of this design process, as you do.
And sometimes I was thinking
about having the main ConvertKit logo at the top here.
One of our goals with this project
is to elevate the ConvertKit brand.
So Creator Sessions is a brand of its own,
but we wanna use this alignment
with all these cool musicians and artists
to obviously like, elevate ConvertKit as well,
'cause it's pretty cool that we're doing this.
And so I wanted it to be obvious
that it's a ConvertKit project,
but for it to feel like its own site as well,
so I explored a few different ways of doing this.
I had this at one point,
but in the end I went with this idea of this bar at the top,
because it's something that we've done on other micro-sites,
which is what I call a site that is separate
from our main convertkit.com marketing website.
So on the main homepage,
we started with a super huge, impactful logo,
I guess it's logotype, for the series, which I really love.
And it's always gonna have the latest session right here
to the side of it.
By the way, because I didn't say it yet
This is Figma. We're in Figma.
I designed it in Figma, as I do all of my design projects.
So it'll always show the very latest session
up here in the hero.
And it'll also show the session
that's coming up next as well,
so that you get this idea that it's,
okay it's a regularly recurring thing.
There's something happening, you know, next Friday.
And I use this language RSVP, which will actually
when you click it, open up this modal
to sign up to the email list.
It's just your way of opting in
to be told about sessions coming up.
But using that language kind of made it feel more "eventy",
I thought.
That's a term now.
So yeah, I leaned into it and went for it.
As you can see, we're missing some real content
on this page so far, that's still to come.
There'll be a little blurb introducing it here,
and this will link to an "About" page.
And then on the homepage, I really wanted people
to just be able to dive in to some sessions
that we're really proud of.
And there's two core categories of session at the moment.
Usually they're either a "Music" session,
or they're with a filmmaker or a photographer.
So I have these two carousels here,
which display the latest sessions from our filmmakers
and photographers and from our musicians.
People will be able to slide this along
and just click on an artist that stands out to them.
To start with, I just had the name of the artist,
but I really like this idea
of being able to put a little clarifier line,
especially for if it's an artist
that you haven't heard of before.
I think this clarifying line will be able to tell you
about either the genre that they're in
or something about them, like, you know
being a three-times Grammy-nominated artist,
that might get you interested
to click on it and watch the whole session.
Underneath each of these carousels,
I've got this huge breakout moment,
where we have a quote from a session
and a link to watch the session that this quote was from.
This is our chance to highlight
some of our favorite sessions that have taken place
Drew Holcolmb's is definitely one of them.
It was one of the sessions that set the tone really
for what Creator Sessions came to be.
So, this is like a nice call-out here,
and it just, again, it just looks cool, right?
It looks creative, and yeah.
Hopefully it'll entice people to wanna watch the session.
Then I have another one here from Ami Vitale,
underneath the "Filmmakers and Photographers" section,
'cause hers is one of our favorites in that category.
I mean, these carousels are obviously very-
They can be very automated.
As soon as we add a session to the site,
it can appear in this carousel.
This sort of stuff, especially with a typographic layout
is not scalable, and that's why I like doing it.
I think it's actually cool to have that
as a moment on the site every now and then.
It makes it feel, feel more creative
and a little bit more interesting, I think.
You can see throughout I've made use of gradients,
like up here, there's a dark gradient
at the top of the photo so that the text can stand out.
Here, there's one to the side.
Here, there's ones at the bottom,
just so that the text has a thing to sit on.
And I've alternated between using this green brand color
and on these ones, I've used the dark color as the gradient.
At the bottom of every page,
so this is the same across all of them, this is our footer.
There's this block here,
which is like a promo for ConvertKit,
because obviously we're a company, and at the end of the day
we would like people to try out our product,
that's our, the core way that our business works.
So this is promoting it specifically speaking
to the kind of type of creative
who would be watching a Creator Session.
Like, we've got this cool creative photo here of Calvin,
who's a musician, in the background.
And then there's gonna be a couple of core points
about our product and how it helps you as an artist.
And then this will link out to the main ConvertKit site
to tell even you more if it is something
that you decide you're interested in.
Down here, we repeat the email signup bar
and then we have a link out to ConvertKit again,
and some footer links.
So hopefully just from seeing this one page,
you can see the style that I'm going for, right?
It's very like dark, moody and using these scribbles
as accents on photos, as background on text
to add a bit of texture to it.
And it's gonna be coming in in the navigation,
as well as the active state,
we'll have a squiggle line behind it.
Let's move on to looking at a page for a single session.
So this is going to be really cool,
'cause every single artist will have their own page,
their own session.
And I loved the idea of leading with a large video,
full-width, right at the top.
This is the core action that we want people to take
on the page, is to watch the session,
to get the value from it, to enjoy it.
And so that's why it's taking up
so much screen real estate here at the top.
We also would love if people shared the session
with other people, if they enjoyed it,
so that's what this little block here does.
And it's going to follow you
down the screen as well as you scroll.
So if you're reading the description,
at any point you can click and share the session.
I've also added this bit where we can
embed a Spotify playlist of songs by the artist.
Not only is this a great way for people to be able
to access the music, if they like the artists,
it's an easy way to get more of their songs.
This is a great piece of value
we can offer to the artists as well,
because artists always looking to drive more Spotify plays,
and so if we have this here on their individual page,
hopefully we can encourage some more of that,
and get them those more plays.
Obviously a big change from this page versus the homepage
is the top navigation, the menu.
This was like, quite the challenge to figure out.
I went through lots of different options
for figuring out how to do this.
Let me see if I can find some of them over here for you.
Yeah, I thought, okay, maybe we keep it at the side.
Maybe we just sort of like
shrink the Creator Sessions and have it up there,
because I didn't wanna have the logotype quite as large
as it is on the homepage on all of the subsequent pages.
I tried it like,
"What if it says ConvertKit Creator Sessions in the header?"
Ultimately I decided on this.
I decided on having the navigation become centered
on all of the subpages, and so it's just the homepage
that is sort of treated in this way.
It's a little weird.
Like, if it was a software marketing website,
I would probably advise against doing this,
but because this is more of like
a creative experiential project,
it works overall for the content on those subpages.
I think this is a great example
of how sometimes in design, you can break the rules
and do the thing that you're not technically supposed to do,
because it just does feel right to you
for this specific project.
So that's why we have that here,
so that we can have "Creator Sessions with Lennon Stella"
or, you know, whatever the artist's name is
as the introduction to the page,
with easy access still to all of the rest of the stuff.
But I do think this whole centered feel
really does make the video stand out even more,
with its play button in there, which is also centered.
It really makes it clear that this is the star of the page.
The bottom of each description,
there's gonna be links to follow the artist.
It would be like, like a little bio thing,
whatever links they wanna have in there.
And then of course there'll be the option to jump out
and watch more sessions as well.
Over here, we have the "All Sessions" page,
and I went through a few different ideas for this.
What I knew going into it that I wanted to have,
was all of the sessions that exist
filterable by their category.
When you click one of these, it would change
so that just the "Film & Photography" ones show on the page,
just "Music", you know, whatever.
And I wanted to show all of the live sessions
and then also a promo for whichever one is coming up next
as well.
Again, just to reinforce that idea
that this is a series with regular stuff coming out.
And we also really want to encourage people to be there
on the YouTube channel when the video goes live,
and like, taking part in the chat and things like that.
And so this is a great way for us to try and build that up,
is to treat it like an event, even though like,
technically it's a video being uploaded to YouTube,
but it will feel more like an event,
if there's a bunch of people all there
to experience it together, you know?
So for this one, at first I tried using the video card
just like it appeared on the homepage, right?
This was the style that it appeared in, in the carousel.
If I just go up and find that and show you.
But I felt like it was kind of just, I don't know,
it looked like too much to be on a page.
It just, it didn't look super engaging
just to see play button after play button.
Obviously, you know, it'd probably be better
if it wasn't all literally the same person,
as it is in my design.
But still, I felt like this wasn't gonna work
for the scenario, that it was good for the carousel,
but not so much for this grid.
I borrowed styling from this idea of the "Up Next" card.
So I had the image at the side there
with the text and the "Watch the Session" at the side.
I think this is better,
'cause it means that the play button, you know
won't be covering the person's face.
You'll always be able to see the person there at the side.
I tried something slightly different as well,
but in the end decided that I didn't want to introduce
like a third pattern of a card.
I was already sort of going off-book
by introducing yet another one.
So yeah, this is what I ended up with,
is this style of a card for the live sessions
on the "All Sessions" page with the "Up Next" one
being the same green that it is on the homepage,
so it sort of- yeah, establishing that as a pattern.
This "Watch the Session" link on these cards
is also a repeated pattern from the homepage
from these sections here, where I had the little call-outs.
So yeah, that's really what I've found to be the case
when you're designing a new site,
is you take it page-by-page
and establish patterns as you go.
And anytime you come to doing something,
you ask yourself, "Okay, does this pattern already exist
in what I've designed before?
Can I borrow from that?
Or am I gonna need to create something new?"
I've often had people ask me actually as a smaller aside,
if I create the style guide before I create the design?
And I don't, I definitely create the brand of this
before I created the design, 'cause I want it to know
what color palette I was working with,
and the overall like, design style for this project.
But the patterns, you know, the design patterns
like these video cards, the sharing piece, the navigation,
this is all stuff that I figured out as I went.
Whereas if I had just decided at the start,
"Okay this is what a button has to look like on my site,"
and just forced myself to use that everywhere,
it perhaps wouldn't have worked out so well, you know,
like when I came to needing things
like this "icon plus text" style,
rather than all of them being a yellow button.
So yeah, it's a thing that you figure out as you go along.
Moving on, the last page that is part of the site
is the "Schedule" page.
So this is gonna be the dedicated place to go
to always find out what's coming up next
on Creator Sessions.
And again, I've used similar styling to the "Up Next" card
that you see here and that you saw on the homepage,
but it's a different orientation.
Is that the word? (laughs)
Different orientation, it's stacked
rather than side-by-side.
It's just taking up more space on the page as well.
And then down here, you'll be able to see even more
of what's coming up next again, using that similar styling.
And then down here is a place for us to write a bit
about Creator Sessions, and about Haley,
my wonderful teammate who hosts it.
There's always gonna be a link
to see all of the sessions as well.
I decided not to have a separate "About" page for this,
because I kind of felt like the schedule
and that idea of like, "There is a lineup,
there's always something coming next,"
is a big part of what Creator Sessions is about.
Instead, like we've linked to the "About" section
in the footer, and it'll link to this,
like an anchor link at this part on the page,
rather than on a separate page itself.
That was the thinking behind that.
You may have noticed here that all of these designs
are pretty much for desktop.
I haven't done a full, complete design for mobile,
but I did do a wireframe for it,
so you can sort of see what my wireframe was in here.
Just, you know, the gray box style.
But I'm building the site myself in Webflow.
I kind of have an idea in my head of how things are gonna go
when they shrink to mobile, and it's a thing
that I'm gonna sort of design in the browser
as it's laid out, because Webflow is built desktop-first.
And so, you know, it makes sense to design that way as well.
I'm really excited about this project.
I'm really proud of the design.
I think it's super different to a lot of the other things
that I've designed in the past.
I especially love this whole like "Homepage Hero" section,
and I'm hopeful it's gonna become
like a really cool destination for Creator Sessions.
It's such a cool project that Haley started,
and I hope that the site will give it
its well-deserved online home,
and just become the hub for this project.
Yeah, I'm excited to see how it grows
as a brand in its own right over the next wee while, too.
Hope you enjoyed seeing this walkthrough,
hearing about my design decisions.
I actually streamed the whole design process for the site
over on Twitch.
So if you'd like to watch the replays
of those videos to see the full process
like, in all the detail, then I'll leave a link below
to where you can watch replays of those
on a separate YouTube channel.
But a benefit of streaming this process,
is I can actually answer the question
that I know some people have already typed in the comments
'cause I get it on every design project that I share.
People wanna know how many hours it took me.
So I know that all up, this was about seven hours
of design time, but that was spread
across three different sessions, three different days.
So keep that in mind.
Seven hours seems pretty short to me, I'm surprised.
I thought it would be longer, but I suppose it was
because I had a really clear vision for this project,
right from the start, and a lot of the experimentation
was in the design of the homepage.
And then from there, everything else flowed fairly easily.
Hope you enjoyed this or if it was useful to you,
if you've got questions, please feel free to leave them
down below in the comments.
And I'm looking forward to sharing this live site
with you very, very soon.
So thanks for watching.
Have a good day and I'll see you in the next video.
Bye.
(rhythmic dance music)