It’s 2018 out there and we are still struggling with interaction problems between designers and developers. While every team has different organizational structures when it comes to development and design, the problems remain the same. So product teams still have to figure out how to improve design-development processes and become more productive in delivering a great product for their users.
For a long time, I was on the one side of the table. I was responsible for Android, iOS and macOS development. But in 2015 things dramatically changed: I started learning design and later on took all design tasks in my company – Flawless App.
Our mission with Flawless App became to help iOS developers and designers to deliver polished design implementation of their apps. Our tool compares design with actual application done by developer right inside development environment. So the developer can compare design with the final app in a real-time, spot all visual issues and fix them on the fly. It will increase visual quality, save time and help all the team moves faster.
I’d love to share how Flawless App could help you deliver polished iOS apps, which look exactly as expected the design on every device. As well as, improve your team’s communication and save a lot of headaches on the way.
Despite the fact that Flawless App is designed specifically for iOS developers, it will save time not only for developers but for designers and QAs too. So let me walk you through the most important Flawless App features useful for both designers and developers.
Design and Implementation Comparison
The core feature of Flawless App is the ability to compare the design with implementation right inside iOS simulator. Simply launch an iOS simulator (which comes with Xcode, IDE for iOS/macOS development). Then select a design as an image file (jpeg, png, tiff, gif etc.) or even choose a Sketch file. Our tool will make its magic and put the design on top of iOS simulator seamlessly. So the developer can explore it and find all visuals bugs in a moment.
Benefits for iOS developers
- You can see how the application should look while building it right inside tool you’re using. No need to open “that another window” and waste precious screen space or time. The initial design is just under your fingers.
- It’s extremely easy to integrate into your current processes. No additional setup, no linking with a third-party library or any configuration needed. Just download an app and start using it right away.
Benefits for UI designers
- Delegate design review process to developer’s shoulders.
- Feel confident that the developer would notice any existing differences between design and implementation while building the UI without numerous reviews. Your lovely design will looks as it should be.
Animated Screenshot Capture
Have you ever conducted a design review? Yeah, it’s those meetings where developers and designers sitting together to find out “how much this fancy button is off”? If yes, you’re reading the right article.
With Flawless App, you can capture a GIF of design and implementation comparison right from iOS simulator in an instance. Because it’s a GIF file it can be shared to whatever service your team uses: Slack, Asana task or Jira ticket.
To enable this feature the developer just needs to select a design file, choose appropriate comparison mode (Split or Overlay) and press a capture button. This will create a GIF file with comparison right on the Desktop.
Benefits for iOS developers
- You can attach animated screenshot GIF to your pull-request in version control system that you’re using. This way your team could review not only your code but a design implementation at the same time and in the same place.
- Capture animated screenshots and share them with designer or QA to prove that your implementation is polished enough and it’s done in accordance to the initial design.
Benefits for UI designers
- Review the animated screenshots instead of reviewing the whole application. So design reviews would take much less time.
- Attach animated screenshot GIF right to a task in Trello/JIRA/Asana/etc. To showcase that UI task is complete. So anyone else in the team could review the result as well.
Dynamic Design Generation
iOS platform before was more or less conservative in terms of different devices’ screen sizes. But not anymore. Right now iOS application should support at least 10 different screen sizes. How would you ever handle the design for all those screens? Maybe we need to design a separate image for all screen sizes? No! There should be a better way.
Finally, starting from Sketch version 44 Bohemian Coding has introduced resizing constraints, which is a powerful built-in tool that lets designers create dynamically resized elements inside Sketch. By using these rules, designers could explore how the layout would behave on different screens simply by changing the screen size in graphical editor. This is crucial for building truly responsible layouts.
Unfortunately, the developers don’t have such privilege to see how the design would behave on different screen sizes while they implement it. In most cases, the developer has to guess the resizing rules based on common sense. And if there are any difficulties — the designer is the one who should help.
It doesn’t even matter how exactly designer shares the design with the developer. In current tools, the design becomes a static image at the end. So the developer can’t just resize it and see what happen with elements on different screens. With Flawless App, this is no longer the case. With dynamic design generation, the developer could see how the design would look on any possible screen size.
Designers are required to specify resizing constraints for appropriate layers in selected artboard and turn on “Adjust content on resize” option in Sketch. Then developers would select this sketch file in Flawless App. Our tool will automatically figure out what iOS simulator (iPhone 5, iPhone X, iPad, etc.) is currently active and generate a correct version of design for specific screen size. Isn’t it amazing?! Moreover, thanks to Xcode 9 the developer could also launch multiple iOS simulators at the same time and explore all possible design variations on different screen sizes.
Benefits for iOS developers
- No more guessing about how the design should be resized on different screen sizes. Just take a look at it in the real-time and implement appropriate constraints.
- Flawless App supports multiple iOS simulators so you can launch a single design on multiple devices at once.
- Delegate setting up resizing constraints for design completely on designer’s shoulders.
Benefits for UI designers
- You can design a screen for only a single screen size and specify the overall resizing behavior for other screens just once in Sketch.
- If you’re using version control system for designs – you can invite a developer into that system as well. So the developer would always have the latest Sketch source file with correct resizing constraints specified. This way the transfer Sketch file would be more seamless.
Supercharge your workflow even more
Zeplin files support
If in your team designers use Zeplin to transfer designs to developers, Flawless App is a must-have addition to your existing workflow. I hope you’ll be glad to know that Flawless App supports Zeplin design files. The developer can simply drag and drop one or multiple design images from Zeplin macOS app right to Flawless App icon in menu bar.
Quick hotkeys support
The developer can interact with designs and compare them with implementation inside iOS simulator without even touching a mouse:
- ⌃⌥→ hotkey for switching between selected design images;
- ⌘⇧E hotkey for enable/disable comparison;
- ⌘⇧R hotkey for switching between comparison modes.
Work with long design screens
Sometimes you have screens like “news feed” with a bunch of items. Designers love to generate a long screen which is much taller than the iOS simulator screen. Flawless App supports this case as well. The developers can select a long screen as any other regular design and our tool will allow scrolling through it in the iOS simulator. Ah, and you can easily interact with your app on the way!
Compare with GIF designs
Motion and animation are playing a crucial role in the user interface. Even subtle motion in UI can dramatically change how the user interacts with an application. That’s why we have introduced an ability to check implementation not just with static images, but with GIF files as well. Flawless App will figure out, that the design is in GIF format and play it appropriately with the ability to pause/play an animation.
Conclusion
Even though Flawless App was designed for iOS developers, I hope now you see that using it would benefit the whole product team. Together with our users, we’re pushing product boundaries forward. We believe the visual quality is extremely important if you’re building a matured product and care about your users. Consistent design implementation shouldn’t be painful and time-consuming.
Join us on the way of changing design-development interaction. Please, share your thoughts on improving collaboration and visual quality in the teams. And as a maker, I’d really love to hear your feedback on Flawless App and how well it could fit your design process.
This is a guest post by Ahmed Sulaiman, Founder and CEO at Flawless App. You can reach Ahmed via Twitter.
