Ask HN: What tools do you use to prototype web UI?
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 also used Moqups, which offers also a simple solution but in the browser: https://moqups.com/
For UI data:
- Avatars : http://pravatar.cc/
- Placeholder images : https://placehold.it/
- Random names and user data : https://randomuser.me/
- Arabic names (right-to-left): https://raed.tn/php/tounsi/random/
I'm surprised to say this, but they use Comic Sans MS perfectly! Most other tools run in to the danger of looking like the final design. If you give less sketch like mockups to devs they might copy them pixel perfect without thinkng a bit or your client might dislikes the ugly "design".
Sometimes you have to copy+paste a lot, but it's worth the simplicity (there is an option to reuse elements across pages, but it didn't seem worth the complexity, so sometimes I paste the new menu bar on every page again for the final design, takes 5 mins and is usually fine.)
Its fast enough to even use it for internal communication of implementation details for UI stuff. Often much easier than writing a lot.
Regarding web: you have to make 2 mockups and do one mobile version, one non-mobile version. Most web stuff is quite simple in structure though, so I often just do it in my head and dive straight to photoshop for the actual design and do the even simpler mobile version just in CSS.
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.
In MS Word you can generate is by typing the following and pressing enter
=lorem()
you can put # of paragraphs into the method to add that many e.g =lorem(5)
you can also use =rand() to put in some random help stuff text
Good filler text there
Here are some of the tools they listed:
+ Hybrid paper/digital tools to animate paper pictures:
* Apple Keynote
* MS PowerPoint
* Google Presentation
* http://keynotopia.com/guides/
+ HTML5 prototypes:
- http://www.adobe.com/products/edge-animate.html
- https://www.google.com/webdesigner/
+ Misc:
- http://www.usabilitycounts.com/2012/08/30/four-ways-to-break...
- https://www.interaction-design.org/
[0]: https://www.udacity.com/course/intro-to-the-design-of-everyd...
[1]: https://github.com/jhadjar/Notes/blob/master/Design/Intro%20...
For random data, you can use something like https://www.mockaroo.com