Small and Beautiful: Design for Your iPhone Portfolio
This guide will focus on specific details and touch points to make an outstanding iPhone Portfolio. It takes into account that you are already aware of what makes a Portfolio look incredible.
A Brief Intro, Known by Everyone
Apple is a multinational technology company that designs, develops, and sells consumer electronics, computer software, and online services. It’s also responsible for creating the world’s first iPhone in 2007, which marked a milestone in digital design. For the first time ever, designers could work with User Interface and User Experience at completely different levels.
The Cupertino-based company isn’t just known for selling electronics to cover different user needs (computers, mobile phones and music players) at high prices, but also for creating amazing experiences that make magic feel real when you hold an iPhone in your hand. It’s not just the packaging, the apple logo stickers, the hardware nor that perfectly shaped aluminium alloy structure what makes the iPhone so unique; just like my mother used to say “it’s what’s inside that matters the most”, and that’s exactly what makes Apple products so unique: the cutting edge structure of their UX and the beauty of the UI.
In this guide, we will go through key points and tips to keep in mind when building an iPhone based Portfolio.
So, iPhone… Which One?
Up until now there are various iPhone models out there and every time a new one comes out we must get the latest information on guidelines and what are the newest features in iOS to stay informed. Which means design is constantly changing, especially if you focus on designing for Apple’s mobile devices. Staying behind everyone else is not an option. iOS is the operating system that powers many of the company’s mobile devices, including the iPhone, iPad, and iPod touch and it is one of the most popular operating systems worldwide.
Something quite common across many apps are the models and their top priority when it comes to new features, new visuals and enhanced UX. This does not necessarily mean that apps for older phones like an iPhone 4S will stop working and won’t be taken into consideration by a company, but it’s highly possible that said device will keep an outdated visual version of the app. Time is money and a big percentage of startups and companies alike focus all of their resources on the latest devices first. However, it’s important to keep in mind that due to different versions being released, our apps might miss a few features and it wouldn’t make sense to use the latest device as mockup for our interface or the oldest. For example, let’s suppose our app uses 3D touch (first seen on the iPhone 6s) to get a sneak peek of a product without leaving the current screen. It would be wrong to show this feature on an iPhone 5 or 5s where the 3D touch feature doesn’t work. And it’s not only an iOS but also a hardware issue.
On many occasions designers are required to work on an evolving product that can be used across many iOS platforms, yet hardware aside, a lot of users might not be able to see new features like Apple Pay, for example, if they’ve got an old device, which can’t update to the latest iOS software anymore or if said device doesn’t have Touch ID. An important tip here is to carefully study compatibility across different platforms and iOS versions.
Size, Format & Structure
As previously mentioned, Apple puts a lot focus into details which makes it one of the most praised companies in the world of technology. If our goal is to focus our Portfolio solely on iPhone devices, we must follow the same rule: Be detail masters and precision experts. The same principles apply if you focus on iOS devices as something more general because we’re dealing with the same company that built the hardware mentioned above; if our app will be seen not only on iPhones but also on iPod Touch and iPads then we should also master visual and structural adaptability, and compatibility.
So let’s say the mobile app you worked on was originally thought and designed for what we could now consider an older iOS version and an old iPhone as well, yet it’s visuals are appealing and you have a very good reason to showcase it on your Portfolio. The best move is to highlight your design by picking the best iPhone mockup out there and always make sure it’s the latest model. This not only puts your design on a different level by being contained in Apple’s latest iPhone but also shows that you’re a designer who is up to date with technology and what’s going on in your area of expertise.
Think of your design as if you were working on a responsive version (although we must always be prepared to resize our interfaces because not all users will use an app or visualize a website from the same device). Keep in mind the iPhone’s main elements such as the carrier, the navigation bar and a tab bar if there is any. Design tools like Sketch offers a pre-made UI template with most of iOS’s elements ready to paste over your interfaces; if one of your interfaces looks empty and happens to have a text input, don’t be afraid to include a keyboard to add a touch of realism.
Other details that will be noticeable right away on your design are the presence or lack of the elements mentioned above, so be careful whenever you decide to, for example, remove the carrier and ignore the size of a navigation bar featured in Apple’s iOS Human Interface Guidelines.
Sketch has pre-designed artboards with the correct size, and no matter how small it may look at first, remember it’s always handy to export on @2x. A few examples in sizing are:
- iPhone 6 Plus: 414x736px
- iPhone 6: 374x667px
- iPhone SE: 320x568
Rules Are Meant to Be Broken… Once You’ve Mastered Them
Insisting on carefully studying iOS guidelines doesn’t mean that every app should be designed to achieve the same look. If you focus on iOS apps, regardless if it’s iPhone or iPad, you probably will want to evade what Google does with Material Design: while pretty and time-saving due to the comprehensive Guidelines, a lot of Android apps out there tend to look the same with different color shades on the navigation bar.
However, once you know the rules of the game it’s easy to bend them or break them without causing a design disaster. Some iPhone apps decide to take out the top bar and carrier; this allows the user to focus on the design itself and its navigation, but it also removes one of the most used features present through all of Apple’s built in apps: battery life, wi-fi signal and the time. On the other hand, if your design does include this top bar don’t forget to include it on your mockup.
Sketch tip: On most occasions, the size of a mockup and your interface won’t match, which means one of them should either be increased or decreased in size. To keep all vector files smoothly and evade distortion, group all elements and then use the scale option (Edit > Scale or CMD + K) until you reach a desirable size.
Details, Details, Details
Our mission is to achieve a perfect showcase of our works on a Portfolio with no detectable errors on a visual level and stand out from other designers by keeping in mind a few things. I will list a few examples:
Make sure the battery level of your device in the mockup is on a 100% (unless of course, there is a UX feature that is related to mid or low battery on said device). The same concept could be applied to the Wi-Fi signal.
Top bars are either black or white with no exceptions.
Most UI kits will bring a fantasy name on the top bar for the carrier. Make it more realistic by including a real name like AT&T, T-Mobile or Verizon, to name a few. Remember, realism is good for a Portfolio, even for a visual concept that was never developed.
Measure all of your mockups once the interface is properly attached to evade slight “jumps” between them as you go from page 1 to page 2 on your Portfolio.
Don’t flatten your interfaces before attaching them to your mockup. This will make your design look pixelated and your mockup will stand out for looking sharp, creating visual noise. The bottom line? Always make sure your files are vectors and not flat images.
Don’t shy away from using more than one version of a device. On the iPhone’s case, we have a wide variety of colors. For example, the iPhone 5c offered a lot of bright colors from green, to red, blue and yellow, among a few others. The iPhone 6s has less colors, but it’s possible to pick between silver, space gray, gold and rose gold. Use this to your advantage to help your designs stand out. If an app is meant to look elegant and delicate, use a device with colors such as gold, rose gold or silver. If you’re looking to express dynamism and energy, using a device with the iPhone 5c’s colors will most definitely fit, or black if you’re thinking of something more modern such as an iPhone 6s.
Last but Not Least
It’s best to show your interfaces from a frontal perspective rather than using mockups that are angled to one side or the other. This is because allowing our peers and clients to see our interfaces from the same angle they’d see them on the palm of their hand adds a +1 to your favor as a designer: you’re showing them the real deal.
Keep your canvas clean and neat so that your interface will stand out while presented on a mockup device. If you prefer to have a photograph or illustration in the background, try different possibilities as not to have both elements compete between one another. We both know who’s the star of the show in your portfolio!
Storytelling is important for any designer’s portfolio. In this case, try to offer more than one visual feature on your interface that can tell a story. For example, screen “A” displays a set of customized clocks and screen “B” could show a swipe gesture to offer a glimpse of how to delete one of said clocks.
Finally, the secret to create an outstanding iPhone Portfolio is simple: pay attention to detail, take a moment to read and understand iOS Human Interface Guidelines, and be smart about breaking Apple’s rules or bending them to your favor, when it’s time to put together pieces and elements of your own.