- Hey everyone, welcome back to a new video
in my Website Redesign Series.
I know, I know it's been a while since the last one.
Anyway, the last video that you saw in the series
was me doing the Wire Framing for my blog.
I was, yeah, Wire Framing,
figuring out some different layout ideas I had
and what content I wanted to be on the blog pages.
And today, I'm gonna show you the high fidelity design
and the process that I went through there
and like refining it, deciding on it,
settling on exactly what I wanted my blog to look like.
And then, also, show you a few things about the build,
I built it out in Webflow using Webflow CMS.
I played with the Webflow interactions
for kinda the first time and had a good time figuring out
some cool little interactive things on my site
that I'm excited to show you.
So, that's it.
Let's dive in to Figma and I'll show you my design process.
(upbeat music)
All right, so, if you remember for my Wire Framing video,
the two main layout ideas that I had, one was centered
and then one had a sidebar on the left.
And both of these were minimal in the amount
of elements on the page and content in the design,
'cause I wanted to focus mostly on the writing
because it is a blog after all.
So, I first dive into Figma
and started playing around with the centered idea,
having the text and a form and little bio at the bottom.
Went into trying out the sidebar idea
and what I wasn't liking about either of these designs
is the fact that they looked so plain and white.
Like, I wanted a minimal feel
but I love my home page on my website,
the bright purple background,
I wanted to bring more color into my site.
'Cause in general that something I struggle with
in design is embracing color, like, a lot of color.
So, this is what I try to do.
So instead, I decided to put a color block behind my sidebar
and that was working out quite well,
sort of ties in nicely with my one pager,
as you can see here.
So that's what I ran with.
I think this one here was actually the final design.
As you can see, when I design, I just duplicate artboards
a whole bunch of times and work on one thing at once.
Like, the footer wasn't worked on for a while
but yeah, this was the footer in here
that I went with in the end.
So, my concepts, let me just move this,
I was measuring something.
(laughing)
We also have this purple sidebar
and I thought that maybe when you scroll down,
it could shrink up to be
this little block that you see here,
so that's what this design is showing.
And I like the idea of having my blog posts
on a card with a colorful block behind it
and my idea was that the color would match the category
that the blog post was in, like a main category.
So yeah, I tried out a few different things with a sidebar.
Like having no color, having it fixed to the side
and a block of color.
But in the end, I decided that this
colorful block sitting there
would be the best thing for me
and that would change too depending on the category
of the blog and that that would have form at the end.
I decided to have a bright purple footer just to, again,
relate back to the home page
and little cards relating to each blog post.
I also tried the sidebar over on the right
because I think that is the traditional place
for a sidebar on a blog.
But yeah, just didn't like it as much.
My sidebar is acting as the navigation,
whereas, I think usually,
a blog sidebar on the right has a bio and...
I don't know, some people put ads in them and things,
that's obviously not something I'm doing on my site.
So, yeah, this design here was
what I settled on for my blog homepage,
and then on the blog posts themselves,
it'll have the same sidebar
but it will change color depending on the category.
And then, in the footer on the blog page,
instead of a form since there's a forum right here
at the end of a blog post.
If you remember from my Wire Framing video,
I wanted to have the ability to
if I, for example, create a free downloadable PDF
or something, or if there's a specific project
that I talked about in the blog post
that you might want to get updates on,
I'm gonna put in a form,
a ConvertKit form for that thing in the blog post.
So I thought it made more sense to have it here
than in the footer, like, on the home page.
I really shoulda put these designs next to each other.
Because this is a site-wide thing and it doesn't seem,
if I'd have this on the blog post page,
it wouldn't have felt quite as related to the post itself.
So, in this design,
this form is much more related to the blog post
because it's up here, right underneath it in the content.
That freed up my footer space to put stuff
that wasn't particularly right into that blog post
which I figured was links to other blog posts.
What else did I try that I can show you?
Oh yeah, I thought maybe that this could change color
as you scroll down, that could be kind of cool,
some sort of fading thing,
just like I have my pink to purple gradient
on the home page but in the end,
I decided that sending the color
based on the color of the category would be cooler
and a bit more cohesive, so that's what I went with.
Yeah, I also tried this little sub footer thing
but decided I didn't really like that
and I liked my cards idea better.
So that's the design in a nutshell,
I didn't go through a super long design process
with it for two reasons.
Firstly, I'd already done a lot of Wire Framing
and figured out my ideas there of what I wanted to work on.
So, yeah, it didn't have to be super long.
The second reason is I just didn't wanna
spend too long on this,
I probably could have gone through and iterated
and spent a lot more time
trying some more completely different ideas
which is what I usually like to do in my design process
but yeah, at this stage,
it's been a while, just wanted to get my blog up,
so I kinda just went for it.
And I'm really happy with what I came up with too,
it was just one of those good days
when the design actually works out.
Anyway, let's jump into Webflow now
and I'll show you what this looks like as the finished site
and some of the cool parts of the build behind it.
So here is my finished web site, as you can see,
pretty much looks like the design, just a lot shorter.
'Cause I only have two blog posts up
at the time of writing this.
And before I get into showing it to you,
like what it looks like in real life,
I wanna show you how I've got things set up in the CMS,
the fields and things that I used.
So I have two CMS collections in Webflow for my blog,
one for posts and one for topics,
that's like my blog categories.
What I found really good about working with the Webflow CMS
has been just adding whatever the heck fields that you want
and then being able to work with them
later for certain things.
So for my blog posts, this is a list of what I have,
got the name, got the topic
and this references that topic field,
so that's connected.
I put in a summary, so that's what appears on my card.
There's a space to put in a ConvertKit form.
This field here I actually haven't ended up using it,
I haven't implemented some social sharing on the blog yet,
I just wanted to get it out.
So that'll come in the future
but in this field will be used then
we're going to add one for like Facebook as well I guess.
And then, feature this is a switch that I can turn on or off
if I want a feature on my home page.
Right now I just have both blog posts on there,
because there is only two,
but that will come in handy in the future.
Anyway, in the topics CMS collection
this is the fields that I have so there is
a name a description of what the topic is about, and...
This is my favorite part,
is being able to say the color per collection.
'Cause like you saw my designer making use of that
quite heavily throughout, so yeah.
When I was designing I was like,
hoping it would work in the way I intended,
and luckily it did.
Anyway, I've also set a forum per topic,
as well as being on a set one per blog post.
So the way I set it up is that,
if I have set up a specific ConvertKit form
that relates to a blog post I'm writing,
then I can drop the link to that,
in the, you know, this field here in my blog posts,
and it'll appear on the page.
If not though, it'll use the default form for that topic.
Are you following me?
And, I'll show you in a sec how I got that set up.
So yeah, those are my fields.
Two blog posts at the moment.
Let me show you a bit about how it was built.
So with these cards here, feature obviously the title,
the topic, description, and then, like a button to read.
So, all of that comes from the different fields.
It's pretty easy in Webflow just to like,
see here I say, "Get text from blog post,"
and you select which field you want it to get it from.
So, that's how you work with it.
If you wanna know more about that,
about working with Webflow CMS,
I'll link to some like, videos in their University,
which is how I learned how to use it.
This video isn't sponsored by them by the way.
So, these cards, to get this color offset,
but also like, stay the same size as it.
The trick to this, and I had help with Ryan,
who's a brand designer at Webflow, on this,
is you sit this white and this color card
into one div together,
and that is set with a relative position.
And then, this color block is set with an absolute position,
which means you can, like, shift it to the side a little,
and down a little bit with 100% hight and width.
If you don't know code,
then this might all sound like nonsense to you, but yeah...
That's how I did it, and then this white card
is set with a Zed Index that's higher.
And Zed Index basically controls
where in the depth that something goes.
Think of it like your layers panel
in Figma, or Sketch, or whatever.
If you wanna have a layer sitting in front or behind.
So, adding a higher Zed Index forces it to sit on top.
So, that's why this white card sits on top of the pink one.
And then, let me show you
something cool I added here for interaction.
So, I had seen this post here, by Alice Lee.
See as I'm moving my mouse,
this illustration does this amazingly cool thing.
I wanted to do something
with things moving on the page with you're mouse on my blog.
So, what I did is, see as I'm moving my mouse around
these color blocks, very subtly, move with it as well.
Up and down, side to side, whatever.
Really subtle, not as cool as the thing
on Alice's website for sure,
but I just thought it was a really fun touch,
and I was excited to be able to add it,
because that's something that I would have no idea
how to do if I was actually coding.
So, yeah, thought I wanted to make use of that.
For my category page, is if you click on
any of these little, like, pill button things,
you get taken to one.
Says thoughts on, and then the category name
with the description there.
And, yeah, that's the only one I've posted at the moment,
so that's not very exciting.
Let's go into this post,
and I'll show you a few more things.
So, pay attention to my side bar menu,
as I scroll down here.
As I scroll, you get to a point on the page
where the menu shrinks up.
Isn't that exciting?
And then, as you scroll back up, it opens again.
(angelic note)
A couple of things happened there.
So, let me just refresh so I can show you.
So, first off, as I scroll, we'll see
that little descriptor line disappeared and my social icon,
like, profile links, swapped out to this.
Like I talked about in my Wire Framing video
I've decided not to have comments on my blog.
That's just not something
that I want to keep up with essentially.
So, if people wanna talk to me about an article
that I wrote, I would much rather them
just send me a Tweet about it,
so that's what I have put in here.
And then, as you scroll back up,
this Tweet thing stays there still, but you're menu expands
and my little descriptor line comes back,
and then it'll disappear again if I scroll back down.
So it means that, all that stuff is easily accessible,
but it just like, stays outa your way a little bit,
so you can focus more on reading the article, and...
I'm really, really happy with how it turned out.
I was trying a whole bunch of different ways to start with.
Like, I had, two different versions of the menu,
where this one would like, scroll away,
and then, one would like drop in as you scrolled down.
But, this is much nicer I think,
because it feels more fluid, and it feels more...
I don't know, it just feels nicer, right?
I did this by using position sticky on this block here.
So, what that does is it basically,
holds a div in place until you get to the bottom of the,
like, containitive that it's in.
And, I did have to use some custom code for that.
So, see, as I scroll down to this very bottom,
get to the footer, it stops scrolling with me,
so that it doesn't end up overlapping it,
which is, the exact, like, thing that I wanted.
And look, see on this form,
I've also done the card thing here, very fun.
To get this menu scrolly thing working
I used Webflow interactions on page scroll.
So, it looks for, when you scroll down 20% of the page,
it's gonna do the shrink up thing,
then if you scroll up 40%, it does the open thing.
So, it doesn't like, happen immediately.
There's a little bit of a delay there,
which I thought was important, so it's not,
you know, to feel too jarring.
So, let's take a look, just quickly, at what this does.
Basically, with Webflow interactions, you make like,
a time line, and I had to do a lot of playing around
to figure out the best way to do this.
But, the best way to get something to,
like, appear, if you just use this Hide/Show,
which is an option, it's just gonna like, suddenly come in.
'Cause what that one's doing is
going between display none,
which means you don't see the element,
and display bock, which means you do see the element.
There's not something that code
can animate between those two, if that makes sense.
It's either on, or it's not.
There's no in between.
So, I made use of size instead.
So if something has a hight of zero,
that means you can't see it, it doesn't exist.
And, if it animates to a hight of auto,
which is the hight that the block of content wants to be,
because of the things inside it,
then that is a number, like, you can set something to be
zero, 10, 20, 30, whatever.
So, it can animate between the two.
So, that's what worked for me in getting this,
like, accordion, open, close, smooth thing to look nice.
So, this is what I went through.
So, to start with, I turned on the menu button,
but, set it to a hight of zero,
so that, it's on, but it doesn't have a hight,
so can't see it yet.
Then we get into the action.
This one changes to zero,
as you can see it on here, hight of zero.
My sidebar-h3, that's this line here.
That changes to zero,
so that means it will shrink up and disappear.
This one here is my little drop down menu icon.
I'll show you that in the live one.
I've made that turn around depending on
if the menu is open or closed,
just for a bit of fun, 'cause I could.
And yeah, then the menu button opens.
This right here, that's what I was talking about.
So, that's how I got my interaction to work.
Basically just on scroll it does that stuff,
and this purple box will just be the hight
of whatever's inside it, so, as this stuff changes,
the whole purple box changes as well.
I hope that made some form of sense.
Anyway, it was fun to like, figure that out
and to spend a bunch of time in this timeline,
figuring out what, like, how long things should take,
how they should appear and disappear,
like I was talking about.
And yeah, I'm really happy with where I ended up.
Now, I'm gonna show you my thing for the forms.
How I said they swap out on the page.
So, there's really only a few page templates
I had to make to create this blog.
This is just a regular page,
where I dragged in a collection list,
so that means that I can put something on the page,
connect it to my blob posts,
and it'll put the blog posts in there.
Then I can do the thing like I was showing you before
where I get the text from the field on blog posts.
So, here's my form at the end.
And this is the default.
Of what I've called, the general form.
So, if one isn't set this'll show.
And, how I did that, if I come in here,
see, I can set conditional visibility.
So, this is something that I would do in PHP
when I'm coding for the Kumboka website,
but I'm assuming this Java Script or somethin' like that,
I don't actually know how it works on the back end.
But, yeah, basically you can set different conditions
for something to be seen or not.
So, this one says that, "If ConvertKit form,"
which is the field in my blog post,
if that doesn't have anything inside it,
then this will show,
but, I've got this HTML embed here.
If it is set, then they HTML embed will show.
And that embed is, like, yeah,
the link to the ConvertKit form.
As you can see, these don't show in the back end in Webflow,
because they are Java Script
and you can only see them on the live site.
But, yeah, that's what I adjust for.
Then, something else I did for this bit down here,
this is my block, you know, where I'm showing
other blog posts that you can read.
I mostly didn't wanna have the currant one appearing there,
but if I just drag in a list of all the blog posts,
it will show that one.
So, what I've done, is set a filter on it.
So, if blog post is not the current blog post,
then it can be shown on here.
Oo, and something else I just realized that I wanna do,
is set it to, random order as well.
Right now I only have one, so that's not gonna,
like, do much, but...
Yeah, that'll be important for the future.
And, I've set this to only show three items as well.
So that it'll stack, one, two, three, in a row
once I actually have three posts to show.
And how my different, like, color block things work,
with the color changing depending on the blog post,
that sort of thing.
In the settings I can say, get the background color from
blog posts, and then select the topic color field.
So, yeah, pretty easy.
I was a bit disappointed
that I couldn't do that for hover states.
My ideal would have been to have this button here
have a pink background with white text on hover.
Although, I just realized
that I could do a hack around that,
by setting up, like, a different element on top.
Hmm, I might go back and do that,
because I didn't think about that until literally just now.
But, yeah, for now I have this just with, like
a slightly gray background,
so that it does something at least.
So, yeah, that's my blog.
Let me just go into this one, and I'll show you how
this, like, green side bar on the content and creation post.
Yeah, go check it out.
Go play with it for real.
Let me know if you find anything broken
so that I can fix it.
I'm especially proud of this post here,
My 2017/18 Income Report.
This is something I wanna do every year, just...
Yeah, basically talk about the
different sources of income that I had for the year.
So, go and check that out, give it a read,
and Tweet me, let me know what you think.
Alright, so that was a look at my blog design and build.
I know this video was very long,
so thank you if you stuck with me until the end.
I did feel like there was a lot of parts
I had to gloss over thought, even still so...
If you have questions about any of the details,
anything particular, please leave them down
below in the comments, I will for sure
go on there and answer them for you.
I'm so happy to finally have this blog done.
I feel like I got sold with this Website Redesign project
for a very long time, and that, yeah,
having this done has given me my mojo back,
and I've already done a lot more
that I'm excited to show you in future videos.
The next one coming up in this series,
is about the design for my online store.
That was a fun process to go through.
So, yeah, stay tuned for that.
That'll be the next video in the series.
Hope you enjoyed this one.
Give it a thumbs up if you did.
Like I said, questions in the comments.
And, I'll see you in the next video.
Bye.
(upbeat music)