How to Use Balsamiq Wireframes: A Beginner-Friendly Tutorial!

แชร์
ฝัง
  • เผยแพร่เมื่อ 15 พ.ย. 2024

ความคิดเห็น • 72

  • @JoeVidal1970
    @JoeVidal1970 2 ปีที่แล้ว +28

    I can't believe that Balsamiq couldn't produce a tutorial like this one through their own website. It takes some real know-how to be able to explain certain things to certain people when it's their very first time dealing with subjects of this nature. Thank you for this tutorial. They should have paid you!

    • @ulearntech
      @ulearntech  2 ปีที่แล้ว +9

      @Jose Vidal, You are very kind. Since I have taught for over ten years, hearing that my tutorials make a difference in a person's learning process means more than anything. Thank you.

  • @jolajed
    @jolajed 2 ปีที่แล้ว +3

    I have actually deisgned a website using this fantastic tutorial. thank you

    • @ulearntech
      @ulearntech  2 ปีที่แล้ว +1

      Awesome to hear this tutorial helped you along your journey in learning

  • @anandaliraa2894
    @anandaliraa2894 8 หลายเดือนก่อน +2

    thank you so much for the tutorial! this is really helpful for me who never learn UX before!

    • @ulearntech
      @ulearntech  8 หลายเดือนก่อน +1

      @anandaliraa2894 You're welcome! I'm thrilled to hear that the tutorial was helpful for you, especially considering your newness to UX. Another valuable tool widely used in the UX field is either Figma or Adobe XD. However, it's worth noting that when attempting to download Adobe XD, you may encounter a 'Maintenance Mode' message, requiring a 24-hour wait period before installation becomes available.
      Many of my students prefer using Adobe XD due to its unique features, which differ from those of Figma, and vice versa. On the other hand, Balsamiq is an excellent starting point for wireframe design due to its user-friendly interface. I particularly appreciate its ability to effortlessly transition from rough sketches to more refined drawings at the click of a button!
      If you have any further questions or need additional clarification, don't hesitate to reach out! Please make sure to either bookmark this video, or hit to subscribe to get more hot tips and tricks! And thanks again for leaving a kind comment, I always wonder if I make impact with people learning new skills!

  • @kathyxie3133
    @kathyxie3133 2 ปีที่แล้ว +3

    Thank you very much! With your video I was able to finish my work easily and in time. It's so clear and helpful.

    • @ulearntech
      @ulearntech  2 ปีที่แล้ว +1

      @Kathy Xie, glad to hear that this video was able to get you up to speed and get the work done on time.

  • @soguera9552
    @soguera9552 3 ปีที่แล้ว +3

    Thank you for this, definitely the best tutorial video I’ve seen, for your pedagogy and the progressive way of explaining with a simple and smart plug ! Thank's again

    • @ulearntech
      @ulearntech  3 ปีที่แล้ว +1

      @So Guera, I'm glad the video was helpful and resourceful for you to create your wireframes. The nice thing about getting up to speed and hitting the ground running is that you don't waste your time flailing around with videos that "don't get to the point." If you like subscribe to the channel and turn the notifications on as I plan to do a 2022 version of Balsamiq with the updated features and all. Thanks again for watching the video with others and hope to hear from you in 2022!

  • @kat-vision1458
    @kat-vision1458 ปีที่แล้ว

    Great Tutorial. I can watch it over and over again, it's so informative.

    • @ulearntech
      @ulearntech  ปีที่แล้ว +1

      Hey @kat-vision1458, thanks for the sweet compliment! Do you watch it on repeat to doze off while you work? That video was from my early days, and I admit, I had a pretty monotone voice back then. If you enjoyed that, you might want to check out the "All of the Videos Playlist." Thanks again for tuning in! 😊

  • @ridwanolaniran4700
    @ridwanolaniran4700 6 วันที่ผ่านมา +1

    Very ell explained. Love it!

    • @ulearntech
      @ulearntech  6 วันที่ผ่านมา

      @ridwanolaniran4700 It's awesome to hear that this video is still relevant and useful. It's always motivating to know that I've helped people. I highly recommend this video to anyone who is interested in learning more about *Balsamiq Wireframes* or who is looking for a tool to help them create wireframes for their own projects. *_Thanks again for watching!_*

  • @TrueHero117
    @TrueHero117 4 ปีที่แล้ว +4

    Thank you for this, definitely the best tutorial video I’ve seen!

    • @ulearntech
      @ulearntech  4 ปีที่แล้ว +3

      Thanks, Dean! That means the world to me, knowing these videos are useful and helpful to you. You are more than welcome to share this video with anyone who may need an extra tutorial. Please subscribe for new videos coming up for Adobe XD, another wireframe, mockup and prototype application.

  • @micaberga
    @micaberga 2 ปีที่แล้ว +1

    Jose is right! They should have paid you! Great tutorial! Thank you so much

    • @ulearntech
      @ulearntech  2 ปีที่แล้ว

      Thank you so much for your kind words. This tutorial was originally for my students when we were using it. Balsamiq did give my students a free extended version for the coursework which is all I wanted when I taught it. We now have moved on to InVision, Adobe XD and Figma.

    • @ulearntech
      @ulearntech  2 ปีที่แล้ว

      Did you use this video tutorial for school or for work purposes?

  • @welisonmartins
    @welisonmartins 2 ปีที่แล้ว +2

    in the details. when you get stuck, roll back to the beginning and start over. The other weay is to focus entirely on one set of commands

    • @ulearntech
      @ulearntech  2 ปีที่แล้ว

      Great idea. It sounds like I may need to do an update to this tutorial. This video was created in 2019, almost 3 years, so things do change. Except, i have an entire Adobe InDesign course I need to create and a couple moreon Adobe XD and Figma too. Eecks. It likely happen in December 2022.

  • @car1o
    @car1o 4 ปีที่แล้ว +3

    Thanks man, great video). Now it is much more clear how to use this excellent tool).

    • @ulearntech
      @ulearntech  4 ปีที่แล้ว +1

      I am glad to hear that you like the video! I always think, do people want to watch a video that takes them hours and hours to explain how-to-do-it? Or can they watch a video, get to the point and still create a quality video that gets right to the point! Hopefully, the other videos will be of some value as well!

  • @malulekeetv9771
    @malulekeetv9771 2 ปีที่แล้ว +2

    In The setup yup that was my problem thanks a lot

    • @ulearntech
      @ulearntech  2 ปีที่แล้ว

      Setting up the document the first time is the most important thing. If you don't set it up right, many things can fall apart. Great that this video tutorial was of some assistance and may the rest of the video gives you additional tips and tricks!

  • @gasomugha5371
    @gasomugha5371 ปีที่แล้ว +1

    Thanks for sharing your knowledge this was very helpful 🙏

    • @ulearntech
      @ulearntech  ปีที่แล้ว +2

      You're welcome! I'm glad to hear that the video was helpful for you. If you have any further questions or need additional assistance, please don't hesitate to ask.

  • @ano1976
    @ano1976 2 ปีที่แล้ว +2

    Thanks for your share. Hope you create more useful videos like this.

    • @ulearntech
      @ulearntech  2 ปีที่แล้ว

      @AN Đỗ, thanks for watching this useful video on Balsamiq. There are many other videos or playlists that may be of interest if you are watching Balsamiq. You can watch the 'Learn Wireframes to Save You Time and Headaches with Clients!.' playlist that includes other wireframe applications such as InVision, and Adobe XD. And if you subscribe, I am hoping in a month's time, I would have Figma, another prototyping tool too!

  • @Soha_song
    @Soha_song 2 ปีที่แล้ว +1

    Well to be fair shape of you lody softs just like the first random notes that popped into Nice tutorials head

    • @ulearntech
      @ulearntech  2 ปีที่แล้ว

      Not fully understanding your comment. Thanks I think.
      Our goal is for tutorials to be available for students and learners hoping to learn something new. Or maybe, they are stuck on a certain work task. Nevertheless, our videos are geared to getting to the point on hand quickly versus watching videos that talk nothing but themselves or waste time on needless things.

  • @syedalirazapk
    @syedalirazapk 2 ปีที่แล้ว +2

    Its really helpful for the beginners

    • @ulearntech
      @ulearntech  2 ปีที่แล้ว

      Thanks. We try to make it as simple to the point that you are not researching videos that say they solve the solution or answer to your questions. Subscribe to this channel for more tips and tricks and of course tutorials. Thanks for watching! :)

  • @poojasoneja7011
    @poojasoneja7011 4 ปีที่แล้ว +2

    Thank you for the video! It is so useful!

    • @ulearntech
      @ulearntech  4 ปีที่แล้ว +1

      Thanks Pooja! I am glad the video was some help for either your studies or career! I am hoping to create another video in the next few weeks (it appears, it'll be month or two now) on Adobe XD, a one-app design from wireframes to prototype

  • @kosterix123
    @kosterix123 2 ปีที่แล้ว +2

    This is actually How To Use Balsamiq keyboard shortcuts without having any idea what design means.

    • @ulearntech
      @ulearntech  2 ปีที่แล้ว

      @Kosteri x, see you don't need to be a designer! Anyone can create a wireframe as long as you put some effort into creating one!

    • @kosterix123
      @kosterix123 2 ปีที่แล้ว +1

      @@ulearntech I would first need an idea. Even if I had an idea I would need extensive knowledge of the UI widgets that are available. Without that, no point in trying.

    • @ulearntech
      @ulearntech  2 ปีที่แล้ว +1

      @@kosterix123 well to get experience in using Balsamiq, take a look at your favourite website and create a wireframe. This is a great way in learning what Balsamiq widgets can do. That's one of the ways how I get my students and learners to learn. Look at a pre-made mock-up or design and then built a wireframe in the application.
      Once you learn how to do it, you can also look at other sites for inspiration. You can mimic their styles. And over time, you will develop a sense of your own style and creativity.

  • @rajnishkumar9478
    @rajnishkumar9478 3 ปีที่แล้ว +1

    Thanks ulearn for quick tutorial!! 😀

    • @ulearntech
      @ulearntech  3 ปีที่แล้ว

      @rajnish kumar, you're very welcome! Several of my students want me to make Balsamiq update videos as well. Please share the video with your friends and colleagues so they can also get up to speed! If you want to use them in your next project, subscribe to the channel and click on the notification bell. You may want to try Adobe XD since you can convert your wireframes directly into interactive prototypes and mockups within seconds. 🙏😎😄

    • @rajnishkumar9478
      @rajnishkumar9478 3 ปีที่แล้ว +1

      @@ulearntech Sure, will share this video with my friends. Also, thanks for your suggestion. Will try Adobe XD.

  • @veenumago1
    @veenumago1 4 ปีที่แล้ว +1

    Thank you for sharing. Great video a lot of good stuff.

    • @ulearntech
      @ulearntech  4 ปีที่แล้ว +3

      My pleasure! If you are just starting your career or schooling in web development, you'll love working with InVision or XD too for mockups and prototyping.

  • @monayaz4139
    @monayaz4139 3 ปีที่แล้ว +1

    Thank You very useful. just I need to practice all the content.

    • @ulearntech
      @ulearntech  3 ปีที่แล้ว

      *Your kind words are much appreciated, Mona.* Practicing your wireframes will bring them to life. As such, it allows the client, developer, and designer to navigate the website structure without getting caught up in design elements such as colors and images.

  • @ShlomoShekelberg8739
    @ShlomoShekelberg8739 ปีที่แล้ว

    Lorem Ipsum placeholder text is in LATIN, not Greek! Aside from this blunder, great tutorial!

    • @ulearntech
      @ulearntech  ปีที่แล้ว +1

      You are correct, words altered, added, and removed to make it nonsensical and improper Latin.
      But the process is called greeking as it is used to temporarily replace text which allows designers to consider the form of a webpage or publication, without the meaning of the text influencing the design.

  • @josephjoelvasquezvera3251
    @josephjoelvasquezvera3251 ปีที่แล้ว +1

    The size of the width of your computer screen is 1366 px?

    • @ulearntech
      @ulearntech  ปีที่แล้ว

      The computer screen? No it isn't 1366 px. Actually, the retina display has a native resolution of 2880×1800 at 220 ppi.
      Curious? Why do you ask?

  • @Raghvendra3434
    @Raghvendra3434 2 ปีที่แล้ว +1

    Everything in the video is perfect but I have never seen a command key on my normal keyboard. What is that?

    • @ulearntech
      @ulearntech  2 ปีที่แล้ว

      Command key is for the Mac users. That would mean that you are likely using a PC is this correct

    • @Raghvendra3434
      @Raghvendra3434 2 ปีที่แล้ว +1

      @@ulearntech Thanks for a quick reply. Yes its true that I'm using on a windows PC.
      What button is the alternative for it here?

    • @ulearntech
      @ulearntech  2 ปีที่แล้ว

      @Raghvendra Verma you're very welcome!
      Anytime you watch a video, that mentioned the Command key we are using a Mac. So, the equivalent to that is the Control key!

    • @Raghvendra3434
      @Raghvendra3434 2 ปีที่แล้ว +1

      @@ulearntech Thanks for updating

    • @ulearntech
      @ulearntech  2 ปีที่แล้ว +1

      @@Raghvendra3434 You're very welcome. Subscribe and hit that notification bell...hopefully to revisit the new tools and updates of Balsamiq Wireframes!

  • @stillpickinganame5350
    @stillpickinganame5350 2 ปีที่แล้ว +1

    Thank you so much!

    • @ulearntech
      @ulearntech  2 ปีที่แล้ว

      You are very welcome! Glad to hear this video on Balsamiq is still relevant. I am in the process of creating a new video for Balsamiq 2022 (likely 2023) as they are planning some changes to the application. Subscribe to get the next update. And thanks for watching.

  • @nccpandey
    @nccpandey ปีที่แล้ว +1

    How can we justify the text? Left, right and centre option there but not justify

    • @ulearntech
      @ulearntech  ปีที่แล้ว +1

      I honestly don't think you can if I can recall. But, if you use many different text boxes, select them to align and then group it together you could end up with your different options.
      From there, you could convert them into symbols for later reuse. It would mean setting it up a bit now for current and future projects.

  • @rockandmeatroll
    @rockandmeatroll 6 หลายเดือนก่อน +1

    As an illustrator user, why is this better for mocking up sofware?

    • @ulearntech
      @ulearntech  6 หลายเดือนก่อน

      That's a great question! While Balsamiq Wireframes may seem tailored for software wireframes, its simplicity and ease of use make it versatile for various design projects. Unlike Illustrator, Balsamiq focuses specifically on wireframing, allowing you to quickly sketch out ideas and iterate on them efficiently. Its library of UI components and drag-and-drop functionality streamline the process, making it ideal for visualizing software interfaces, user flows, and interactions. Plus, its collaborative features enable teams to work together seamlessly on prototyping projects.
      Lo-fi wireframes play a crucial role in the design process for several reasons. Lo-fi wireframes are essential because they facilitate rapid
      iteration, aid in conceptualization and communication, prioritize user centered
      design, saves time and resources, and foster collaboration. They are
      a valuable starting point in the design process, allowing for efficient
      exploration and validation of design ideas before diving into detailed visual
      design.
      Give it a try, and you might discover its value extends beyond just software mockups! And thanks for watching!

  • @processingbenefitsbt6306
    @processingbenefitsbt6306 4 ปีที่แล้ว +1

    Nice video

    • @ulearntech
      @ulearntech  4 ปีที่แล้ว +1

      Thanks, am glad you are learning UX, user experience. Balsamiq is one of the easiest tools to learn and share with others

  • @katochnr
    @katochnr 2 ปีที่แล้ว +1

    Thanks

    • @ulearntech
      @ulearntech  2 ปีที่แล้ว +1

      You're very welcome 😁! Hopefully the video will play a big role in your education or job. Or if you wanted to learn more.

    • @ulearntech
      @ulearntech  ปีที่แล้ว

      OMG! I just noticed my first tip! Thanks a million @Nishant Katoch!

  • @zilonggoddes3246
    @zilonggoddes3246 4 ปีที่แล้ว +1

    thank u

    • @ulearntech
      @ulearntech  4 ปีที่แล้ว +2

      You're welcome Fiorire! Hopefully, you are now able to hit the ground running vs treading water when using Balsamiq

  • @josephjoelvasquezvera3251
    @josephjoelvasquezvera3251 ปีที่แล้ว +1

    2:10 hizo 1280 px de ancho

    • @ulearntech
      @ulearntech  ปีที่แล้ว

      Indeed, that is accurate. I designed the web browser with dimensions of 1280 x 720 pixels. The primary motivation behind choosing this size for the video was to ensure the coverage without the need for frequent zooming in and out. I did try at 1920, but found myself zooming in and out, and I wanted to keep everything simple here.
      Granted, the standard size for making any prototypes or wireframes, I normally use 1920 x 1080 pixels.
      I appreciate your feedback and I'm here to help if you have any further questions or need assistance with anything else. Keep up the good work and happy wireframing!