- Hello, everyone, and welcome to episode three
in my website redesign series.
So far, you've seen me create a sitemap,
create the plan for what I'm gonna be doing
with my new website.
You've seen me design and build a one-pager,
a simple site that's up there right now,
kind of as a placeholder while I'm getting
everything else worked out.
Now, though, I'm ready to dig in and start tackling
some of the other pages on my site,
so if I just bring out my sitemap here,
as you can see here, my website is kind of split
into three different categories.
There's the general like about and contact stuff.
There was my portfolio and speaking page
that I wanted to create, and then there's the content,
and the content is what I'm gonna start with,
because, mostly, I just really want to be writing
some blog posts, and at the moment, I don't have a blog
or a place on the internet where I publish blog posts,
so I figure there is the best place to start, right?
If you can remember from my planning video
and what you see here on the sitemap,
I wanna have three different types of content on my website.
I wanna bring in my YouTube videos,
my podcast episodes, as well as new written content.
That's gonna be quite a bit of work to get
all those three things working together,
and search results and things like that,
so I think what we're gonna start with is just the blog,
like a written blog on my site,
that I can then expand on in the future
to include the video and audio content.
Basically, I'm trying to break this whole
website redesign project into really small chunks
that I can then build on and improve as I go,
just so I am continually getting stuff out there.
So, today, I start working on the blog section of my site,
and what I do at the start of every design project
is wire framing.
I used to do this on paper.
In fact, I have a video about wire framing,
where I walk through the paper technique I used to use,
but these days, I like to use my iPad and my Apple Pencil
and an app called Concepts to do my wire framing,
so let's dig in and get designing.
Okay, so, the first thing that I'm gonna do, obviously,
is open up a new page in Concepts.
I really like using Concepts to wire frame
because it's got an infinite canvas,
and you can do a lot of like really arty stuff
with all the brushes and things and colors,
but I just use a regular black brush
to be drawing on this white page,
so it's pretty much as if I was using a Sharpie
on a piece of paper, but instead, I'm doing it in an app.
What I like to do when I start wire framing
is just write down a little list at the side of the page
with all of the elements that I need to consider
as I'm designing, so, to start with,
I'm going to be wire framing some ideas for
the post view itself,
so when you're reading a single blog post of mine,
so what will be on that page is navigation.
It'll have the post, obviously, title.
I don't wanna make my blog too dependent on imagery,
so I'm not gonna have like a header image section.
I think I would wanna be able to just write
without being forced to create an image for it
if it doesn't require one or if there's not one
that's particularly relevant.
Categories.
In fact, inside navigation,
there'll be navigation for the site
and also for the blog itself,
like clicking through different categories
or tags or whatever.
At the end of each post, I'm going to have a form.
It'll either be a general sign up for my newsletter,
or if I've created a particular opt in
that matches with that post, then I'll place that in there.
I don't think I'm gonna have comments on my blog.
I don't know, though, so let's think about comments for now,
just in case I do decide that I want to have them.
I think, also, it would be a good idea to have
a short bio for myself on the page,
like just a little bit about me.
I'm gonna be the only author on my blog,
so I don't necessarily need it to be like an author thing,
but just if a blog post is shared around
or something like that and someone comes to my site
having never heard of me before,
it'll be good to just have a little bio there
so they can get to know who I am.
Alright, I think that's all the elements
that I'm gonna need.
My intention with it is to create
a good reading experience as well,
so now, what I'm gonna do is just think about
all these elements and lay out a couple
of different versions of how I think this page could go.
(jazzy music)
Okay, there we go.
There's a few different ideas
for ways I could layer my page.
Now, let me explain what I was just doing.
So, the point of wire framing is
to quickly get your ideas out on paper.
As you can see, I was not worried about
drawing my lines straight
or making it perfectly like understandable.
All that matters is that you understand it,
at this stage, anyway, so let me just explain a few things
I was doing as I went through.
Firstly, for my wire frames,
I like to have a system of different shapes
and things and what they mean.
When I draw a box with a cross through it,
like this one here, in this case, it means my logo.
That could also mean like any imagery or assets
that I'd be putting in.
Squiggly lines, for me,
mean heading or larger text,
and then these straight lines indicate body copy,
so that's the post.
This is a form, and this is a footer, obviously.
This would be like a little avatar of myself.
Then, I was kinda doing filled in rectangles
means a button, but like I said, all that matters
at this stage is that you understand your idea.
So, my first idea was the default, you know,
regular navigation, the post left-aligned.
I don't want my post to hang out with the full width,
because that would be, the line length would be too long.
So, I go title, tag, post, form,
and then a bio, and then, beneath it is where
I was doing the comments,
and that's when I decided, you know what?
I really don't want comments on my website.
I'm pretty sure about that fact.
That's just something else for me to check,
and instead, what I want to encourage people to do
that I started thinking about on this one
is share on social media, so that would be like
a thing to do, like go talk about it on your Facebook
or your Twitter or whatever,
instead of leaving a comment here.
This one has like more centered navigation
and a centered post style
with a bio in the footer with links.
This one is the classic side bar.
I don't really feel great about the side bar, to be honest.
I think that I wanna focus on the reading experience.
Side bars are really useful when you're putting,
I don't know, advertising in there,
or linking to other products and things,
really focusing on the category and tag-style search,
but I don't think I wanna do that.
So, I think I'm gonna abandon that idea,
go for something more where the post is sitting
in the center of the page,
so that that's easier for you to focus on.
I also thought that maybe I could have,
at the top of the blog, instead of just a logo,
it could be like a photo, logo,
and then a short like one-sentence bio up there as well,
to avoid having the need for a bio anywhere else.
I don't know.
And having the form in the footer, too,
but I don't think I'm gonna do that,
because I think that, if I was just having one standard form
across my site, that would be good,
but I kinda wanna be able to mix things up and,
yeah, do more, what's the word,
more relevant email stuff.
That's the word I was looking for.
So, for example, if I make a PDF or a template
or something that relates to the post,
or if perhaps I wanna have an email sequence
that relates to the same topic
that you just read a post about.
I'm gonna have a form that relates to that,
rather than just one standard form across the site.
This idea is kind of interesting to me.
For some reason, I don't hate the side bar
being on the left hand side as much as I do on the right.
I think, I don't know, I'm just imagining it
being a lot smaller, maybe,
that would have the logo at the top right here,
and then the title of the post really big at the top,
so there's quite a focus on that
and you could just read down,
or there's like a subtle navigation
and a subtle like couple of sentences bio without a photo
in the side as well.
It could still feel quite lopsided, though,
so I'm not sure about that,
but the idea is that, then, at the bottom,
I could have like want more or something in the side
with the form on the right.
Then, over here, I started thinking about,
okay, well, how am I gonna get people
to read my mixed posts?
So, I started thinking about having recent posts
at the bottom, so this would be like, yeah,
recent posts, and then bring in the five latest
or maybe it could be based on the category
or something like that, just something to give people
something else to read once they finish this post
and keep them on my site longer, basically,
consuming more of my content.
So, I do really think that the ideas
I'm gonna move on with is either
this left hand side bar
with the navigation and the logo,
or this whole centered idea, I think,
is what's gonna be the go for me.
I feel pretty good about moving on to the design phase now,
carrying on these two ideas.
You don't have to just pick one
from your wire frames and move on.
I am planning on doing a full video
about my updated wire frame process,
what you just saw me go through here, basically,
but if I was, then, needing to share this
with a stakeholder for feedback on the wire frame
before I go on to the visual design,
I wouldn't show them this,
'cause it is a little bit hard to understand.
I would do like a gray boxes version in sketch,
but, because it's just me,
I'm not going to bother with that,
and I'm going do dive straight into
the design side of things.
This is where I'll end this video, though,
so you'll see the design phase in the next one.
I hope this was interesting or useful to you,
or something, just seeing my process and seeing
how I think and how I go about planning something like this.
I think wire framing is a super important part
of the design process, because you can validate
or invalidate ideas very quickly.
If I had mocked up each of these in full,
like even just using gray boxes on the computer,
it would have taken a lot longer than just
scribbling it with my pencil and my iPad,
so that way, I wasn't wasting time working on
any ideas that, as soon as I drew them out,
knew weren't right for me, and also,
I went through this rapid like idea iteration phase,
'cause if I'd just gone with my first idea,
well, I don't think that's the best one.
I actually like the ideas that I came up with
to the end of this process, so go figure.
Thanks for watching,
and thanks for hanging out with me
while I plan my new blog.
I'm excited to move on to the design phase now,
so make sure you are subscribed to my channel,
so that when I do upload that blog design video,
you'll see it in your subscription feed.
Alright, have a good day,
and I'll see you in the next video.
Bye.
(jazzy music)