Keep your wireframes free of distracting Lorem Ipsum | Hacker News Reader

Keep your wireframes free of distracting Lorem Ipsum

github.com

111 pointsjpadilla_37 comments

Judging by the examples, the script fonts appear to have been designed to have realistic characteristics such as uppercase letters and a variety of heights in lowercase letters. But what catches the eye is that none of the characters have descenders (the part of the letter that descends below the baseline of the text, like the bottom of a lowercase "j"). This would make it appear that there's more white space between the lines than required, and detracts from the otherwise realistic shape of the text.

Very much this. I'd love a block-y looking one that included both ascenders and descenders and had different widths for different lengths of words.

Better use actual copy which will allow you to discover the boundaries of your design, e.g. margins, text size, text width, etc.

This is for wireframes, in which you probably shouldn't be obsessing over text sizes and fonts.

Wireframes should be created around the content. Content should not be an afterthought.

There's a time and place for everything. Sometimes you want a wireframe with blocky/blurry text (to experiment with the layout). Sometimes you want a wireframe with Lorem Ipsum (to experiment with the text/font in a generic way). Sometimes you want a wireframe with real content.

This is just another tool in the toolbox.

There are several levels of mockups/wireframes, as well as different kinds of clients. Both methods seem like they have their uses.

This doesn't account for dynamic content.

Because dynamic content is simply made up, right?

The whole point of Lorem Ipsum is that it's for pre-copy design. Once your copy is in, you can do final tweaks, but Lorem Ipsum is there so you don't get it pixel perfect for copy set X and then have to redo it all when Legal says "insert just this one word here", throwing out your overly-specific alignment.

Personally, I find the concept of lorem ipsum or blocked out letters redundant - unless there is indication of what would be there.

The most basic wireframes will be just boxes everywhere and I label the boxes, say 'Pricing Plan Feature'.

Next iteration, would be wireframe still but all the copy need to be clear and thought out ie: the tag line would be 'Pricing Plan Feature' with a sentence below it like 'Our Plan fits any budget, from $5/month to $100/month' and be in that wireframe.

When people wireframe with lorem ipsum/line blocks, giving no indication of what would/is there, it can create assumptions and confusion - for your team mates/clients. If you say it's just for layout, then just use boxes with labels - anything else is just distraction.

When I get the copy after the wireframe, it can be frustation to get handed an essay and try to fit it in a space designed for a paragraph.

Always design around the content/copy, even at the wireframe stage. Knowing the exact (or close to it) copy/content the better - allowing you to gauge the layout and spacing more accurately.

Most of design for the web is not landing pages. If you are designing a website that will have any kind of dynamic content Lorem ipsum is a great tool.

The reason for using Lorem Ipsum is so the client can't waste time in the meeting arguing about whether the lowest tier is $5 or if it should really be $4.99, and if it should be phrased "$5/month" or "$5 per month", details that are not relevant to the issues at hand.

If you're using lorem ipsum to communicate pricing ($5/$4.99), how do client even know that's what it represents?

Wouldn't it be better if you put that $5/month and let them know upfront copy/prices are not set - they are meant to communicate what that area is for and how much space is dedicated to it.

What if you had in your mind that the space is for $5/month, but used lorem ipsum and designed around that.

Then the client hands you copy that goes '$5/month, $50/ year, Save $10 if you subscribe annually / 20% off.' This will likely to have an impact on your layout and spacing, since you just used 'lorem ipsum' in the wireframe step.

You clearly haven't worked with my company's clients :-P They don't listen when you say the copy is filler.

There are also times (like in a small company) when the person reviewing the wireframes is also the person reviewing the final copy, so if you put real copy in there the meeting will always get sidetracked into a discussion of the final copy unless you use some type of filler.

The use of Lorem Ipsum is to have a place holder for your typography. With this you're replacing your typography with unrelated glyphs. This is going to make your mock-ups less relevant and is going to be harder to explain to your clients.

Also the block font looks extremely heavy, would skew the hierarchy of the page and be pretty distracting.

> The use of Lorem Ipsum is to have a place holder for your typography.

And this is to have a place holder for your text, not your typography.

> This is going to make your mock-ups less relevant and is going to be harder to explain to your clients.

But it will make your wireframes less distracting and easier to explain to your clients.

The distinction is in the level of detail. If you're not at the stage where you're picking colors, why should you be picking fonts?

Different tasks; different tools.

Far too often, people nitpick on headers and sentences rather than the actual element placement and overall structure of the page. This alleviates you from having to deal with those situations until they are warranted.

Which is the exact same thing Lorem Ipsum was for.

Hmmm... yeah, I agree with some of the other sentiments here.

I personally don't find Lorem Ipsum distracting, and like others have said, think it would be quicker and easier to troubleshoot design issues using real copy. (The no descenders thing especially gets to me.)

If Lorem Ipsum is genuinely distracting to other people, though, then to each his own! Glad there's options out there for everyone.

You forgot the blurred version - redacted-quora.ttf

Looks familiar...

"BLOKK is a font for quick mock-ups and wireframing for clients who do not understand latin."

http://blokkfont.com/

From the FAQ:

> Q: What's different about this compared to BLOKK?

> A: BLOKK has unusually large character widths, which adds much length to "standard" bits of dummy text, and also creates unecessarily ragged rags in my copy. Redacted solves this by using sane character widths; averaging character widths of narrow, regular, and wide characters of standard fonts. This gives a more realistic look to the text and helps it fit into narrow columns like real text would. Redacted Font also comes with script versions in two weights: bold and regular.

When I did web design, one of my favorite questions I'd occasionally get from a client was 'Why is my website in latin?'

What exactly is distracting about Lorem Ipsum? I've never found it distracting, and I've always found it super useful for mocking up layouts that have responsive designs to see how the text moves around.

When using a filler text, it takes a conscious effort to not read it when glancing through the page and instead try and perceive the filler as a layout filler. So it only makes sense to replace the recognizable glyphs with meaningless scribbles and eliminate that effort.

When you look at the page with text when it's done, you're going to be focusing on the text too. Judging the page in a more realistic scenario makes sense.

I've had more people that not ask what "Lorem ipsum" means-- they actually try and read it. Blokk and Redacted solve this problem quite nicely.

This is the crux - focusing on the client's perspective. At the wireframe stage the important issue is conveying a general structure. I've also had people get lost in the "but why did you put Latin?" rabbit hole.

I can see the clients (and these are the same ones who get confused by Lorem Ipsum) complaining that the "font is unreadable".

A large portion of web design is the use of typography, making this largely counterproductive.

The first part of your statement is true however this typeface is used during a different phase of the design process. It even reads as such in the headline ("wireframes"). That'd be like suggesting mock responses are counterproductive because a large part of building an application is in dealing with live data. Sure, once your interfaces are hardened then you can worry about handling live data but there is a time when all you're going to worry about is handling the response. Similarly, there is a time in the design life cycle where a higher level, "does this work" is valuable.

It's an appropriate tool for a part of the design process.

You are right, this can be useful during initial stages of the design process. Counterproductive was a poor choice of word, let me better elaborate my concern. I assume the use for this typeface is to present wireframes to the client, free of "distracting lorem ipsum". I think showing clients any web design that lacks a typographical direction is an omission of the majority of the design in most all scenarios [1] and not fit as a representation for the future of that design. My personal design philosophy for the web is to accommodate the other aspects of the design to the typography, not to fit the typography secondary to the balance created by the preexisting design.

[1]: http://informationarchitects.net/blog/the-web-is-all-about-t...

Nice, this looks much better than BLOKK.

Coming from a designer that has worked a lot on magazine/newspaper design this is absolutely helpful. I don't know how many times I've seen Lorem Ipsum be glanced over and almost make it into the final print. This is great!

I've created a dead simple Chrome extension that uses Redact Script to block out YouTube comments, https://github.com/ZaneA/YT-Redact

Kind of funny considering that the whole point of Lorem Ipsum was to get rid of the distraction of actual content in the first place.

Reply on news.ycombinator.com