Show HN: UI Filler – placeholders for your designs | Hacker News Reader

Show HN: UI Filler – placeholders for your designs

uifiller.com

129 pointsalexray58 comments

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!

> Are those real peoples' photos?

Certainly not the portrait photos — they’re unmistakably sourced from https://thispersondoesnotexist.com/ (once you’ve seen enough of them, they’re impossible to miss…)

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

What has been seen, cannot be unseen...

Where'd you get the abstract images from?

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

The eyes are in the same location for all pictures, which I think is a subtle but important clue to our subconscious

That's a good point -- our goal is for everything on the site to be able to be used without any sort of attribution. I think it's that way now, but will go and double check everything we're using today

I had the same reaction and won't want to risk using photos that a larger company might try to claim copyright over later.https://www.uifiller.com/images/portraits/anon-6.jpg is https://unsplash.com/photos/lknvOcns4zM which lists a "Free to use under the Unsplash License" (https://unsplash.com/license) but it's not obvious.

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/

1. edit: This originally said 'uses' but the author changed it as soon as they were made aware.

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

Great, I amended my original comment.

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!

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

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?

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.

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.

Interesting -- want to chat and tell me a bit more? You can send me an email at alex at ui filler dot com

something like this? https://fakerjs.dev/

Not an API but as a library, a friend of mine made this for Java/Kotlin: https://www.datafaker.net/

Great idea, thanks for this! The only thing I would change is the background color of the site. The high visibility jacket green does not contrast well with the white boxes and dark gray text. I also get a bit of afterimage, but that's probably because of me.

That's a fair callout -- thanks. We will probably make the color a little less intense in the future, or at least give an option of muting it :)

This makes a ton of sense as a browser extension, why not go that route? With this, I still have to google your site (or at least type it into the url bar if i remember the exact url)

How do you imagine using it as a browser extension?

Click icon, scroll to desired filler and copy or download

If you use it a lot, this makes a ton of sense as a bookmark on your browser's quick access bookmark bar, sidebar, or new tab page. It would also make great sense as a script accessible JSON API endpoint, as another reader here suggested.

If you click just a little too far to the right of the Shuffle button, you download instead.

Oops! I'll fix that :)

Nice idea, I could imagine using this. Just a thought, it might be nice to see more variation in the Lorem Ipsum, like with text that include numbers and links and capitalized word, maybe even multiple paragraphs.

That's a great idea

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

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_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/c...

Just do

    {{ name|truncatechars:8 }}


    Ferdina...

Eh, they'll still know who it is.

No no hold that thought - it will be a good way to generate clicks! looking at you LinkedIn

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.

Someone’s first name should be <script alert(“hello”); and maybe get Bobby Tables in there too?

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

I think I went to school with him.

Well, it's not like I made him up, he's 25 now: https://en.wikipedia.org/wiki/Ferdinand_Habsburg_(racing_dri...

Memorable from the 2017 Macau F3 finish: https://youtube.com/watch?v=RfWr8mP3P1Y

Once this becomes the next decacorn, we're going to get Ferdinand Z. M. B. K. M. O. A. B. L. von Habsburg-Lothringen to be our spokesman. Heck, Ferdinand -- if you're in the comments, you can be our spokesman now if you want

I like how this includes images and logos.

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

That's cool! We're thinking about adding an API in the future. What kinds of things are you using mockaroo for?

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.

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”?

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

If you google "api for dummy data" there are a ton of sites that do exactly that, just a heads up :)

Cool, thanks - that seems to be a popular request. I think we'll build that next.

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

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?

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

Good find -- we'll fix that!

So basically a web frontend for Faker?

I haven't heard of Faker before, but it looks cool! (It's https://fakerjs.dev/, for anyone else who discovers this here)

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

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

Great idea!

Needs more components! but I like this.

should have lists too.

Thanks! What kinds of components? We're happy to add more

cool to see AZ as one of the placeholders!

Reply on news.ycombinator.com