How to Improve Your Web Design Mock-Ups With lorempixel

By Craig Buckler
We teamed up with SiteGround
To bring you up to 65% off web hosting, plus free access to the entire SitePoint Premium library (worth $99). Get SiteGround + SitePoint Premium Now

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…

The most important and interesting stories in tech. Straight to your inbox, daily. Get Versioning.
We teamed up with SiteGround
To bring you up to 65% off web hosting, plus free access to the entire SitePoint Premium library (worth $99). Get SiteGround + SitePoint Premium Now
Login or Create Account to Comment
Login Create Account