- Hey designers, I am finally back
with another video in this personal website redesign series.
I kicked this series off about two years ago,
where I made what I called an MVP,
like temporary homepage for my site,
and that temporary homepage ended up lasting
for two whole years, until I got around
to designing an actual proper homepage
that showcased my content in a way
that I was really proud of.
But, I finally made the time for it the other weekend,
and I have a new homepage all designed,
so I wanna walk you through my design process
for this new homepage, show you some decisions that I made
and yeah, show you the final product.
Then in the next video in this series,
which will be coming very soon,
I won't make you have a big long wait
for the next one again, I promise,
I'll be showing you how I built out
this homepage design in Webflow.
So let's get into my design process
for my new personal website homepage.
(upbeat music)
So I started this design process like I do
for pretty much any design project that I work on,
and that is using the app Concepts on my iPad,
using my Apple pencil to just sketch some wireframes.
So here is just a quick look at some of the ideas
that I was sketching.
Don't worry if you don't understand them.
Wireframes are really just for me to understand.
But I was thinking about things like bringing in
my navigation sidebar that I have on my blog,
bringing that onto the homepage.
Thinking about some overlapping things,
like a block overlapping the header section.
Thinking about leading with my content.
I really want my homepage to be a hub for my content.
Because I'm not searching for job
and not searching for freelance clients,
the point of my website is to show people what I do,
what I'm working on, and get them to read my posts,
watch my videos, that sort of thing.
So leading with this Read, Watch, Listen idea
of showing the latest pieces of all of my content.
That's like the idea that I was coming out with
while wireframing.
So, let's take a look at some more understandable
versions of this design, 'cause after wireframing
I moved over to Figma to mock some things up,
and I recorded my screen throughout the whole time
I was designing, so I thought I'd just
walk you through this and point out
some of the decisions that I was making.
Let's go.
Okay, so I started off by bringing over my footer
from my blog design file, 'cause I knew that I wanted
that to be at the bottom of the page.
And then keeping within the same, like,
I guess, design system, (laughs) made for my website,
with these blog cards, I thought that I could have
a few of them in a row on the homepage, perhaps.
Then bringing over the sidebar that I mentioned
in the wireframe, I wanna just try out having it there.
So yeah, just making use of elements
that I've already created before.
And here's where I started trying out
a photo background for the header,
because I thought that could look quite cool.
This is a personal site, why not lead with
a giant picture of myself, I guess,
was my thinking there.
So I decided I didn't really like this
three blog posts beside each other thing,
and thought that maybe I would do an overlapping thing
with the intro instead.
Like I knew I wanted something to overlap
on the header space, right.
Here I'm just making use of Figma's inbuilt
photo editing things to make some changes there.
Decided that the intro overlapping was not the go,
and that that's where I should actually
put the blog post instead.
You can see here it's quite quick to mock things up
because I have some type styles and everything
saved in Figma.
Here I'm changing the color of the image
just to try and make it blend better.
I wasn't loving the look of this full page image
because I got really used to the nice purple background
of my current homepage, and even though I don't want that
single homepage anymore, I do still like
that block color field.
So yeah, that was me trying to just bring
a little bit of that in.
Yeah, this is looking quite good though.
I was quite happy with this.
So moved on for now to the rest of the page
and thought I'd just like sit and think
on that header section a little more.
I did some writing before I got onto designing.
I wrote the copy for my homepage,
so I knew that I wanted to have this
thoughts on design business and side projects
as the heading, for example of the blog section.
This might be really confusing
me switching back and forth between files here,
but basically I'm stealing things (laughs)
from files that I've designed before.
And here I'm just getting a screenshot
of a video to bring into the page.
I really wanted to have my latest videos displayed here,
and at this stage, I wasn't exactly sure
how I would make that happen, like if I'd have to
do it manually or something, I don't know,
but that's what I wanted to try.
Spoiler alert, I did throw it away,
so that will come in the building video.
This part here I was trying to,
like I thought maybe I could have links to things
within a sentence, kind of like I have
on my current homepage.
Trying to bring in some of the block color again
to get that feel back to it.
Wasn't completely loving it though, so I don't know,
here I'm just trying things out really.
When in doubt, add a little pink divider line. (laughs)
The sentence thing wasn't working 'cause I felt like
it wasn't super clear that those were links,
and I think it worked on my current homepage
because it was the only thing on the page, right,
so you were forced to read that sentence,
but yeah I worried that things were gonna get lost here.
Here I'm using Noun Project to fetch some icons,
I've got a subscription to it, and it's super great.
You can use all the icons in your project
when you've got a subscription,
and the subscription is very reasonably priced.
So I'll leave a link to that in the description
if you wanna check it out.
So I've got these little icons for things,
and sometimes I end up, what I'm doing here with the book
is just adding a stroke to it to get it
to look the same thickness as the other icons,
because they're not all from the same set,
but I do want them to look cohesive, right.
So that's what I was doing there.
I thought instead of the sentence,
I could have these things split apart like this,
and then quickly decided that instead
I should go with the same header body copy style
that I'd used for the video and blog post above.
I really should have made a component for my buttons.
I'm not why I haven't done that yet. (laughs)
Here's me trying to decide if this should be
in a separate block or if it should be
grouped in with this content,
because we can group things in design
with the background that they're on.
Once you start a different background,
it sort of starts a new section.
And here I came up with this idea of,
it's like bring the overlapping feeling
that I have on the header with blog post on it,
bring that down to use these boxes in this way.
Here's me deciding if I want to do links or buttons,
and trying to bring some of that overlappingness to it.
Trying out a gray background for this
to see if I like the look of that better.
Or maybe I want a white on a gray background, I don't know.
This is what design is for me most of the time,
just duplicating things and changing colors slightly
to decide what gives the right feel.
Here I wondered if I should just have the icons
and not have a little clarifier for these ones,
and ultimately decided that I didn't really like
how they looked, (laughs)
so I went back to the idea of the buttons.
And this is where I also had the idea
to bring in more colors.
Until then, I'd really just been using
my brand color purple, but for my blog posts,
I have a different color card behind it
for different categories,
and so, yeah, I thought maybe I should be
bringing in the other colors to my site more
just to make it more fun, and also to just
bring the brand in.
Here I decided I definitely did like the labels
being next to the icons here to match in
with everything else.
And to show my work, I decided that I'm gonna bring in
some dribble posts.
So this is me laying out some dribble shots recently
to put this in.
(slow jazz music)
Deciding that I like it all on the same block color
gray background, and that I should treat my work
similarly to how I've treated the content above,
so bringing in a little icon in order to do that.
And then I decided that actually I should
move the work further up and have that,
my blog, video, and work, as the three main blocks,
and then have this Podcast, Speaking and Book
as just before the footer as sort of,
like lesser importance on the page.
Now I'm going back to working on the header
because I still wasn't quite happy with it.
So I thought maybe I'd try a photo at the side.
Remember, that was one of my wireframes,
thought I'd just give it a go.
Then it wasn't looking quite right,
so I thought maybe it needs to be in sort of,
blended into the header more,
not taking up an exact half.
Dunno.
But that wasn't feeling right,
because then I couldn't really do the overlapping.
It was all feeling a bit too blocky, in a way.
So instead, I decided to move everything down a bit,
and try have the photo overlapping the header
instead of the blog post.
That started feeling a little bit better,
and I went through a few different photo options for it.
I did a photo shoot with my friend John,
when I still lived in London, so that's what
all these photos are from.
And ultimately decided that I liked this one best. (laughs)
Thought I'd bring in the box outline thing
into the header section as well.
And I'm trying different colors,
ultimately deciding on the purple
because just love purple.
And that's the design I ended up with.
So let me just show you in depth a little bit slower
through the page and point out some things
in case that speed designing was a little bit too fast.
Okay, so this is the design I ended up with.
I changed this to a dark color to match better
with this divider line on the menu.
I've got the menu at the side,
which is how it appears on my blog,
which is probably one of my favorite parts of my website
before I added this homepage.
I really like having this sidebar that sort of like
shrinks up as you scroll down the page
and goes to looking like this.
So bringing that idea over to the homepage
so that my menu is always gonna be in the same place,
which is just good UX and makes a lot of sense.
So, yeah, menu's over here and you'll expand that
and the menu items will drop down.
But I decided I wanted to have it closed to start with,
because I want to encourage people to scroll the homepage
rather than jump straight to my About page,
which at this stage, is a lot more boring.
I feel like you get a better sense of who I am
and what I'm about by actually
scrolling the homepage instead.
So keeping the menu closed encourages that
a little bit more.
Got a photo of me so you can see who the heck I am.
It is my website, after all.
And this is my blog section.
Then I had my video section, so mimicking the card style
with the offset background card here
on the YouTube video as well, and I thought that I'd
play around with these when I came to
actually what color they should be
once I saw the actual thumbnails in it.
Then there's my work.
Again using an overlappy style,
but a little bit different from the cards,
just because I'm wanting to show four pieces of work
rather than just two as I had for the blog and videos.
And I alternated colors here of the pink,
the green, and the purple,
bringing my brand colors through.
And then at the bottom, I've just got this block
with my podcast, speaking and book.
I really like the consistency in the titling here,
the on the mic, on stage, on paper.
I thought that was quite nice, and there,
yep, these icons with this little header
really do explain what it's about
without you having too read to in depth into it.
I think the copy is actually really important
in this design.
Things like, instead of having the heading saying My Work,
the heading for the work section says,
I'm the Marketing Design Lead at ConvertKit,
so you get more of an understanding
just from skimming the headings.
Skimming this one, you can see,
okay, I'm really transparent, I'm like, you know,
sharing bits about my life on video.
Even if you didn't know my channel,
then just seeing this copy here gives you an idea.
And then, yeah, you know what sort of topics
you're gonna find on my blog,
just from reading this headline,
which is more useful than it just saying Blog, you know.
And then ended with my footer.
There's a bunch of extra space down here,
but this is the same footer that I had on my blog as well,
so I decided not to bother redesigning this,
I like it how it is.
It gives people a chance to sign up to my email list,
which makes sense to have at the bottom of the page,
along with links to all of my social stuff.
Now what I didn't do in Figma was design out
the tablet and mobile version, which I usually do
on projects for work, and that is because
I knew that I was gonna be the one building this,
and I know how stuff breaks down in Webflow,
and that Webflow kind of is desktop first,
not mobile first, so it makes sense for me
to be designing desktop first, if that makes sense.
So I just decided that, I had it in my mind
what I thought I would do for mobile,
and that I was just gonna figure the rest out
when it came to seeing how that formed.
That's something that I tend to do
when I'm designing for myself.
So yeah, that is my homepage.
I suppose some advice I would give for you
when you come to designing your own homepage
for your personal website is, first of all,
what is the first thing you want someone
to know about you, what first impression
do you want to give?
That's why I had, "Hi I'm Charlie, I'm a designer"
as my headline, and then this little blurb here,
because that's the thing that I want people
to know right away, and if they don't scroll
any further than that or whatever,
then at least that's what they know.
Also deciding what the purpose of your homepage is.
So for a lot of you, that might be to get work.
So your work is gonna be front and center on your homepage,
your process, things that are gonna tell an employer,
potential employer, how you work
and why you'd be good to hire as a designer.
In my case, like I said, my goal was to showcase
my content, to get people consuming my content
for like a better word, I suppose,
and so that's why I led with not only the fact
that I have a blog and a YouTube channel, whatever,
but I also had examples of the latest content there.
So the idea is that my homepage is constantly updated
whenever I'm publishing new things.
That keeps it fresh and it's always the place to go
to get the latest of whatever content
you're looking for from me.
I hope you enjoyed seeing my design process,
and the decisions that I made as I was putting
this homepage together, and you know,
all the little things that went into it.
In the next video, like I said,
I'll be showing you how I build out this page
using Webflow.
So stay tuned for that.
If you've got any questions about my process,
anything that I didn't cover or went by too quickly
because of this whole speed designing thing,
then please feel free to ask down below in the comments.
I'd be really happy to answer.
But yeah, good luck with the design of your own homepage,
if that's why you're watching this,
if that's what you're working on.
Maybe you can have some fun with it,
it doesn't always just have to be a grid of your work.
There's other things we can do.
So, yep, thanks for watching.
Hope you have a good day, and I'll see you
in the next video.
Bye.
(upbeat music)