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.

PlaceIt

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.

Ratchet

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.