Placeholder and Lorem Ipsum Services for Web Designers

Placeholder and Lorem Ipsum Services for Web Designers

Wednesday, October 2013

By: Nadine Zein

As a designer and a developer real content and images are usually the last things we think about. Of course knowing what we are designing for and understanding our audience is very important. However, having to fill in information to give the feeling of a real site is pretty frustrating especially when trying to find the perfect image.

After discovering a few helpful sites, adding the content and images almost became the best part in designing for me! Kidding, but it did make it a lot more fun! Having to choose out of many lorem ipsum and image placeholder sites just makes our lives so much easier. I have listed below the ones I like to use. You can choose ones for your for fun clients and for the more serious ones.

Lorem ipsum sites:

BlindTextGenerator

This is a brilliant one. Its straight forward and easy to use, especially when you are in a hurry. You put in the options you want on the left and it generates the text in the middle. There are different topics to choose from, you can select either number of paragraphs or number to characters, puts in HTML tags if needed and it even generates the CSS code for you based on the font family, size, line-height… you choose. This also has the option to choose a language for the lorem ipsum it generates, you can choose between English, Russian, Czech, Italian, Spanish, French, and German.

Picksum Ipsum

This is very nicely laid out and is actually pretty fun to use and read! I am more careful using this, as the text that it creates is difficult to manage in terms of content. It generates the best lines from some of the Hollywood legends that you decide on, such as Michael Caine, Clint Eastwood, Jim Carrey, and Morgan Freeman. So I use this for clients that are more easy going and if they read the text will enjoy doing so.

There are a lot more other text generators, in fact there are some based on popular TV shows such as Breaking Bad, Arrested Development , Futurama.

Placeholder sites:

In general they are all pretty simple to use. The link for the image would usually be the url site followed by two numbers: width then height.

LoremPixel

This is great for more serious clients. It has big range of pictures depending on your topic AND the choice of having it colored or black and white. It’s pretty convenient.

  • http://lorempixel.com/400/200 //colored images
  • http://lorempixel.com/g/400/200 // grey images
  • http://lorempixel.com/400/200/category //specific category

 If you need to call the same image several times in your website you can specify that by adding a number after the category (between 1 - 10) and using that same number when you call it again.

  • http://lorempixel.com/400/200/category/1

PlaceHold.It

I like this because it shows the dimensions of the images. It’s straightforward and simple to use. You can change the color from grey to any other solid color you want. Also, instead of having the image dimensions you can add any text you want.

  • http://placehold.it/350x150 // showing dimensions
  • http://placehold.it/350x150&text=Hello World // add text
  • http://placehold.it/350x150/ffffff/000000  // add color

PlaceKitten

Finally, for those of you that can enjoy fun images while working, this site if for you… well, if you’re a cat lover that is.

  • http://placekitten.com/200/300 //colored images
  • http://placekitten.com/g/200/300 // grey images