5 ms·

Keep your wireframes free of distracting Lorem Ipsum

111 points by jpadilla_ 14y ago

endianswap 14y ago
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.
- huhtenberg 14y ago
  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.
  - yuliyp 14y ago
    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.
  - deleted 14y ago
    [deleted]
- andrewmunsell 14y ago
  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.
  - Clanan 14y ago
    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.
micheljansen 14y ago
Nice, this looks much better than BLOKK.
arkitaip 14y ago
Better use actual copy which will allow you to discover the boundaries of your design, e.g. margins, text size, text width, etc.
- andrewmunsell 14y ago
  This is for wireframes, in which you probably shouldn't be obsessing over text sizes and fonts.
  - pan69 14y ago
    Wireframes should be created around the content. Content should not be an afterthought.
    - judofyr 14y ago
      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.
    - fudged71 14y ago
      There are several levels of mockups/wireframes, as well as different kinds of clients. Both methods seem like they have their uses.
    - mnicole 14y ago
      This doesn't account for dynamic content.
      - pan69 14y ago
        Because dynamic content is simply made up, right?
- vacri 14y ago
  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.
senorerik 14y ago
A large portion of web design is the use of typography, making this largely counterproductive.
- sisk 14y ago
  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.
  - senorerik 14y ago
    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-typography-period/ http://informationarchitects.net/blog/the-web-is-all-about-t...
newishuser 14y ago
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.
- snprbob86 14y ago
  > 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.
- mnicole 14y ago
  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.
  - vacri 14y ago
    Which is the exact same thing Lorem Ipsum was for.
huhtenberg 14y ago
You forgot the blurred version - redacted-quora.ttf
HunterV 14y ago
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!
greenyoda 14y ago
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.
- mnicole 14y ago
  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.
stephp 14y ago
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.
aed 14y ago
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.
prolways 14y ago
I can see the clients (and these are the same ones who get confused by Lorem Ipsum) complaining that the "font is unreadable".
justjimmy 14y ago
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.
- ricardobeat 14y ago
  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.
- a_c_s 14y ago
  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.
  - justjimmy 14y ago
    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.
mmanfrin 14y ago
When I did web design, one of my favorite questions I'd occasionally get from a client was 'Why is my website in latin?'
Samuel_Michon 14y ago
Looks familiar... "BLOKK is a font for quick mock-ups and wireframing for clients who do not understand latin." http://blokkfont.com/ http://blokkfont.com/
- nwh 14y ago
  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.
ZaneA 14y ago
I've created a dead simple Chrome extension that uses Redact Script to block out YouTube comments, https://github.com/ZaneA/YT-Redact https://github.com/ZaneA/YT-Redact

111 points by jpadilla_ 14y ago

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.

huhtenberg 14y ago
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.
- yuliyp 14y ago
  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.
- deleted 14y ago
  [deleted]
andrewmunsell 14y ago
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.
- Clanan 14y ago
  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.

micheljansen 14y ago

Nice, this looks much better than BLOKK.

arkitaip 14y ago

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

andrewmunsell 14y ago
This is for wireframes, in which you probably shouldn't be obsessing over text sizes and fonts.
- pan69 14y ago
  Wireframes should be created around the content. Content should not be an afterthought.
  - judofyr 14y ago
    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.
  - fudged71 14y ago
    There are several levels of mockups/wireframes, as well as different kinds of clients. Both methods seem like they have their uses.
  - mnicole 14y ago
    This doesn't account for dynamic content.
    - pan69 14y ago
      Because dynamic content is simply made up, right?
vacri 14y ago
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.

senorerik 14y ago

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

sisk 14y ago
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.
- senorerik 14y ago
  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-typography-period/ http://informationarchitects.net/blog/the-web-is-all-about-t...

newishuser 14y ago

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.

snprbob86 14y ago
> 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.
mnicole 14y ago
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.
- vacri 14y ago
  Which is the exact same thing Lorem Ipsum was for.

huhtenberg 14y ago

You forgot the blurred version - redacted-quora.ttf

HunterV 14y ago

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!

greenyoda 14y ago

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.

mnicole 14y ago
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.

stephp 14y ago

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.

aed 14y ago

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.

prolways 14y ago

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

justjimmy 14y ago

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.

ricardobeat 14y ago
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.
a_c_s 14y ago
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.
- justjimmy 14y ago
  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.

mmanfrin 14y ago

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

Samuel_Michon 14y ago

Looks familiar... "BLOKK is a font for quick mock-ups and wireframing for clients who do not understand latin." http://blokkfont.com/ http://blokkfont.com/

nwh 14y ago
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.

ZaneA 14y ago

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