My 5 BEST wireframe & prototyping tools for UI/UX Designers (2020)

Поделиться
HTML-код
  • Опубликовано: 12 ноя 2024

Комментарии • 132

  • @knowhow1242
    @knowhow1242 3 года назад +9

    Thanks for sharing Sara, very nice presentation, and keep up the good work.
    02:39 Lucichart (User flow, User Journey, and Wireframe) + including lots of free templates
    03:33 Adobe XD (Designing tool for prototyping products) Ex: designing landing pages
    04:34 Figma (Interface design tool/prototyping)
    05:47 Procreate (Sketching, illustrating & Prototyping artworks/Wireframing & Landing Pages during ideation phase)
    07:26 Webflow (Wireframing-Final Product/ Prototyping)

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

    Concise, clear, and to the point. Great video for those of us that are not a graphic designers and are in need of easy to use apps (some). Thanks so much for this very useful video, keep the good work.

  • @hileliomar9478
    @hileliomar9478 2 года назад

    Thank you, and keep it up Sara; now i have a clearer idea on what i should focus on.

  • @dougie281
    @dougie281 3 года назад

    Your camera is basically an eyeball !!! GREAT VIDEO!

  • @techsol3233
    @techsol3233 2 года назад

    Love you and love your hardworking skill Sara

  • @1tan_freed0m
    @1tan_freed0m 2 года назад

    Thanks So much Sara❤️. A small thing I noticed, I think you should keep eye contact with the viewers instead of your self on the camera viewfinder. It will be more focused and connecting ☺️

  • @jacobs492
    @jacobs492 2 года назад

    Thank you. We use Figma and Webflow at my company.

  • @AK-Star007
    @AK-Star007 3 года назад +6

    new in this field and trying to learn something.

  • @PwrSrg
    @PwrSrg 3 года назад +1

    Super CUTE! 😍 And SINGLE! 🥰 Good video too. 😊
    Oh, and I LOOOVE the accent. 💙🧡💚💛💜
    SUBSCRIBED!

  • @shivalayayadav7685
    @shivalayayadav7685 4 года назад +6

    You're amazing .....the way you describe is awesome.....well, i'm currently learning figma for ui/ux ....... you're open minded and try to tells everything you know....you should be teacher....❤️❤️

  • @shubhamthakur9152
    @shubhamthakur9152 3 года назад

    you gave me useful tips and grew more ideas in my mind because I did not know about what is the difference between wireframes and prototypes. I deeply understood and know about UI/UX ....you have great ideas and information regarding design. I really appreciate and give you an amazing compliment . Thanks mam

  • @pjp6893
    @pjp6893 3 года назад

    My Favourite is XD, as i can wireframe, design and prototype all in one place. I code so i find this is now part of my process. Great video Sara.

  • @RapidMike32
    @RapidMike32 4 года назад +1

    One of the best videos on the topic. Love the comparison and the demos.

    • @SaraBrunettini
      @SaraBrunettini  4 года назад +1

      Thanks, it's so kind of you! :)

    • @ab-kx1vg
      @ab-kx1vg 4 года назад

      @@SaraBrunettini ruclips.net/video/qOIPKg_wdSc/видео.html

  • @modernizemysite
    @modernizemysite 2 года назад

    Very helpful info. Thank you!

  • @manuupadhyay5029
    @manuupadhyay5029 3 года назад

    thank you explaning in detail. 👌

  • @AlikhanImagery
    @AlikhanImagery 2 года назад

    Hey thank you!! i have one tip please place chapters in your video since people like me keep coming back to your video it will be quite helpful

  • @sawaria123
    @sawaria123 4 года назад +2

    I love your pronunciation. I'm a novice in this subject . Come here to learn. Nice one.

  • @falbamonte
    @falbamonte 3 года назад +1

    Garzie Sara, ottimo video! Great job

  • @dineshseervi8589
    @dineshseervi8589 3 года назад

    So nicely explained

  • @avalonjustin
    @avalonjustin 3 года назад

    You're a very smart lady! I can't understand most of what you mean but it's interesting anyway. Thank you very much.

  • @riku10thplanet
    @riku10thplanet 3 года назад

    im french and u have made a verygood video !

  • @hugohiarmes8205
    @hugohiarmes8205 4 года назад +6

    My favorite Figma Plugins are Lorem Ipsum and Avatars. Helps alot with filling texts and photos of random persons :P

    • @SaraBrunettini
      @SaraBrunettini  4 года назад

      They are really good plugins indeed 😁 thanks for sharing it

  • @ramienrosillo
    @ramienrosillo 3 года назад

    Amazing explanation, thanks

  • @michalkocis8934
    @michalkocis8934 2 года назад

    Thank you so much Sara, this is exactly what i was lookin for. Amazing job with this video, hope it will help as many designers out there. Subscribed! :) Take care :*

  • @elenamussopaludan2613
    @elenamussopaludan2613 3 года назад

    grazie mille, sto cercando di diventare un Ux designer partendo da zero...per fortuna ho trovato te!! xxx

  • @imanaqilah5158
    @imanaqilah5158 4 года назад +2

    This video is very helpful. Thank you! 💯

  • @ashikurrahman9327
    @ashikurrahman9327 3 года назад

    Very informative and qualityful video. Thank You dear :)

  • @ruksanakabir46
    @ruksanakabir46 3 года назад

    i love web flow and figma too.. also miro .. wireframe cc sucks lol anyway i love how you enthustically say things.. a real designer.

  • @h.t.nandakishore5662
    @h.t.nandakishore5662 3 года назад

    Figma is the best prototyping tool for me

  • @M1989-w2u
    @M1989-w2u 3 года назад

    Nice nice! Thank you for the tips!

  • @gerac
    @gerac 2 года назад

    Grazie!! Questo video mi è stato molto utile!! Saluti!!

  • @wahbeh12345
    @wahbeh12345 3 года назад

    Very helpful video, thanks for sharing!

  • @anoukdenoyelle1409
    @anoukdenoyelle1409 4 года назад

    Thanks for your video! Very useful

  • @travel-pro618
    @travel-pro618 2 года назад

    Love you for this ...

  • @vivekreddym5274
    @vivekreddym5274 4 года назад

    great videos and by seeing your videos even I will be UX designer and thanks for making such good videos

    • @SaraBrunettini
      @SaraBrunettini  4 года назад +1

      I wish you all the best for your future career as a UX Designer! 😊

    • @vivekreddym5274
      @vivekreddym5274 4 года назад

      @@SaraBrunettini thanks Sara

  • @shivalayayadav7685
    @shivalayayadav7685 4 года назад +1

    Sara , can you make a whole video on ui/ux which describes the whole process like:--
    How you get a ui/ux project?
    What you ask from the client about the project (like any suggestions or etc)?
    Then how you think and make ui / ux both, after that what do you send to the client (like prototype, wireframe or any other thing , actually i dont know it's my guess ) before sending the whole project .
    Suppose if you made an ui/ux for an food delivery app ....then what do you send to the client before exporting the whole project?
    ALL STEPS with detail........
    From beginning to end each and every step .....
    IF YOU MADE THIS VIDEO THEN PLEASE USE " FIGMA ".............PLZ

    • @SaraBrunettini
      @SaraBrunettini  4 года назад

      Do you mean like a freelance project?

    • @shivalayayadav7685
      @shivalayayadav7685 4 года назад

      @@SaraBrunettini yes sara ,.... One more thing is that I'm confused other than above problem is that i.e., when i see ux related videos they say that prototyping is part of UX and when i see UI related videos thay say prototyping is part of ui ?
      As we know that research and wireframing related works are of UX designer and prototyping is part of UI ? ......so ,if they say that prototyping is ux job then there is no role of UI designer....?.....
      SORRY FOR MY BIG QUESTIONS....BUT I PREFER YOU TO ASK BECAUSE OF A REASON 🌈❤️

  • @DaleNeil
    @DaleNeil Год назад

    Great video! But you misspelled "pigma" instead of "figma" in the chapter s. Might help with the seo algorithm.

  • @bhesht
    @bhesht 3 года назад

    Awesome introduction. Thank you!

  • @vimeopictures5170
    @vimeopictures5170 3 года назад

    Hey sara...I am a complete newbie to web design world! /What is more better for web designing? Ipad or MacBook?

  • @jamielogan7906
    @jamielogan7906 4 года назад

    Thank you! So very very helpful!!

  • @Francesco16699
    @Francesco16699 4 года назад +1

    Sara, sei super!!! mi sono iscritto! mitica!!

    • @SaraBrunettini
      @SaraBrunettini  4 года назад

      Tante grazie! ☺️ ti piacerebbe vedere più contenuti in italiano?

    • @Francesco16699
      @Francesco16699 4 года назад

      @@SaraBrunettini per me è indifferente, parli inglese molto bene, per cui OK. Mi piacerebbe vedere tutorial per iniziare ad utilizzare subito questi strumenti. Non so se hai già fatto qualcosa...ti ho appena scoperta e non ho curiosato sul canale. Spesso i tutorial sono noiosi e lenti, io sono per uno stile veloce e "subito al punto". Il vantaggio di YT è che posso vederlo mille volte... non serve andare piano!
      Cmq molto brava.

    • @SaraBrunettini
      @SaraBrunettini  4 года назад

      Grazie per il consiglio! Che tools ti piacerebbe approfondire tra Figma, XD o Webflow? Sono quelli che uso maggiormente

    • @Francesco16699
      @Francesco16699 4 года назад

      @@SaraBrunettini onestamente non li conosco operativamente. Ma nel mio lavoro potrebbero essere interessati. Per prototipazione... Quindi quello con il mix semplicità/risultato migliore. Che dici?

    • @SaraBrunettini
      @SaraBrunettini  4 года назад

      Penso Figma sia un’ottima scelta

  • @adilshoaib3673
    @adilshoaib3673 3 года назад

    Awesome... Thanku very much

  • @John-117-u7b
    @John-117-u7b 2 года назад

    Ciao! qual'è il programma migliore (più completo) senza codice (solo visual) per realizzare il sito web finale (in questo caso un e-commerce) partendo dal prototipo creato con figma? grazie.

    • @SaraBrunettini
      @SaraBrunettini  2 года назад

      Webflow! 🎉

    • @John-117-u7b
      @John-117-u7b 2 года назад

      @@SaraBrunettini Grazie! :) Volevo chiederti giusto due cose sulla tua professione, posso scriverti? Se sì, dove?

    • @SaraBrunettini
      @SaraBrunettini  2 года назад

      Certo la mia email è hi@sarabrunettini.com

  • @subaskaran8357
    @subaskaran8357 4 года назад

    it's useful. thanks sister

  • @BhairavVani
    @BhairavVani 2 года назад

    thank you

  • @jagroop200
    @jagroop200 3 года назад

    Mam, please tell one wireframe, one mockup and a prototype tool that is used widely nowadays. Also if there is single tool then please let me know

  • @morningdew1590
    @morningdew1590 4 года назад

    I using enterprise architecture for project my thesis, build diagram uml and wireframe.

  • @history-solves-mystery
    @history-solves-mystery 3 года назад

    which plugin is used in adobe xd ?

  • @ydmhouse9144
    @ydmhouse9144 4 года назад +1

    This helped me out 🤗🤗🤗

  • @dragonheart9672
    @dragonheart9672 3 года назад

    Ciao Sara. In your opinion,which one is the best programme to use for wireframe? Adobe XD or Illustrator?

  • @xxafxx
    @xxafxx 4 года назад

    Thanks Sara

  • @Karthikbrow
    @Karthikbrow 3 года назад

    Love your tutorials! My que is " *Do i need coding to become a ui/ux designer* ?
    Thanks for the great one.

    • @SaraBrunettini
      @SaraBrunettini  3 года назад +1

      Nope! ✨

    • @Karthikbrow
      @Karthikbrow 3 года назад

      @Sara Brunettini Thats really awesome to hear *, right now i'm* a *Graphic Designer*
      Aspiriing to be a UI/UX.
      Thanks for the help!

  • @melakmengistab1641
    @melakmengistab1641 4 года назад

    very helpful !! thank you

    • @SaraBrunettini
      @SaraBrunettini  4 года назад

      Thanks, I’m happy to hear that this video was helpful 😊😊

  • @ian3805
    @ian3805 3 года назад

    Thanks Sara for just a clear and informative video. I do service process and process modelling using Axure for wireframes and I understand it can do prototyping as well. What do you think of Axure Sara, have you heard of it? Is it similar to XD? Appreciate any one else's preference between Axure or XD. Thanks

    • @SaraBrunettini
      @SaraBrunettini  3 года назад

      I heard of Axure but never tried it. Sorry, I cannot be really helpful here...

  • @mdalmahdi5727
    @mdalmahdi5727 3 года назад

    thanks a lot.

  • @EezZee0
    @EezZee0 3 года назад +2

    thank youu

  • @chaijen
    @chaijen 4 года назад

    Hi Sara, what do think of Anima for prototyping? I feel a bit outdated using Sketch and invision.

    • @SaraBrunettini
      @SaraBrunettini  4 года назад

      I’ve never really used it, sorry! I might give it a go at some point

  • @ArpitSingla37
    @ArpitSingla37 3 года назад

    Hi Sara! Great Video.
    I am working on a website design for a startup. But I am not sure how can I test the design. Like after creating a prototype, is their any tool which can collect user data wherein users can use our website prototype and then somehow we can collect their feedback?

    • @SaraBrunettini
      @SaraBrunettini  3 года назад

      Have you tried HotJar? :) www.hotjar.com/

  • @trippy_b
    @trippy_b 3 года назад

    Thanks! this was helpful!
    Can you suggest any 3 wireframe tools for a website/web app development?
    I was using Balsamiq but couldn't get fully satisfied!

    • @SaraBrunettini
      @SaraBrunettini  3 года назад +1

      I’d say Figma! 🔝

    • @trippy_b
      @trippy_b 3 года назад

      @@SaraBrunettini Thankyou! I will check it out
      Merry Christmas!🎄🎅

  • @yash1152
    @yash1152 3 года назад

    0:07 aint the vocal sound levels toooo lowww?

    • @SaraBrunettini
      @SaraBrunettini  3 года назад +1

      Sorry, I filmed it with my iPhone :(

    • @yash1152
      @yash1152 3 года назад

      @@SaraBrunettini ohkay, no worries

  • @mohsinmalik9787
    @mohsinmalik9787 3 года назад

    hi please tell me web page design in corel draw which software prototype of corel file mohsin from lahore

  • @uncleposter
    @uncleposter 4 года назад

    Anyone else have difficulty installing Figma plugins? All I seem to get for options is "duplicate" and never seem to see install.

  • @sarah3550
    @sarah3550 2 дня назад

    07:19 I like this position too! 😉

  • @FrancescoCrescimanno
    @FrancescoCrescimanno 3 года назад

    Buonasera Sara, nonostante sviluppi da più di 20 anni, mi sto avvicinando solo ora al wireframing. Ora che sono un indipendente... Bellissimo video. Una cosa che mi ha fatto enorme tenerezza, al di la della sua notevole preparazione e comunicatività, è il FANTASTICO accento italiano del suo notevole inglese. Adorabile ;-D P.S. Mi sono iscritto alla sua mailing list con il mio mail della ditta... Spero che il server non sia, come spesso succede ultimamente, troppo aggressivo e blocchi la sua mail, senza nemmeno metterla in indesiderata...

  • @vijaymenon2840
    @vijaymenon2840 4 года назад

    awsome!...

  • @chaima137
    @chaima137 4 года назад

    I would like to work with you to build a website prototype, what is the best way to contact you ?

    • @SaraBrunettini
      @SaraBrunettini  4 года назад

      You can email me at sbrunettinidesign@com 😊 looking forward to find out more!

  • @dddfault
    @dddfault 4 года назад +1

    She talk with Valentino Rossi's accent

    • @SaraBrunettini
      @SaraBrunettini  4 года назад +1

      Is it a good thing? 😅

    • @dddfault
      @dddfault 4 года назад

      It is a good thing tho, it was mean that you still have strong Italian accent on you :D

  • @abdelhaksaouli8802
    @abdelhaksaouli8802 2 года назад

    Prettiest women i have seen since loooong time

  • @th34lch3m1st
    @th34lch3m1st 3 года назад

    Mi stai simpatica e voglio darti un consiglio non richiesto ma molto utile:
    il 99% delle parole inglesi si pronunciano con l'accento sulla prima sillaba.
    Ti faccio un esempio:
    tu pronunci differént con l'accento sulla terza sillaba (rè), come se fosse la parola in italiano differènte, che giustamente ha l'accento sulla terza sillaba.
    La parola in inglese però, si pronuncia con l'accento sulla prima sillaba: dìfferent (sillaba dì). Questo era un esempio, ma fai la stessa cosa con metà delle parole che hai pronunciato nel video.
    PS: Ti chiedo scusa ma non ho potuto resistere, l'accento sulle seconde e terze sillabe in inglese mi fa lo stesso effetto delle unghie sulla lavagna. Perdonami e grazie per le informazioni del tuo video.

    • @SaraBrunettini
      @SaraBrunettini  3 года назад

      Lo terrò a mente, grazie

    • @th34lch3m1st
      @th34lch3m1st 3 года назад

      @@SaraBrunettini Gentilissima. Iscritto e con tutte le notifiche. Ti auguro un sereno Natale.

  • @SalehMussa_
    @SalehMussa_ 2 года назад

    I like your accent

  • @raptorswire7212
    @raptorswire7212 2 года назад

    great, but all of these are Adobe-toxic monthly subscription, which I will never consider a good long-term solution

  • @in2it85
    @in2it85 3 года назад

    *Teacher and Waifu material.*

  • @jeanlue
    @jeanlue 3 года назад

    webflow? just use Dreamweaver

  • @Elyk88
    @Elyk88 2 года назад

    Your chapter for Figma says Pigma. Oink.

    • @Elyk88
      @Elyk88 2 года назад

      Procreate is in the Pigma section too, lol.

    • @SaraBrunettini
      @SaraBrunettini  Год назад

      It was created automatically but thanks for calling it out!

  • @maxdev4646
    @maxdev4646 3 года назад

    Thank you! I gues u should add framic.io to the tools list. Suitable for both experienced and newbies and costs $ 2