7 ms·

Show HN: UI Filler – placeholders for your designs

129 points by alexray 4y ago

hcarvalhoalves 4y ago
An alternative: https://alistapart.com/blog/post/content-first-design/ https://alistapart.com/blog/post/content-first-design/
GrumpyNl 4y ago
Little bug, when you click the shuffle button, the headline from the next box get highlighted, like you wanna copy it.
- alexray 4y ago
  Good find -- we'll fix that!
jsjoeio 4y ago
cool to see AZ as one of the placeholders!
mellonaut 4y ago
This used¹ content from logoipsum who explicitly state you cannot use their logos for this purpose: "You can not: Re-distribute/re-package as means of creating similar logo placeholder website to Logoipsum.com and/or similar to Logoipsum Figma Plugin." see: https://logoipsum.com/license/ https://logoipsum.com/license/ 1. edit: This originally said 'uses' but the author changed it as soon as they were made aware.
- alexray 4y ago
  Yeah, rereading the license, it looks like we shouldn't use images from there. We have already removed them from the list - thanks for the flag
  - mellonaut 4y ago
    Great, I amended my original comment.
jon-wood 4y ago
One of these days I’m going to build something like this, but with realistic profile pictures. A UI with pictures like this site has will always look great, but now try it when half the profile pics are the user’s dog, or the user standing in front of the Eiffel Tower, or hanging out with fifteen friends in a bar. Suddenly it goes from “oh, that’s a post from Bob” to “what even is that picture”?
product_aroid 4y ago
Should add a "Shuffle All" button at the top.
- alexray 4y ago
  Great idea!
benbf 4y ago
We had a blast building this! Let us know if there are any other types of filler content that would be useful. Maybe a Figma plugin?
alexray 4y ago
Hey HN, Alex and Ben here, and we wanted to share a simple web app we created recently. UI Filler is a quick way to get placeholders for your designs. We do a lot of UI design and development and frequently need to fill it with placeholder content. I usually just Google “Lorem ipsum” and end up on a site about the history of lorem ipsum, then copy and paste some small chunk of it to fill the field I need. Ben, who is even more design-oriented than I am, tries to make up appropriate text to fill fields (my favorite thing he does is placeholder names, like “Anita McLaren”). We decided to make a tool that would save us a bit of time every time we needed a placeholder, so we built UIFiller. Let me know what you think!
- throwaway888abc 4y ago
  Brilliant idea! Bookmarked. Will use. Some wish list: - implement seed number (to get same results every time) - json endpoint - little bit more of data types
  - blooalien 4y ago
    Yes! A JSON RESTful API GET endpoint would be SWEET! Easy scriptable way to populate a local testing / design resources folder with some fast starter data. Just to name one possible use that came instantly to mind for my uses. Love the random seed idea, too.
  - alexray 4y ago
    Those are great ideas. I hadn't thought of including a seed, but it shouldn't be too hard to set up. What kinds of data types are you imagining?
- danielvaughn 4y ago
  I'm about to build something similar, not as a standalone product, but as an internal component for a side project of mine. If this could be fleshed out, and delivered as an API, I'd pay for it.
  - kc10 4y ago
moralestapia 4y ago
Very nice, I would really dig an HTTP API of this.
- bluetidepro 4y ago
  If you google "api for dummy data" there are a ton of sites that do exactly that, just a heads up :)
- alexray 4y ago
  Cool, thanks - that seems to be a popular request. I think we'll build that next.
T3RMINATED 4y ago
cphoover 4y ago
Needs more components! but I like this. should have lists too.
- alexray 4y ago
  Thanks! What kinds of components? We're happy to add more
aasasd 4y ago
If you aren't testing your interface with names like Ferdinand Zvonimir Maria Balthus Keith Michael Otto Antal Bahnam Leonhard von Habsburg-Lothringen, you're doing it wrong. My favorite town is Chrząszczyżewoszczyce, powiat Łękołody: https://youtube.com/watch?v=jaMcIbIWt_4 https://youtube.com/watch?v=jaMcIbIWt_4 My favorite country is Sovereign Military Hospitaller Order of Saint John of Jerusalem, of Rhodes and of Malta: https://en.wikipedia.org/wiki/Sovereign_Military_Order_of_Malta https://en.wikipedia.org/wiki/Sovereign_Military_Order_of_Ma... For the company, look at those sub-sub-subdivisions of state departments. But there's also this cutie: https://find-and-update.company-information.service.gov.uk/company/04120480 https://find-and-update.company-information.service.gov.uk/c...
- VWWHFSfQ 4y ago
  Just do {{ name|truncatechars:8 }} Ferdina... Eh, they'll still know who it is.
  - aliswe 4y ago
    No no hold that thought - it will be a good way to generate clicks! looking at you LinkedIn
- harlanlewis 4y ago
  This is almost perfect, just need a few more special characters. Fortunately, Ešeeva'e Ó Cuinneagáin Sólveig doesn't mind being a _very_ early adopter. Edit: I bet this post looks pretty stupid now after parent edited to include special characters.
  - jonwinstanley 4y ago
    Someone’s first name should be <script alert(“hello”); and maybe get Bobby Tables in there too?
  - aasasd 4y ago
    > after parent edited to include special characters I added the city, because I remembered about it. Frankly, I didn't know that Polish had that many diacritics, specifically considering their unfortunate crash into all the digraphs. Ferdinand's name is left as it was, and your point is valid and valuable. BTW, I had no success googling the name you provided. Thought it would be someone vaguely famous.
bartkappenburg 4y ago
So basically a web frontend for Faker?
- kevsim 4y ago
  Faker looks cool! We've been using Casual [0] for ages but Faker looks more featureful and more actively maintained. 0: https://github.com/boo1ean/casual https://github.com/boo1ean/casual
- alexray 4y ago
  I haven't heard of Faker before, but it looks cool! (It's https://fakerjs.dev/ https://fakerjs.dev/, for anyone else who discovers this here)
berkes 4y ago
I like how this includes images and logos. I typically use https://mockaroo.com/ https://mockaroo.com/. But its target is probably less design and more implementing a design in an app or a site.
- alexray 4y ago
  That's cool! We're thinking about adding an API in the future. What kinds of things are you using mockaroo for?
  - berkes 4y ago
    Three things: To provide relevant data for a acceptance (manual) testing environment. Avoid using production data there. To create (temp) mock web APIs in a database, so frontend and clients can start development while the backend builds the actual business logic. To fill a database in development with which a dev can build the UI and views. This uses the same data files and pipeline as the first. For this, I basically just download and transform one or more CSVs and or JSON files. And commit them as part of the software. The official import pipeline of a backend can ingest those in e.g. a CI or with local scripts. Basically just a ./fixtures/members.csv, jobs.csv, vacancies.csv etc.
outsidetheparty 4y ago
Took me a moment to notice the "shuffle" button; the utility of the site became a lot clearer after that! Are those real peoples' photos? I know this is intended for mockups and placeholders, but the absence of any licensing info would still give me a little pause before trying this for anything but a personal project. (I recognize the 'fake logos' from logoipsum.com, they don't require attribution but you miiiiight be on the wrong side of the line of their "as long as you don't use the logo to make similar website as Logoipsum then it's all good" thing.) I hate to be the copyright party pooper, but this is a nifty idea; a quick note at the bottom confirming sourcing and that everything's openly usable would probably encourage more people to make use of it!
- jw1224 4y ago
  > Are those real peoples' photos? Certainly not the portrait photos — they’re unmistakably sourced from https://thispersondoesnotexist.com/ https://thispersondoesnotexist.com/ (once you’ve seen enough of them, they’re impossible to miss…)
  - kaoD 4y ago
    What is amazing to me is that I cannot exactly tell why but I immediate recognized the AI source too, even after seeing only the first photo! Our brains are truly amazing pattern-matching machines...
    - probabletrain 4y ago
      The eyes are in the same location for all pictures, which I think is a subtle but important clue to our subconscious
  - alexray 4y ago
    Right! We wanted to make sure not to use real people's photos. It is a bit eery that all of their eyes stay in the same place as you hit shuffle...
    - 4y ago

129 points by alexray 4y ago

An alternative: https://alistapart.com/blog/post/content-first-design/ https://alistapart.com/blog/post/content-first-design/

GrumpyNl 4y ago

Little bug, when you click the shuffle button, the headline from the next box get highlighted, like you wanna copy it.

alexray 4y ago
Good find -- we'll fix that!

jsjoeio 4y ago

cool to see AZ as one of the placeholders!

mellonaut 4y ago

This used¹ content from logoipsum who explicitly state you cannot use their logos for this purpose: "You can not: Re-distribute/re-package as means of creating similar logo placeholder website to Logoipsum.com and/or similar to Logoipsum Figma Plugin." see: https://logoipsum.com/license/ https://logoipsum.com/license/ 1. edit: This originally said 'uses' but the author changed it as soon as they were made aware.

alexray 4y ago
Yeah, rereading the license, it looks like we shouldn't use images from there. We have already removed them from the list - thanks for the flag
- mellonaut 4y ago
  Great, I amended my original comment.

jon-wood 4y ago

One of these days I’m going to build something like this, but with realistic profile pictures. A UI with pictures like this site has will always look great, but now try it when half the profile pics are the user’s dog, or the user standing in front of the Eiffel Tower, or hanging out with fifteen friends in a bar. Suddenly it goes from “oh, that’s a post from Bob” to “what even is that picture”?

product_aroid 4y ago

Should add a "Shuffle All" button at the top.

alexray 4y ago
Great idea!

benbf 4y ago

We had a blast building this! Let us know if there are any other types of filler content that would be useful. Maybe a Figma plugin?

alexray 4y ago

Hey HN, Alex and Ben here, and we wanted to share a simple web app we created recently. UI Filler is a quick way to get placeholders for your designs. We do a lot of UI design and development and frequently need to fill it with placeholder content. I usually just Google “Lorem ipsum” and end up on a site about the history of lorem ipsum, then copy and paste some small chunk of it to fill the field I need. Ben, who is even more design-oriented than I am, tries to make up appropriate text to fill fields (my favorite thing he does is placeholder names, like “Anita McLaren”). We decided to make a tool that would save us a bit of time every time we needed a placeholder, so we built UIFiller. Let me know what you think!

throwaway888abc 4y ago
Brilliant idea! Bookmarked. Will use. Some wish list: - implement seed number (to get same results every time) - json endpoint - little bit more of data types
- blooalien 4y ago
  Yes! A JSON RESTful API GET endpoint would be SWEET! Easy scriptable way to populate a local testing / design resources folder with some fast starter data. Just to name one possible use that came instantly to mind for my uses. Love the random seed idea, too.
- alexray 4y ago
  Those are great ideas. I hadn't thought of including a seed, but it shouldn't be too hard to set up. What kinds of data types are you imagining?
danielvaughn 4y ago
I'm about to build something similar, not as a standalone product, but as an internal component for a side project of mine. If this could be fleshed out, and delivered as an API, I'd pay for it.
- kc10 4y ago

moralestapia 4y ago

Very nice, I would really dig an HTTP API of this.

bluetidepro 4y ago
If you google "api for dummy data" there are a ton of sites that do exactly that, just a heads up :)
alexray 4y ago
Cool, thanks - that seems to be a popular request. I think we'll build that next.

T3RMINATED 4y ago

cphoover 4y ago

Needs more components! but I like this. should have lists too.

alexray 4y ago
Thanks! What kinds of components? We're happy to add more

aasasd 4y ago

If you aren't testing your interface with names like Ferdinand Zvonimir Maria Balthus Keith Michael Otto Antal Bahnam Leonhard von Habsburg-Lothringen, you're doing it wrong. My favorite town is Chrząszczyżewoszczyce, powiat Łękołody: https://youtube.com/watch?v=jaMcIbIWt_4 https://youtube.com/watch?v=jaMcIbIWt_4 My favorite country is Sovereign Military Hospitaller Order of Saint John of Jerusalem, of Rhodes and of Malta: https://en.wikipedia.org/wiki/Sovereign_Military_Order_of_Malta https://en.wikipedia.org/wiki/Sovereign_Military_Order_of_Ma... For the company, look at those sub-sub-subdivisions of state departments. But there's also this cutie: https://find-and-update.company-information.service.gov.uk/company/04120480 https://find-and-update.company-information.service.gov.uk/c...

VWWHFSfQ 4y ago
Just do {{ name|truncatechars:8 }} Ferdina... Eh, they'll still know who it is.
- aliswe 4y ago
  No no hold that thought - it will be a good way to generate clicks! looking at you LinkedIn
harlanlewis 4y ago
This is almost perfect, just need a few more special characters. Fortunately, Ešeeva'e Ó Cuinneagáin Sólveig doesn't mind being a _very_ early adopter. Edit: I bet this post looks pretty stupid now after parent edited to include special characters.
- jonwinstanley 4y ago
  Someone’s first name should be <script alert(“hello”); and maybe get Bobby Tables in there too?
- aasasd 4y ago
  > after parent edited to include special characters I added the city, because I remembered about it. Frankly, I didn't know that Polish had that many diacritics, specifically considering their unfortunate crash into all the digraphs. Ferdinand's name is left as it was, and your point is valid and valuable. BTW, I had no success googling the name you provided. Thought it would be someone vaguely famous.

bartkappenburg 4y ago

So basically a web frontend for Faker?

kevsim 4y ago
Faker looks cool! We've been using Casual [0] for ages but Faker looks more featureful and more actively maintained. 0: https://github.com/boo1ean/casual https://github.com/boo1ean/casual
alexray 4y ago
I haven't heard of Faker before, but it looks cool! (It's https://fakerjs.dev/ https://fakerjs.dev/, for anyone else who discovers this here)

berkes 4y ago

I like how this includes images and logos. I typically use https://mockaroo.com/ https://mockaroo.com/. But its target is probably less design and more implementing a design in an app or a site.

alexray 4y ago
That's cool! We're thinking about adding an API in the future. What kinds of things are you using mockaroo for?
- berkes 4y ago
  Three things: To provide relevant data for a acceptance (manual) testing environment. Avoid using production data there. To create (temp) mock web APIs in a database, so frontend and clients can start development while the backend builds the actual business logic. To fill a database in development with which a dev can build the UI and views. This uses the same data files and pipeline as the first. For this, I basically just download and transform one or more CSVs and or JSON files. And commit them as part of the software. The official import pipeline of a backend can ingest those in e.g. a CI or with local scripts. Basically just a ./fixtures/members.csv, jobs.csv, vacancies.csv etc.

outsidetheparty 4y ago

Took me a moment to notice the "shuffle" button; the utility of the site became a lot clearer after that! Are those real peoples' photos? I know this is intended for mockups and placeholders, but the absence of any licensing info would still give me a little pause before trying this for anything but a personal project. (I recognize the 'fake logos' from logoipsum.com, they don't require attribution but you miiiiight be on the wrong side of the line of their "as long as you don't use the logo to make similar website as Logoipsum then it's all good" thing.) I hate to be the copyright party pooper, but this is a nifty idea; a quick note at the bottom confirming sourcing and that everything's openly usable would probably encourage more people to make use of it!

jw1224 4y ago
> Are those real peoples' photos? Certainly not the portrait photos — they’re unmistakably sourced from https://thispersondoesnotexist.com/ https://thispersondoesnotexist.com/ (once you’ve seen enough of them, they’re impossible to miss…)
- kaoD 4y ago
  What is amazing to me is that I cannot exactly tell why but I immediate recognized the AI source too, even after seeing only the first photo! Our brains are truly amazing pattern-matching machines...
  - probabletrain 4y ago
    The eyes are in the same location for all pictures, which I think is a subtle but important clue to our subconscious
- alexray 4y ago
  Right! We wanted to make sure not to use real people's photos. It is a bit eery that all of their eyes stay in the same place as you hit shuffle...
  - 4y ago