Connect With WRD
feed via e-mail
feed via e-mail

Posts Tagged ‘iPhone’

Creating a usable mobile app interface from scratch requires time, patience, and lots of caffeine. Photoshop and similar graphics editors are pixel-perfect tools meant to simplify the process of building an interface which can be coded into reality. This gallery includes a set of UI kits which are free to download and use on any project. Using these pre-designed elements can save you a lot of hardship and cups of coffee.

Awesome UI Kit

awesome flat ui kit psd freebie

Read the rest of this entry »

HTML5/CSS3 web applications have rapidly meshed into mainstream web design. Apple’s iOS App Store requires moderation before your app can be listed. This helps to remove poor-quality submissions but also stifles innovation by other means.

If you want to build a mobile app but don’t want to go through all the bureaucratic Apple guidelines, why not create a mobile webapp instead? These resources can help you get started building an iOS-styled web application interface. Most of these tools are built with CSS3 while others might utilize JavaScript libraries. But any framework should prove invaluable when building your own mobile web application.

Read the rest of this entry »

Prototyping any type of design (web/app/code) helps minimizing hassle in the next steps of the creation process.

WireKit, a set of free Photoshop shape layers, simplifies creating prototypes for iPhone apps.

iPhone PSD Prototype Kit - WireKit

It comes in 2 versions: solid (realistic) and stroke (sketchy) where each version includes 60+ elements.

The layers are very well organized + named and they are all consistent in size + how they look.

When presenting web or app prototypes to people (clients, collagues, friends..), showing it inside a real-world-like environment helps them to imagine easier.

PlaceIt is an awesome and free service, created by the talented folks at Breezi, that allows us to upload the screenshot of our prototype and get it placed in different environments.

The service already has multiple themes (like a hand holding the device or the device placed on a desk) and it has shots for iPhones, iPads and Macs.


Screenshots can be uploaded with drag ‘n’ drops or mentioning the URL and the output will be rendered instantly.

New themes are added within time and, if you have similar themes, you can send them to the Breezi team and they may add it as well.

Ratchet is an open source toolkit for easily prototyping iPhone apps using web technologies (HTML, CSS and JavaScript).

It has lots of iOS-looking components like buttons, forms, bars, lists, toggles, sliders, etc. that can be inserted to the prototypes with few lines of code.


The download package is just the template files and the components library. Creating layouts is very easy and their look can be customized with CSS.

Ratchet is very well-documented and has lots of new features to arrive in the future.

Moobile is an exciting and fresh project; a mobile web application framework built on MooTools.

Currently, it is focused on providing a iOS-like experience on WebKit browsers and comes with many controls like bar, button, image, list, activity indicator, slider and more.

Moobile - MooTools Mobile

It also has support for transitions like fade, slide, cubic or cover and can display native-like alerts.

Interfaces created with Moobile are fluid, they will work well both in iPhone + iPad and look good when orientation changes.

The download package includes a boilerplate for quickly starting projects, related PSD files and a simulator.

The Working Group, a talented web agency, has created a set of pixel-perfect iPhone toolbar icons and released them for free.

iPhone Toolbar Icons consists of 160 items in transparent PNG which are sized 30*30px.

Items included in the set are very common ones that any app can require (like arrows, charts, media player and text editor actions, etc.)

There is also a retina display version of the set with 3 different sizes (24*24px, 48*48px and 64*64px).

iPhone Toolbar Icons

  • Tags:
  • Filed under: CC License, Design, Icons
  • Iconshock has released an exciting set of icons named: "Shock iPhone Icons" today.

    The set includes 600 unique items that are designed to meet the requirements of the iPhone iOS guidelines.

    Items inside are the ones that can be used by most of the mobile and web apps (like actions, devices, filetypes, smileys, etc.

    Shock iPhone Icons

    They are in transparent .PNG, have 2 sizes: 30*30px + 40*40px and bundled with ~4,400 variations of each size.

    They are free to use in both personal and commercial (requires attribution) projects.

    P.S. They also have a similar Android icons set.

    Screenfly is a free-to-use web application that can display any website on different device screens and resolutions.

    It uses a proxy server to mimic devices and supports the most-used ones under tablet and mobile categories.

    Also, TV and desktop categories helps viewing websites according to the selected screen-sizes of the devices.


    When creating websites, previewing them in different browsers to ensure that they are rendered correctly is a painful process. The same goes for the mobile websites. Many different browsers, models and sizes.

    Mobilizer, a free Adobe AIR application, displays previews of any given URL or local files (HTML, image or Flash) inside multiple mobile devices.


    It currently supports iPhone 4, Palm Pre, HTC Evo, + Blackberry Storm and more devices are to-be-added soon.

    The previews doesn't have to be one-by-one and each device-preview can be opened as separate windows for an easier comparison.

    Also, the previews can be exported as .PNG files which is very handy.

    Uptime Robot