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?
Ask HN: What tools do you use to prototype web UI?
1–10 of 12 posts
Re: Ask HN: What tools do you use to prototype web UI?
#2 It can also be used as a prototyping tool, with the ability to link canvases (pages). Price aside, the one thing that I dislike about i Rise is the user interface.
Re: Ask HN: What tools do you use to prototype web UI?
#3Balsamiq Mockups is great for prototyping/mockups: https://balsamiq.com
For random data, you can use something like https://www.mockaroo.com
Re: Ask HN: What tools do you use to prototype web UI?
#4Html
Re: Ask HN: What tools do you use to prototype web UI?
#5Pencil/paper although I upgraded" to whiteboard/dry erase recently would like to have a digital drawing tablet though cough* surface studio haha! Something like a wacom would be nice.
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.
Re: Ask HN: What tools do you use to prototype web UI?
#6I have been using Balsamiq for a long time, you can make something presentable very fast and with very little effort : https://balsamiq.com
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/
Re: Ask HN: What tools do you use to prototype web UI?
#7Pencil/paper although I upgraded" to whiteboard/dry erase recently would like to have a digital drawing tablet though cough* surface studio haha! Something like a wacom would be nice. 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.
Do you mean Lorem Ipsum? - http://www.lipsum.com/
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
Re: Ask HN: What tools do you use to prototype web UI?
#8I have been using Balsamiq for a long time, you can make something presentable very fast and with very little effort : https://balsamiq.com 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): htt…
I love balsamiq!
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.
Re: Ask HN: What tools do you use to prototype web UI?
#9I've recently taken a Udacity course "Intro to the Design of Everyday Things"[0] and jotted down a preliminary summary[1].
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...
Re: Ask HN: What tools do you use to prototype web UI?
#10http://draw.io 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.