This overview will introduce the use of Sketch for design, Marvel for prototyping and Lookback for feedback.
If you would to discuss your app design process, please contact me.
No More Xcode
This is the last mention of Xcode in this article because it’s not necessary for prototyping. It’s too cumbersome, restrictive and final. Storyboards seem to be a good fit for this purpose but fall short when compared to the following tools.
Sketch is a user interface design tool. It’s been designed that way from the ground up and it has a healthy ecosystem of plugins and resources.
It’s intuitive use means that the learning curve is low. Although there are a ton of tutorials and guides out there if you get stuck.
iOS App Prototyping
Amazing iOS 9 design resources have been provided by Facebook and Meng To. These contains elements of all levels of app design from entire tableviews to single icons. Each of the resources can be broken down to a granular level. With each one having customisable settings for size, colour, opacity, tint, border, blur, anything, ever.
This means that prototyping becomes a matter of arranging existing elements on screen rather than designing from scratch.
By reusing existing UI elements a design can evolve very quickly.
Through the use of Symbols and Text Styles is possible to build resuable blocks of elements. These can then be updated in one central library with the change being reflected throughout the design.
(This is the first step in ensuring that the design has been structured correctly and a cohesive style guide has been applied).
Marvelling with Marvel
Marvel is a prototyping tool. It allows you to upload your designs and create links and transitions between screens. A project can then be viewed on the web or via the Marvel iOS app.
Using a third party plugin it is simple to publish your Sketch design in Marvel.
When adding hotspots to a design to link to another screen you also specific the transition type. These settings are stored in Marvel and are kept when a new version of the Sketch design is uploaded.
There is something very powerful about the lack of effort required to deploy your prototype to a device for feedback and testing. The reduction in time so drastic your project feels successful immediately. With early stage feedback from a design preview on device you’re cutting costs and adding value at the same time.
Feedback with Lookback
Lookback is a user testing tool that records a test session in the prototype, including a video of the users reactions.
Through an integration in Marvel, you can watch users testing the design you created in Sketch.
The session is initiated from within Marvel. Users can be invited via a shared URL or by email. They are asked to install the Marvel app and then start the test. It’s a seamless experience for the user.
The results of the testing are presented in a very powerful way. The timeline, app recording and user video recording are all synced to show the route the user took through the design.
It also archives all the user testing for future reference.
This simple workflow is amazingly powerful. The number of steps are minimal. The value is unfathomable.
Any app design process can benefit from this workflow. If you would to discuss your app design process, please contact me.
Every iOS app developer should stop now and start using Sketch. It’s not Photoshop (because life’s too short). It’s a gamechanger.
It’s got a massively healthy eco system for plugins, resources and third party integrations. Yep, it’s not a drawing tool, it’s a UI prototyping lifesaver.
It’s intended for designing digital products. Templates for iOS devices are standard.
Design should be borrowed or inspired by others. It should never be lookng at a blank screen and not knowing how to fill it. With a weatlh of Sketch resources available, the design inspiration is unlimited.
Time Saving Resources
Meng To has produced an iOS 9 resource kit, as has Facebook. These contain all the elements of a design that you should ever need. As all elements in Sketch are vector based, every element can be set to the required size, colour, opacity, tint, border, blur, anything, ever. From a developer point of view, this means never actually having to design any elements. Just arranging elements is enough to be able to create new screen layouts.
Although there are plenty of screen layouts included too. If you’re mocking up an app, you can easily use available resources to customise onboarding screens, login screen, tableview with content and a messaging screen. Within Xcode you wouldn’t even bother to attempt this.
Any design can be realised but a design based on iOS controls and principles can be created quicker.
It’s a simple canvas so the ‘limitations’ of device orientation and sizes with accompanying constraints are being ignored, which at the design stage is a good thing.
Any non standard UI elements within the design can be exported as code using the PaintCode plugin.
Project layout is important. It’s easy to get to a jumbled state of multiple pages, multiple layers, nested layers and duplicated layers. Refactoring will aid the whole process making for quicker iterations and maintainable designs.
Sketch plays to a lot of the strengths of a developer IDE. In fact, it’s almost an IDE for design. Maybe this is nothing new (Photoshop has had an eco system of utilities for a long time), but it’s that Sketch feels like it’s helping you. It has the same attitude. It’s helping you with your design. It wants to be part of your workflow so you’re not battling against it.
I got my introduction to Sketch through Meng To’s Design+Code and would recommended that you do too.
WWDC is taking place on June 13 -17th 2016 in San Francisco.
There is a sliding scale of options for “attending” WWDC week:
- Get a ticket, go to SF, attend sessions
- Go to SF, watch sessions
- Stay home, watch sessions
WWDC Attendance Cost
open until April 22nd 2016 closed for 2016. Registering entered you into the lottery for tickets. Successful applicants were notified on April 25th 2016.
Registration cost $1599 which is charged on successful selection during the lottery process. You then have travel and hotels costs. Typical estimates of attendance cost are $4000. This is also a week out of the office so typically you have reduced income for a week.
If you’re not planning to attend, there are plenty of ways you can join in during WWDC week.
The two key sessions are the Keynote and the Platforms State of the Union. The Keynote is the business update which typically includes new product announcements. The Platforms State of the Union goes deeper in iOS and OSX features and updates.
Apple has announced that many of the sessions will be live streamed.
The Apple WWDC app gives a sneak preview of sessions. Not yet updated for 2016. Expect the schedule to be updated by the end of May.
There are many other events happening in San Francisco during WWDC. Some are satellite events for WWDC and some are alternative events for without a WWDC ticket but are still in the city. Both Layers and AltConf have confirmed 2016 events but have not yet published details. For a taste of the great talks from last year, view the 2015 AltConf videos.
Watching WWDC Videos
The release of WWDC videos by Apple has improved year on year. The time to release has reduced every year, with some sessions now being streamed live. Recently they have added searchable transcripts and subtitles. The searchable transcripts provide links to the point in the video. This is very powerful for quickly navigating a video. Subtitles make it easier to absorb the content.
For a full UI to access the videos, you should use WWDC. This Mac app allows you to track videos you’ve watched, save favourites and gives access to all videos and transcripts from previous WWDC’s.
It’s been a while since Apple Pay made an appearance. I’ve used it a handful of times. Maybe unnecessary so in some cases.
As of April 2016, what does Apple Pay look like and how can people use it?
Apple Pay is supported on iPhoneSE, iPhone6/s and iPhone6/s Plus running 8.1 and above. Also supported for Apple Pay within apps are iPad Air 2, iPad Mini 3 and iPad Pro.
And Apple Watch. This also means that you can use Apple Pay on an iPhone 5, if paired with an Apple Watch.
Apple Pay is supported by 28 card issuers. Update: Barclays added support in April 2016.
Apple Pay is supposed in 5 countries, USA, UK, Canada, Australia and China.
Apple Pay can be used in over 2 millions locations.
Apple Pay in Apps
Note: Apple Pay is for physical goods and services, In-App Purchases are for virtual goods and subscriptions.
Apple Pay can be integrated into apps. This is made simple with integrations by third party providers including Stripe and Braintree. There is also a hosted implementation if you are a Shopify seller. You can use Apple Pay in Airbnb, Fancy, HotelTonight, OpenTable, StubHub and Uber.
Loyalty cards can be included and presented for payment. Walgreens was one of the first to introduce this option. Depending upon the retailer you either present your phone once for both payment and loyalty transactions, or present the phone twice; once per transaction.
This seems to be suffering from slow adoption in the UK.
Apple Pay on websites
Apple Pay can be used to pay on websites. But not yet. It’s likely to be a WWDC announcement with availability by the end of 2016.
Why should you consider including Apple Pay in your app?
The following quotes are taken from the WWDC 2015 talk Apple Pay Within Apps video:
StubHubhave a great iPhone app.You can buy event tickets directly on the phone.They integrated with Apple Pay and they found that Apple Pay users transact 20% more frequently than regular customers.
Another app that’s seen really great things from Apple Pay is OpenTable.You cannot only book a reservation but you can go into a restaurant and pay for your meal directly on your phone at the table.And when they integrated that product with Apple Pay, they saw transaction growth of 50%.
Staples have a really nice app you can buy all of your office supplies directly from your phone and they saw an increase in overall conversion, that’s the percentage of users who became paying customers of 109% with Apple Pay!
Joe Einhorn, the CEO of Fancysaid Apple Pay is not only driving more purchases but activating our biggest spenders.I can also tell you that iOS users of Fancy out spend all over mobile platforms combined by a factor of two to one.These are customers would really like using Apple Pay to buy things and they want to buy lots of things.So it’s great for your apps.
Developing Apple Pay Apps
The Apple Pay Developer site has all the resources needed to get started on app integration.
Apple Pay is supported within the iOS simulator with available testing cards for each provider you choose to support.
On March 18th, 2016, Microsoft’s acquisition of Xamarin officially closed. We love C# and we want every developer to be able to take advantage of the power of .NET in every app, on every device. Being part of Microsoft makes it possible for us to do some incredible things, and today we are announcing several …
As of today, Xamarin is now available for free. No more enterprise pricing. This now makes it a viable option for me as an independent iOS contractor to be able to consider it as an option for client projects.
Xamarin Needs Swift
It would be an even better choice if it had a option for using Swift. But as Swift is open source, surely it won’t be long before there is a version of Xamarin which includes it. Or would this be a direction that Microsoft would be keen to avoid?
How much worse is C# than Swift?
Could I really consider going back to Microsoft technologies after being an Apple convert for so long? Maybe, I could if it would allow be to build products for Apple and Android and Mac.
Language comparisons show Swift and C# to have many similarities, certainly more than there would be with ObjectiveC.
Cross Platform Hell
But then again, Xamarin is still another layer that adds complexity as much as it tries to increase simplicity. It has its own issues and workarounds; and with so many pros and cons, it just feels like it’s still a world of pain for not much gain.
One To Watch
But already I’m not convinced on the cross platform dream:
- Xamarin Forms are the easiest way to create a cross platform UI, but are very limited
- There is a seperate iOS Designer and Android Designer for creating user interfaces
- You really need an Android device to test on because the Android Simulator is so bad
I’ll try Xamarin Studio on personal project where it’s my own time I’m wasting.
The bit you never read at the bottom:
Thank you for developing for iOS. Even though this document is a formidable list of what not to do, please also keep in mind the much shorter list of what you must do. Above all else, join us in trying to surprise and delight users. Show them their world in innovative ways, and let them interact with it like never before. In our experience, users really respond to polish, both in functionality and user interface. Go the extra mile. Give them more than they expect. And take them places where they have never
As announced at WWDC 2015, changes to Xcode 7 mean you no longer need to sign up to the Apple Developer Program to test your apps on your device.
From the Xcode 7 Release Notes:
Now you can go beyond the simulator to test your app on an iPad, iPhone, or Apple Watch — for free. Simply enter your Apple ID into the Accounts preference pane, then attach a device to your Mac using a Lightning cable. You can use the same Apple ID you already use for iCloud, iTunes, or the App Store, or create a new one. Join the Apple Developer Program when you’re ready to distribute or submit your apps to the App Store.