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

Поделиться
HTML-код
  • Опубликовано: 10 ноя 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.

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

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

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

  • @ridwanolaniran4700
    @ridwanolaniran4700 День назад +1

    Very ell explained. Love it!

    • @ulearntech
      @ulearntech  День назад

      @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!_*

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

  • @TrueHero117
    @TrueHero117 3 года назад +4

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

    • @ulearntech
      @ulearntech  3 года назад +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!

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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