How to wireframe a website | CharliMarieTV

  Рет қаралды 434,400

CharliMarieTV

CharliMarieTV

8 жыл бұрын

See a more recent version of my wireframing process in this video: • How to wireframe a web...
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 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!
--------------------------------
// WANT TO SUPPORT MY CHANNEL?
Become a ✨channel member✨ and get a cool icon next to your name in livestream chats, plus priority replies to your comments. Just click 'Join' (it's next to the subscribe button)
Or, if you like, you can put something in my tip jar right here: pages.charlimarie.com/product...
Sharing my videos or recommending my channel to a design friend is also very much appreciated! :)
--------------------------------
// ABOUT ME
I'm Charli and I'm designer from New Zealand currently living in Valencia, Spain. I’m the Creative Director at a remote tech company called ConvertKit and I posting videos about the design projects I work on and the tools I use, as well as vlogs of my life as a designer. I regularly livestream what I'm working on in Coworking Club streams. Welcome to the channel! Please subscribe and say hi in the comments, and maybe we'll see you in the live chat on the next stream.
💬 Twitter: / charliprangley
📷 Instagram: / charliprangley
--------------------------------
// MORE
Join my free weekly marketing design newsletter: charli.link/newsletter
Buy my hand written font, Grayscale: charlimarie.com/font
Book a mentoring session with me: charli.link/mentoring
My site & blog: charlimarie.com
Design Life podcast: designlife.fm
Inside Marketing Design podcast: insidemarketingdesign.co/
--------------------------------
// TECH & TOOLS
📹 Get links to all the tech hardware I use to make my videos (and the art on my gallery wall!) right here: charlimarie.com/shopmyoffice
💻 Software I use:
Webflow (no-code website builder)*: charli.link/webflow
Premiere Pro (video editing)*: charli.link/premierepro
Adobe Audition (audio recording)*: charli.link/audition
After Effects (intro animation)*: charli.link/aftereffects
Figma (web design): charli.link/figma
Photoshop (thumbnails)*: charli.link/photoshop
ConvertKit (marketing platform): charli.link/try-convertkit
Riverside (podcast interview recording)*: charli.link/riverside
Music in this video from Epidemic Sound*: charli.link/epidemicsound
Video captions by Rev (very cost effective service! I recommend)*: charli.link/videocaptions
Intro & end card animation by Austin Saylor: www.austinsaylor.com/
Editing by Nancy Palm nancypalm.com & Belén Albiol / molen.audiovisual (or sometimes by me!)
Links marked with a * are affiliate links. I can't believe you read the whole description box! You get a ⭐️

Пікірлер: 515
@karenkavett
@karenkavett 8 жыл бұрын
I love this! I am definitely guilty of skipping straight to the design stage way too often, haha.
@charlimarieTV
@charlimarieTV 8 жыл бұрын
Karen Kavett Don't worry I think we all are!!
@ChloeRoseArt
@ChloeRoseArt 8 жыл бұрын
Web design has been something I've experimented since I was 13. I really love it. I'm currently in my third year studying Computer Science, and I would really love to go into front end development instead of back-end. However, because I'm studying Computer Science, I'm obviously only learning the coding side of things, not so much the "design". I really want to know more about the design side as well so I can understand the best of both worlds. Your videos are incredibly helpful to me! I draw a lot, and love that, I'm hoping that will help me a bit too. You're an inspiration to me Charli, I really admire you. :)
@charlimarieTV
@charlimarieTV 8 жыл бұрын
Chloe Rose that's awesome Chloe!! I'm trying to get my head around 'teaching' videos like this one so that I can start to make some about design principles and stuff because it sounds like it will really come in handy for you to learn design thinking alongside your development skills. drawing will definitely help a lot, cos you'll be instinctively thinking about composition which is a HUGE part of design :)
@ChloeRoseArt
@ChloeRoseArt 8 жыл бұрын
You're honestly a great teacher, that's why I enjoy your videos; you make things easy to understand. That's incredibly kind of you, yes they will come in SO handy! I enjoy every video you put out there :) Thanks for putting out consistently amazing content :D
@SJ-vo2om
@SJ-vo2om 8 жыл бұрын
Short in length, Precise to points and Beautiful in presentation. You got me subscribed :) Good work Charli !!
@charlimarieTV
@charlimarieTV 8 жыл бұрын
+seenu jacob woohoo! Thank you :) So glad you enjoyed it. I have more design tutorials like this coming up in the next few months.
@roxanneallard5302
@roxanneallard5302 6 жыл бұрын
I love this. Very straight forward and easy to understand.
@courtneywarmanrecio6749
@courtneywarmanrecio6749 4 жыл бұрын
Thank you so much for sharing your ideas and techniques. I am new to wireframing and your tips are extremely helpful! Thanks again!
@divinenonbinary
@divinenonbinary 3 жыл бұрын
Very useful. Ive been procrastinating building me a website for a while now, not the least bc I couldnt find anyone to explain important steps in a digestible, quick manner. Love your vids, thank you
@CloudsClauds
@CloudsClauds 8 жыл бұрын
Thanks for this! This is so useful for my uni assignment at the moment. Love your design videos!
@oscarzezatti5735
@oscarzezatti5735 8 жыл бұрын
Thanks for sharing! I've been watching quite a few wireframing tutorials this week. You explain it every efficiently and I like that.
@charlimarieTV
@charlimarieTV 8 жыл бұрын
+Oscar Zezatti glad you found it useful Oscar! :)
@HannaCreative
@HannaCreative 8 жыл бұрын
This was so helpful, thank you! I'm actually working on a website myself and this just got me really inspired :)
@charlimarieTV
@charlimarieTV 8 жыл бұрын
+HannaCreative awesome Hanna!
@E23lad
@E23lad 7 жыл бұрын
Love the way you work and plan ahead!
@ForeverDansky
@ForeverDansky 7 жыл бұрын
Great video Charli - thanks for sharing your process/techniques :)
@charlimarieTV
@charlimarieTV 7 жыл бұрын
thanks for watching!
@SpaD389
@SpaD389 4 жыл бұрын
WOW. THIS IS SUCH A GREAT AND USEFUL VIDEO! THANK YOU SO MUCH! YOU'VE GOT SO MUCH TALENT.
@SpencerBoechler
@SpencerBoechler 8 жыл бұрын
You're design vids are amazing!!! Keep them coming! I love everything on your channel, it's everything I like on KZfaq in once place lol
@charlimarieTV
@charlimarieTV 8 жыл бұрын
SpencerBoechler ahh this is an amazing comment! thank you so much for watching :D
@nesquikg7866
@nesquikg7866 6 жыл бұрын
Thanks Charlie for your sharing of knowledge!
@michaelzimmerman3285
@michaelzimmerman3285 4 жыл бұрын
Here 4 years late lol but great video! I am an SEO Specialist that started a Web Design and Development firm and our designer didn't like being committed to a company so I watched this to understand what goes into a wireframe of a website! Thank you!
@YashwanthP
@YashwanthP 7 жыл бұрын
I just loved how well you explained everything.
@charlimarieTV
@charlimarieTV 7 жыл бұрын
+Yashwanth Yash thank you!
@elliefoster9555
@elliefoster9555 6 жыл бұрын
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!
@charlimarieTV
@charlimarieTV 6 жыл бұрын
glad I could help Ellie!
@mrjean321
@mrjean321 7 жыл бұрын
you explained everything very clearly :) Congrats! And thanks for the tips.
@tinnguyen2219
@tinnguyen2219 5 жыл бұрын
Thank you so much for sharing such useful data! Greatly appreciated.
@skeeterbrookscreationsllc2106
@skeeterbrookscreationsllc2106 5 жыл бұрын
I an so enjoying your videos. They really put things in perspective.
@foxtowercommunications
@foxtowercommunications 5 жыл бұрын
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!
@theBellinghamster
@theBellinghamster 7 жыл бұрын
Thank you! Super helpful explanation of your process.
@petezzza
@petezzza 6 жыл бұрын
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.
@brandmoriantez2774
@brandmoriantez2774 4 жыл бұрын
Thanks Charlie Marie alot because the video has helped me in my assignment.....
@AmbitiousKells
@AmbitiousKells 3 жыл бұрын
Great video! I'm new to web development and this what short sweet and to the point. Thank you
@Zoe-bt8kt
@Zoe-bt8kt 7 жыл бұрын
I'm trying to teach myself the basics of web design at the moment so found this extremely useful - thank you! Subscribed :)
@SovonHalder
@SovonHalder 6 жыл бұрын
I'm binge watching all your videos. :)
@AdrianToddRoss
@AdrianToddRoss 3 жыл бұрын
Thanks for this video! I always reference it when I am feeling iffy about wireframing on paper.
@SamSteve1984
@SamSteve1984 4 жыл бұрын
That's really cool and simple to use. Love the crazy 8 Idea!
@fredericfeliciane2711
@fredericfeliciane2711 5 жыл бұрын
Thank you for these tips, exactly what i needed. Particularly the crasy 8`s.
@JosueM81
@JosueM81 5 жыл бұрын
Thank you for the video, I have found it very helpful - stumped I was. Great job on the video! keep'em coming🎥
@nycjedi54
@nycjedi54 7 жыл бұрын
What a nice, and simplistic way to teach others wireframe design! Two thumbs up Charli 👌
@charlimarieTV
@charlimarieTV 7 жыл бұрын
thanks Joe!
@danielade-otoki4074
@danielade-otoki4074 3 жыл бұрын
Learnt alot on just few minutes. Thanks
@nehede13
@nehede13 5 жыл бұрын
I'm thinking about changing careers to UX design. This was a really helpful insight. Thanks. Also, you are very likable and easy to listen to.
@richwork1
@richwork1 7 жыл бұрын
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.
@dedlifter9212
@dedlifter9212 4 жыл бұрын
Wow, thank you so much for this video. Found your techniques very interesting and helpful! I love the "Crazy 8's" technique!
@Asteria_Fox
@Asteria_Fox 6 жыл бұрын
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!
@BrianKato
@BrianKato 7 жыл бұрын
I love the crazy 8's exercise! Totally using this in the next brainstorm session at my agency.
@charlimarieTV
@charlimarieTV 7 жыл бұрын
it's so useful right!?
@BrianKato
@BrianKato 7 жыл бұрын
+CharliMarieTV for sure! I think this just made my week
@kjmblog
@kjmblog 5 жыл бұрын
I love your video, you give many useful pieces of information. Thanks for sharing! :)
@ZeFluffmeister
@ZeFluffmeister 8 жыл бұрын
I don't know the first thing about anything like this so I find this video so interesting! Thanks for making it!
@charlimarieTV
@charlimarieTV 8 жыл бұрын
katiemayoxx that's so awesome. Thanks for watching Katie :)
@juliajohnson3273
@juliajohnson3273 5 жыл бұрын
I usually don't leave comments, but I had to this one time. Your video was extremely helpful for my course project! It was straight to the point and easy to understand. Thank you so much!
@charlimarieTV
@charlimarieTV 5 жыл бұрын
thanks for watching Julia! I really appreciate you taking the time to comment!
@irawhany4525
@irawhany4525 4 жыл бұрын
I like this video! Ispired me to start designing. I am beginners in this world. Thanks a lot Charli :)
@juelsoncia7110
@juelsoncia7110 6 жыл бұрын
Great method on the paper!
@Teddy-rh8vl
@Teddy-rh8vl 4 жыл бұрын
That 8 drawings of wireframes is so damn good. Thank yaaa missy for this awesome information !
@2011ICANDY
@2011ICANDY Жыл бұрын
Thank you this was a big help!!!
@ninas1675
@ninas1675 7 жыл бұрын
I love your design related videos! really easy to understand and i always get in a creative mood. moooooore please!! :)
@charlimarieTV
@charlimarieTV 7 жыл бұрын
I LOVE making them so I'm so pleased you like them! more are coming don't you worry!
@andersonjs7823
@andersonjs7823 7 жыл бұрын
Excellent video! Thanks...
@luuksiewers2296
@luuksiewers2296 8 жыл бұрын
To draw as many wireframes as you can first seems like a very effective way to get inspiration. Thanks a lot!
@charlimarieTV
@charlimarieTV 8 жыл бұрын
+LuukS iewers super effective! give it a try :)
@xboxfifatv
@xboxfifatv 7 жыл бұрын
Hi Charli - I really liked the way your helped us think in the designer way. For a long time, I was struggling to find the right design for my product, I am lucky to find your video. I especially like the idea of having 8 or more designs to a single page. Loved it Thank you so much.
@charlimarieTV
@charlimarieTV 7 жыл бұрын
glad you found it useful!
@gerardotorresdavila1646
@gerardotorresdavila1646 7 жыл бұрын
These are such great videos! Thank you for this content Charli!
@charlimarieTV
@charlimarieTV 7 жыл бұрын
so glad you enjoy my video :)
@racheldala6953
@racheldala6953 3 жыл бұрын
Thanks for this Charli! Learned so much :)
@aaronalex8568
@aaronalex8568 4 жыл бұрын
Thank you! Lovely video
@keshavdussal7371
@keshavdussal7371 5 жыл бұрын
Thanks for clearing my terms
@elvisadjei2062
@elvisadjei2062 8 жыл бұрын
Good Work CharliMarie, i love this tutorial
@charlimarieTV
@charlimarieTV 8 жыл бұрын
+Elvee Nana so glad you enjoyed it :)
@mostafaismail43
@mostafaismail43 7 жыл бұрын
Excellent, concise and very clear.
@charlimarieTV
@charlimarieTV 7 жыл бұрын
thanks Mostafa :)
@themightynewholland
@themightynewholland 7 жыл бұрын
Thanks for this!! Trying to complete an assignment for OU module and needed ideas on Wireframes and what to include for 'rough sketch'. This really helped. Very clear and concise!!
@charlimarieTV
@charlimarieTV 7 жыл бұрын
glad I could help!
@leewoodauthor
@leewoodauthor 6 жыл бұрын
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.
@charlimarieTV
@charlimarieTV 6 жыл бұрын
+Lee Wood thank you Lee! What wonderful feedback!
@mayeginz
@mayeginz 8 жыл бұрын
This is a fantastic video, really clear and helpful! Thank you so much!
@charlimarieTV
@charlimarieTV 8 жыл бұрын
Ginz So glad you found it helpful! thank you :)
@elcasa6587
@elcasa6587 3 жыл бұрын
If you're ever in the states. I owe you lunch ;) I"m a Sr. Industrial Designer but am just starting in UXUI and was so nervous about making this transition. You've helped to take away the mystery and concerns that I've had about UXUI. Thanks Charli, You're my Shero!!!
@guitaracademyarchive
@guitaracademyarchive 4 жыл бұрын
Thank you so much for these tips! This is greatly helping me through the process.
@charlimarieTV
@charlimarieTV 4 жыл бұрын
glad to hear it!
@phpdeveloper1253
@phpdeveloper1253 4 жыл бұрын
Great i will definitely follow your method
@sugarplumjemma
@sugarplumjemma 3 жыл бұрын
Fabulous video - thank you
@DDSFura
@DDSFura 6 жыл бұрын
Great & short introduction to webdesign. Thanks for the great work, keep it up :)
@MVandoff
@MVandoff 4 жыл бұрын
Wow I love that crazy 8's technique thank you!
@terjemullerkarlsen3028
@terjemullerkarlsen3028 5 жыл бұрын
Thank you for a very nice video. Real help!
@webcoder2583
@webcoder2583 5 жыл бұрын
you really help me to improve my skills thanks alot!
@pineysilver4406
@pineysilver4406 8 жыл бұрын
Fascinating! Very similar to the process I use in print design. It is helpful to realize the similarities as I'm considering changing sector. Your tutorial style is great!
@charlimarieTV
@charlimarieTV 8 жыл бұрын
piney silver yes you're right!! there are definite similarities :) I too switched from print to web design (and still do a bit of print). it was a fun change to make! Wishing you all the best if you do decide to make the change :)
@designsbypk7020
@designsbypk7020 7 жыл бұрын
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.
@GetHandsDirty
@GetHandsDirty 8 жыл бұрын
Just found your channel, watched this video and immediately subscribed! Really good video and content :)
@charlimarieTV
@charlimarieTV 8 жыл бұрын
+Get Hands Dirty yay! Glad you found my channel :)
@israellaveaga1202
@israellaveaga1202 3 жыл бұрын
hey Charli, so happy to have found your channel. learning a lot. A video on process of a webpage design would be great... illustrating how you start and end your webdesign would be great... or do you have a any references. I'm a graphic designer who mainly works in print, but am now crossing over to web.
@Paigeboyd1
@Paigeboyd1 8 жыл бұрын
These videos are really helpful, I'm studying website design at university at the moment and it's always nice to get pointers from a professional!
@charlimarieTV
@charlimarieTV 8 жыл бұрын
Paige Boyd that's awesome! If there is ever anything you'd like to hear a video on let me know. I'm sure if you're wondering about it others will be too :)
@vishalkadam5879
@vishalkadam5879 7 жыл бұрын
I like your process, good
@juraj7724
@juraj7724 7 жыл бұрын
Great video, loved it. Thank you
@charlimarieTV
@charlimarieTV 7 жыл бұрын
thank you for watching!
@finny3990
@finny3990 3 жыл бұрын
This is really helpful for me rn. I have to design a website for school and my teacher didn’t explain anything so here I am watching tutorials on KZfaq.🙃
@TheCatarrh
@TheCatarrh 6 жыл бұрын
Thank you CharliMarie
@smdforce3174
@smdforce3174 7 жыл бұрын
Very nice and useful video.Thanks!
@charlimarieTV
@charlimarieTV 7 жыл бұрын
you're welcome!
@Heboras1106
@Heboras1106 5 жыл бұрын
A genuine kreative designer - 👏 👏
@alinawaz4034
@alinawaz4034 5 жыл бұрын
this is very good video very nice explanation!!
@francisbotha7483
@francisbotha7483 3 жыл бұрын
Well explained. Thumbs up.
@talkabouttechdeepak
@talkabouttechdeepak 6 жыл бұрын
This is Awesome !!!
@BlueTreeCode
@BlueTreeCode 4 жыл бұрын
Thanks! This was really helpful!
@Kailas21
@Kailas21 3 жыл бұрын
Wow it's great i will use it is very easy to draw a prototype layout of website..
@buddyleeorg
@buddyleeorg 7 жыл бұрын
Outstanding!
@shaunakmodi
@shaunakmodi 8 жыл бұрын
This really helps! Thanks.
@charlimarieTV
@charlimarieTV 8 жыл бұрын
+Shaunak you're welcome!
@pranoymehra2150
@pranoymehra2150 4 жыл бұрын
Very helpful, thank you :)
@MrSteve0125
@MrSteve0125 5 жыл бұрын
super helpful!
@Michaelderwogutist
@Michaelderwogutist 7 жыл бұрын
Nice one. This helped me a couple weeks back and does now! Cheers!
@charlimarieTV
@charlimarieTV 7 жыл бұрын
+Michael Neumeier so pleased! :)
@dianerose2998
@dianerose2998 8 жыл бұрын
Excellent advice! Thank you.
@charlimarieTV
@charlimarieTV 8 жыл бұрын
+Diane Rose you're very welcome :)
@kennytieshisshoes
@kennytieshisshoes 7 жыл бұрын
Love this, I really need to redesign my website and this is helping me kick it into gear.
@charlimarieTV
@charlimarieTV 7 жыл бұрын
+kennytieshisshoes I'm glad!
@derekshort
@derekshort Жыл бұрын
Gorgeous! 😮
@marcdimarc1
@marcdimarc1 5 жыл бұрын
Sweet !!! Thanks for the info
@LaBoutiqueMaurice
@LaBoutiqueMaurice 4 жыл бұрын
Thanks I found this video useful!
@jezzaborja6737
@jezzaborja6737 8 жыл бұрын
this is really helpful. thanks!
@charlimarieTV
@charlimarieTV 7 жыл бұрын
glad I could help!
@souandremoura
@souandremoura 4 жыл бұрын
Adorei. Parabéns
@davidalvarado7270
@davidalvarado7270 Жыл бұрын
Excellent video Charli, my brain almost died when you made the first list on the paper with everything bendy hahaha.
@thewildferny
@thewildferny 8 жыл бұрын
I lovvvvvve your design vids! Once I am done with my advertising degree, I will go for graphic design, and your vids help me understand and know more things about it. Thanks!
@charlimarieTV
@charlimarieTV 8 жыл бұрын
sheldon johnson that's awesome! Your advertising degree will give you a head start in learning graphic design I'm sure, because you'll already have that solid base of creative thinking :)
@derekshort
@derekshort Жыл бұрын
Good video. Thanks!
@AndyVasile
@AndyVasile 8 жыл бұрын
Thanks so much! this is exactly what I've been chasing after :)
@charlimarieTV
@charlimarieTV 8 жыл бұрын
+Andy Vasile awesome! glad you found it useful :)
@marimuthur4238
@marimuthur4238 7 жыл бұрын
Really good video and content..! Thanks.
@websachi
@websachi 8 жыл бұрын
Very informative video tutorial, Thanks a lot
@charlimarieTV
@charlimarieTV 8 жыл бұрын
You're welcome!
How to wireframe a website
13:51
CharliMarieTV
Рет қаралды 117 М.
Website Design Process for Clients (Start to Finish)
18:49
Megan Weeks
Рет қаралды 75 М.
WHO DO I LOVE MOST?
00:22
dednahype
Рет қаралды 22 МЛН
1 класс vs 11 класс  (игрушка)
00:30
БЕРТ
Рет қаралды 3,4 МЛН
Шокирующая Речь Выпускника 😳📽️@CarrolltonTexas
00:43
Глеб Рандалайнен
Рет қаралды 11 МЛН
How To Create Your First Wireframe (A UX Tutorial)
12:52
CareerFoundry
Рет қаралды 568 М.
10 Pro tips to get the most out of FigJam
6:51
CharliMarieTV
Рет қаралды 10 М.
Revealing what I earned in the last 12 months 💸
10:42
CharliMarieTV
Рет қаралды 8 М.
Web Design From Start to Finish (Part 1): Wireframes & Content
15:02
Reading you my performance review!
13:36
CharliMarieTV
Рет қаралды 3,6 М.
How to start a website layout (for complete beginners)
25:15
Flux Academy
Рет қаралды 32 М.
How to use AI Art and ChatGPT to Create a Insane Web Designs
22:21
Codex Community
Рет қаралды 3,9 МЛН
Designing a website - Episode 1: Planning & site map!
10:50
CharliMarieTV
Рет қаралды 476 М.
What is a Wireframe?
5:10
Evolve Marketing
Рет қаралды 291 М.
Try this 🤣  #funny #trending
0:14
Dung ABC
Рет қаралды 23 МЛН
Kashvi gir gayi 🥲 (she is fine now)
0:25
Cute Krashiv
Рет қаралды 15 МЛН
Quick Wire Twisting Tool ##❗️❗️
0:13
ToolBox Talk 20
Рет қаралды 6 МЛН
Дочь помогла Отцу 🥹❤️ #shorts #фильмы
0:33