Choose your size and colour and get a free (CSS) Apple Watch.
Apple fans are positively frothing with excitement about the upcoming Apple Watch, and devs are furiously working to get their apps for the new and shiny gadget up and running on time. When it comes to mock-ups, a common solution is to paste a still of an app on top of one of Apple's promotional images, but designer and front-end developer Luke James Taylor has come up with an entirely CSS-based alternative.
The process for using the solution is simple: choose your size and colour (or multiples thereof), click 'Generate CSS', and you're served CSS that you can copy to your own style sheets. The page then helpfully provides an indication of mock-up image sizes that work nicely with the generated code, and the HTML you'll need to get one of the Apple Watches on your web page.
Latest Videos From Creative Bloq
The end result is clean, efficient, simple and, notably, hackable. (For example, if you hate Apple's colour schemes and demand a bright green watch frame to use with your app mock-up, that luridness is a mere few CSS tweaks away.)
Taylor suggested to us that his project was about efficiency, accuracy and focus: "The CSS Apple Watch Generator has the flexibility to allow you to select only the Apple Watch sizes and colours you need for your mock-ups, allowing you to reduce the amount of CSS you use. And the rounding and size of the frame matches the real thing, enabling you to use pixel-perfect app grabs."
As for the end result being rather flatter in appearance than a photograph of the real thing, Taylor reckons that's also potentially beneficial for designers and app developers: "I decided on using a simple and minimal frame style, rather than a realistic one, so people focus on the content in the app screenshot, and not on the Apple Watch itself."
