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

Поділитися
Вставка
  • Опубліковано 4 січ 2025

КОМЕНТАРІ •

  • @ArielBissett
    @ArielBissett 7 років тому +96

    This is great! It's always so good to understand what goes on behind the scenes!

    • @kamil4403
      @kamil4403 4 роки тому

      This video is more interesting for people that want to learn how to do it i think

    • @xiaoyejiepai
      @xiaoyejiepai 2 роки тому

      Our company's website is done by Qinyitong Studio.

  • @Kate-is5mz
    @Kate-is5mz 5 років тому +2

    Who the hell dislikes videos like these?! Like, why is there always THAT person... this is a very good, informative and insightful video, who would anyone ever have a problem with that, jeez... anyway, great video, subscribed!

  • @kydune8152
    @kydune8152 3 роки тому +1

    The way this has cleared my skin. Thank you

  • @imenziani2288
    @imenziani2288 7 років тому +8

    I love how you make it feel simple and possible for any one to do. In this series I think you're going to show us or give us ideas on how to think when wanting to design a website more than how to actually do it which is great. I really like it. Keep up the hard work.

  • @hannahferreter
    @hannahferreter 7 років тому +10

    Loved this video and the idea for the series. I learned the hard way of the importance of an outline/site map while designing the drama department website for my school. I was so excited about the actually designing that halfway through the project I was left with multiple pages floating in the menu which did not need to be there. After creating a site map the website all came together. Thanks for the video! I can't wait for the next one!

  • @Paigeboyd1
    @Paigeboyd1 7 років тому +10

    So glad to see a series like this! I study Interaction Design and have been building websites for three years now but it's always interesting to see other peoples' process - thank you for doing this! :)

  • @heidykatheryn8279
    @heidykatheryn8279 2 роки тому

    Great this is what I was looking for, someone who walk me through step by step. Thanks youuu

  • @davehansel9715
    @davehansel9715 Рік тому

    I really like the way you explain things! I have someka's sitemap generator to create sitemap diagrams. Easiest way to create a sitemap chart imho. Thanks for the video! On to the episode 2:)

  • @andru2080
    @andru2080 7 років тому +15

    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!

  • @adriankenepah3673
    @adriankenepah3673 7 років тому +5

    Super rad idea, Charlie! Really looking forward to this series. I love learning about different processes and methods people use for building out websites. One thing I do, which may be overkill, is a whole discovery process of the site. Really diving into the type of people who may be visiting the website (a fan, causal visitor, company looking to hire, someone looking for inspiration, etc). Obviously this varies throughout the type of project you’re working on, but it helps with the design and UI/UX portion of the website by finding the commonalities with each individual visitor and basing my structure and content off of that.
    Anyways. Keep killing it! Again, really I looking forward to the next part of this series!

  • @jeanwangg
    @jeanwangg 6 років тому

    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!

    • @charlimarieTV
      @charlimarieTV  6 років тому +3

      I think I’m going to do a ‘financial year in review’ where I talk about my first year having an LLC. Sounds like that might be useful?

  • @jethrojohnson117
    @jethrojohnson117 5 років тому +1

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

  • @chris-adams-tas
    @chris-adams-tas 4 роки тому

    This is a good explanation of the process of determining Site Architecture IMHO, thanks for sharing Charli.

  • @jalabi99
    @jalabi99 7 років тому +1

    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.

  • @rosetyler5822
    @rosetyler5822 7 років тому +2

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

  • @themuddabeyonceshow7154
    @themuddabeyonceshow7154 3 роки тому

    I know this video is 3 years old but it was super helpful and not overwhelming.

  • @pockets08
    @pockets08 5 років тому +2

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

  • @indurekhasahu
    @indurekhasahu 4 роки тому +2

    This is great! and very helpful for me to get my plan for my website finished in the right way :) Thank you so much for sharing!

  • @Madwolfx_
    @Madwolfx_ 3 роки тому

    10:50 min well spent. Great content. 💪

  • @naveedulhassanmalik
    @naveedulhassanmalik 7 місяців тому

    4:48 Have you tried a profession sitemapping tool like WriteMaps?

  • @phoebe_272
    @phoebe_272 7 років тому +1

    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

  • @marycrisestrella2246
    @marycrisestrella2246 2 роки тому

    Hi @CharliMarieTV It is my first time learning how to design a website because it is a requirement for my current subject in college. I watched 2 of your videos including this one and it helped me figure out how to create my own web design. Thank you so much. Love your content.

  • @manoharr8812
    @manoharr8812 4 роки тому

    I do have a non-commercial website that needs redesigning as I am including diverse and expansive material. Your thinking as how to organize content is of great help to me. Thank you very much.

  • @hfortenberry
    @hfortenberry 6 років тому +2

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

  • @designerannaplay7160
    @designerannaplay7160 7 років тому

    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...!!!

  • @jkbullitt8986
    @jkbullitt8986 4 роки тому

    Superb! One of the best examples of the high level planning needed for site building. More pls!!

  • @milililie
    @milililie 7 років тому +1

    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. :)

  • @skeeterbrookscreationsllc2106
    @skeeterbrookscreationsllc2106 6 років тому

    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.

  • @snakeg6
    @snakeg6 4 роки тому

    Thank you!! Love the series , subscribed and made it simple to follow (specially that I’m visual!)

  • @emily2555
    @emily2555 6 років тому +2

    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!

    • @acharyamanish20
      @acharyamanish20 6 років тому

      Hi Emily.. I would like to know how it went with your own website as I am also building my website and do not know coding. Please let me know. Waiting :)

    • @andrewd5482
      @andrewd5482 6 років тому

      If it’s a crazy simple site, wix will do, but if you plan to do more than just have a few pages, I suggest WordPress. I can spend 5min to go help you decide

  • @fangfang5422
    @fangfang5422 2 роки тому

    This is really great sharing of the process the thinking flow! Appreciated the effort and kindness! Thank you~~

  • @annachino3602
    @annachino3602 4 роки тому

    Your video has actually helped and cleared the brain fog for me! Fantastic, thanks!

    • @charlimarieTV
      @charlimarieTV  4 роки тому

      I'm so happy to hear that! Glad I could help :)

  • @brunildaserrano3951
    @brunildaserrano3951 6 років тому

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

  • @KatrinaEames
    @KatrinaEames 7 років тому +12

    That was super interesting! I'm planning out a website and this is really helpful for me.

  • @jonah6404
    @jonah6404 10 місяців тому +1

    Awesome video

  • @hr4f774
    @hr4f774 5 років тому

    Thank you

    • @charlimarieTV
      @charlimarieTV  5 років тому

      I agree! However I do know how to code. But I don’t work as a developer so I don’t identify as such.

    • @hr4f774
      @hr4f774 5 років тому

      @@charlimarieTV oh thats just plain lovely Ive seen some of your other videos you do know how to develop, I think the fact that you are a developer as well is why you know the difference and have your terms on point. I hate hearing people "develop" a website on wordpress while its jut really drag and drop

    • @charlimarieTV
      @charlimarieTV  5 років тому

      Wordpress is only really drag and drop if you’re using a theme like elementor or divi though! At the company I work for our website is built on Wordpress CMS but zero part of it is drag and drop.

    • @hr4f774
      @hr4f774 5 років тому

      @@charlimarieTV of course there's company developers that develop wordpress websites in php , but you'd be amazed how many wordpress drag&droppers call themselves developers

  • @mkiorboe
    @mkiorboe 4 роки тому

    I´m redoing my entire portfolio and this was a great input to my process 👍

  • @RaynerDaCruz
    @RaynerDaCruz 3 роки тому

    Correct me if I am wrong, but in a formal environment, you would be using the SRS and Use Case Model to help you create the site map, right?

    • @charlimarieTV
      @charlimarieTV  3 роки тому

      I don’t know what those mean specifically, but if you’re asking if more user research would be involved in a work scenario then yes!

  • @Mareidd
    @Mareidd 2 роки тому

    Where can I find the other episodes?

  • @cineselena
    @cineselena 7 років тому

    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!!

  • @justkailash
    @justkailash 4 роки тому

    what app are you using for notes .. i mean sketching for these pages information on ipad

  • @Adanmacreates
    @Adanmacreates 7 років тому

    I just started my interface Design class and I have to work on a website brief, this was great to watch for inspiration!

  • @DanicaChristin
    @DanicaChristin 7 років тому

    This video really makes me what to redesign my website. At the moment it's just a wordpress blog but I could do so much more with it

  • @mdruhulamin9132
    @mdruhulamin9132 4 роки тому

    Great everybody very helpful to see this video.

    • @mdruhulamin9132
      @mdruhulamin9132 4 роки тому

      Are you need the Best Web Design Professional Expert Designer Tehran.
      Leave the design of your own website to the professional design team of Spad Company. Your website reflects the values, beliefs and identity of your business, also referred to as a virtual office. (Best Web Design Professional Expert Designer Tehran)(بهترین طراح متخصص حرفه ای طراحی وب تهران)With a professional website, your business will be available to anyone who needs your services anywhere in the world, 24 hours a day, 7 days a week. Contact us if you need professional website design.
      More information Click this Links:www.spad.co/services/website-design

  • @avi12
    @avi12 3 роки тому

    Please reorder the videos in the playlist so the first video will be the first episode

  • @elizabethmessina6322
    @elizabethmessina6322 7 років тому

    love the series idea!! so excited for more of them

  • @sharonmathew2127
    @sharonmathew2127 7 років тому +1

    Hair is looking real good, Charli! 😻 the layers and colors 👌🏼

    • @sharonmathew2127
      @sharonmathew2127 7 років тому

      Also, I think blog posts about your business process would be ABSOLUTELY HELPFUL!! I was looking forward to hearing your insight since the first time you mentioned this in a video. There's not a lot of content out there that helps creatives with this side of their work. Thanks Charli!

    • @DeependraTube
      @DeependraTube 6 років тому

      You figured out " the real thing "... 😀😁😂

  • @twinklej5459
    @twinklej5459 7 років тому

    Great video Charli! Can’t wait for the future episodes...i did set up a goal to learn to create websites... this video really helps me with that too.. KUDOS GURL! Also...on a completely different point...your hair looks amazing 😀

    • @charlimarieTV
      @charlimarieTV  7 років тому

      Haha thank you! This is what it looks like when the purple has completely faded from it haha

  • @pebre79
    @pebre79 7 років тому

    Nice start. Looking forward to the next episodes

  • @anand.shailesh
    @anand.shailesh 5 років тому +3

    Hey Charli! This was super helpful. Thanks a ton

  • @JeramieSaito
    @JeramieSaito Рік тому

    This helps with my planning. Thanks!

  • @jean-claudemosquera5635
    @jean-claudemosquera5635 7 років тому +1

    Ready for this series!! Thank you!

  • @sasavlog03
    @sasavlog03 3 роки тому

    This is literally saving me from misery because I have an assignment about this

  • @dankast4483
    @dankast4483 3 роки тому

    Clean!😊👍

  • @MoZenLen
    @MoZenLen 7 років тому +3

    Im so excited for this series :D

  • @SoheilLotfi
    @SoheilLotfi 4 роки тому

    hi Charli. Are there any good tools to design a site map. something like Figma for example

  • @PinoyBoyy
    @PinoyBoyy 7 років тому

    I’m super excited!

  • @cagatayelmaci9874
    @cagatayelmaci9874 5 років тому

    Gosh! Thought u 've got a kiwi accent then checked your page and you really are! Greetings from CHC!

  • @ToriLillytheauthor
    @ToriLillytheauthor 7 років тому

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

  • @AS-ld5mz
    @AS-ld5mz 5 років тому +1

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

  • @iemwill9429
    @iemwill9429 3 роки тому

    what brand is your glasses? let me know

  • @RodrigoAbdalla
    @RodrigoAbdalla 4 роки тому

    Thank you Charli! 👏👏👏

  • @veronicasnair2800
    @veronicasnair2800 7 років тому

    Love the idea of this series, so helpful!

  • @Waqas4hmed
    @Waqas4hmed 7 років тому

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

  • @anjali_chandrashekar
    @anjali_chandrashekar 4 роки тому +1

    Hi! did you end up setting up a store on webflow? I'm trying to set up a store for art prints and was looking at their business plans and it seemed quite steep. would love to hear about your experience if you've used these features.Thanks!

  • @steparko23
    @steparko23 6 років тому +15

    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.

  • @samanthab3526
    @samanthab3526 3 роки тому

    This was really nice and helpful. Thank you :)

  • @dibinsabu3225
    @dibinsabu3225 5 років тому

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

  • @Alex-jp2ml
    @Alex-jp2ml 7 років тому

    Such an awesome idea! loved it:)

  • @princesss.6798
    @princesss.6798 6 років тому

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

    • @charlimarieTV
      @charlimarieTV  6 років тому +1

      Its an app on my iPad called Concepts :)

  • @nechus9015
    @nechus9015 4 роки тому

    Good one...
    Your fan from India

  • @charityrosypal7102
    @charityrosypal7102 6 років тому

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

  • @FredericVereecke
    @FredericVereecke 6 років тому

    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?

    • @charlimarieTV
      @charlimarieTV  6 років тому

      It’s not finished yet! But I just released the third video in the series. :)

  • @Reeder6Wisconsin
    @Reeder6Wisconsin 6 років тому

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

  • @srikanthv9486
    @srikanthv9486 4 роки тому

    Hi Charli. Do you have the option of voice comment from visitors end in your website content explanation.

    • @charlimarieTV
      @charlimarieTV  4 роки тому +1

      sorry, I don't understand the question. Can you try explain more what you're asking?

    • @srikanthv9486
      @srikanthv9486 4 роки тому

      Do you have the option of voice message or comment that the visitor can post in your website, the option just like we have in WhatsApp.

    • @srikanthv9486
      @srikanthv9486 4 роки тому

      Hi there, awaiting for your reply.

  • @andersonw81
    @andersonw81 4 роки тому +1

    She looks so cute. Cheers from Brazil!

  • @MelanieChadwick
    @MelanieChadwick 7 років тому

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

  • @iamjasonthompson
    @iamjasonthompson 7 років тому +8

    Nice... this is so important. I remember when I was a novice I would just jump into Photoshop and start building. the result would be dredfully awful websites. 😂

  • @dronelobby4169
    @dronelobby4169 3 роки тому

    Great video. What app did you use on your iPad for noting your ideas?

  • @rajeshpandilla2433
    @rajeshpandilla2433 5 років тому

    what is the tool u have used

  • @okiesib
    @okiesib 5 років тому +1

    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?

    • @charlimarieTV
      @charlimarieTV  5 років тому

      Pixelated is when an image is blurry. my logo isn't blurry but it does have a little bit of dither (noise) around the edges because it's a gif :) (it animates when it loads in) And if you've seen the whole series you'll know that so far the only section that has a full menu is my blog.

  • @dimitrijejovanovic6779
    @dimitrijejovanovic6779 5 років тому +1

    Like Your new purple design ;)

  • @Kenny-Ross
    @Kenny-Ross 5 років тому

    Do you ever create user flows for your websites?

    • @charlimarieTV
      @charlimarieTV  5 років тому

      Not really cos my website isn’t many pages as you can see.

    • @Kenny-Ross
      @Kenny-Ross 5 років тому

      @@charlimarieTV I mean in general for client websites. Do you think they're necessary? I came across some information last week about user flows and it was saying it's a necessary step in the web design process. I think more so for apps. I'm planning a hotel website and my gut tells me this seems to be an unnecessary step. A hotel website is self-explanatory. I'll present the information in a way that will make them want to book.

    • @charlimarieTV
      @charlimarieTV  5 років тому

      I don’t really do much client work. But I can see how user flows would be useful! I think mostly to help take the client on the same journey the user would through booking. And for yourself so you keep in mind what screen people are seeing directly before the next one.

  • @emadelsammad201
    @emadelsammad201 4 роки тому +1

    Good vid, but I was hoping if you can teach us how to design a digital sitemap with a nice layout to put it on our portfolio

    • @charlimarieTV
      @charlimarieTV  4 роки тому

      you could use Figma or your design tool of choice to draw digital boxes instead of my hand-drawn ones! :)

  • @elaineanderson4891
    @elaineanderson4891 5 років тому +1

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

  • @nelsonjimenez7939
    @nelsonjimenez7939 4 роки тому

    What are you using for planning? an ipad and what software or what?

  • @davidvo3762
    @davidvo3762 6 років тому

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

  • @gordrik1591
    @gordrik1591 5 років тому +1

    Well described, clear and easy to follow = Good stuff = Subscribed. Thank you for this :)

  • @malikm76
    @malikm76 4 роки тому

    Great stuff. You are very organised designer. This gave me great inputs for my own project. Thanks. Subscribed.
    I could not understand why you didn't want to continue with Wordpress ( which is the world's largest CMS) and rather go with Weblow instead. Actually thats my gripe with wbsite designers who approach me to get business from me. Using technologies like Webflow always makes me in 'need' of a website design company. Good for them.

  • @urbanjunkie
    @urbanjunkie 7 років тому +2

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

  • @birsingh5388
    @birsingh5388 Рік тому

    How do you create logo?

  • @tristangriffiths4083
    @tristangriffiths4083 4 роки тому

    What system are you using to to the write up? I see your using a tablet, what software are you using to do all the writing on, its like an infinity canvas :). Love your work!!

  • @jizhang3696
    @jizhang3696 4 роки тому

    Thanks Charli, it’s really helpful

  • @nwezeonyisam6491
    @nwezeonyisam6491 3 роки тому

    Awesome!! am realing learning from you

  • @thepetaldragon
    @thepetaldragon 4 роки тому

    This is a great resource, thank you!

  • @alexben2443
    @alexben2443 4 роки тому

    writing the word beforehand, and drawing the box afterwards can make your life easier

  • @KamranMehmood2312
    @KamranMehmood2312 4 роки тому

    Hi Charli, Greetings from Pakistan...it's good to see a post with great details and it help me a lot to understand the basic idea about building. website. I request you to please add some more advice about the selection of technology for website building backed by the reasoning.
    Regards,
    Kamran Mehmood

  • @rosechild9239
    @rosechild9239 6 років тому

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

  • @EffnCrisp
    @EffnCrisp 3 роки тому

    helped me clear my mind a lot ... Kudos(Y)

  • @chukwumaudokporo2586
    @chukwumaudokporo2586 6 років тому

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