pixel perfect apps techniques [closed]

While doing your iOS app development, do you try to achieve pixel perfect similarity? Is your app identical to provided photoshop designs?

If yes, what techniques are you using to speed this process up? I find it really time-consuming, since:

I’m using a lot of custom component which aren’t displayed in interface builder.
Text field boundaries size are different in XCode and Photoshop. So I can’t just copy position.
Some of the properties are not easily modify-able. I’ve got a lot of custom-sized buttons, and changing text baseline is difficult
etc…

I’m aware about tools like Reveal or SparkInspector – they speed things up, but it’s not a dramatic boost for me. I know also that with XCode 6 you can use IBDesignable. I’m stucked with 32bit app right now, so I can’t use it yet (and not sure how useful is it).

So, is it really so time consuming? If you’re trying to achieve pixel-perfection in your projects, how much time do you usually spend on this? (E.g. on average per screen?)

Know UIKit classes intimately. If you know the classes in that framework well, you do not spend almost any time researching how to customise them in unusual manner.
Master CoreGraphics/Quartz2D. This will help you to deal with unusual or dynamically changing shapes.
Work purely in vector domain, no bitmaps. 2) helps with that a lot. With all the form factors for iOS nowadays (and iPad Pro 12inch is coming, you can’t afford to work with bitmaps anymore..)
Master custom control design patterns. Sometimes it’s better to implement a custom UI control than fighting UIKit stuff.
Learn the fundamentals of UI/UX design. If you know them, you can easily identify whether the designer made an honest mistake (not paying attention, mouse click error,..etc.) or he/she had a horrible idea that must avoided at all cost :), or he/she is doing a sloppy job and yours is to smooth things out as it is the path of least resistance.
Educate your designer about limitations of iOS platform that have some consequence on design approach, tell him/her to throw Photoshop to the bin and start using Sketch and PaintCode. Teach him/her to prototype so that you guys do not have a long feedback cycle. Teach him/her to internalise the concept of points. Print out a big wallpaper with screen sizes (in points) for all iOS devices. Make him/her promise to never position anything in between points.
Debug Views in runtime, commercial solutions are still a bit better than XC6 view debugging.
Use Xscope to measure visual elements on your simulator screen in many different ways (distance, size, ratios, alignments..etc..)
Save time be being a really good developer when working on business logic and use that saved time to polish things on presentation layer.
Identify stakeholders (managers, product owners, customer representatives) who understand why a finished product means a product with no visual deficiencies. When there is time squeeze, they will protect you.
Do not optimise for iPhone6+; it is impossible. Hopefully Iphone6S+ will get rid of that hardware downsampling and will have physical pixels matching 3x logical points. (In the meantime you can envy Metal/OpenGL developers as they have access to physical pixels on screen.)
Find an employer that values pixel-perfect. They will allocate more time to that officially.

Pixel-perfect takes time. There is a dominant public opinion trend in programming circles lately that uses terms like “lean”, fail quickly, you are “paid for features”. etc..etc..for people that value the aesthetic aspect of product, it is pain and suffering. Often delivering a pixel-perfect level of polish to the product borders on semi-illegality and you will sacrifice some overtime for the cause as a last resort.

So to sum this up, the solution is not to be able to click with mouse more quickly doing all the things you did until today, but to apply qualitative improvements in your tooling & work processes and programming know-how.

Building Pixel Perfect UI is both an Art and Science. Having the right tools makes the science part easy.

Take a look at QuickLens, a Mac App to help UI Designers/Developers to be true to the Visual Design. It provides a Modern, feature-rich interface, at a very affordable price. Use QuickLens to magnify an area, sample colors, export to Photoshop/Html, measure distances, angles, check alignments and much more.

In addition to visual crispness, you also have to care about the overall User Experience.
It takes lot of patience and tireless iteration to achieve that.
Take inspiration from well-designed apps
Here is a nice article about the rules of good App Design
Read blogs, newsletters such as objc.io which cover the technical aspects of App Design
Experiment a lot
Fail early, Fail often
Take feedback from potential users. It will help shape your app.
Most importantly: Have Fun building your App

Filed under: softwareengineering - @ 19:28

Thẻ: ios, user-interface, xcode

Thiết kế website giá rẻ

Danh mục

pixel perfect apps techniques [closed]