Friday 18 January 2013

How to Improve Your Web Design Mock-Ups With lorempixel

GoogleImageSearch.jpg

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…














via http://www.sitepoint.com/lorempixel-image-mock-ups/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+SitepointFeed+%28SitePoint+Feed%29

No comments:

Post a Comment