Posts Tagged ‘Mockup’

Presenting website/app-related screenshots with device mockups help users to picture the real product easier.

MockUPhone, a free to use web app, simplifies creating such mockups a lot.

It asks you to choose a device from a list of popular tablets + phones and upload the screenshots with drag ‘n’ drops.

Once uploaded, the screenshots in different orientations + views are generated automatically and offered for download.


When discussing a new web project with clients, it is so important to know that you are on the same page before putting any efforts to create mockups or the real product.

Samantha Warren is sharing her design process tool; Style Tiles, a design deliverable consisting of fonts, colors and interface elements used to create quick/dirty outputs with the clients to better understand the style + expectations of a customer.

Style Tiles

Simply, things are not blurry as a moodboard but not too-specific and time-consuming as mockups. It helps building the connection with the client so that you better know "the product being designed is what the client wants".

Style Tiles don't imply dimensions nor device, it focuses more on creating a design system rather than imagining fixed-width pages.

There is a sample PSD file provided to better understand the process and Samantha discusses it in detail in her blog Badass Ideas.

Building mobile web apps already became pretty easy with user-friendly and high quality frameworks

Mobjectify is a free web application which makes it so much simpler by offering an awesome web-based mockup builder.

The application enables us to create pages and add various web elements (like forms, buttons, content areas, footers, etc.) with few clicks.


It also offers multiple themes to choose from or you can create new themes. There is a live preview and results can be exported as a single HTML file anytime.

Mobjectify powers the mobile web pages with jQuery Mobile + its theme engine and only leaves the custom coding to you.

MobiOne is a powerful and free iPhone and Palm Pre emulator (currently for Windows only) with a drag-n-drop mobile-web visual designer for mockups and mobile HTML code generation functionality.

It has various mobile design templates, updated OSS components, screen capture, multi-touch, gesture support and more.

MobiOne iPhone Emulator

The tool doesn't require any SDK to be installed as it takes advantage of HTML5, CSS3 and JavaScript for development.

MobiOne also supports PhoneGap (an open source, JS-based mobile development toolkit)