How to Improve Your Web Design Mock-Ups With lorempixel

By Craig Buckler

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 Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

  • 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?…

Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.