How to wireframe a website | CharliMarieTV

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

КОМЕНТАРІ • 515

  • @ChloeRoseArt
    @ChloeRoseArt 9 років тому +29

    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  9 років тому +2

      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 9 років тому

      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

  • @karenkavett
    @karenkavett 9 років тому +38

    I love this! I am definitely guilty of skipping straight to the design stage way too often, haha.

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

      Karen Kavett Don't worry I think we all are!!

  • @novelafilmacademy
    @novelafilmacademy 4 місяці тому

    Great tutorial! I appreciate the clear and concise explanations of the wireframing process, as well as the emphasis on the importance of creating a solid foundation for website design.

  • @ForeverDansky
    @ForeverDansky 8 років тому +14

    Great video Charli - thanks for sharing your process/techniques :)

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

    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  6 років тому

      thanks for watching Julia! I really appreciate you taking the time to comment!

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

    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!

  • @luuksiewers2296
    @luuksiewers2296 9 років тому

    To draw as many wireframes as you can first seems like a very effective way to get inspiration. Thanks a lot!

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

      +LuukS iewers super effective! give it a try :)

  • @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.

  • @HannaCreative
    @HannaCreative 9 років тому +28

    This was so helpful, thank you! I'm actually working on a website myself and this just got me really inspired :)

  • @georgeskmd
    @georgeskmd 9 років тому +13

    Short in length, Precise to points and Beautiful in presentation. You got me subscribed :)
    Good work Charli !!

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

      +seenu jacob woohoo! Thank you :) So glad you enjoyed it. I have more design tutorials like this coming up in the next few months.

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

    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!

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

    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

  • @Paigeboyd1
    @Paigeboyd1 9 років тому

    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  9 років тому

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

  • @BrianKato
    @BrianKato 8 років тому +14

    I love the crazy 8's exercise! Totally using this in the next brainstorm session at my agency.

    • @charlimarieTV
      @charlimarieTV  8 років тому +2

      it's so useful right!?

    • @BrianKato
      @BrianKato 8 років тому

      +CharliMarieTV for sure! I think this just made my week

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

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

  • @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.

  • @nycjedi54
    @nycjedi54 8 років тому

    What a nice, and simplistic way to teach others wireframe design!
    Two thumbs up Charli 👌

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

    I love this. Very straight forward and easy to understand.

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

    I like this video! Ispired me to start designing. I am beginners in this world. Thanks a lot Charli :)

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

  • @oscarzezatti5735
    @oscarzezatti5735 9 років тому

    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  9 років тому

      +Oscar Zezatti glad you found it useful Oscar! :)

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

    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.

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

    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  7 років тому

      +Lee Wood thank you Lee! What wonderful feedback!

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

    Thanks Charlie Marie
    alot because the video has helped me in my assignment.....

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

  • @smayjay
    @smayjay 9 років тому

    I always find it interesting to see how people come up with ideas, I really like the idea of almost "emptying your brain" of all possible ideas in order to find the perfect one :)

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

      Smay Prangley yeah! You feel silly at first when you come up with something that is obviously not going to work... but it isn't obvious until you put it on paper so it's good to get it out of your head so you can move on from it!

  • @ninas1675
    @ninas1675 8 років тому

    I love your design related videos! really easy to understand and i always get in a creative mood. moooooore please!! :)

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

      I LOVE making them so I'm so pleased you like them! more are coming don't you worry!

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

    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!

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

    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.

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

    I'm binge watching all your videos. :)

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

    WOW. THIS IS SUCH A GREAT AND USEFUL VIDEO! THANK YOU SO MUCH! YOU'VE GOT SO MUCH TALENT.

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

    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 UA-cam.🙃

  • @YashwanthP
    @YashwanthP 8 років тому

    I just loved how well you explained everything.

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

    Thanks for this video! I always reference it when I am feeling iffy about wireframing on paper.

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

    Good tip on wireframing; I'm just getting into for prototyping - like the sharpie and paper approach.

  • @thewildferny
    @thewildferny 9 років тому

    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  9 років тому

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

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

    Love the way you work and plan ahead!

  • @Teddy-rh8vl
    @Teddy-rh8vl 5 років тому +2

    That 8 drawings of wireframes is so damn good. Thank yaaa missy for this awesome information !

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

    Great video! I'm new to web development and this what short sweet and to the point. Thank you

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

    Thanks Charlie for your sharing of knowledge!

  • @ZeFluffmeister
    @ZeFluffmeister 9 років тому +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  9 років тому

      katiemayoxx that's so awesome. Thanks for watching Katie :)

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

    I an so enjoying your videos. They really put things in perspective.

  • @SpencerBoechler
    @SpencerBoechler 9 років тому

    You're design vids are amazing!!! Keep them coming! I love everything on your channel, it's everything I like on UA-cam in once place lol

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

      SpencerBoechler ahh this is an amazing comment! thank you so much for watching :D

  • @nevarware
    @nevarware 9 років тому +1

    Loved this. I've been really caught up on the idea that I need to find the right wireframing software to use and have kind of let that blind me to the fact that the process is much slower if you don't start by hand (which also would discourage me from exploring alternatives - an area I have problems with already). I've got a small series of notes from this that I think will help me out a lot.

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

      nevarware that's SO good to hear! Honestly, comments like this are why I make videos. Thanks for taking the time to share your thoughts. I'm so glad you found this video useful :)

  • @elvisadjei2062
    @elvisadjei2062 8 років тому

    Good Work CharliMarie, i love this tutorial

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

      +Elvee Nana so glad you enjoyed it :)

  • @danielade-otoki4074
    @danielade-otoki4074 4 роки тому

    Learnt alot on just few minutes. Thanks

  • @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 :)

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

    Not only the looks but talent is really effective

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

      yes, my looks really help me a lot with web design.

  • @SubashMatheswaran
    @SubashMatheswaran 8 років тому

    Simple and very clear explanation. Crazy 8 idea was really helpful. Keep on making such great contents. Thank you.

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

    That's really cool and simple to use. Love the crazy 8 Idea!

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

    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!

  • @pineysilver4406
    @pineysilver4406 9 років тому +1

    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  9 років тому

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

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

    Thanks a lot for this video, it's simple and clear, perfect for me because i'm starting to learn web development just two weeks ago. :)

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

    I'm learning how to code/design websites at uni and I have been stuck with where to start, this crazy 8s exercise has got me through that block!

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

    Great method on the paper!

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

    Excellent video Charli, my brain almost died when you made the first list on the paper with everything bendy hahaha.

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

    Thank you I learnt something new today. I'm a newbie to web dev and this really helps me figure out the designs... btw you look super cute when talking about stuff lol

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

      i'm glad you found the video useful, but it's really degrading to say I "look cute when talking about stuff". My value as an educator is not at all connected to my appearance and when you comment like this, it tells me that that is what you value.

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

      @@charlimarieTV Your video was indeed helpful and when I said "whatever I said" that was a form of complement to you as a person, you are content creator and being one of your viewers and followers I personally think there's nothing wrong with it and if that bothers you imma just take that back and no I value your content more than your appearance so that's not what I'm after nor looking for. Anyways its entirely upto you how you percieve it, just smile and get on with your day. Anyways cheers. Stay healthy and safe. Adios!

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

    Thank you for these tips, exactly what i needed. Particularly the crasy 8`s.

  • @gerardotorresdavila1646
    @gerardotorresdavila1646 8 років тому

    These are such great videos! Thank you for this content Charli!

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

    Wow, thank you so much for this video. Found your techniques very interesting and helpful! I love the "Crazy 8's" technique!

  • @designsbypk7020
    @designsbypk7020 8 років тому

    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.

  • @jaideeparora_
    @jaideeparora_ 8 років тому

    It was very useful and simple to understand. Thanks for making the tutorial :)

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

      +Jaideep Arora I'm so glad you found it useful! :)

  • @roifrance6279
    @roifrance6279 8 років тому

    I am beginner in learning web design.. Thank you for this video tutorial.

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

      +Roi France you're welcome! I hope you found it useful :)

  • @CloudsClauds
    @CloudsClauds 9 років тому

    Thanks for this! This is so useful for my uni assignment at the moment. Love your design videos!

  • @Michaelderwogutist
    @Michaelderwogutist 8 років тому

    Nice one. This helped me a couple weeks back and does now! Cheers!

  • @theBellinghamster
    @theBellinghamster 8 років тому

    Thank you! Super helpful explanation of your process.

  • @BeautyInAmin
    @BeautyInAmin 9 років тому

    Ahh yes we like to call this storyboarding on my project... great job thanks for sharing your process. :)

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

      BeautyInAmin thank you for watching :D

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

    Thanks for this Charli! Learned so much :)

  • @thevalterplay
    @thevalterplay 8 років тому

    very nice, I am starting in design's world and your video helps me so much. thank you

  • @jemmgfx6915
    @jemmgfx6915 9 років тому

    A brilliant K iwi designer I love your stuff. you really inspired me to design in a more real way. Id love to do you tube videos too but I just dont have the face for it. Keeping Kiwi's on the map. priceless

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

      Thanks so much!! And don't be so hard on yourself, if you think you have some stuff to share that people would benefit from you should totally make videos!

  • @mrjean321
    @mrjean321 8 років тому

    you explained everything very clearly :) Congrats! And thanks for the tips.

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

    Thank you so much for these tips! This is greatly helping me through the process.

  • @jasonmurphy1499
    @jasonmurphy1499 8 років тому

    Thank you for the very helpful video! I really like the 'Crazy 8s' approach!

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

      you're welcome! it's a great technique. so pleased I learned it.

  • @mayeginz
    @mayeginz 9 років тому

    This is a fantastic video, really clear and helpful! Thank you so much!

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

      Ginz So glad you found it helpful! thank you :)

  • @samanthaleigh2794
    @samanthaleigh2794 9 років тому

    Great video! I'm really interested in anything web-design related, coz I've only ever done print design so I find these videos fascinating.

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

      Samantha Leigh that's awesome to hear! You should totally try out web design, I bet you'll find your print design skills translate well!

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

    Wow it's great i will use it is very easy to draw a prototype layout of website..

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

    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.

  • @mostafaismail43
    @mostafaismail43 8 років тому +3

    Excellent, concise and very clear.

  • @fairlyinterested
    @fairlyinterested 9 років тому

    It's an definitely important step of design! There are a few times for assignments I tried to jump right into indesign and it always seemed to take ten times longer to come up with something that way.

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

      Fairly Interested yes exactly! I've done the same thing loads of times and following a process like this always mean I get better results :)

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

    Great & short introduction to webdesign. Thanks for the great work, keep it up :)

  • @kennytieshisshoes
    @kennytieshisshoes 8 років тому

    Love this, I really need to redesign my website and this is helping me kick it into gear.

  • @LuciaMontesEN
    @LuciaMontesEN 9 років тому

    This was genuinely very interesting to watch and hear!
    Also, love your lipstick :)

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

    We have the same process! Except I use Photoshop (been using is since the late 90's when I was still in secondary school). Fantastic.

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

      fair enough! whatever works best for you and your process :)

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

    Hi!
    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!
    = )

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

      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

  • @dianerose2998
    @dianerose2998 9 років тому

    Excellent advice! Thank you.

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

    Thank you so much for sharing such useful data! Greatly appreciated.

  • @tabithao.abiola7540
    @tabithao.abiola7540 3 роки тому

    Simplistic but at the same time great wireframing approach.
    Is it good advice if one knows at three 3 different types of proryping tools and if so, which would you nominate?

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

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

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

      +David Solace welcome to my channel David! :)

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

    Thank you for the video, I have found it very helpful - stumped I was. Great job on the video! keep'em coming🎥

  • @PositivePulse1785
    @PositivePulse1785 9 років тому

    Good video !! You made my work really easier

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

      +Gurevitch Fifito Insali i'm so glad to hear that! :)

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

    Wow I love that crazy 8's technique thank you!

  • @Louis-kr6of
    @Louis-kr6of 8 років тому

    Nice video ! I'm just starting wireframing and design. I think you're gonna help me well ! Continue :)
    Thanks !

  • @smdforce3174
    @smdforce3174 8 років тому

    Very nice and useful video.Thanks!

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

    Great i will definitely follow your method

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

    Thank you for a very nice video. Real help!

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

    this is very good video very nice explanation!!

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

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

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

      ooo I've not used that yet! need to try it out.

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

    you really help me to improve my skills thanks alot!

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

    Thank you for your tutorial. I found it helpful.

  • @websachi
    @websachi 9 років тому

    Very informative video tutorial, Thanks a lot