To all front end devs. When you prototype some new web UI component, are there any specific tools you use? E.g. if your UI needs data, where do you get it from?
I have been using Balsamiq for a long time, you can make something presentable very fast and with very little effort : <a href="https://balsamiq.com" rel="nofollow">https://balsamiq.com</a><p>I have also used Moqups, which offers also a simple solution but in the browser:
<a href="https://moqups.com/" rel="nofollow">https://moqups.com/</a><p>For UI data:<p>- Avatars : <a href="http://pravatar.cc/" rel="nofollow">http://pravatar.cc/</a><p>- Placeholder images : <a href="https://placehold.it/" rel="nofollow">https://placehold.it/</a><p>- Random names and user data : <a href="https://randomuser.me/" rel="nofollow">https://randomuser.me/</a><p>- Arabic names (right-to-left): <a href="https://raed.tn/php/tounsi/random/" rel="nofollow">https://raed.tn/php/tounsi/random/</a>
Pencil/paper although I <i>upgraded" to whiteboard/dry erase recently would like to have a digital drawing tablet though </i>cough* surface studio haha! Something like a wacom would be nice.<p>There's that Latin or French thing... For sample paragraphs forget what it's called. Starts with a couple phrases, ellipsis, but it expands to a whole paragraph or more.
I've recently taken a Udacity course "<i>Intro to the Design of Everyday Things</i>"[0] and jotted down a preliminary summary[1].<p>Here are some of the tools they listed:<p>+ Hybrid paper/digital tools to animate paper pictures:<p>- <a href="https://popapp.in/" rel="nofollow">https://popapp.in/</a><p>- <a href="https://www.flinto.com/" rel="nofollow">https://www.flinto.com/</a><p>* Apple Keynote<p>* MS PowerPoint<p>* Google Presentation<p>* <a href="http://keynotopia.com/guides/" rel="nofollow">http://keynotopia.com/guides/</a><p>* <a href="https://balsamiq.com/" rel="nofollow">https://balsamiq.com/</a><p>+ HTML5 prototypes:<p>- <a href="http://tumult.com/hype/" rel="nofollow">http://tumult.com/hype/</a><p>- <a href="http://www.adobe.com/products/edge-animate.html" rel="nofollow">http://www.adobe.com/products/edge-animate.html</a><p>- <a href="https://www.google.com/webdesigner/" rel="nofollow">https://www.google.com/webdesigner/</a><p>+ Misc:<p>- <a href="http://hackdesign.com/" rel="nofollow">http://hackdesign.com/</a><p>- <a href="http://www.usabilitycounts.com/2012/08/30/four-ways-to-break-into-user-experience/" rel="nofollow">http://www.usabilitycounts.com/2012/08/30/four-ways-to-break...</a><p>- <a href="http://52weeksofux.com/" rel="nofollow">http://52weeksofux.com/</a><p>- <a href="https://www.interaction-design.org/" rel="nofollow">https://www.interaction-design.org/</a><p>[0]: <a href="https://www.udacity.com/course/intro-to-the-design-of-everyday-things--design101" rel="nofollow">https://www.udacity.com/course/intro-to-the-design-of-everyd...</a><p>[1]: <a href="https://github.com/jhadjar/Notes/blob/master/Design/Intro%20to%20the%20Design%20of%20Everyday%20Things.MD" rel="nofollow">https://github.com/jhadjar/Notes/blob/master/Design/Intro%20...</a>
Balsamiq Mockups is great for prototyping/mockups: <a href="https://balsamiq.com" rel="nofollow">https://balsamiq.com</a><p>For random data, you can use something like <a href="https://www.mockaroo.com" rel="nofollow">https://www.mockaroo.com</a>
<a href="http://draw.io" rel="nofollow">http://draw.io</a> is free and is absolutely brilliant. It is one of my favorite tools, it helps me to do all kinds of thinking, and it is extremely good at mockups as well.