馃攳
Designing a website - Episode 1: Planning & site map! - YouTube
Channel: CharliMarieTV
[0]
- Hello, everyone, and
welcome to a new series
[2]
on my YouTube channel.
[3]
This series is going to be
documenting the process of me
[7]
redesigning, rebuilding my website from
[9]
the very start to the
very end when it launches.
[12]
I did originally think about
doing this all in one video
[15]
just as like an overview
of how I built it,
[17]
at the end, when eventually
that happens, but
[20]
I feel like I'm going to be able to
[21]
show you more of my process along the way
[23]
if I'm doing this video in chunks for like
[25]
each part of the process.
[26]
You're gonna be able to see more in-depth
[28]
how I work, and, yeah,
just get more of that
[30]
behind-the-scenes, and
hopefully more learning
[32]
as well, so.
[33]
I hope that sounds good to you.
[34]
In today's video, the first in the series,
[36]
we're gonna dive in
with the planning phase.
[38]
Planning the site map, planning what pages
[40]
I need to design.
[41]
This is a really important
part of the process.
[42]
It's maybe not the funnest
part of the process
[45]
cause it's not when you're,
like, arranging pixels
[48]
on the page and doing cool designs.
[49]
It's a lot of the thinking
and the planning that goes
[51]
into it, beforehand.
[52]
Before you get to those stages, but
[54]
I think it's just as
important, and it's just as
[56]
important for you to
see, so, I'm excited to
[59]
plan along with you today.
[60]
I've got my iPad, got my Apple Pencil, and
[62]
let's get going.
[70]
First off, let's take a
look at my current website
[72]
as it stands, I guess?
[74]
So this was designed back in...
[76]
I can't remember now if
it was 2014 or 2015, but
[78]
I just know that it was a while ago.
[80]
And
[81]
so the design needs some updating.
[82]
I've changed my branding
since then, slightly,
[85]
and also this website just doesn't really
[87]
fit to my needs anymore?
[89]
It doesn't really fit what
I need from a website?
[91]
I used to write pretty
regularly on a blog, as well,
[93]
on my old website.
[95]
Not in the past year or so,
but, before then, I was.
[97]
I've decided that I'm not going to be
[99]
porting this blog over to my new website.
[101]
Which, by the way, I'm gonna
be building in Webflow.
[104]
I guess it's more of a
visual way to build a website
[106]
so you don't actually need to
[107]
know how to code it from scratch
[109]
to be able to make it in Webflow.
[110]
And they have a really great CMS as well,
[112]
it seems really powerful, so,
[113]
I'm excited to try that out.
[114]
My current website is built
in WordPress, and they
[117]
do have a way that you
can, like, bring all your
[118]
WordPress posts over to Webflow, but,
[121]
I've just decided I'm not gonna bother.
[122]
I'm gonna, like, leave those in the past.
[124]
There is a couple of posts
that I might transport over to
[127]
my new blog that I'm gonna
do, which I'll get into
[129]
in a second, but yeah.
[130]
For the most part, this
site is going to be
[133]
completely revamped.
[134]
I want my new site to be a
little bit more flexible.
[136]
I want it to do a few
more things, as well.
[138]
The first thing is I want
it to be my content hub.
[141]
This was kind of my idea
for the previous one,
[143]
but it didn't really turn out that way.
[144]
It was mostly just the blog posts and
[146]
links to my latest on the home page, but
[150]
I want to be able to
have my videos on there,
[152]
podcasts on there, blog posts on there,
[155]
and all be searchable
together so that if you
[158]
want to learn about a certain topic,
[159]
I will be able to have a
page for that with like,
[161]
this video, this blog
post, oh and this podcast
[163]
that you should listen to, on the topic.
[165]
So yeah, the first thing
is bringing all my content
[167]
together, cause right now it
is just all separated out.
[169]
The second thing is, obviously,
because I'm a designer,
[171]
I need to have my portfolio on my website,
[174]
and it's not only my design
work that I want to have
[176]
a new portfolio, I also want to have
[178]
like a speaker's page.
[180]
Like a portfolio of my public
speaking and workshop efforts
[182]
to try and attract more of that.
[184]
I am also planning on
starting to blog again,
[186]
as I alluded to before, but this time
[188]
on a slightly different topic.
[189]
I really want to write about
[191]
the behind-the-scenes of my business.
[192]
So, posts about, like,
[194]
what it's like to start up an LLC,
[196]
and working with an accountant,
[197]
income reports, perhaps,
something I'm thinking of doing.
[199]
These things I feel don't
particularly fit with my
[202]
YouTube channel, which
is more design-focused,
[204]
but they're still things
I want to put out there.
[205]
So, I feel like writing about
them will be a good fit.
[208]
So that will go on my new website.
[210]
And then, lastly, eventually
I want to bring a store
[213]
into this website.
[214]
Right now, my online store
is on a separate platform.
[217]
It's a completely
different brand, as well,
[218]
but, in the future I want
to bring that in, and,
[220]
have it all in one space.
[222]
I'm not going to worry
about that for now, however.
[224]
So, we're just gonna focus
on, yeah, the content
[226]
and portfolio side of things.
[228]
So, with that in mind,
let's start planning.
[230]
And the first thing I'm gonna do is
[231]
write down on this page,
actually, I'm gonna write
[234]
content
[235]
or
[235]
hire me.
[237]
Cause this is the two
frames of mind of, like,
[239]
what people are looking to do
when they come to my website,
[241]
as I see it.
[242]
They're either looking for
content, to learn about
[244]
something from me, or they're, like,
[246]
interested in hiring
me for a certain thing.
[248]
With those in mind, let's start planning
[250]
what pages I'm gonna
need as part of the site.
[253]
The first one is obviously a home page.
[255]
I feel like I'm gonna
want a page that's, like,
[256]
a content hub.
[258]
So I'm just gonna write content.
[259]
That'll be,
[260]
perhaps that'll be some
categories listed, and like,
[262]
suggested to you.
[263]
Almost like the playlist that I have
[265]
on my YouTube channel, but instead of just
[266]
being videos, there'll be
blogs and podcasts as well.
[269]
And then, as part of content,
I'm also going to need
[272]
three different templates, basically.
[274]
I'm going to need
[275]
audio, video, and written.
[278]
I'm sure you're wondering right now
[279]
how I became a designer when I can't even
[280]
draw a box neatly, but, hey.
[282]
That's how it works.
[283]
I'm also going to need my portfolio.
[286]
And in that I'm going to
[288]
have, like, an
[290]
individual project.
[291]
Obviously I'm going to need
a template for that, as well.
[293]
Gonna add my speaking page in here as well
[296]
that I mentioned.
[297]
Then there'll be the basics,
that's like, an about page,
[301]
and a contact page, too, probably.
[304]
Actually, as part of contact,
it would be a good idea
[306]
for me to have a form on
my website for my portfolio
[309]
review series I think.
[311]
Right now my instructions
are for you to email me
[313]
with a specific subject
line and include the
[315]
information, you know,
in order for me to review
[317]
your portfolio in that
series that I do on YouTube?
[320]
But, not everyone uses
the right subject line,
[321]
so it doesn't go into,
like, the right folder
[323]
in my inbox, and not everyone
gives all the information
[326]
that I need as well.
[327]
So, I think having some
sort of form on my website,
[329]
where you can just fill in
your details and submit that,
[331]
will make the whole process a lot easier
[333]
for everyone involved.
[334]
A page that's quite
highly-visited on my website
[336]
at the moment, thanks to a
video that's quite popular is
[339]
where you can download
my screen printing guide.
[341]
Basically it just has the video and a form
[344]
and that's where you get
the guide sent to you.
[346]
So a lot of people come
over from that video.
[348]
I thought about having that
page as part of this new
[352]
website, but what I think
I'm actually going to do
[354]
is have screen printing as a
category in my content, here,
[358]
so it'll be, like, part of this?
[361]
And, that way the form
will be on that page
[363]
for you to download, and
also see any, like, videos
[366]
or blog posts, or
whatever that I've written
[367]
about screen printing too.
[368]
So, actually, as part of this,
[370]
kind of in between here,
I should also put...
[374]
I'm just gonna add it next to it anyway.
[376]
Like a category page?
[377]
Content page is, like, the
home of all the content,
[380]
and then a category page
[381]
is that playlist, I think, where it's the
[384]
audio, video, written.
[385]
Thinking more about
this contact page, too.
[387]
I think I'm also going to have, like,
[390]
a freelance form submission, so,
[393]
if there's a project that
you're interested in me
[395]
working on with you, you can
fill this out with, like,
[397]
information about the project.
[398]
I'm also going to want,
like, a plain page template
[402]
that I can pull out whenever
I need to for giveaways.
[404]
This is something that I like to do
[406]
in the middle of logs, every now and then,
[408]
it's just, throw up a giveaway.
[409]
And to do that, I get
people to fill in a form
[412]
so that I can, like, pick the
winner randomly from there.
[414]
So, yeah.
[415]
Plain page that I can just
[417]
duplicate whenever and make a new giveaway
[419]
will be really helpful.
[420]
Thinking about what else
is on my current website
[422]
that I might want to bring over.
[423]
The only page that I really
am not considering, here,
[426]
and not adding in, is my newsletter page.
[429]
So, I just have a page
[431]
about signing up for my newsletter.
[433]
I don't think I'm gonna do that, because,
[434]
to be honest, I haven't been super regular
[436]
with sending out a newsletter, lately, and
[438]
I think instead of having newsletters,
[441]
like, the reason for people to sign up,
[444]
I instead would rather have
[445]
a form on each content category page
[448]
that they can fill in
there to get a certain,
[450]
I don't know, PDF opt-in,
something or other
[452]
that I'll create.
[453]
And then they'll, they
can get emails about
[456]
that particular topic, in general,
[458]
and they'll also be added to my list,
[459]
if I do send a newsletter.
[461]
I think that'll be a better
way of going about it
[463]
than having a dedicated newsletter page.
[465]
I think I should really move this.
[466]
I don't know how to
move things in this app,
[467]
so I'm just gonna erase
it and write it again.
[469]
But I think home should be
seen as above all of these
[473]
other things.
[474]
Because my home page will
be the hub of everything.
[476]
Perhaps some things won't
be connected to home,
[478]
like, I'm gonna, actually
remove giveaways from that.
[481]
But, everything else, I think, will be
[484]
coming from the home
page, and the home page
[485]
will be designed to lead
you into the right thing.
[488]
With these two things
in mind, in particular:
[491]
content, or hiring me, as
[493]
the main thing that you're looking for.
[494]
So that'll be the first
decision that I make
[496]
someone make.
[497]
(laughs) Make someone make when they
[499]
come onto this page.
[500]
It's kind of like
[500]
this is the content stuff,
this is the hiring me stuff,
[504]
and these two pages are
kind of fitting with both.
[506]
Now this seems like a lot of work, right?
[508]
Like that's a lot of pages
that I need to design.
[511]
So, to start with,
[512]
to stop me from getting overwhelmed,
[514]
first I'm actually going to just do
[516]
an MVP
[518]
of my homepage.
[519]
So it won't have all of these sub pages.
[521]
It will just be a homepage that
links off to various things.
[524]
So, it needs to link off to my YouTube,
[528]
social media,
[529]
I think I won't have a
contact form even on it,
[532]
to start with, I'll just have my
[533]
email address, bio, and, maybe in place of
[537]
building out a full
portfolio, I'm going to
[540]
have a link to my Dribbble on there
[543]
and I will make sure I
update that a little bit,
[545]
cause that's also something
I don't do very often.
[547]
So this way, people will
get access to my content,
[549]
they will know how to contact me,
[551]
they will learn a bit about me,
[552]
and see a bit of my work.
[554]
But without me having to
put in all the work of
[556]
doing all these extra pages, just yet.
[558]
So that means I can get my new site, like,
[560]
up and running.
[561]
In designing this page,
I guess I'll be able to
[563]
develop a design system for
it, and kind of like a brand
[566]
for my website as well
that'll make it easier to
[568]
design these other pages.
[570]
And, just in general, I
think it'll be a good start
[572]
to the project.
[573]
(laughs) So that is my very
messy plan for my website.
[576]
It's pretty simple,
[577]
but, it's really good to
do this thinking about
[579]
what you might need, rather than
[581]
getting halfway through,
like, starting and then
[583]
you know, the project
keeps expanding from there.
[585]
Especially this piece of figuring out
[587]
what people are going to
be coming to your site for,
[589]
I think is really important to get down.
[591]
So, if you have a website
project that you're working on,
[594]
I really encourage you
to do this step first,
[596]
just to figure out exactly
what pages are needed.
[598]
If you're working with a
client, you're gonna need
[600]
to do this, anyway, to
scope out the project
[602]
and how much design work is
gonna be involved for you.
[605]
But it also just really
helps me to see it,
[606]
and to know what work is coming,
[608]
and I'll be able to, like,
[609]
tackle these section-by-section, I think.
[612]
Hope you found this
interesting to see, anyway,
[613]
and that was useful in some way to you.
[616]
And that you're excited,
too, about this new
[617]
series of mine, redesigning my website.
[619]
I'm very excited about it, and I've
[621]
been talking about it for a long time,
[622]
and I think that making videos about it
[624]
is going to actually, finally, help me
[626]
get it done, because I'm gonna have you
[627]
to keep me accountable.
[629]
All right? (giggles)
[629]
That's it for now.
[630]
Give it a thumbs up if you enjoyed it.
[631]
Thanks for watching, and,
I'll see you in the next one.
[634]
And, I guess the next video will be
[636]
the wireframing and possibly design
[638]
of this MVP homepage.
[640]
So, looking forward to seeing you then.
[642]
Bye.
Most Recent Videos:
You can go back to the homepage right here: Homepage