Designing & building my blog! | Episode 4 of Designing a Website

Designing & building my blog! | Episode 4 of Designing a Website

– 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)

30 thoughts on “Designing & building my blog! | Episode 4 of Designing a Website

  1. Hey!

    I'm not familiar enough with your content to know whether this is a default, but could you please keep the browser/app content full-width on the video?
    Don't get me wrong, you have a beautiful face and all (you do!) but in the end "the content is king" and it'd be a better watching experience IMO. There'd still be plenty of space to put the cam somewhere.

    Either way, thanks for uploading! I'm getting into design (branching out from full-stack) myself and really enjoy watching videos like this every now and then. I like the idea with the colored "shadows" behind the blog posts, a small detail that makes things a lot more interesting when you compare the two.

  2. Hi! ? I really enjoyed this episode, to see how you think while designing blog, breakdown its super informative!
    This pop of color is definitely great idea it matches your style very well!
    love the content, keep warm and best wishes!

  3. So as a blog writing tool web flow works just as well as WordPress? I use Elementor Pro, which is a custom drop and and drop element thing for WordPress. Works well but I’m looking for something like WebFlow, where I can learn the coding things, like what certain things do and that, how they work etc etc, but visually. But the one thing that’s stopped me from trying WebFlow and really trying it out is the blog feature. Which I didn’t know it had

  4. Very good video, Charli, like all of them, and nice blog design. I also use webflow and made my site with it and I'm really impressed. I don't know if you noticed, but in your blog the side menu isn't sticky in Safari. I know there are some issues with Safari, but most of all works pretty well. Otherwise, your blog is realy nice – fresh and clean.

  5. Jeez i knew webflow about a year ago but didn't gave it a try (i'm using WordPress).. Now watching you doing this (found your channel about 3 hours ago) makes me want to use Webflow so bad!… Keep showing how to design on figma and webflow, i'm really interested on this, i'm not a Graphic Designer, i'm actually from Computer Science but work (or trying to work) as a freelance web designer living on Venezuela, so learning how to design on these kind of tools is something that i really need right now to take my projects to the next level and give me more freedom before actually start creating the website itself.. Thanks a lot!

  6. Great video!

    Suggestion:-can you pleaaaase do a Webflow to WordPress development tutorial? You made a video a while ago briefly going over that and it sounds so cool!

    Also, what screen capture tool are you using? I love it!

  7. I've seen on your bookmarks website icon, can you give as link to your account? I'm very interesting what music do you listen!

  8. Looks like a clean and like a friendly site to use. It would be interesting to see the traffic flow of the site, compared to a site that perhaps isn’t as refined. But granted YouTube following would be a factor to that.

  9. Hi Charlie, great video as always. I have some suggestions if you don't mind: 1) So I see you have a 3px border-radius on your sidebar but a 5px on your .post-block–white and .post-block–color divs. Why not giving the same 3px border-radius for those too.. 2) It seems there's something wrong with your Averta font on your button as the A and S letters are bigger . 3) You might wanna increase that animation over your post blocks as it's barely visible when you mouse over. 4) You mentioned that you'd like to change the background of that button hover. I never tried webflow but probably you could add a custom css code somewhere? If so you could add something like: .topic-tag:hover { background-color: #be69a4; color: #ffffff; border-color: transparent; }

  10. So great to see your go to tool is Figma. I'm in love with them and open a local community in Israel ( almost 800 people). Love to see your process. Thank you so much for sharing

  11. I really like your design Charlie!
    It is minimalist, colorful (that purple color is very you 😛 ) and goes straight to the point when it comes to finding information. By the way, Webflow is an amazing tool, especially for designers. In my daily work I use WordPress + Elementor that has given me excellent results, especially in advanced topics such as animations with CSS and image's effects like overlay, blur, etc. Regardless of the platform used, creativity and design experience are still an essential factor when working on web projects. Congratulations!

  12. Thanks Charli. I purshased Ran’s Webflow Masterclass and I’m very excited to learn! Also, I like to see your face in the videos and not just the screen 🙂

  13. Please make a video on wix and squarespace , i want to know how much designing capabilities they have plus you are the greatest designer i have never met !

  14. Charlie, it would look nice if you set the sidebar to 100% viewport height (75% to be precise) and to do that you have to remove 64px margin-top of the footer and give that or similar amount to the last-child of the main div and add min-height:75% to the sidebar class. That way sidebar will meet the footer and that will remove the extra white space

  15. I love the final product! I like the way you ended up incorporating the color more simply in the end. Very nice!

Leave a Reply

Your email address will not be published. Required fields are marked *