Lead Thinking The Business of Software Development

YMockup – UI Mockups in CSS and HTML

Yesterday I was looking for way to create UI mockups, but nothing I found was quite what I wanted. I needed a way of quickly creating mockups that looked realistic, and could be reused in the actual implementation of the design.

CSS has advanced so far recently, that I believe it can go some way to replacing Photoshop in the design process. With that in mind, I present YMockup – UI mockups using HTML and CSS.

With YMockup, you can code up a general theme for your site – and then drag/edit/resize elements to your hearts content! It’s really flexible, and you can create any kind of element that your site needs.

The best part of it, is that you can reuse all the CSS and HTML in your actual site – no need to cut up the designs in Photoshop.

Try out the demo here (only supports WebKit based browsers, such as Chrome or Safari).

YMockup Features:

• Customisable for any HTML/CSS
• Edit elements in place
• Drag and drop
• Snap to grid dragging
• z-index control
• Move elements with the arrow keys (hold ctrl)

If you want to use your own themes/elements, clone the repository and follow the README – it’s designed to be used locally, so you can edit the HTML and CSS in your preferred editor.

As you can see, I’ve include the aristo theme – since I’m primarily using this to build Bowline applications.

Of course this won’t be everybody’s cup of tea, and does require a good knowledge of HTML/CSS. However, I believe it’s perfect for design minded hackers, like myself.