iOS Human Portfolio Design Guidelines

I’ve previously mentioned the basics of what makes an outstanding UI Portfolio and how to create an incredible iPhone Portfolio. Coincidentally, the latter is closely related to this guide and I highly recommend checking it out. Having choice is a good thing!

iOS: A Vast World of Possibilities

Apple’s Operating System didn’t just stay the way it was when it was first introduced in 2007 for the first iPhone, it evolved. The evolution spread to different products, some of them having ancestors like the iPod and others were completely new, like the iPad. Now, the beauty of iOS is that while it’s the same system for all devices (except the Apple Watch and Apple TV, which run their own OS) each device exploits it in a different way and that gives designers many possibilities to create incredible user experiences and build amazing visual interfaces.

To create a Portfolio based on iOS devices, it is advisable to take a look at the projects at hand. Try to show variety, meaning you can present iOS based projects on iPhone, iPod Touch, iPad, iPad Pro and iPad Mini mockups.

It’s important to keep in mind variety, no matter how limiting Apple might be with its OS for both designers and developers. I will go in-depth these topics and guide you through the necessary steps to have the best iOS Portfolio that anyone has ever seen!

Lay your Cards on the Table

As a designer, you focus on working for iOS – or at least the majority of your projects are iOS based, and that’s why you want to build this kind of portfolio. You specialize in iOS in its UX and UI, you understand how it works, you love how it looks and you want to show everyone you’re the best designer out there in this area of expertise.

First Things First:

Variety

I briefly mentioned variety a few paragraphs above and the reason for this is that the more diversity you show, the more you’re likely to be considered by clients and peers for an upcoming project. To have an iOS based Portfolio means you are adaptable to work for any device that runs this system. It’s not enough to just write it or say it somewhere, you have to show it as well.

I once spoke about the amount of projects and pages per project to show on a Portfolio and what kind of visual precautions should be taken to offer the best experience to whoever happens to see it. One of the things that I remember writing was to experiment with how to present your project. Did you design an app for iPad and iPhone? Does your app change slightly from how it looks on an iPad Mini in comparison to an iPad Pro? Great! Don’t be afraid to show them together side by side to show differences. After all, no matter how responsive it might look, there are contrasts between one device and the other. leads me to the next keypoint:

Differences

Elements vary from one device to another and so does accessibility. For instance, let’s take the example of Touch ID, first introduced in 2013 together with the iPhone 5s, which opened the door to many different kinds of possibilities first and foremost from a UX perspective. Users were granted easy access and more privacy for their devices, but that was not the end of it: Touch ID evolved in 2014 to offer users so much more; therefore Apple Pay was born. Where am I going at with all of this? Designers have more possibilities to explore UX and even UI, from allowing a user to purchase a product to authorize a flight’s check in by pressing their thumb on the home button and allowing Touch ID to do it’s job. However, while Touch ID and Apple Pay are present on iOS they have hardware limitations, meaning that if you happened to design an interface for iOS, which has Apple Pay or Touch ID as it’s main features for an app. For example, it could not be present in earlier releases such as the iPhone 5, iPhone 4s or iPod Touch.

iOS is present in many Apple devices but not all of them can support the same features.

To have a handy list, here are the devices that run iOS from the first generation onwards:

• iPhone
• iPod Touch
• iPad
• iPad Mini
• iPad Pro

Elements

Another example are the elements present in different devices despite sharing the same Operating System. iPhones have particular elements that are used for specific tasks to navigate across different screens, and not all of them are the same for an iPad. Essentially, iOS presents three types of elements:

• Bars. Tell people where they are in your app, provide navigation, and may contain buttons or other elements for initiating actions and communicating information.
• Views. Contain the primary content people see in your app, such as text, graphics, animations, and interactive elements. Views can enable behaviors such as scrolling, insertion, deletion, and arrangement.
• Controls. Initiate actions and convey information. Buttons, switches, text fields, and progress indicators are examples of controls.

To point out a difference between an iPhone and an iPad, I can mention the popovers. From the iOS Developer Library, we get the following definition: “Popovers are a visual layer that floats above your app’s window. Popovers provide a lightweight way to present or gather information from the user and are commonly used in the following situations:

• To display information about an object on the screen.
• To manage frequently accessed tools or configuration options.
• To present a list of actions to perform on objects inside one of your views.
• To present one pane from a split view controller when the device is in a portrait orientation.”

And this is an element we only get to use and see on an iPad; therefore, be careful and mindful of what kind of elements you are supposed to be using when designing across different devices that share the same OS, because not all of them behave in the same way. Don’t forget to show these differences when working on the projects you will be presenting within your iOS based Portfolio.

It’s always handy to have the Human Interface Guidelines from Apple for reference and once you’ve carefully studied and understood them, bend the rules in your favor when creating new user and visual experiences.

So What’s the Key to Creating the Best iOS Portfolio out There?

The trick is simpler than you think: study the system, the guidelines, do some reading and observing, understand how the OS works and behaves by navigating multiple screens and using different elements. And once you put all of that knowledge into your designs, I assure you the projects you show will stand out on their own by being not only clean, organized and worthy of praise, but also differentiable from average Portfolios.

Follow the key points mentioned above and don’t forget to check these other two guides to have a broader understanding of Portfolio Building and how iPhone Portfolios work!

Originally from Toptal