Β 
Featured

Flawless App

Make your iOS apps look exactly like the expected design

DiscussionYou need to become a Contributor to join the discussion - Find out how.
Ahmed
Maker
@geek_1001 Β· iOS/macOS Engineer. Founder of Flawless
Hello, fellows! πŸ‘‹ πŸŽ‰ Together with my co-founder Lisa we're happy to announce our public launch πŸŽ‰ Flawless App is macOS development tool for an instant visual quality check of mobile apps. The tool spot visual bugs before they cost you money. Flawless App helps easily see visual differences between expected design and the final implementation of a mobile app. The tool compares design mockups with implementation in a real-time, right on the iOS simulator! It has overlay & split comparison modes and support long designs comparison (like news feed screens, for example). It works out of the box like a charm πŸ’« so you don't need to import any third-party libraries into your Xcode project. Easy and fast! We are truly obsessed with the visual quality of mobile apps. We want every mobile product to be polished enough to provide the perfect experience for the end users. Because that's really the only reason why mobile applications exist. This tool is made by iOS developers for iOS developers. πŸ‘¨β€πŸ’»πŸ‘©β€πŸ’» And we hope it will bring huge value to your daily workflow. Please, check it out! 😊
Patrick L. Adams@patrickleeadams Β· Creator of @sparq_app and @LionBrowser
@geek_1001 Showed this to our designer and he made a good point. What is the value of a tool like this when apps like Sympli and Zeplin give you the exact dimensions, coordinates, and styles of everything?
Lisa Dziuba
Maker
@lisadziuba Β· Swift Learner & FlawlessApp.io Founder
@patrickleeadams @geek_1001 thanks for showing it to your designer! We love an honest feedback, like yours!
Ahmed
Maker
@geek_1001 Β· iOS/macOS Engineer. Founder of Flawless
@patrickleeadams Hello, Patrick! Thanks for showing it to your designer! And I'm very glad you've asked this question 😊 Let me start with questions from my side: if we have tools like Zeplin or Sympli why do we still have UI snapshot testing in iOS? πŸ™‚ From the overall vision perspective: 1. We are aimed to solve the visual quality problem (in the long-run strategy bunch of others quality factors in digital products). 2. Zeplin and Sympli are collaboration tools for designers and developer – they are doing everything for everyone. We're focused on a single problem – visual quality control. Because of this focus, we have much more opportunity to actually solve the problem. 3. We're moving step by step so there are more to come from our side regarding visual quality control (automation, issues highlight and so on) From the product perspective: 1. We're integrated inside iOS simulator – this gives us more flexibility in feature specifically for iOS developers. 2. Since we're in the simulator you don't have to change your context every time to check your implementation. (you can just use hotkeys instead of opening third-party window, place this comparison in the right spot and so on) And at the end – we are humans after all. Even if we have all the data, guidelines, specifications and so on – the end product could be different from your expectation. The fact that you have the guidelines doesn't guarantee the result. And that's the problem with tools like Zeplin or Sympli, they cars about the process, to provide all the guidelines, but they don't care about the actual result of this guidelines. On the other hand, we care about the end result and do not provide any guidelines for the process. I'd say we (Flawless App and collaboration tools for designers and developers) complement each other. So there will be some integrations for sure 😊 Does it make sense?
Patrick L. Adams@patrickleeadams Β· Creator of @sparq_app and @LionBrowser
@geek_1001 Sympli is a part of our workflow - it provides styles and assets so if I am using it for that, then I may as well use it for the dimensions/coordinates it provides as well. Most developers have two screens, so context switching between Sympli and the Simulator is not an issue (for me at least). When I implement UI I check the dimensions in Sympli against the dimensions in Interface Builder. For something like Flawless you have to run the project each time you make a change. So for someone who wants to just put a UIView in the correct location and be done with it, they can't, they have to keep moving it and running the simulator. For larger projects this would be a hassle. I also believe that there is more precision when comparing actual dimension values than there is with overlaying. With that being said I do think Flawless is good for double-checking things at the end but I don't think it makes sense to use it from the beginning. All-in-all I am looking forward to see what you guys do in future updates.
Ahmed
Maker
@geek_1001 Β· iOS/macOS Engineer. Founder of Flawless
@patrickleeadams Got your point. Totally make sense. I think because we're moving step by step since we're still a small team, we can't do everything that's on our mind at the current moment in time. We decided to move with short but extremely fast product iterations to get relevant feedback as fast as possible and improve the product based on that. So thank you so much for your feedback! 😊
Ivan Cucer@ivancucer Β· UI/UX, Mobile, Web, Motion Designer
@patrickleeadams @geek_1001 roughly speaking Flawless is a handy app just to make sure that your app is pixel perfect πŸ™Œ
Justin Mitchell@itsthisjustin Β· Designing Products at Sofriendly.com
@geek_1001 @patrickleeadams As an obsessive user of Zeplin, this is different. I'm super excited to use it. Can't tell you how often my team sends me a build that looks nothing like what I designed.
Patrick L. Adams@patrickleeadams Β· Creator of @sparq_app and @LionBrowser
@itsthisjustin they must not know how to use Zeplin then.
Lisa Dziuba
Maker
@lisadziuba Β· Swift Learner & FlawlessApp.io Founder
@itsthisjustin @geek_1001 Justin, thank you for your insights πŸ‘Œ. We have made Flawless App for fixing these situations with incorrect design implementation! Please, suggest your development team try Flawless App (we have the free trial). Also, let us know what additional features would you like to see? What integration would you like to add? I would be awesome to know the feedback from the designer's side! Thank you again!
Lisa Dziuba
Maker
@lisadziuba Β· Swift Learner & FlawlessApp.io Founder
@ivancucer @geek_1001 yeah! We can make the world full of pixel-perfect iOS apps πŸ˜‡
Justin Mitchell@itsthisjustin Β· Designing Products at Sofriendly.com
@patrickleeadams Zeplin doesn't account for (or at least help with) various device sizes and formats. There's also the case of devs "eyeballing it" when it comes to sizes of buttons and other assets across multiple devices.
Lisa Dziuba
Maker
@lisadziuba Β· Swift Learner & FlawlessApp.io Founder
@itsthisjustin Good points! Thanks! And do you usually provide designs for different device formats? Or do you design for one main device and explain devs how to adjust it?
Patrick L. Adams@patrickleeadams Β· Creator of @sparq_app and @LionBrowser
@itsthisjustin If I am not mistaken - to be able to compare across different device sizes with Flawless the designer would have to design each screen for the different device sizes and export each of those screens as an image. From my experience designers usually design for one device size and entrust the developers to translate that across all sizes. I wouldn't even call it entrusting, if your developers know how to use auto-layout correctly the dimensions and constraints adjust accordingly (like magic). Any places it doesn't usually result in a conversation between the dev and designer to figure out a solution.
Ahmed
Maker
@geek_1001 Β· iOS/macOS Engineer. Founder of Flawless
@patrickleeadams @itsthisjustin No, you don't have to use different images for different devices in order to make comparison works (surely, it's better to use correct resolution and Flawless App will tell whether you're using correct resolution for current iOS simulator or not, but you aren't constrained by it). For example, you have a design image for iPhone 7 and you want to use it on iPhone 5 – Flawless App will resize it appropriately so it will fit the simulator Here are the screenshots to demonstrate what I'm talking about (design image size is 750 × 1334): 1. iPhone 7, correct size, everything is great 2. iPhone 5, wrong size, but still you can compare and Flawless App warns you about incorrect resolution We have auto layout support on our roadmap as well since Sketch already has some rules for resizing. For current version, we're working with images and trying to do it in a most appropriate way πŸ™‚
Patrick L. Adams@patrickleeadams Β· Creator of @sparq_app and @LionBrowser
@itsthisjustin @geek_1001 But isn't that incorrect? Doing it the Flawless way would mean all of the elements scale down or up. For example those UITextFields and the UIButton (designed for an iPhone 7) would scale down when run on an iPhone 5 or up when running on an iPhone 7 Plus. This would be incorrect because it would scale all the elements down/up when really what should happen is more or less whitespace and padding everywhere. Same would go for UILabels, wouldn't it essentially be changing the font size when the image is scaled? Here is a scenario of how this issue would occur: The developer gets the image for an iPhone 7, overlays it and starts moving elements to match the overlays coordinates and sizes. Once everything is good to go, they run the same overlay on the iPhone 5 or iPhone 7 Plus and realize it no longer lines up. What they then do is adjust to make the overlay match those. Now that they've done that they re-run it on the iPhone 7 and again the coordinates and sizes are off. The elements are not sized correctly. So they keep going back and forth. Does that make sense? Also, Flawless might work for designs where data doesn't change much, but once you compare against an app with real data, elements and sizes change and then the developer is left wondering what the actual coordinates are. That's what a tool like Zeplin prevents. p.s. At this point I don't want you guys to think I am trolling, I am just trying to bring light to the real issues a developer would face using something like this.
Ahmed
Maker
@geek_1001 Β· iOS/macOS Engineer. Founder of Flawless
@patrickleeadams @itsthisjustin Sure, image approach isn't perfect for different devices. I just wanted to show that you aren't constrained (from the application perspective) by the design size and you can do a comparison for all screen sizes even if you don't have correct resolution. Surely you better to have a right design in right resolution for the specific device. For the current version, you better to have those resolutions you want to polish in order to achieve super precision, but it's not required. You could have a single design in a single resolution for iPhone 7, for example, and check yourself (your UI layout implementation) using Flawless App with this specific resolution and as you mentioned above – just adjust Auto layout rules so all elements will be placed in the right spot on other devices like magic. What you've described is part of the much-much bigger problem in visual quality control which we're going eventually solve. At leats, we'll do our best. 1. The problem of the dynamic layout (let's call it "Autolayout problem") 2. The problem of dynamic content Yes, you're right about those things, it's really a problem and it's great because we can put our effort to solve this. In those problems, I see a huge opportunity for us 😊 >but once you compare against an app with real data, elements and sizes change and then the developer is left wondering what the actual coordinates are. That's what a tool like Zeplin prevents. Tha only question I have, how does Zeplin solve this problem of dynamic content? As far as I know designer build a design as a static image at the end of the day. And basically, this image has some hard-coded content inside. Zeplin can show dimensions, styles and etc. for this content. But it won't show how to deal: - if there is no content - if the content is too long - if the content is too small - if the content is just different from the one on the design How could Zeplin help the developer to adjust real data so it will look good? P.S. No problem, Patrick! We're really glad you're open to sharing your thoughts and feedback. That's extremely valuable for us. We'd love to have a user-research call with you even sometimes (after a couple of updates) if you will have some time and desire. So you would share your feedback and maybe suggest us something, it would be really great 😊 Everything is fine, no worries)
Patrick L. Adams@patrickleeadams Β· Creator of @sparq_app and @LionBrowser
@itsthisjustin @geek_1001 Zeplin may have a similar issue as Flawless when it comes to multiple device sizes but I guess my point is that with Zeplin the designer/developer understand that other than the device size that is designed for there is no good way to check the other sizes. The developers sets up auto-layout for that device size and it will resize accordingly for the others. If there are some nuances with the other sizes then you have a discussion with your designer. All-in-all I think a good majority of teams use something like Zeplin or Sympli to hand off designs anyways which means they have the tools they need right there for laying everything out. Why add another tool?
Lisa Dziuba
Maker
@lisadziuba Β· Swift Learner & FlawlessApp.io Founder
We’re excited to show Flawless App to Product Hunt community. It’s been a challenging and turbulent journey of almost 2 years since we started Flawless at a hackathon πŸš€ During this crazy race, we met truly amazing people and had a lot of fun. We simultaneously went through 2 equity-free acceleration programs: Startup Sauna and Lisbon Challenge. Best ever early users joined us and become our friends. Without outside investment, we pivoted initial concept and released several products iterations. I’m really honored to show you result of our two great years. Waiting for your honest feedback on Flawless App! ^ Lisa πŸ’› πŸ’™
JoΓ£o Pereira@nsmyself Β· Freelance iOS Developer
@lisadziuba Congrats! :)
Lisa Dziuba
Maker
@lisadziuba Β· Swift Learner & FlawlessApp.io Founder
@nsmyself thank you for supporting us 😍 😍 😍
Yaroslav Azhnyuk@yaroslavazhnyuk Β· CEO, Petcube
team @petcube is in love with Flawless, good luck!
Ahmed
Maker
@geek_1001 Β· iOS/macOS Engineer. Founder of Flawless
@yaroslavazhnyuk Thank you so much, Yaroslav and a whole @petcube team for your support! 😊
Lisa Dziuba
Maker
@lisadziuba Β· Swift Learner & FlawlessApp.io Founder
@geek_1001 @yaroslavazhnyuk We love @petcube too :) Petcube Mafia will conquer the world!
Pavlo Pedenko@pavlo_pedenko Β· Product Manager at Setapp.com
Wow! Congrats! Let's talk joining Setapp then :)
Ahmed
Maker
@geek_1001 Β· iOS/macOS Engineer. Founder of Flawless
@pavlo_pedenko Thank you so much, Pavlo! Surely we'll do so! We already had a talk with Bogdan from Setapp Review Team 😊
Kunal Bhatia@kunalslab Β· Co-founder & Design Lead @SlidesUp
Looks flawless to me! Congrats on the launch and making it through the crazy journey to get here! πŸ‘ What are you thinking of building next? Would love to hear more about your vision!
Ahmed
Maker
@geek_1001 Β· iOS/macOS Engineer. Founder of Flawless
@kunalslab Thank you, Kunal for supporting us! 😊 Sure, I'd be glad to share it with you. As mobile development as a whole industry evolves with new devices and new form factors – there is still a huge gap how to make all of those products for all of those devices polished enough. We believe Flawless potentially can solve the much bigger problem of the visual quality control (and in the long run strategy, a bunch of other aspects of quality factors. Not just for iOS, not just for mobile devices even). And we're moving towards this long run vision. Step by step we believe we can achieve this huge goal. And eventually, reinvent quality control for every possible digital product. πŸ™‚