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.
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.
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.
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.
Compatibility: No Requirements
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.
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.
Requirements: MooTools & MooTools More
Compatibility: WebKit Browsers
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).
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.
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.
Compatibility: All Modern Browsers
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.
Requirements: Adobe AIR
It comes in multiple parts where the "core" (which includes HTTP requests utilities, event management system or DOM extensions) is a must to use and every other feature is optional.
Such a structure helps keeping the filesize minimum which is pretty important when it is mobile.
The UI widgets of the framework is very rich and consists of 3D wall, accordion, sliding panels, flip page, coverflow, progress bar and much more.
There are also libraries for a slick user experience with drag 'n' drop, gesture recognizer or browser history.
Wink Toolkit is a project of Dojo Foundation and also expected to be a part of the Dojo Mobile.
Requirements: No Requirements
Compatibility: iPhone, iPad & Android