How to wireframe a website | CharliMarieTV

How to wireframe a website | CharliMarieTV

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:



44 thoughts on “How to wireframe a website | CharliMarieTV

  1. Chad Westby

    I feel like if you want to showcase extensive web copy changes and a change to the structure/flow of content, you need more of a high fidelity mockup that include fonts and colors. I'd be curious to hear your thoughts.

  2. Foxtower Photo-Video

    Really great process. We're redesigning a page, so I am going to audit the content and then work from that list. The Crazy 8s idea on tabloid paper is fantastic for brainstorming! The bigger the paper, the more space your brain feels it has to get those ideas out!

  3. undercrackers56

    Creating webscreen wireframes in PORTRAIT layout, huh? Hope they are for a phone? This reminds me so much of my last job. My boss had created loads of wireframes for an IoT based CRUD system. She specified the colours, the font and even the captchas. No f**** idea about the database sitting behind it. No intention of discussing it no matter how hard I tried. Just didn't want to know. Of course I got blamed for the inevitable result. Despite building large multi-user database applications most of my career she accused me of not knowing my stuff. How the hell do these people end up in charge?

  4. Tanyu Shey

    I don't do wire-frames. Ideas pop-out of my head as i work. End result is always good. You just need to know your job and be creative. But if you find wire-framing useful, please go ahead and use it. I was speaking about my self.

Leave a Comment

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