How to Improve Your Web Design Mock-Ups With lorempixel

What does every client want to see? Customer-focused content? Accessibility policies? Profitability forecasts? Of course not — they want mock-ups of their shiny new website. Why bother with all that tedious business fluff when can critique pretty pictures over a long lunch with other members of the board.

It doesn’t matter whether you choose Photoshop, mock-up tools or in-browser prototypes: you’ll need some placeholder text and images. Content is easy: head over to any lorem ipsum generator and copy the text. Unfortunately, sourcing dummy images is more difficult. You could use gray boxes, but your lovingly-crafted design will look a little shoddy. Alternatively, you could hunt through image libraries … but who has spare time for all that sourcing, resizing and cropping?

Here’s a better option: lorempixel.com

lorempixel random imagelorempixel does for images what lorem ipsum does for text. You can source creative commons-licensed images using the tool on the home page but a RESTful URL makes life far easier. So let’s say you need a random image which is exactly 155×168 in size — simply enter the URL lorempixel.com/155/168/

lorempixel random imageWhat if we want the image to use grayscale? Add a ‘g’ to the path — lorempixel.com/g/155/168/

lorempixel technics imageOf course, we rarely want completely random images. Fortunately a category can be appended to the URL, such as lorempixel.com/155/168/technics

lorempixel technics imagelorempixel supports a number of categories to choose from: abstract, animals, city, food, nightlife, fashion, people, nature,sports, technics and transport. If you find a specific image you want to use, add its number to the end of the URL — lorempixel.com/155/168/technics/2

Finally, you can add a caption to any image by placing the text in the URL after the category name or index — lorempixel.com/300/160/nature/7/SitePoint

lorempixel image overlay

lorempixel.com is a simple idea, but it’s useful and implemented efficiently. It may even help you win that next contract…

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.capewp.com Dave Bell

    Way cool. Thank you!

  • http://sparrowinspace.com/ Nick Rutten

    That’s just great! Gonna save so much time looking for an appropriate picture to put into a mock-up!

  • Yochannah

    Placekitten is nearly the same, sans the caption functionality: http://placekitten.com/
    I’d also recommend http://placedog.com/, but it seems to be down right now.

  • http://www.gavinhaubeltmedia.com Gavin Haubelt

    Awesome!! This is a great tool for mock-up work! Thanks for the info!!

  • http://www.cornerstws.com Johan

    I thougth I had seen this about a year ago or so.. doesn’t it use Flickr for the images?…