These guidelines describe how to design apps that follow the official HIG for iOS by Apple, not what you can do with custom controls. Sometimes it makes sense to break the rules. The purpose of this document is to guide you, not to provide solutions for complex and unique design problems.
The Looking Glass - Exhibitions, Interactions. Exposition de l’expérience. Expérience interactive numérique (2 ipads) Source
BLINKDRINK transforms your phone from “that thing you play with when no one is talking to you at the bar” into a pint-sized party. Open the app, choose your color, and put your drink on top. BLINKDRINK uses the prism of your poison to keep time to whatever song is playing. You’re thinking, “iPhone as coaster? Sounds like a bad idea.” Well we put a lot of drinks on top of phones while making this thing- the only bad ideas generally happened afterward. Source
Share life in 3D with Seene. The world we live in isn’t flat, and with Seene, neither is the way you share it. Seene lets you take lifelike 3D photos and share this with other Seene users, on the web and via social networks. Source
The BMW i Window Into The Near Future digitally transforms passing cars into the all-electric BMW i3 and plug-in hybrid BMW i8 Concept vehicles — and showcases our vision for the future of mobility.
iFrame. We convert your presentation to the application for the iPad, and there is nothing extra: no buttons or select documents or receiving network indicator - only your presentation. We follow the rule: the simpler - the better. Simply, does not mean poorer: the iFrame-presentation can insert pictures, galleries, video and 3D-view. Easier, more convenient means. Source
Designing a user interface for iPhone is totally different than designing for the web. Small screen, fixed width, users are on the move etc.
I’ve been designing a couple of iPhone apps recently and while doing so came across some useful techniques that I thought I would share for any designers who have still to move from web to iOS design. Good luck designing your mobile apps for iPhone!
1. Setup Photoshop
If you’re designing for iPhone 4 you’re designing for a high-res retina screen. 2 pixel lines appear as 1 point when they’re shown on screen.
Setup your Photoshop grid so the minimum grid lines are split in 2 pixels.
Photoshop > Preferences > Guides, Grid & Slices
I set the gridline to every 20 pixels, and subdivisions to every 2 pixels.
Now ensure you have snap setup to snap to all, ensuring any objects you move will snap to the 2px grid.
Also ensure your shapes tool is setup to snap to pixels. This should keep everything nice and sharp.
Colours look different on different screens so you may want to adjust your colour settings also.
There are a lot of enforced guidelines in here along with best practices for mobile devices.
44px is the ideal tappable area on screen
Users expect iPhone apps to launch in portrait orientation
Branding should be unobtrusive
Each app submission requires several icon dimensions
Controls should look tappable – make use of contours and gradients
Modal windows/tasks interrupt so use sparingly
iOS Resizable App Icons Concept. Inspired by the more living home screens of Windows Phone and Android, this concept video shows how the iOS home screen could become more.
In this concept, an app icon can be resized from 1x1 to 2x2 or 4x2, similarly to how you would on Windows Phone 8. The increased size can house widget like functionality and provide easy access to core features of that particular app. For example, you could expand the Settings icon into a widget with a brightness slider, and quick toggles for WiFi, Bluetooth, Personal Hotspot and Do Not Disturb.
The newfound space could also be used to give a miniaturized window into the app, showing content already on the home screen. This could be useful for Phone, Messages or Mail. Instead of a glaring red badge, you’d be able to see the messages or calls directly on the home screen.
To launch the app, you can press the shrunken app icon in the lower left.
The expanded icons can be moved around like regular icons and placed in the manner you like. But for obvious reasons, you cannot place an expanded icon in the dock; it would just slide back onto the home screen.
One could imagine that this functionality would also be available to developers, who could include it for their apps.
This would rather nicely complement the existing feature set of iOS and make the home screen more engaging.
Evernote 5 introduces a new look-and-feel that makes accessing all the features you use most fast and easy.
The ongoing discussion about the “readiness” of HTML5 is based on a lot of false assumptions. These lead to myths about HTML5 that get uttered once and then continuously repeated – a lot of times without checking their validity at all.
HTML5 doesn’t perform?
The big thing everybody who wants to talk about the problems with HTML5 is performance. The main problem here is that almost every single comparison misses the fact that you are comparing apples and pears (no pun intended).
Comparing an HTML5 application’s performance with a native App is comparing a tailored suit with one bought in a shop. Of course the tailored suit will fit you like a glove and looks amazing but if you ever want to sell it or hand it over to someone else you are out of luck. It will not be the same for the next person.
That is what native Apps are – they are built and optimized for one single environment and purpose and are fixed in their state – more on that later.
HTML5, on the other hand by its very definition is a web technology that should run independent of environment, display or technology. It has to be as flexible as possible in order to be a success on the web. In its very definition the web is for everybody, not just for a small group of lucky people who can afford a very expensive piece of hardware and are happy to get locked into a fixed environment governed by a single company.
Native applications need to be written for every single device and every new platform from scratch whereas an HTML5 App allows you to support mobiles, tablets and desktops with the same product. Instead of having fixed dimensions and functionality an HTML5 App can test what is supported and improve the experience for people on faster and newer devices whilst not locking out others that can not buy yet another phone.
Native Apps on the other hand do in a lot of cases need an upgrade and force the end user to buy new hardware or they’ll not get the product at all. From a flexibility point of view, HTML5 Apps perform admirably whilst native applications make you dependent on your hardware and leave you stranded when there is an upgrade you can’t afford or don’t want to make. A great example of this is the current switch from Apple to their own maps on iOS. Many end users are unhappy and would prefer to keep using Google Maps but can not.
The answer is hardware access. HTML5 applications are treated by mobile hardware developed for iOS and Android as second class citizens and don’t get access to the parts that allow for peak performance. A web view in iOS is hindered by the operating system to perform as fast as a native App although it uses the same principles. On Android both Chrome and Firefox show how fast browsers can perform whereas the stock browser crawls along in comparison.
The stock browser on Android reminds us of the Internet Explorer of the 90s which threatened to be set in stone for a long time and hinder the world wide web from evolving – the very reason Mozilla and Firefox came into existence.
In essence HTML5 is a Formula 1 car that has to drive on a dirt road whilst dragging a lot of extra payload given to it by the operating system without a chance to work around that – for now.
HTML5 can not be monetized?
HTML5 is a technology stack based on open web technologies. Saying that HTML5 has no monetization model is like saying the web can not be monetized (which is especially ironic when this is written on news sites that show ads).
Whilst on the first glance a closed App-market is a simple way to sell your products there is a lot of hype about their success and in reality not many developers manage to make a living with a single app on closed App markets. As discovery and find-ability is getting increasingly harder in App markets a lot of developers don’t build one App but hundreds of the same App (talking dog, talking cat, talking donkey…) as it is all about being found quickly and being on the first page of search results in the market.
This is where closed App markets with native Apps are a real disadvantage for developers: Apps don’t have an address on the web (URL) and can not be found outside the market. You need to manually submit each of the Apps in each of the markets, abide to their review and submission process and can not update your App easily without suffering outages in your offering.
An HTML5 App is on the web and has a URL, it can also get packaged up with products like Adobe PhoneGap to become a native application for iOS or Android. The other way around is not possible.
In the long term that begs the question what is the better strategy for developers: betting on one closed environment that can pull your product any time it wants or distributing over a world-wide, open distribution network and cover the closed shops as well?
Many apps in the Android and iOS store are actually HTML5 and got converted using PhoneGap. The biggest story about this was the Financial Times releasing their app as HTML5 and making a better profit than with the native one. And more recently the New York Times announced it was following suit with its Web app.
HTML5 can not be offline?
As HTML5 is a web technology stack the knee-jerk reaction is thinking that you would have to be online all the time to use them. This is plain wrong. There are many ways to store content offline in a HTML5 application. The simplest way is the Web Storage API which is supported across all modern browsers(excluding Opera mini which is a special case as it sends content via a cloud service and has its own storage tools). You can also store the application itself offline using AppCache which is supported by all but Internet Explorer. If you have more complex data to store than Web Storage provides you can use either IndexedDB (for Chrome and Firefox) or WebSQL (for iOS and Safari). To work around the issues there are libraries like Lawnchair available to make it easy for developers to use.
HTML5 has no development environment?
One concern often mentioned is that HTML5 lacks in tooling for developers. Strangely enough you never hear that argument from developers but from people who want to buy software to make their developers more effective instead of letting them decide what makes them effective.
HTML5 development at its core is web development and there is a quite amazingly practical development environment for that available. Again, the main issue is a misunderstanding of the web. You do not build a product that looks and performs the same everywhere – this would rob the web of its core strengths. You build a product that works for everybody and excels on a target platform. Therefore your development environment is a set of tools, not a single one doing everything for you. Depending on what you build you choose to use many of them or just one.
The very success of the web as a media is based on the fact that you do not need to be a developer to put content out – you can use a blogging platform, a CMS or even a simple text editor that comes with your operating system to start your first HTML page. As you progress in your career as a developer you find more and more tools you like and get comfortable and effective with but there is no one tool to rule them all. Some developers prefer IDEs like Visual Studio, or Eclipse. Others want a WYSIWYG style editor like Dreamweaver but the largest part of web developers will have a text editor or other of some sorts. From Sublime Text, Notepad++ up to VIM or emacs on a Linux computer, all of these are tools that can be used and are used by millions of developers daily to build web content.
When it comes to debugging and testing web developers are lucky these days as the piece of software our end users have to see what we build – the browser – is also the debugging and testing environment. Starting with Firefox having Firebug as an add-on to see changes live and change things on the fly, followed by Opera’s Dragonfly and Safari and Chrome’s Devtools, all browsers now also have a lot of functionality that is there especially for developers.Firefox’s new developer tools go even further and instead of simply being a debugging environment are a set of tools in themselves that developers can extend to their needs.
Remote debugging is another option we have now. This means we can as developers change applications running on a phone on our development computers instead of having to write them, send them to the phone, install them, test them, find a mistake and repeat. This speeds up development time significantly.
For the more visual developers Adobe lately released their Edge suite which brings WYSIWYG style development to HTML5, including drag and drop from Photoshop. Adobe’s Edge Inspect and PhoneGap makes it easy to test on several devices at once and send HTML5 Apps as packaged native Apps to iOS and Android.
In terms of deployment and packaging Google just released their Yeomanproject which makes it dead easy for web developers to package and deploy their web products as applications with all the necessary steps to make them perform well.
All in all there is no fixed development environment for HTML5 as that would neuter the platform – this is the web, you can pick and choose what suits you most.
Things HTML5 can do that native Apps can not
In essence a lot of the myths of HTML5 are based on the fact that the comparison was between something explicitly built for the platform it was tested on versus something that is also supported on it. Like comparing the performance of speedboat and a hovercraft would result in the same predictable outcome. The more interesting question is what makes HTML5 great for developers and end users, that native applications can or do not do:
Write once, deploy anywhere – HTML5 can run in browsers, on tablets and desktops and you can convert it to native code to support iOS and Android. This is not possible the other way around.
Share over the web – as HTML5 apps have a URL they can be shared over the web and found when you search the web. You don’t need to go to a market place and find it amongst the crowded, limited space but the same tricks how to promote other web content apply. The more people like and link to your app, the easier it will be found.
Built on agreed, multi-vendor standards – HTML5 is a group effort of the companies that make the web what it is now, not a single vendor that can go into a direction you are not happy with
Millions of developers – everybody who built something for the web in the last years is ready to write apps. It is not a small, specialized community any longer
Consumption and development tool are the same thing – all you need to get started is a text editor and a browser
Small, atomic updates – if a native app needs an upgrade, the whole App needs to get downloaded again (new level of Angry Birds? Here are 23MB over your 3G connection). HTML5 apps can download data as needed and store it offline, thus making updates much less painful.
Simple functionality upgrade – native apps need to ask you for access to hardware when you install them and can not change later on which is why every app asks for access to everything upfront (which of course is a privacy/security risk). An HTML5 app can ask for access to hardware and data on demand without needing an update or re-installation.
Adaptation to the environment – an HTML5 app can use responsive design to give the best experience for the environment without having to change the code. You can switch from Desktop to mobile to tablet seamlessly without having to install a different App on each.
Let’s see native Apps do that.
Breaking the hardware lockout and making monetization easier
The main reason why HTML5 is not the obvious choice for developers now is the above mentioned lockout when it comes to hardware. An iOS device does not allow different browser engines and does not allow HTML5 to access the camera, the address book, vibration, the phone or text messaging. In other words, everything that makes a mobile device interesting for developers and very necessary functionality for Apps.
To work around this issue, Mozilla and a few others have created a set of APIs to define access to these in a standardized way called Web APIs. This allows every browser out there to get access to the hardware in a secure way and breaks the lockout.
The first environment to implement these is the Firefox OS with devices being shipped next year. Using a Firefox OS phone you can build applications that have the same access to hardware native applications have. Developers have direct access to the hardware and thus can build much faster and – more importantly – much smaller Apps. For the end user the benefit is that the devices will be much cheaper and Firefox OS can run on very low specification hardware that can for example not be upgraded to the newest Android.
In terms of monetization Mozilla is working on their own marketplace for HTML5 Apps which will not only allow HTML5 Apps to be submitted but also to be discovered on the web with a simple search. To make it easier for end users to buy applications we partner with mobile providers to allow for billing to the mobile contract. This allows end users without a credit card to also buy Apps and join the mobile web revolution.
How far is HTML5?
All in all HTML5 is going leaps and bounds to be a very interesting and reliable platform for app developers. The main barriers we have to remove is the hardware access and with the WebAPI work and systems like PhoneGap to get us access these are much less of a stopper than we anticipated.
The benefits of HTML5 over native apps mentioned above should be reason enough for developers to get involved and start with HTML5 instead of spending their time building a different code base for each platform. If all you want to support is one special platform you don’t need to go that way, but then it is also pointless to blame HTML5 issues for your decision.
HTML5 development is independent of platform and browser. If you don’t embrace that idea you limit its potential. Historically closed platforms came and went and the web is still going strong and allows you to reach millions of users world-wide and allows you to start developing without asking anyone for permission or having to install a complex development environment. This was and is the main reason why people start working with the web. And nobody is locked out, so have a go.
Flick Scrolling gesture. When scrolling content on a touch-screen, instead of letting momentum stop the scrolling, you can decide exactly where it should stop. Source.
HARRY’s Bottle Message - Cheil Singapore. This is a case study video created to be presented at advertising awards, and has no commercial values. All rights reserved to EMI. Source
BEV - The Incredible Sampling Robot (BOS Ice Tea). BEV is the world’s first Tweet activated sampling machine. Simply tweet her unique hashtag when standing in front of the machine, and enjoy an ice cold BOS Ice Tea on the house.
Source. KRAFT Macaroni & Cheese, delivers an iPad app that stops the wastage (at the hands of Kids) of tonnes of pasta pieces the world over, and creates a new, super cool way for those same kids to create all the best Macaroni Art they can possibly imagine.
This Grolsch multi-screen campaign is an interesting example of extending a TVC into interactive an online video and mobile experience, that in turn drives retail foot traffic. Starting with a TVC introducing a bold character, the ad then challenges you to go online to continue the conversation.
Users are then introduced to the character more personally over a beer and are asked to text him their name in real-time as the online video plays… For users who’s name the character recognises, he sends them back a text message, literally buying them a beer in real life, with the text linking straight to a coupon code and store finder to claim. Created by the BMB Agency.
Evernote Smart Notebook by Moleskine Moleskine and Evernote have collaborated to re-imagine how individuals keep their best ideas with them wherever they sit along the analog-digital continuum.
Double is the simplest, most elegant way to be somewhere else in the world without flying there. The minimalist design and intuitive touchscreen controls allow you to freely move around without inconveniencing others. You can stay at eye level, whether sitting or standing, by adjusting your height remotely, which makes conversations fluid and real. Retractable kickstands will automatically deploy to conserve power when you are not moving around. Efficient motors and lightweight design give Double the ability to last all day without recharging the battery.
Volvo X-RAY application turns your iPad into an X-Ray scanner of the vehicle.Allows the user to see a full 360 degree view of the vehicle.