
Ask HN: What tools do you use to prototype web UI? - tadasv
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?
======
Raed667
I have been using Balsamiq for a long time, you can make something presentable
very fast and with very little effort :
[https://balsamiq.com](https://balsamiq.com)

I have also used Moqups, which offers also a simple solution but in the
browser: [https://moqups.com/](https://moqups.com/)

For UI data:

\- Avatars : [http://pravatar.cc/](http://pravatar.cc/)

\- Placeholder images : [https://placehold.it/](https://placehold.it/)

\- Random names and user data :
[https://randomuser.me/](https://randomuser.me/)

\- Arabic names (right-to-left):
[https://raed.tn/php/tounsi/random/](https://raed.tn/php/tounsi/random/)

~~~
anotheryou
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.

------
ge96
Pencil/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.

~~~
Discere
Do you mean Lorem Ipsum? - [http://www.lipsum.com/](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

~~~
ge96
Yeah that's it thanks.

Good filler text there

------
Jugurtha
I'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:

\- [https://popapp.in/](https://popapp.in/)

\- [https://www.flinto.com/](https://www.flinto.com/)

* Apple Keynote

* MS PowerPoint

* Google Presentation

* [http://keynotopia.com/guides/](http://keynotopia.com/guides/)

* [https://balsamiq.com/](https://balsamiq.com/)

\+ HTML5 prototypes:

\- [http://tumult.com/hype/](http://tumult.com/hype/)

\- [http://www.adobe.com/products/edge-
animate.html](http://www.adobe.com/products/edge-animate.html)

\- [https://www.google.com/webdesigner/](https://www.google.com/webdesigner/)

\+ Misc:

\- [http://hackdesign.com/](http://hackdesign.com/)

\- [http://www.usabilitycounts.com/2012/08/30/four-ways-to-
break...](http://www.usabilitycounts.com/2012/08/30/four-ways-to-break-into-
user-experience/)

\- [http://52weeksofux.com/](http://52weeksofux.com/)

\- [https://www.interaction-design.org/](https://www.interaction-design.org/)

[0]: [https://www.udacity.com/course/intro-to-the-design-of-
everyd...](https://www.udacity.com/course/intro-to-the-design-of-everyday-
things--design101)

[1]:
[https://github.com/jhadjar/Notes/blob/master/Design/Intro%20...](https://github.com/jhadjar/Notes/blob/master/Design/Intro%20to%20the%20Design%20of%20Everyday%20Things.MD)

------
nreece
Balsamiq Mockups is great for prototyping/mockups:
[https://balsamiq.com](https://balsamiq.com)

For random data, you can use something like
[https://www.mockaroo.com](https://www.mockaroo.com)

------
rayalez
[http://draw.io](http://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.

------
GroSacASacs
Html

------
miguelrochefort
Eve

