7 ms·

Show HN: A tool to create printable UI mockups and wireframes templates

155 points by eg312 7y ago

ramon 7y ago
Very cool! Now I want one which is a full online version :)
- lucasverra 7y ago
  yay ! direct import into marvel app :) Also, might be due to inexperience in the field but why import/export in JSON ?
  - vcoelho 7y ago
    So you can load previous configured pages with its settings and mockups.
    - ramon 7y ago
      Dude imagine this: Canvas on top of this with free drawing and save the results in json-gz all in frontend technology. Save trees, unleash creativity!
    - lucasverra 7y ago
      Could hand made mockups (a la apple pen) be stored in json and be reproduced flawlessly ?
  - tracker1 7y ago
    JSON is a very lightweight text serialization that can closely resemble your in-memory object structure. By Contrast XML support way more methods of serialization that are more complex and/or less clear in practice. They could use a different file extension and even gzip the file as well. I often use line separated JSON+GZ as an interchange format for records.
tiborsaas 7y ago
This is very well executed. One suggestion: maybe add an empty block for a placeholder to make space for notes.
- eg312 7y ago
  Thanks! The Notes block is the next thing I’ll add to it
roldie 7y ago
This is fantastic! Very useful, especially for those of us who still think best with pen and paper.
mozillamaxx 7y ago
Love it. Working out UI issues analog like this really helps sometimes!
tsieling 7y ago
This is really well done. And +1 for the suggestion of placeholder spaces for notes. Great work, thank you for sharing this.
- eg312 7y ago
  Thanks! The Notes component is on the to-do list
kleer001 7y ago
One of those simple yet brilliant things I wonder why it hadn't been invented yet.
- katttrrr 7y ago
  Aren't those ideas the ones that are always the most successful businessess too?
  - kleer001 7y ago
    If one can continue to crank out those simple genius ideas, yes. And if one has the rest of the skills necessary to run a business.
craze3 7y ago
This is so badass! I love using pen & paper for mockups. FYI, I just shared your project on Product Hunt: https://www.producthunt.com/posts/printable-mockups https://www.producthunt.com/posts/printable-mockups I think the design community there will find it really useful!
rhcom2 7y ago
Is it common to use jQuery with React? I'm relatively new to React.
- baddox 7y ago
  I don't think it's common to start a new project with both jQuery and React, or actively develop jQuery and React modules in the same project, but it is probably quite common for projects that initially used jQuery to gradually move modules to React.
- vcoelho 7y ago
  Not recommended, but they are compatible. The important is to achieve your goal with whichever tools you currently have.
- hpen 7y ago
  Yes it’s common and you can use it. Of course there is also the fetch api. If it’s a startup project just use whatever your most familiar with and change it when/ if it becomes a problem.
- pluma 7y ago
  It's possible. It's not something you normally intend to do in a new project but it's possible to use jQuery and other libraries inside React and it's handy when working with legacy code.
porker 7y ago
Lovely work! Can we have arrows too please? So we can build the flow between screens into the document
notadoc 7y ago
This is a great idea. You could probably turn this into a product if you were to print out notebooks where pages were the templates.
social_quotient 7y ago
Seems like if this was to become a product/service you could offer a service like https://www.uistencils.com/ https://www.uistencils.com/ but with custom layouts.
sgt 7y ago
Cool, although I noticed the output PDF is fairly blurry. Can this be made crisper?
- eg312 7y ago
  The blurriness is a problem… With the pdf library I’m using (jsPDF) I cannot export the SVG directly so I convert it to an image and then embed the image in the pdf. To solve the problem, I can increase the converted image’s resolution but then the pdf becomes huge (~20 MB, for example). There is a ‘quality’ parameter in the code, maybe I’ll expose it in the UI and you can find an optimum value. I’ll try to find a way to export or ‘write’ the svg data directly in the pdf, I think it’s the best way to do it.
  - bootloop 7y ago
    This maybe? http://pdfkit.org/docs/vector.html#svg_paths http://pdfkit.org/docs/vector.html#svg_paths
  - sleepychu 7y ago
    Can you convert to eps from the SVG and then whack the eps into a PDF?
reaperducer 7y ago
This could be useful. For all of the electronic communication in my company, once things get to a certain level of management, they want to see stuff on paper.
app4soft 7y ago
Is there such add-on for Inkscape?[0] On GitHub found only few Inkscape add-ons for creating interactive mockups.[1,2,3] [0] https://inkscape.org https://inkscape.org [1] https://github.com/jonathanmann/inkscape_app_mockup https://github.com/jonathanmann/inkscape_app_mockup [2] https://github.com/garrett/magicmockup https://github.com/garrett/magicmockup [3] https://github.com/ajashton/Inkscape-Mockup-Toolkit https://github.com/ajashton/Inkscape-Mockup-Toolkit

155 points by eg312 7y ago

ramon 7y ago

Very cool! Now I want one which is a full online version :)

lucasverra 7y ago
yay ! direct import into marvel app :) Also, might be due to inexperience in the field but why import/export in JSON ?
- vcoelho 7y ago
  So you can load previous configured pages with its settings and mockups.
  - ramon 7y ago
    Dude imagine this: Canvas on top of this with free drawing and save the results in json-gz all in frontend technology. Save trees, unleash creativity!
  - lucasverra 7y ago
    Could hand made mockups (a la apple pen) be stored in json and be reproduced flawlessly ?
- tracker1 7y ago
  JSON is a very lightweight text serialization that can closely resemble your in-memory object structure. By Contrast XML support way more methods of serialization that are more complex and/or less clear in practice. They could use a different file extension and even gzip the file as well. I often use line separated JSON+GZ as an interchange format for records.

tiborsaas 7y ago

This is very well executed. One suggestion: maybe add an empty block for a placeholder to make space for notes.

eg312 7y ago
Thanks! The Notes block is the next thing I’ll add to it

roldie 7y ago

This is fantastic! Very useful, especially for those of us who still think best with pen and paper.

mozillamaxx 7y ago

Love it. Working out UI issues analog like this really helps sometimes!

tsieling 7y ago

This is really well done. And +1 for the suggestion of placeholder spaces for notes. Great work, thank you for sharing this.

eg312 7y ago
Thanks! The Notes component is on the to-do list

kleer001 7y ago

One of those simple yet brilliant things I wonder why it hadn't been invented yet.

katttrrr 7y ago
Aren't those ideas the ones that are always the most successful businessess too?
- kleer001 7y ago
  If one can continue to crank out those simple genius ideas, yes. And if one has the rest of the skills necessary to run a business.

craze3 7y ago

This is so badass! I love using pen & paper for mockups. FYI, I just shared your project on Product Hunt: https://www.producthunt.com/posts/printable-mockups https://www.producthunt.com/posts/printable-mockups I think the design community there will find it really useful!

rhcom2 7y ago

Is it common to use jQuery with React? I'm relatively new to React.

baddox 7y ago
I don't think it's common to start a new project with both jQuery and React, or actively develop jQuery and React modules in the same project, but it is probably quite common for projects that initially used jQuery to gradually move modules to React.
vcoelho 7y ago
Not recommended, but they are compatible. The important is to achieve your goal with whichever tools you currently have.
hpen 7y ago
Yes it’s common and you can use it. Of course there is also the fetch api. If it’s a startup project just use whatever your most familiar with and change it when/ if it becomes a problem.
pluma 7y ago
It's possible. It's not something you normally intend to do in a new project but it's possible to use jQuery and other libraries inside React and it's handy when working with legacy code.

porker 7y ago

Lovely work! Can we have arrows too please? So we can build the flow between screens into the document

notadoc 7y ago

This is a great idea. You could probably turn this into a product if you were to print out notebooks where pages were the templates.

social_quotient 7y ago

Seems like if this was to become a product/service you could offer a service like https://www.uistencils.com/ https://www.uistencils.com/ but with custom layouts.

sgt 7y ago

Cool, although I noticed the output PDF is fairly blurry. Can this be made crisper?

eg312 7y ago
The blurriness is a problem… With the pdf library I’m using (jsPDF) I cannot export the SVG directly so I convert it to an image and then embed the image in the pdf. To solve the problem, I can increase the converted image’s resolution but then the pdf becomes huge (~20 MB, for example). There is a ‘quality’ parameter in the code, maybe I’ll expose it in the UI and you can find an optimum value. I’ll try to find a way to export or ‘write’ the svg data directly in the pdf, I think it’s the best way to do it.
- bootloop 7y ago
  This maybe? http://pdfkit.org/docs/vector.html#svg_paths http://pdfkit.org/docs/vector.html#svg_paths
- sleepychu 7y ago
  Can you convert to eps from the SVG and then whack the eps into a PDF?

reaperducer 7y ago

This could be useful. For all of the electronic communication in my company, once things get to a certain level of management, they want to see stuff on paper.

app4soft 7y ago

Is there such add-on for Inkscape?[0] On GitHub found only few Inkscape add-ons for creating interactive mockups.[1,2,3] [0] https://inkscape.org https://inkscape.org [1] https://github.com/jonathanmann/inkscape_app_mockup https://github.com/jonathanmann/inkscape_app_mockup [2] https://github.com/garrett/magicmockup https://github.com/garrett/magicmockup [3] https://github.com/ajashton/Inkscape-Mockup-Toolkit https://github.com/ajashton/Inkscape-Mockup-Toolkit