How to wireframe a website | CharliMarieTV

Web Design

In today’s tech-savvy world, more and more businesses and organizations are realizing that DIY websites or—gasp—no website at all just won’t cut it. And now that mobile Internet usage has officially overtaken desktop usage, the do-it-yourselfers are having a hard time designing websites that are smartphone compatible.

If you’ve got what it takes, Web design can make for a satisfying career. But the road isn’t easy: You’ll need to be able to market your skills effectively to stand out. A network as much as possible. You can start a blog, speak at local events, and learn from others in your field. You’ll also need to have the skills to complete complex projects and the personality to please demanding customers.

Wireframing is the first stage of the web design process, and in this video I show you how I do it and give you some advice! Please remember to subscribe

If you've ever wondered how to wireframe a website, or if you want to know how to design a website and you've never heard of wireframing, this video is dedicated to you! Yes, you. Wireframing is the process of laying out the bones or the structure of a website to think about how the information will be organised on the page before you start thinking about colours and fonts and other visual things. Using the wireframe process I teach you in this video you'll be able to generate lots of ideas for different ways to arrange your website and be able to decide on the best one from there.

I hope you enjoy the video! Please make sure you give it a thumbs up if you do. I'm still learning how to make tutorials MY way (not just screen casts) so any feedback is much appreciated. I ant these videos to feel like we're sitting in a room together and I'm showing you what to do, rather than you just looking at my screen as I do something. Does that make sense?

If there's something design-related you're struggling with that you'd like a tutorial on next, let me know!



Hello there! I'm Charli and I'm a web and graphic designer from New Zealand currently living in London and posting videos every Saturday about design, fashion/beauty and DIYs here on CharliMarieTV. Please subscribe and say hi in the comments so we can be friends 🙂



Buy xoBeauty makeup brushes (my favourites!) here:

My blog:
My apparel company, Liner Note Kids:
My design portfolio:
My sister SmayJay's channel:

You might also like More from author


  1. Beauty And Fashion Blogger says

    Obsessed with your videos 🙂 Binge-watching :p Just love the way you speak and explain bcoz I m a bad listener but I can listen to you whole day, does not irritate me.

  2. Kevin Walsh says

    Thank you!

  3. Ваня Петров says

    ничего не понимаю, а как называется программа которая была на компьютере в которой работаешь

  4. Lemuel Junior says

    wow! just wanted to say that you’re astonishing beautiful! and nice accent, by the way =)

  5. TheBhamster says

    Thank you! Super helpful explanation of your process.

  6. Picchini says

    Hi Charlie, I’m a new subscriber from the Silicon Valley. You have helped me as a humble example in design, so thank you for that. You have a lot of videos describing your design process, but broken apart. You think you could do a brief video explaining all your pieces together of the whole design process. That’d be awesome! Thank you!

    1. CharliMarieTV says

      welcome to my channel! That’s a great suggestion for a video, I’ll definitely add it to my list 🙂

  7. Yvys Bertuce says

    I’m from Brazil and just arrived on your channel following tips from Roberto Blake on his channel and I’m appreciating your knowledge!
    Nowadays I’m preparing myself to move to New Zealand with a objective to work on design too and I must to say thank you so much to being and share all these tips!
    = )

    1. CharliMarieTV says

      welcome to my channel! That’s so exciting you’re moving to New Zealand. Watching my videos will certainly help you get used to our funny accents! hehe

  8. אלעד ניידר says

    Love the way you work and plan ahead!

  9. zoë says

    I’m trying to teach myself the basics of web design at the moment so found this extremely useful – thank you! Subscribed 🙂

  10. Raphael Zwyer says

    Thank you for these easy quick tutorials! Very helpful and encouraging.
    I specially like the lil’ feet showing up to the far right at around 2:32 and 2:40. Foota?! (-:

  11. Mari Muthu says

    Really good video and content..! Thanks.

  12. Meli Creatie says

    Hello! did you have a list of plugin of wireframe element kit plugins for sketch? thanks a lot

  13. Ethan McIvor says

    Would you be able to suggest some tips or examples to help with my designs? Im designing for my art portfolio. Even a few links to some portfolios you think are interesting. I will continue to look over your videos maybe you already have.

  14. mahmoud elkhadragy says


  15. Richard Workman says

    I’m training to become a web design/developer after teaching design for the past 6 years. The “crazy 8” technique is something I used to use with my students to encourage them to explore design concepts and generate a range of ideas. Great stuff.

  16. Smile Face says

    you are very good. thanks

  17. Beekeeper Simes says

    Do you also programme the pages?

    1. CharliMarieTV says

      I’ve just started coding my designs this year! previously i would work with a developer.

    2. Beekeeper Simes says

      Cool! I am learning web development myself

    3. CharliMarieTV says

      that’s great! 🙂

  18. TechCube says

    Which program did you use to design it at 3:58
    Thanks , that was helpful ! 🙂

    1. CharliMarieTV says

      Sketch 🙂

    2. TechCube says

      Thanks again 🙂

  19. soumik saha says

    sorry to say more than the video i love the presenter 😀 😛

Leave A Reply

Your email address will not be published.