Planning & site map for Designing a website

 

This series is going to be
documenting the process of me

redesigning, rebuilding my website from

the very start to the
very end when it launches.

I did originally think about
doing this all in one video

just as like an overview
of how I built it,

at the end, when eventually
that happens, but

I feel like I’m going to be able to

show you more of my process along the way

if I’m doing this video in chunks for like

each part of the process.

You’re gonna be able to see more in-depth

how I work, and, yeah,
just get more of that

behind-the-scenes, and
hopefully more learning

as well, so.

I hope that sounds good to you.

In today’s video, the first in the series,

we’re gonna dive in
with the planning phase.

Planning the site map, planning what pages

I need to design.

This is a really important
part of the process.

It’s maybe not the funnest
part of the process

cause it’s not when you’re,
like, arranging pixels

on the page and doing cool designs.

It’s a lot of the thinking
and the planning that goes

into it, beforehand.

Before you get to those stages, but

I think it’s just as
important, and it’s just as

important for you to
see, so, I’m excited to

plan along with you today.

I’ve got my iPad, got my Apple Pencil, and

let’s get going.

First off, let’s take a
look at my current website

as it stands, I guess?

So this was designed back in…

I can’t remember now if
it was 2014 or 2015, but

I just know that it was a while ago.

And

so the design needs some updating.

I’ve changed my branding
since then, slightly,

and also this website just doesn’t really

fit to my needs anymore?

It doesn’t really fit what
I need from a website?

I used to write pretty
regularly on a blog, as well,

on my old website.

Not in the past year or so,
but, before then, I was.

I’ve decided that I’m not going to be

porting this blog over to my new website.

Which, by the way, I’m gonna
be building in Webflow.

I guess it’s more of a
visual way to build a website

so you don’t actually need to

know how to code it from scratch

to be able to make it in Webflow.

And they have a really great CMS as well,

it seems really powerful, so,

I’m excited to try that out.

My current website is built
in WordPress, and they

do have a way that you
can, like, bring all your

WordPress posts over to Webflow, but,

I’ve just decided I’m not gonna bother.

I’m gonna, like, leave those in the past.

There is a couple of posts
that I might transport over to

my new blog that I’m gonna
do, which I’ll get into

in a second, but yeah.

For the most part, this
site is going to be

completely revamped.

I want my new site to be a
little bit more flexible.

I want it to do a few
more things, as well.

The first thing is I want
it to be my content hub.

This was kind of my idea
for the previous one,

but it didn’t really turn out that way.

It was mostly just the blog posts and

links to my latest on the home page, but

I want to be able to
have my videos on there,

podcasts on there, blog posts on there,

and all be searchable
together so that if you

want to learn about a certain topic,

I will be able to have a
page for that with like,

  How To Build A Website in 2021

this video, this blog
post, oh and this podcast

that you should listen to, on the topic.

So yeah, the first thing
is bringing all my content

together, cause right now it
is just all separated out.

The second thing is, obviously,
because I’m a designer,

I need to have my portfolio on my website,

and it’s not only my design
work that I want to have

a new portfolio, I also want to have

like a speaker’s page.

Like a portfolio of my public
speaking and workshop efforts

to try and attract more of that.

I am also planning on
starting to blog again,

as I alluded to before, but this time

on a slightly different topic.

I really want to write about

the behind-the-scenes of my business.

So, posts about, like,

what it’s like to start up an LLC,

and working with an accountant,

income reports, perhaps,
something I’m thinking of doing.

These things I feel don’t
particularly fit with my

YouTube channel, which
is more design-focused,

but they’re still things
I want to put out there.

So, I feel like writing about
them will be a good fit.

So that will go on my new website.

And then, lastly, eventually
I want to bring a store

into this website.

Right now, my online store
is on a separate platform.

It’s a completely
different brand, as well,

but, in the future I want
to bring that in, and,

have it all in one space.

I’m not going to worry
about that for now, however.

So, we’re just gonna focus
on, yeah, the content

and portfolio side of things.

So, with that in mind,
let’s start planning.

And the first thing I’m gonna do is

write down on this page,
actually, I’m gonna write

content

or

hire me.

Cause this is the two
frames of mind of, like,

what people are looking to do
when they come to my website,

as I see it.

They’re either looking for
content, to learn about

something from me, or they’re, like,

interested in hiring
me for a certain thing.

With those in mind, let’s start planning

what pages I’m gonna
need as part of the site.

The first one is obviously a home page.

I feel like I’m gonna
want a page that’s, like,

a content hub.

So I’m just gonna write content.

That’ll be,

perhaps that’ll be some
categories listed, and like,

suggested to you.

Almost like the playlist that I have

on my YouTube channel, but instead of just

being videos, there’ll be
blogs and podcasts as well.

And then, as part of content,
I’m also going to need

three different templates, basically.

I’m going to need

audio, video, and written.

I’m sure you’re wondering right now

how I became a designer when I can’t even

draw a box neatly, but, hey.

That’s how it works.

I’m also going to need my portfolio.

And in that I’m going to

have, like, an

individual project.

Obviously I’m going to need
a template for that, as well.

Gonna add my speaking page in here as well

that I mentioned.

Then there’ll be the basics,
that’s like, an about page,

and a contact page, too, probably.

Actually, as part of contact,
it would be a good idea

for me to have a form on
my website for my portfolio

review series I think.

Right now my instructions
are for you to email me

with a specific subject
line and include the

information, you know,
in order for me to review

your portfolio in that
series that I do on YouTube?

But, not everyone uses
the right subject line,

so it doesn’t go into,
like, the right folder

  Full timelapse + walkthrough of building my website

in my inbox, and not everyone
gives all the information

that I need as well.

So, I think having some
sort of form on my website,

where you can just fill in
your details and submit that,

will make the whole process a lot easier

for everyone involved.

A page that’s quite
highly-visited on my website

at the moment, thanks to a
video that’s quite popular is

where you can download
my screen printing guide.

Basically it just has the video and a form

and that’s where you get
the guide sent to you.

So a lot of people come
over from that video.

I thought about having that
page as part of this new

website, but what I think
I’m actually going to do

is have screen printing as a
category in my content, here,

so it’ll be, like, part of this?

And, that way the form
will be on that page

for you to download, and
also see any, like, videos

or blog posts, or
whatever that I’ve written

about screen printing too.

So, actually, as part of this,

kind of in between here,
I should also put…

I’m just gonna add it next to it anyway.

Like a category page?

Content page is, like, the
home of all the content,

and then a category page

is that playlist, I think, where it’s the

audio, video, written.

Thinking more about
this contact page, too.

I think I’m also going to have, like,

a freelance form submission, so,

if there’s a project that
you’re interested in me

working on with you, you can
fill this out with, like,

information about the project.

I’m also going to want,
like, a plain page template

that I can pull out whenever
I need to for giveaways.

This is something that I like to do

in the middle of logs, every now and then,

it’s just, throw up a giveaway.

And to do that, I get
people to fill in a form

so that I can, like, pick the
winner randomly from there.

So, yeah.

Plain page that I can just

duplicate whenever and make a new giveaway

will be really helpful.

Thinking about what else
is on my current website

that I might want to bring over.

The only page that I really
am not considering, here,

and not adding in, is my newsletter page.

So, I just have a page

about signing up for my newsletter.

I don’t think I’m gonna do that, because,

to be honest, I haven’t been super regular

with sending out a newsletter, lately, and

I think instead of having newsletters,

like, the reason for people to sign up,

I instead would rather have

a form on each content category page

that they can fill in
there to get a certain,

I don’t know, PDF opt-in,
something or other

that I’ll create.

And then they’ll, they
can get emails about

that particular topic, in general,

and they’ll also be added to my list,

if I do send a newsletter.

I think that’ll be a better
way of going about it

than having a dedicated newsletter page.

I think I should really move this.

I don’t know how to
move things in this app,

so I’m just gonna erase
it and write it again.

But I think home should be
seen as above all of these

other things.

Because my home page will
be the hub of everything.

Perhaps some things won’t
be connected to home,

like, I’m gonna, actually
remove giveaways from that.

But, everything else, I think, will be

coming from the home
page, and the home page

will be designed to lead
you into the right thing.

With these two things
in mind, in particular:

content, or hiring me, as

the main thing that you’re looking for.

  Top 5 Web Design Trends in 2021

So that’ll be the first
decision that I make

someone make.

(laughs) Make someone make when they

come onto this page.

It’s kind of like

this is the content stuff,
this is the hiring me stuff,

and these two pages are
kind of fitting with both.

Now this seems like a lot of work, right?

Like that’s a lot of pages
that I need to design.

So, to start with,

to stop me from getting overwhelmed,

first I’m actually going to just do

an MVP

of my homepage.

So it won’t have all of these sub pages.

It will just be a homepage that
links off to various things.

So, it needs to link off to my YouTube,

social media,

I think I won’t have a
contact form even on it,

to start with, I’ll just have my

email address, bio, and, maybe in place of

building out a full
portfolio, I’m going to

have a link to my Dribbble on there

and I will make sure I
update that a little bit,

cause that’s also something
I don’t do very often.

So this way, people will
get access to my content,

they will know how to contact me,

they will learn a bit about me,

and see a bit of my work.

But without me having to
put in all the work of

doing all these extra pages, just yet.

So that means I can get my new site, like,

up and running.

In designing this page,
I guess I’ll be able to

develop a design system for
it, and kind of like a brand

for my website as well
that’ll make it easier to

design these other pages.

And, just in general, I
think it’ll be a good start

to the project.

(laughs) So that is my very
messy plan for my website.

It’s pretty simple,

but, it’s really good to
do this thinking about

what you might need, rather than

getting halfway through,
like, starting and then

you know, the project
keeps expanding from there.

Especially this piece of figuring out

what people are going to
be coming to your site for,

I think is really important to get down.

So, if you have a website
project that you’re working on,

I really encourage you
to do this step first,

just to figure out exactly
what pages are needed.

If you’re working with a
client, you’re gonna need

to do this, anyway, to
scope out the project

and how much design work is
gonna be involved for you.

But it also just really
helps me to see it,

and to know what work is coming,

and I’ll be able to, like,

tackle these section-by-section, I think.

Hope you found this
interesting to see, anyway,

and that was useful in some way to you.

And that you’re excited,
too, about this new

series of mine, redesigning my website.

I’m very excited about it, and I’ve

been talking about it for a long time,

and I think that making videos about it

is going to actually, finally, help me

get it done, because I’m gonna have you

to keep me accountable.

All right? (giggles)

That’s it for now.

Give it a thumbs up if you enjoyed it.

Thanks for watching, and,
I’ll see you in the next one.

And, I guess the next video will be

the wireframing and possibly design

of this MVP homepage.

So, looking forward to seeing you then.

Bye.

 

You cannot copy content of this page