As a fan of Framer, I’ve been looking around for an iOS 11 GUI file but have thus far come up empty handed. So I made one myself. It took quite a while, but I have to say it’s a great experience for anyone looking to learn more about a new tool or a design system.

To use this system, make sure you have Framer installed on your macOS device. Also, download the San Fransisco Pro fonts from one of Apple's design resources.

There’s plenty of ways for this system to expand over time. Dark versions of all elements, iPad sizing, landscape orientation, and app screens, just to name a few. I’d also like to include prototypes for each interactive element in the system. If you’d like the see those updates sooner than I have the time to make them, feel free to contact me and put together a pull request on GitHub.

I hope this helps you dive into Framer prototyping more quickly, and have a little bit more fun making your ideas come to life.

Last month at WWDC, Apple introduced ARKit for iOS 11. This new kit, along with native VR support in Metal 2 on macOS, was the realization of Tim Cook's hints of interest in AR. I think from here there are some guesses you can make about where they might go next. But specifically I think their next move should be to make a head mounted case for the iPhone.

Experiencing AR through a phone that you're holding at arms length can lose the illusion pretty quickly. You're looking at the screen and the world around the screen at the same time so unless you lock you arms up and hold the phone right in front of your face, it's difficult to be convinced that what you're looking at is real. The phone becomes a kind of warped prism into another place. Also, what you're looking at is 1 dimensional, so you're brain doesn't put it into the physical space the same way that it would if you could really see depth.

While any company can make VR cases for the iPhone, I think that Apple should make one to improve the overall iPhone experience. Apple could integrate the headset with iOS so that as soon as you put the phone into the case, the user is given a VR interface to explore apps with VR optimized experiences and interfaces. This would mean that you don't have to ensure the phone it in "VR mode" before placing it into a case. And as soon as you remove it from the case, you would automatically be taken back to the normal iOS interface.

Apple seems to have done a really amazing job using VIO to accurately understand the space you're in, and where the phone is in it. With a headset, the phone would be connected to a fixed position on your body which would let the software you're interacting with better understand where your face and body are in the virtual space. This would allow for things like animated characters being able to make eye contact with you or avoid running into you.

Looking at the leaks of the iPhone 8 so far, one could actually guess that Apple is already planning this. The non-Plus iPhone 8 is rumored to have two lenses which would help with spacially tracking rooms in 3D. The way that the lenses are positioned on the leaked phones also makes me think that they're optimizing for landscape viewing on the phone, an orientation that a headset would enforce.

We'll have to wait and see what Apple does. But one thing is clear - we're just at the start of mobile VR technology. This is touch screen phones in 2002. It's just a matter of increasing display quality, spacial tracking accuracy, and probably putting a phone on your face.

Designers should think about how their designs behave as the user’s screen size changes. Unfortunately, neither Photoshop nor Sketch - the most mainstream UI design tools - allow for this. Since there is a new generation of UI design tools cropping up, I thought I could lay out how a new tool would accomplish this.

In this post I refer to different parts of a UI in ways that other designers might not, so I made this little glossary:

View - All UI within the device's screen at any given point - relative to a specific "page" in an app.

Group - A section of the screen, such as a pane or a modal. Sometimes called components. I call them groups in this post since I'm speaking about layer groups.

Layer - An element of a UI's design - not synonymous with component in all cases.

View grids, group grids, and grid-based dimensions

View grids are pretty straight forward. With something like GuideGuide for Photoshop, they're easy to make too. The GuideGuide feature set should be standard in any interface design tool.

To take it a step further, the GuideGuide type of grid creation should also associate with a group. You might have a group with some repeating layers: a profile picture, a name, and background area. If you put all those layers into a group called “person list” you should have the ability to set up an internal grid. That grid would define how much space you’re giving each layer in the UI. Certain columns can be flexible and certain columns can be fixed. For instance, you might always want the profile image to be fixed but you want the name area to be resizable.

Now the groups within a view and the layers within a group are associated with guides. So if the designer ever goes in and moves the grid guides around, the layers and groups would adjust.

Percentage based dimensions, based on a group, layer, or view

Sometimes you don’t need the sophistication of a grid to arrange content. You just need to say “this input box will always be ’50% - 9px’ of the form width.” So there’s a few details there:

Layer dimensions should be able to be set as a percentage of a group's dimensions

Group dimensions should be able to be set as a percentage of a view's dimensions

Layer and group dimensions should be able to handle math

Relative positioning

What if you want to set distances between groups and layers using the same math that they use for dimensions? So the designer could say “keep this layer 18px to the right of this layer”. They could also say “keep this group 30px below this group”. If a text flow makes a group or layer taller, it doesn’t just overlap with another group or layer. It should be as easy as selecting two layers or groups and updating the relative position.

The designer could try to set impossible relative positions. The tool could provide errors or remove the oldest rule that makes the design impossible.

Min and max dimension constraints

If the designer wants to give something a lot of space the designer might want to give the group a way to scale up as the view gets larger. But at some point they would want it to stop scaling as it becomes no longer helpful - a max width. And as the screen gets smaller - a min width. Min and max widths could also be set with math or based on a grid for a group or view.

Breakpoints

So let’s zoom out a bit and think about the canvas as a whole. You could have a design that works from 300px to 700px. But once it gets to 750px things start to get weird, so you need to set a new size range and adjust sizes and positioning.

Breakpoints adjust a view's positioning and size attributes, down to the individual layer. In each breakpoint, there could be content changes in the view. But there should be far more similarities than differences since it’s the same view in an app. You may want to update existing content in one breakpoint - the copy, or a layer style. If you did, that update would propagate across all breakpoints.

Currently, there’s three different screen sizes for the iPad. The 9.7” 264 ppi display on iPad Air and iPad Air 2, the 7.9” 326 ppi display on iPad mini 2 and 4, and the 12.9” 264 ppi display on iPad Pro. iPad mini was introduced just two years after the introduction of the original iPad, iPad Pro was introduced just three years after that.

If I had to take a guess at what the next iPad would look like in two or three years from now, I think it would be something that’s pretty obvious from the screen sizes listed above.

The iPad mini was a scaling of the iPad’s ppi so that it was the same as the iPhone. I think the next iPad will be the same scaling again from 264 ppi to 326 ppi, but from iPad Pro rather than from iPad.

So that’s a 10.47” 326 ppi display at 2732px by 2048px. But Apple wouldn’t just make a new iPad with this screen size because it solves a fun math problem. I think the screen size and pixel density actually make a lot of sense. For the person that wants to replace their computer with an iPad, they aren’t doing it so that they can have a better notebook computer. They’re doing it so they can use a great tablet. iPad Pro is too unwieldy for most people to use as a regular tablet. At the same time, the iPad Air doesn’t feel as powerful as the Pro because you simply can’t fill the screen with content like it’s a notebook computer.

I think the device would be large enough to warrant the technology advances that were brought to iPad Pro - the Smart Connector, Apple Pencil, etc. It would also bring the inherent ergonomic advantages - more roomy canvas for drawing, comfortable on-screen keyboard, etc. This iPad could optionally use Display Zoom to render the display at a 264 ppi equivalent. That would mean that the device wouldn't necessarily ignore people who like the interface sizing of the less pixel dense iPads. For the person who wants a powerful tablet, but doesn't want to break their wrists or the bank, this could be a great product. In many ways it would be an iPad Pro mini. But I think Apple should just call it iPad.

Update

Apple announced a 10.5" iPad Pro on June 5, 2017. I was off by .03", 62 ppi, and the name of the device, which ended up going to their low-end 9.7" iPad.

Since the 'Hey Siri' event, some Mac fans have gotten upset over the lack of innovation that that Mac has had. I see things in a different way. I think the Mac market is going to remain strong - especially for work. Apple has proven that it doesn't mind spreading it's attention away from the iPhone.

To me, the Mac belonging to the same company that's making the iPhone is actually a strength for the Mac. Apps like Reminders, Maps, FaceTime, and Notes might not have been a part of a Mac. Not without the work that Apple did on iOS. Though - to be clear - expecting that Apple would spend as much time on the Mac as the iPhone defies logic. Or at least ignores the dollar signs.

So, with optimism, I lay out my thoughts on what Apple will do with the Mac in 2016. For starters, it's out with the old. The non-retina 27-inch iMac, and non-retina 13-inch MacBook Pro are out.

OS X 10.12

The main theme of 10.12 is centralization and consistency. Continuity 2.0.

iCloud Account Management

Connect accounts like Dropbox or Foursquare with iCloud. You can have all your services set up across all your devices - no thinking required. Just sign in with your Apple ID and you're set. This is an extension of iCloud Keychain. But, it's actually signing you into apps and accounts which are linked to our device's OS or the apps within it.

Siri

This also means that you can expect your experiences to travel with you to the Mac, now including Siri. Integrated with Spotlight, Siri automatically gives you suggestions before you even start typing. Spotlight is also now a Launchpad page.

Universal Apps and Centralized App Store

In the effort of centralization, the App Store is now the central App Store for both iOS and the Mac. This allows users to instantly see which devices an app supports and it allows developers to be rewarded when they make apps for a user's entire ecosystem of devices. Users would be able to remotely install apps on their iOS device from their Mac (and vice versa). Part of this could also happen with App Thinning, a new technology for iOS that allows users to only download the parts of their app that are relevant to the device they want to use it on.

iCloud-based Notification Settings

If you're using the same iCloud account, notification settings could be mirrored across devices. Including Mac. Notifications without a Mac app would give the user options to open it on their iOS device. Or the app’s web app if it had one.

And here's a handful of other features and optimizations:

Low Power Mode

Touch ID support for sign in, system authentication, purchasing, and accessing secure apps

Native and third-party cellular support for setup, data usage tracking, and signal strength

MacBook

MacBook is a pretty great device, and I don't think it makes sense to revamp the product in it's second year. The coolest update is another new trackpad, this time with Touch ID. Also, there's a new option to have a built in cellular antenna which uses an Apple SIM just like the iPad.

On the technology side, the USB-C port gets an update to support Thunderbolt 3 as well. Typical processor and graphics updates along with a Bluetooth update to 4.2.

MacBook Air

MacBook Air won't get a revamp either, but that's because this device is on it's way out the door, getting replaced with the (even airier than the Air) MacBook. So just technology updates. All USB 3 and Thunderbolt 2 ports are removed, being replaced by 3 USB-C + Thunderbolt 3 ports. The processors, graphics, and Bluetooth antenna also get an update.

MacBook Pro

I think it would actually make sense for MacBook Pro's design to get a bit of a refresh. The current design is still based on the unibody design that was established 8 years ago. Next year, the notebook will have had the exact same design for 4 years. So making it a bit thinner and lighter would be great, and there's a few new things that the MacBook is doing that could easily be brought to the MacBook Pro. The thinner keyboard, the tapered battery, new aluminium color options, and a more energy-efficient Retina display with larger pixel apertures. Like the MacBook, the Pro would also get a Touch ID trackpad.

And of course the regular technology updates. All USB 3 and Thunderbolt 2 ports would be removed. Three USB-C + Thunderbolt 3 ports would take their place. Two on the left side and one on the right. The processor, graphics, and Bluetooth antenna would also be updated. The graphics and USB-C + Thunderbolt 3 port mean that MacBook Pro now supports an external 5K display.

iMac

With the non-retina 27" iMac out the window comes the introduction of the 21.5-inch iMac with Retina display. But other than that, these computers are fine, only needing new technology. Getting any Mac with a HDD should no longer be possible, so a Fusion drive or SSD are the only options available. Also new processors, graphics, and Bluetooth connection upgraded to 4.2.

Mac Pro

Mac Pro has a long road ahead of it. At this stop on the road, it's just getting technology updates. All USB 3 and Thunderbolt 2 ports are removed, being replaced with 8 USB-C + Thunderbolt 3 ports. The processors, graphics, and Bluetooth antenna should also be updated.

Mac Mini

Much like the Mac Pro, the Mini's design has a long life ahead of it, so there isn't much of a need to redesign it at this point. It'll get the same 'no HDDs allowed' rule as the iMac. So just SSDs and Fusion Drives. The USB 3 and Thunderbolt 2 ports are removed, being replaced by 5 USD-C + Thunderbolt 3 ports. With a new processor, graphics card, and Bluetooth antenna, it should also support an external retina 5K display.

Apple Retina 5K Display

Retina 5K resolution

Built-in FaceTime HD camera with microphone

Built-in 2.1 speaker system

Detachable MagSafe 2 cable

Detachable USB C + Thunderbolt 3 cable

USB-C + Thunderbolt 3 input (x4)

HDMI 2.0 input

3.5-mm stereo headphone minijack

Gigabit Ethernet

Similar industrial design to the iMac

Magic Trackpad + Magic Mouse

These interfaces get some nice updates including an integration of Touch ID into the surface of the trackpad and the top of the mouse. The batteries should be integrated, allowing for much longer battery life. Just like the Siri Remote, charging would happen via a Lightening cable. Also to increase both battery life and connection strength, the devices would be updated to Bluetooth 4.2.

Magic Controller

In El Capitan, Apple added some surprising new frameworks to help developers make gaming on the Mac a little better. So while gaming isn't a core strength of Apple's, I don't think they dislike it by any means. There has been documentation for developers to support game controllers on iOS and OS X for a little while now, so I think it only makes sense for Apple to put it's hat in the ring. The controller would support an accelerometer and gyroscope. It would have an integrated battery, being charged via a lightening cable. With Bluetooth 4.2, battery life would be great as well.

Currently, there are a few different ways to buy software, each with their own drawbacks.

The Box Model

There's what I would call the "Box Model" where you buy software at a somewhat high price. In the Box Model, you get free access to updates for that version of the software. Eventually, the developer will drop support of the software meaning that you have to buy the new version of the software and repeat that process again to keep getting updates. But even if the developer drops support for the software, you still get to keep it on your device without any problem. Sometimes you can get the next version of the software at a discount if you own the old version, but that isn't really guaranteed.

This model is great if you buy the software the day it's released, but the closer you get to buying the software to the time of the software's next iteration release, the lower the value. If you buy the software the day before the next version comes out, you're probably going to be upset because you didn't get to enjoy that year of free updates like the person who bought it a year ago did.

The Subscription Model

The Subscription Model solves some of the problems that go along with the Box Model, but it introduces new ones. With the subscription model, you buy access to software and updates, usually on a monthly basis. The price will be lower than the Box Model at first, but you'll also lose access to the software if you stop paying the subscription.

My Proposal: The Access to Updates Model

So now my proposal. I think it would make sense if you could buy software along with a pass to get updates over a certain time period. So you could buy "Microsoft Word + 24 Months of Updates." At the end of the 24 months, you would no longer receive updates, but you would also be able to keep the software. You get the best of both worlds. There's no worry about buying the software at the right time, and no worry about losing access to the software.

In this model, companies could also add value for buying longer periods of access. 1 year would be $100, 2 years would be $150, etc. And you would always be able to buy more time to access updates whenever you wanted. If you thought you would always want updates, you could just say that you want to set up auto-payments on a yearly basis (companies would probably give you a discount if you chose this option).

Currently, there are three iPad models: iPad mini, iPad 2, and iPad with Retina display. Their prices start at $330, $400, and $500 respectively. While iPad mini and iPad with Retina display are relatively new products (they're both only a year old), iPad 2 has been sold for the last three years. This is something that Apple has done for a while with their iPhone line. But, with iPhone 5c, they've shown that low-end products don't necessarily have to be old products.

Meanwhile, Apple is losing some mindshare to Google's Nexus 7, a perfectly good tablet that starts at just $230. That tablet's display is - while a bit smaller - well into retina territory (an attribute that iPad mini doesn't yet possess).

Apple has shown that retina screens aren't necessary to sell tablets with the sale of the non-retina iPad mini and iPad 2. But they are great if you're willing to pay a little more. That's why I don't think that Apple should ditch the non-retina iPad. They just need to keep those models fresh like they did with iPhone 5c. Here's an iPad lineup that reflects some of these ideas:

$500 - iPad S - A7X - 32GB, 64GB, 128GB

$400 - iPad C - A7 - 32GB, 64GB, 128GB

$350 - iPad Mini S - A6X - 16GB, 32GB, 64GB

$250 - iPad Mini C - A6 - 16GB, 32GB, 64GB

The "S" iPad models would have retina displays and aluminium backs. The "C" models would have regular density displays and colored plastic backs just like iPhone 5c. "S" models could also include some new features like an improved camera and Touch ID while the "C" models would lack those features.

The price of the cellular antenna option is also too expensive; it currently costs $130. On the Nexus 7 that upgrade only costs $80. I think asking $100 for an LTE antenna is a bit more reasonable. If they could match Google's $80 that would be great, but I'm not holding my breathe. Storage upgrades would continue to cost $100 per tier.

When the iPad was first released, no one could compete with Apple on price. Companies like Motorola and Samsung struggled to get their tablets below $700. But times have changed and the competition is making great products at low prices. Apple has dipped its toes into the low end market by keeping the iPad 2 on the shelf and introducing the iPad mini. But it needs to take a real stake in that part of the market if it wants to keep its tablet market share high.

And it definitely would. The iPad continues to have the best tablet apps. If Apple makes its iPad even more appealing to a customer's wallet, that customer would have no reason to look at the competition.

Prelude to Google

In August of last year I woke up and stretched my arms. Before I knew it, water was flowing over my naked iPhone 4 (my case was across the room in my backpack). The rice bowl didn’t come soon enough and my iPhone began its long spiral towards brickage. I was waiting on the iPhone 5 to be announced so I decided I would use my upgrade to get a 3GS and I would use my dad’s upgrade to get the 5. That plan failed when my family decided we didn’t want contracts. So for the last 9 months, I’ve been using that seemingly temporary 3GS.

Which has been hell. It was this experience that made me want to get a top notch device. But I also didn’t want to spend all of my money (college students aren’t usually drowning in cash). So unless I was willing to spend $650 plus tax, the Nexus 4 was my answer. Plus, I've only heard good things about Android as of late, so I thought it was worth a shot.

Design

While the Nexus feels nice in the hand, it leaves a lot to be desired. It’s clearly made with less precision than the last few generations of iPhone. A metallic band frames the glass front of the phone. That glass curves on the sides (something that is especially nice when flipping between horizontal views). The sides of the phone are covered with a soft rubbery material. The back is made of glass with a reflective dot pattern which is relatively unobnoxious. I would have preferred the rubbery material covered the entire back, though that probably would have made it thicker. Speaking of mass, the device was surprisingly thin and light; even though it’s big phone, I hardly feel it in my pocket.

The headphone jack is on the top (wish it was on the bottom), the speaker is on the back (wish that was on the front) and the power button is on the side (which is nice).

There are only software buttons on the front of the device, which I actually got used to really quickly.

Performance

Coming from the 3GS, the camera is perfectly fine. The front facing camera also gets the job done when it comes to mobile video conferencing or sending Snaps.

Navigating around the device is really quick; its only had a handful of hiccups which were probably software related. I recently installed Minecraft which literally hasn’t once skipped a beat.

Battery life was disappointing at first, but I’ve managed to get into a habit of charging it whenever possible. This practice keeps it above 60% throughout the day.

Call quality is great when the reception is great. With the lack of LTE, that kind of reception might be harder to come by for some people.

OS

The lock screen is pretty bad. At least it’s bad if you try to flip between widgets. In order to do that you have to expand them. But once you expand them, you have to contract them if you want to unlock the device. Needless to say, it would have made more sense to keep the widgets permanently contracted so that you could switch between them from the get go, and also unlock the device at any moment.

I installed Apex Launcher a few days after unboxing the device and I haven’t had a reason to go back. So much for stock Android. Basically, I got rid of the app drawer button and made it so that if you tap the home button when you’re on the home screen, you open the app drawer. I also removed the Google search bar from the top of the home screen and replaced it with a Google Now widget, which I though made infinitely more sense. I’m not sure why there are more home screens than you have icons for.

But there are a lot of things that Android does well. While icons won’t display a badge to show an unread notification, there are little notification icons that appear on the left side of the status bar. Pulling down on the status bar shows you controls if you have something like a podcast playing. You can also delete emails directly from Android’s notification center. If I receive a Facebook message on my phone but instead reply to it on my computer, the notification on my phone disappears instantly. This is far better than the notification experience on iOS.

This was a pattern throughout Android. Google often takes risks in order to give the user more power, whereas Apple simplifies their apps in order to keep their users from getting confused. Google’s risk-taking was often for the best and I felt like I was able to do more things more efficiently than on iOS. But I sometimes found that Google’s strategy was done too fast and loose, leaving the user in a confused position.

Stock Apps

The core apps that come installed with Jelly Bean are far from polished. They should be super over-developed if Google really wants to show Android app developers what their platform is capable of. I could go through a list of all the small things that bothered me, but I want to keep the review at least somewhat high-level.

UIs were generally unclear, too often leaving the user tapping around to figure out where a menu might lead or what an icon meant. Simple apps like People would crash, and phantom buttons would disappear when tapped. Where on iOS, buttons exist within disciplining dimensions, Android’s touch targets didn’t seem to have any kind of limits. The Calculator app for example has buttons that are laughably huge (which is disappointing when you realize that the advanced panel has to be hidden on a separate screen). The Messaging app’s bottom bar could easily be done away with because its icons could fit on the top bar. Now I’m just going through all my nit-picks.

Once again, it isn’t all bad. The Camera is an example of an app done right. By holding down on the camera view an options circle pops up. Scrolling your finger around the circle selects an option.

Generally, I think Apple’s apps have been given more thought. I felt like Google didn’t give their stock apps any thought at all a few times too many.

Google Now

Google Now is another example of something that Google got right. For those who don’t know, Google Now is the search giant’s version of Siri. But it’s very much its own version. Google Now shows the user information automatically rather than waiting on the user to ask it questions. For some, this might feel intrusive, for me it was delightful.

At one point I was talking to my family about going to see a movie. When I opened Google Now, the “movies now playing” card was front and center. Pretty freaky stuff.

You have to be connected to the internet for Now’s functionality to work (this is also the case for Apple’s intelligent assistant). Android does allow for 3rd party apps to use offline voice recognition. What would be great is if things like launching an app, audio playback, or dialing could be done using this same tech, but I guess we’ll have to wait for that. In any case, Google has clearly beat Apple at their own game. I’m really looking forward to what Google Now will be able to do for me in the future.

Final Thoughts

After using Android for a few weeks, I’ve decided that there are enough things about the platform that I prefer to iOS for it to be worth the stay. I like the large screen of the Nexus 4. I like that you can only show certain apps on the homescreen, hiding irregular apps in the app drawer. I like notifications and the quick-settings pull down menu. These are all great advances over the competition.

But, on the other hand, I would completely understand someone wanting to side with Apple. iOS is simply a more polished platform. From the icons to the code, it’s simply more elegant.

Importantly, though, for its cost the Nexus 4 is unbeatable. The 3-year-old iPhone 4 costs $100 more with half the storage capacity. And that’s the cheapest new iPhone you can buy off contract.

As new technologies are made, they seem to leave old technologies behind, stagnant and in the distance. Take for example the contact information that is used for web services like iCloud or Gmail. The contacts list and its data are manually created by users. Eventually, a long, precious, list of people is made. But every time one of those people gets a new phone number, or moves to a new apartment, or gets a new job with a new email address, you have to update that information manually. Except most people don't update that information, or there are several contact entries for the same person, or the contact information simply isn't recorded. The user scratches their head and pains to remember their address every time they need to send them an email.

But then you look at something like Facebook. With Facebook, the user doesn't have to know anything besides the name of the person they're trying to contact. And if you're wondering what someone's workplace is, look no further than their constantly up-to-date profile page.

So why isn't your collection of contacts on Gmail, iCloud, or Outlook that intelligent? Why is it that contact cards aren't updated automatically based on what you're contacts chose to share? I think they should, and here's how.

When you're creating a new contact, the first entry would be a username. Once you enter the person's username, the contact card would automatically fill with the information that that person allows to be seen by the public. A button would appear that says "request contact information." Once tapped, the person who you're trying to add would get a prompt saying that you want access to their info (just like a friend request). They approve, and you're phone downloads their (constantly up to date) contact information.

Unfortunately, this technology would inevitably be proprietary. But because most people have accounts on more than one service, that probably wouldn't be a huge impediment.

There is clearly a hybrid of this system today; iOS allows for its users to sync their Facebook and Twitter accounts with their contact list. But you have to update the content manually and the experience is far from ideal.

If companies like Apple and Google would take a few notes from their social networking buddies, customers would probably be a lot happier.