Blog design wireframe! | Episode 3 of Designing a Website

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

, , , , , , , , , , , ,

Post navigation

24 thoughts on “Blog design wireframe! | Episode 3 of Designing a Website

  1. Yeeees! I love this series ;-;
    I'm right now designing my blog too and I just watched your other videos for some inspiration hahahaha
    Thank you for this content <3

  2. Thanks for sharing your process Charli! Seeing you wireframe on an iPad makes me want to get one! I tend to just draw light gray squares in Sketch but the freeform aspect of hand-drawing is really tempting.

  3. Maybe consider drawing in red pen over the elements you are discussing? You can always delete later, but during the video it will provide a visual understanding of what you are talking about.

  4. Yayyy !!! Thank you so much for sharing your knowledge with us! it's so good to see the work of people who know a lot!
    Regards from Chile, South America!

  5. My favorite web designer channel!

    Just started class this past week for web development. I love it! And your videos help!

  6. Do you read these comments? I am a web developer looking to expand my portfolio and wanted to know if you're looking for a developer. 100% free and risk free. I would just rather be doing something more useful than toy websites.

  7. I love this series. Definitely giving me ideas on how I can use my website to consolidate all my projects better

  8. Glad you are back on this series. Take it one day at a time as you have the time. As I mentioned on twitter you are inspiring me and holding me accountable to creating my own website:

  9. Hey Charli, I love your videos. I am a new designer, but I have other jobs as well. Specifically I am a professor, and need an online CV / teaching portfolio. Right now my design portfolio and teaching portfolio are part of the same website – is that a good idea? Or is it too confusing? I'd love to hear your thoughts!

  10. Looks like a great app you're using. Have downloaded it but yet to give it a road test. You're using the iPad Pro, right? Which size do you have pls? And do you recommend it? I have the iPad Air 2 but there aren't any reliable stylus solutions for it, so am looking at other options.
    Looking forward to watching more of this series. I'm currently focused on web dev so it's interesting to see how the design process comes together. Ideally, for personal projects, I'd like to be able to do my own designing, hence why I've been binge watching your content. Really helpful.

  11. @CharlieMarieTV Hey Charli, I just had a placement test for my interview to do a SOW by only looking at a wireframe that was done for a mobile app. I had no clue how that can be done by just only looking at a wireframe..would really appreciate if you can demonstrate how something like that can be done..

  12. I love your videos. I am not a designer at all but a back-end software engineer although I am really interested in design work. Keep up.the good job

  13. This helped me so much without me having to sketch out ideas. I just picked the one I liked best out of yours! Thank you! 🙂

  14. Interesting video! Thanks for sharing. But just to clear up for viewers, what you did is not considered true wireframing. A wireframe is actually a fully-functioning website that you show a client to show them the draft website minus the styles. You do this to have them approve the layout, navigation and functionality of the site without being distracted by colors, fonts and other style matters, which you then do after you get sign-off on the functionality. What you have here is your sketches of the wireframe.

Leave a Reply

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