8 ms·
BLOKK – A font for clients who don't understand lorem ipsum
- Silhouette 12y agoNice idea. Does anyone know if this is completely free to use or available under some specific licence(s)?
- Animats 12y agoI doubt the author could claim sufficient originality for it to be covered by copyright. Especially since Facebook pages look like that when loading. "(The) standard of originality (in copyright law) is low, but it does exist" - U.S. Supreme Court, in Feist vs. Rural Telephone.
- unholiness 12y agoThis slightly improved version[1] is licensed under the SIL Open Font License. [1] https://github.com/christiannaths/Redacted-Font https://github.com/christiannaths/Redacted-Font
- juhq 12y agoInterestingly I just found redacted font from product hunt which seems to have similar vision. https://github.com/christiannaths/Redacted-Font https://github.com/christiannaths/Redacted-Font Either way, good job, will use either one in some projects! Thanks :)
- kamaln7 12y agoRedacted Script? More like Doctor's Handwriting if you ask me :p
- willvarfar 12y agoRead the disclaimer ;)
- rrrx3 12y agoFantastic. I've used BLOKK in wireframes and run into the same issues that the creator of Redacted did - the text doesn't have a predictable width. It can be a pain in the ass to use because of this. Glad you posted this, I'll be giving it a go ASAP.
- hakanderyal 12y agoInterestingly, the whole point of lorem ipsum is people don't understand it, so they can focus on design when reviewing, not what is written. A good alternative to 'text goes here...' stuff. These kind of fonts look good on wireframes, not so much on prototypes in my experience.
- qznc 12y agoThis is not at all helpful, because the blocks are too "dark", in the sense that bold font is "darker" because more "ink" is used. A lorem ipsum font would be a font which looks like ASCII until you actually read it. Maybe using something like kyrillic (Кириллон алфавиты глаголицæйы тæваг дæр зыны, фæлæ йæ дамгъæтæй фылдæр бердзенаг алфавитæй сты) would be a good idea. (disclaimer: I have no idea which language the above example is. Only random Wikipedia clicking.) edit: the Redacted font others mentions is better
- schoen 12y agoUsing Cyrillic text this way might end up running into the same problem that the creator of this font describes: designers' clients might feel that they're supposed to be able to understand it, but can't. So they might still complain that the text of their site/product/etc. has been replaced with something unintelligible, much as they seem to do now with lorem ipsum mock-ups. The use of æ in your Cyrillic text suggests Ossetian, like in the Ossetian word дæр dær 'and'. Ossetian is the only language that uses the character æ in its Cyrillic alphabet. https://en.wikipedia.org/wiki/Cyrillic_alphabets#Summary_table https://en.wikipedia.org/wiki/Cyrillic_alphabets#Summary_tab...
- DanBC 12y agoSo why won't they complain about the fonts being broken and being replaced by bars?
- schoen 12y agoI bet they'll complain about that too!
- hobs 12y agoThe correct thing to do is determine how much of the complaints you get have to do with lorem ipsum, or if a little bit of additional explanation might be useful for your new/prospective clients when they see the site for the first time. Everyone will hear complaints from their customers (I hope, or they wont have customers for very long), the question is if that is a problem that fixing will save you time or make you more money. My read is not much of either. If you want a fallback like this black box font for the clients who wont/cant be educated that is fine, but you might want to consider firing your client if they are causing enough exasperation that you create entirely new fonts.
- Havvy 12y agoThis is of no use to me. I generally want to know the font styles I'm working with. Seeing black bars doesn't help with that.
- onion2k 12y agoThis is a good illustration of exactly why this font is useful - you want to focus on typography, so you think you need to see text. Given a mockup that needs comments about the layout, or color, or whatever you'll be looking at the wrong bit. This font lets you can see where the text goes, but you can't spend time worrying about the font, weight, kerning, etc so you'll only be able to give feedback on the bits that need feedback. Obviously if a design needs comments about the typography the designer wouldn't use this font.
- Sharlin 12y agoThis is not for you, it's for the client. And if the client really doesn't understand what lorem ipsum is for, they're probably not going to appreciate the typography either.
- iqonik 12y agoI like the idea but I am not sure if it fixes a real problem. I don't think I have ever had feedback from clients complaining they don't understand the text. Where did you get your validation from? Edit: Looking at the amount of likes/tweets you seem to have social validation, just not sure where I would use it.
- mathieuh 12y agoI mocked up a website for someone once and they asked me to translate some lorem ipsum into English (I think they thought it was French).
- oe 12y agoThe more specific your mockup is, the narrower the feedback will be. For example, using colors or text in a mockup often limits the feedback to "I don't like this particular shade of blue" or "There should be our slogan here". Source: worked for a web agency.
- hvs 12y agoI worked in the advertising world for a few years and I would say about 50% of clients were confused by "lorem ipsum" text. (The number of clients confused by a UX mockup and an actual design prototype was around 90%).
- iqonik 12y agoI guess I have just been lucky and/or my mock ups were so confusing that the text was the last of their concerns heh.
- Intermernet 12y agoThis seems similar, but possibly more useful as it won't distract the reader with large geometric blocks of uniform color. http://notionparallax.co.uk/wordpress/?p=1491 http://notionparallax.co.uk/wordpress/?p=1491
- jamesdelaneyie 12y agoI guess this is handy for very early layout concepts. Any designer worth their salt that isn't in a vice via client et al would drop it after the concepting stage.
- asb 12y agoAdam Schwartz's Magic of CSS has a nice trick for getting the same effect without needing a custom font. See it in action at http://adamschwartz.co/magic-of-css/potions/two-pane-app/ http://adamschwartz.co/magic-of-css/potions/two-pane-app/ The relevant CSS is in http://adamschwartz.co/magic-of-css/css/potions.css http://adamschwartz.co/magic-of-css/css/potions.css: .mock-paragraph b { display: -moz-inline-stack; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; background: rgba(0, 0, 0, 0.1); width: 3.125em; height: 0.5em; margin-right: 0.3125em; margin-bottom: 0.3125em; } .mock-paragraph b:nth-last-child(4n+1) { width: 4.5625em; } .mock-paragraph b:nth-last-child(10n+1) { width: 0.875em; } .mock-paragraph b:nth-last-child(9n+1) { width: 5em; }
- rrrx3 12y agoSolid link. Thanks. Bookmarked.
- daemonl 12y agoI use the introduction text from the Wikipedia article on lorem ipsum. Best of both worlds, and meta lols.
- alxndr 12y agoWow, that's perfect!
- mgkimsal 12y agoI'm still waiting for someone to develop the "password" font () so I can tell clients to use that before they put passwords in Word docs before they email them over.
- josephwegner 12y agoI'm hoping that you're kidding, but in case you're not, this is definitely not secure. It's only marginally more secure than just sending it in a regular font. If anyone were trying to intercept that document in order to steal passwords, the font would have absolutely no bearing on their ability to find the password. In plaintext (ie: document opened in Sublime, or other plaintext editor) the password would be very obvious. And even if the interceptor didn't open it in plaintext, it would be incredibly easy for them to just... change the font. Using a "password" font would only decrease the likelihood of someone reading the password over your shoulder. I guess that has value, but I think you'd be way better off finding a real encryption solution. My coworkers and I use Keybase for sending secure info back and forth. The UI there is super simple for people that don't actually understand PGP, but it's (almost) just as secure. You could even do something simple like `keybase decrypt password.txt | pbcopy` on a mac, and that would take the encrypted text and put it in your clipboard - it would never show the password on your screen in plaintext.
- mgkimsal 12y agoOh goodness, I'm kidding!!! I used to teach dev classes and I'd run that one by in class to see who 'got it'. Thankfully most did. Would also joke about using "soundex" matching on passwords to let people in with passwords that were 'close enough'. Most people caught on to that one too (but surprisingly not everyone did).
- ikurei 12y agoI've always used Lorem Ipsum; never had a problem with designers or clients, but with other developers actually. I understand that Lorem Ipsum has a letter distribution close to real text in English, and thus it is useful to judge how things will look. Other than that, couldn't you use more obviously-dummy text? Like "blah blahblah blah."? Or just "This is an example text; we hope you like how it looks."?
- myfonj 12y ago█████ ██ ███ ████████ ███████ ██ ██████ █ ██████▓▓▓▒▒░
- ahoge 12y agoYea, Unicode got that covered: http://en.wikipedia.org/wiki/Block_Elements http://en.wikipedia.org/wiki/Block_Elements Related: http://en.wikipedia.org/wiki/Box_Drawing http://en.wikipedia.org/wiki/Box_Drawing
- gitaarik 12y agoI like to advocate against using placeholder texts most of the time. The problem is often that designers/developers have to create a page with some content on it, but they don't know the content yet. They know a bit what it's about but the real texts on the page are not ready yet. Then they use Lorem Ipsum or something else. This is wrong from the start. Before designing a page, you should know what the content is gonna be. The content should then decide what the design is gonna look like. Essentially, content is part of the design. Designs that used placeholder texts like Lorum Ipsum can also fail, because the real texts turn out to be much shorter/longer than the placeholder text. Or the text is really something else than the designer/developer expected. Or the designer placed some cool text box somewhere but nobody has an idea what kind of content they should put there. This often results in useless texts appearing on the page because the design demands it. Or the other way around, the product owner wants to add a certain text somewhere, but there's not really a place for that in the design, often resulting in an ugly/quick fix. In the end it is all about the content. The design is to complement the content. So I think generally the best approach is to start with the content, then create a design to complement the content. Of course, in some situations it's not possible, but if you can, start with the content!
- post_break 12y agoOh man, if only it was a perfect world right? If I had the content I could complete so many of my to-dos. But no, I'm sitting here waiting for the boss to get me the content. I'd love to have the content first, but it's just never going to happen.
- vinspee 12y agoThis is your own fault. You've made your "boss" believe that you can complete designs without content for so long that he now expects it. You should try re-framing the conversation. Something like: — SCENE: BOSS TYPING FURIOUSLY, YOU KNOCK ON HIS DOOR AND HE INVITES YOU IN. BOSS: "We need this design for our new sprocket page as soon as possible - We're going to market in two weeks and need a landing page for our Google AdWords campaign" YOU: "Awesome! The new sprocket is going to be huge for our company. What would you really like to focus on for this page? I want to make sure to prominently feature the most important things." BOSS: _excitedly lists a dozen things_ YOU: Wow - this thing is really great. It's going to be a huge benefit to our customers. How can we show them the three things they're going to react to instantly? BOSS: "Well my favorite is the gizmosis feature. It makes it so you don't have to flim-flam any more!" YOU: "Woah. That's really cool! I'll make sure that is billed highly. Anything else you can thing of that sticks out in your mind?" BOSS: "That's the only thing that sticks out. I do have this detailed list of features here" YOU: "Please do send that to me - I'll try to make some sense of it. If you think of anything else really important, just email it over to me. I'm going to start putting all of these features into the design tomorrow morning - so make sure you let me know by the end of the day! I can't wait to get this page up for our clients to see - it's going to be a huge win." BOSS: "Excellent. I'll send over any additional thoughts I have with that document right now. Thanks." — END SCENE Framing the conversation is important. Seeing yourself as the boss's advocate is important. You're working toward the same goal. The content is more important than your design. Accept that.
- rbobby 12y ago"Why are there so many black lines? Do they have to be black or could we use a different color?"
- deleted 12y ago[deleted]
- wernercd 12y agoBecause we tried to use white lines and people complained that was racist and that we shouldn't give into White Privilege. #BlackLinesMatter /s
- ThomPete 12y agoI consider copywriting part of the design process. Language is aesthetic and functional and it's implication on the design is actually way bigger than most people would give it credit for. So I normally find great enjoyment in trying to write what I consider the right copy. Sometimes I will inspire the copywriters, love when that happens.
- Raphmedia 12y agoThis is nice. However, I would love to have more exemples... Set up a few example pages!
- cubano 12y agoAwww...screw all that logical stuff. It just looks cool.
- IgorPartola 12y agoI really love this, and look forward to using it. I especially like it because there is now way you are going to confuse this for filled in content and launch a site with it in there. On the subject of placeholder text: some like it, some hate it, most use it. If you are a designer, and use placeholder text, please, please, PLEASE, I beg of you, don't use the same bit of text for everything. Grab a bookmarklet, or widget or whatever to generate random lengths of text for everything. There are so many designs I've gotten over the years where it looks fantastic as long as every bit of text is exactly the same height, but as soon as placeholders are filled with real content, the design looks horrible. Also, any designer that stopped delivering PSD's and started delivering markup, if we meet in person I'll buy you a beer.
- ddebernardy 12y agoIf you're designing a web page without the marketing copy it'll end up holding, you're basically doing it wrong.
- normloman 12y agoOne reason to use placeholder text is to test how a font will look like in a design. You can't do that if you're using this font. Plus it's too dark.