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?
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.
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.
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.
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.
11 comments
[ 3.2 ms ] story [ 21.2 ms ] threadFor random data, you can use something like https://www.mockaroo.com
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
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.
Here are some of the tools they listed:
+ Hybrid paper/digital tools to animate paper pictures:
- https://popapp.in/
- https://www.flinto.com/
* Apple Keynote
* MS PowerPoint
* Google Presentation
* http://keynotopia.com/guides/
* https://balsamiq.com/
+ HTML5 prototypes:
- http://tumult.com/hype/
- http://www.adobe.com/products/edge-animate.html
- https://www.google.com/webdesigner/
+ Misc:
- http://hackdesign.com/
- http://www.usabilitycounts.com/2012/08/30/four-ways-to-break...
- http://52weeksofux.com/
- 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...