Designing a website – Episode 1: Planning & site map!

By | December 9, 2019


– Hello, everyone, and
welcome to a new series on my YouTube channel. 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, 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 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. 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.

79 thoughts on “Designing a website – Episode 1: Planning & site map!

  1. urbanj Post author

    Thanks for sharing your process. What app were you using, if you don't mind sharing that info?

    Reply
  2. andru Post author

    Interesting to see how you work 🙂 Whenever I built websites in the past, I always made a quick list of pages and jumped ahead to sketching out the pages themselves on paper but it's so obvious and makes sense to build a site map like this first!

    Reply
  3. jalabi99 Post author

    Best part of it was when you decided to make an MVP site in order to not get overwhelmed. Looking forward to the rest of the series.

    Reply
  4. Milica P. Post author

    I can't wait for the next video! It's great to be able to see other designer's process, I always like when people make series like that, I always learn tons. Good luck with your new website, I bet it's going to look neat. 🙂

    Reply
  5. cineselena Post author

    I really need to re-up my website (it’s pretty lacklustre and I’ve been paying for it to hang out that way for over a year…) thank you so much for doing this series!!

    Reply
  6. Waqas Ahmed Post author

    Amazingggggggggggggggggg! Thanks charlie! Loved it when people do start to finish process.

    Reply
  7. Rose Tyler Post author

    Thank you for taking the time to make this, Charli. You are an inspiration!

    Reply
  8. Lilly B Post author

    This is so cool! I love your channel because I want to be a web designer!

    Reply
  9. Melanie Chadwick Post author

    Thanks so much Charlie! New website is on my list so its great to watch your steps.

    Reply
  10. Designer Anna Play Post author

    I am already visualizing the final version of your website having a clean Material design, which is responsive with any device. Nice one Charlie…! Good Luck…!!!

    Reply
  11. Skatefreak272 Post author

    thanks for posting this! I'm working on building a website this semester so this is super helpful for getting my creativity flowing. Also all the videos you post are everything that i do, oddly enough. You're like my british twin lol

    Reply
  12. Alex Shin Post author

    you have a store on your current page. will that be something you leave behind and not migrate into your new page? i've always wondered how having a store/product page on a personal portfolio page looks, especially to people who are looking to hire you. is it considered in bad taste? any advice you can give about that?

    Reply
  13. Whitney Love Post author

    Which camera and lens are you using for your videos? Looks flawless!

    Reply
  14. Charity Rosypal Post author

    loved this can't wait for the next one in the series!

    Reply
  15. Emily Rentz Post author

    Super excited for this whole series! I'm getting ready to build my own site as well, and though I plan on using WIX (I think, unless anyone else has a strong case for a different platform??) because I don't know enough about coding, this is going to be super helpful in just the whole thought process and everything. Can't wait to see how it all comes together!

    Reply
  16. Chloe Lynn Post author

    👋🏾 this may sound stupid. I’ve never published a web site. Where should I go to buy my domain? I want to make sure my domain is portable and content and name belong to me.

    Reply
  17. Larry Reeder Post author

    Thanks for the great video. Looking forward to seeing how you continue the process.

    Reply
  18. Mherhean Giray Post author

    When are you posting episode 2 Charli? I am excited to learn more from you

    Reply
  19. Manish Post author

    Hey Charli, Thanks for the lovely first video. I could not find the number 2 yet though. Can you please help?

    Reply
  20. Jean Wang Post author

    those process and details about starting a business is going to be so helpful and crucial to so many freelance designers like me! these are all necessary but not a lot of individuals post about them. it'd be great to see a designer be transparent about that! <3

    Reply
  21. Aubrey Post author

    I'm excited I found this! You are where I want to be in a couple of years! Thank you for sharing so much!

    Reply
  22. edsblogging. com Post author

    On what are you writing? Interesting vids by the way.

    Reply
  23. Simul8 Dev Post author

    You're so good that sometimes stuff gets written on the screen when you have both of your hands up. 😛

    Reply
  24. Frédéric Vereecke Post author

    Thanks for sharing your work. Maybe I miss something but I cannot find the final version of your website based on this design… Is it available to see?

    Reply
  25. Maria Kuzmenko Post author

    Thanks for your videos – very informative and inspiring at the same time)

    Reply
  26. Cristian Collavo Post author

    Hi Charli! I love all your content! Your videos and insights are very useful and clear! Do you think you can make a video (or write in this comment section?) how do you make e-commerce websites? (if you already have done one) I don't know if you already talked about that topic, didn't find it in your uploaded videos… I'm struggling in finding the best option, I understand webflow is bringing that option in the future. What are your thoughts? Thank you and keep rockin' with your content!! 🙂

    Reply
  27. Max Angenius Post author

    What does MVP stand for in this scenario?

    Reply
  28. Stephen Parkinson Post author

    I find that when I’m on my phone or iPad, using a mind mapping app allows me to record site map ideas easily and efficiently. It shows the basic page linking structure that I can come back to and reference later.

    Reply
  29. Brunilda Serrano Post author

    Very helpful. Thank you so much. Looking forward to the rest of the episodes to complete the new web site.

    Reply
  30. Princess S. Post author

    Hi Charli, what do you use with your apple pen to create your sitemap? Are you running an app on your tablet or desktop?

    Reply
  31. David Vo Post author

    how did you do the animation for your name on your portfolio?

    Reply
  32. NitroSperg Post author

    Sorry bruh but I can't be digging through 10 mins for a few tips. Thanks for putting out the content, though.

    Reply
  33. Martin Schneider Post author

    Oh my. You gonna kill your own business. Showing too much of how to design and plan a website will show all of the clients how they could push the price.

    Reply
  34. Chukwuma Udokporo Post author

    Hello CharliMarie, I would love to know what webflow plan you currently are on and what the benefits are. Thanks

    Reply
  35. Skeeter Brooks Creations LLC Post author

    THANK YOU…THANK YOU…THANK YOU!!! This video was GREAT!!! Watching you go through just this simple yet important stage was very clear and helpful to me.

    Reply
  36. Britt Bowers Post author

    So when can e expect content on starting an LLC and working with an accountant? I'm very interested in hearing this topic from another designer, as I plan to do this in 2019 myself. Great vid btw!

    Reply
  37. onyema nwokolo Post author

    Can this type of exercise also be applied when creating apps?

    Reply
  38. Moses MacStephen Musasizi Post author

    Hey, could you please email me on [email protected], i would like to propose a partnership deal in a website, its going to be big

    Reply
  39. agadiri1974 Post author

    CharliMarie e e e e e e e e 🙂 how can I convince Darwin that this beauty * art and grace was the origin of a monkey? how ? :'(

    Reply
  40. Dimitrije Jovanovic Post author

    Like Your new purple design 😉

    Reply
  41. San Antonios Web Design Post author

    HI everyone. I'm a professional web developer. I make tutorials And I create websites for companies. Check out my youtube.

    Reply
  42. Elaine Anderson Post author

    Thank you. I'm in the design process right now.

    Reply
  43. okiesib Post author

    Heya just watched the whole series of your website! I am checking it and seeing ur logo pixelated and no menu in the home page, is that ok?

    Reply
  44. Shailesh Anand Post author

    Hey Charli! This was super helpful. Thanks a ton

    Reply
  45. Rahul swamy Post author

    with trouble, you can build a website or redesign from us!!! @ @t

    Reply
  46. Rahul swamy Post author

    with trouble, you can build a website or redesign from us!!! @ desss.com

    Reply
  47. 3D Curio Post author

    can u tell me . www.3dcurio.com what about my website tell me any problem

    Reply
  48. Obinna He Post author

    WoW!! this is exactely what i have been looking for.. Nice tutorial on website design.. Thanks Man!!

    Reply
  49. Anabel Schk Post author

    hi Charlie, what software are you using to write on the screen?

    Reply
  50. HR4F Post author

    Thank you <3 not only for the tutorial but im seriously forever thankful to you, for calling yourself a designer not a developper, im a developer and it was a pain to learn all the basics : html,css,javascript,react,sass,jquery… and it just pains me when a designer uses a cms like wordpress and calls himself developper, No ! Just No..
    I love you , its relief knowing there are people who know the difference, not that design is not a work, its def a skill as much as dev is, its just that they're diffr

    Reply
  51. Ryan Rockwell Post author

    HELLO HUMAN, saw this and only 10 seconds in – SUBBED. Super excited to watch this series.

    Reply
  52. Yza Santos Post author

    Great explanation, I like it. I use KOUBIWEB to for all my website needs, affordable easy and professional.

    Reply
  53. Ikaz Ibsah Post author

    Really wanna keep watching but you talking much than action… Sorry . But good luck anyway 😊

    Reply
  54. Jethro Johnson Post author

    Thanks Charli! I will be using your video for flipped learning to broaden the scope of understanding of my students about site structure.

    Reply
  55. Dibin Sabu Post author

    It's always good Charlie and I am becoming a web designer soon

    Reply
  56. Red Web Spider Post author

    Learn how to make a testimonial carousel using HTML CSS & BOOTSTRAP – Link >> https://www.youtube.com/watch?v=fyVhJ8wBhkg

    Reply

Leave a Reply

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