How to wireframe a website | CharliMarieTV

Share it with your friends Like

Thanks! Share it with your friends!

Close

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 http://bit.ly/1aE5UOT

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!

———————————————–

// ABOUT ME

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 🙂

———————————————–

// LINKS

Buy xoBeauty makeup brushes (my favourites!) here: https://xobeautyshop.refersion.com/c/90b2

My blog: http://www.charlimarie.com
My apparel company, Liner Note Kids: http://linernotekids.com/
My design portfolio: http://charliprangley.com/
Twitter: https://twitter.com/charliprangley
Dribbble: http://dribbble.com/charliprangley
Facebook: http://www.facebook.com/charlimarieTV
My sister SmayJay’s channel: http://www.youtube.com/channel/UCHwfFu023JtowO8sL_ymoSg

Comments

pyroghost11 says:

missy or derty? awesome vid btw very helpful stuff

c trevory says:

Hi, i am new to this. may i know what program are you using for create the wireframe?

Kenzie Nerdz says:

This is amazing! My Web Languages teacher is actually using this video for one of our projects and tells us to use designs like yours!

rustyispunk says:

I think you did it a bit too fast tbh. But thanks it was great nevertheless!

rustyispunk says:

I think you did it a bit too fast tbh. But thanks it was great nevertheless!

Саша Захарчук says:

Very, really, very much grateful to you for this video, it helped me a lot and allowed me to organize information in my head, as well as see how others do the same.

Felicia says:

I'm new at wire framing, is it crucial to a copywriter? Is sketch a easy to learn system?

rishabh regmi says:

you're sooo cute woooo

Afsane Barati says:

Thanks! can you recommend a simple and practical software for wire framing?

A.George Kunnummel says:

You are Awesome ,love the video

Fotie Moghommahie contant says:

Thank you for this video, i love it… need more please!!!

ScreenPrintR says:

I'm sorry, I must have missed what program you said you used to document the Wireframe with? Is that Visual Studio?

xJohram says:

Can somebody advise a Sketch analog for Widows? Much appreciated.

Pranay Tony says:

Sooooooo Cooooool!

alvinraydj3 says:

just marry me so i don't have to learn this

Eva Vermot says:

Hello Charli!
I'm french and I'm actually studying web design, development en communication in order to become web designer one day 😀 I recently had a exercise to do for my studies. This exercise consist to give an interview to a person who works in the internet. Do you think is it possible to have a discussion in order to do my interview? I would be very happy and flattered if you answer my comment, 
thank you very much!
Bye
Eva.

Ellie Day says:

So glad I stumbled on your videos! Just getting my head around wireframing and so far haven't found anyone else who doesn't go straight into techy talk I don't understand!

Gurvinder Singh says:

Thanks for sharing. Good Information

Pedro Santos says:

Watch out for the feets! On the right side at 2:41  😉

Richard Dale says:

Some good tips. I personally use Balsamiq mock ups. Super fast, I can use that just like sketching.

David Solace says:

great, just stumbled on your videos, thanks for the tips. awesome videos

Lee Wood says:

Really good information with lots of helpful tips, all in a concise order. No fluff and I learned a lot. Really upbeat and a superb example of what a tutorial video should be.

Write a comment