Post/Code

HomeAboutUsesNow

Thoughts on iOS/Material UI Elements and Sketch.

It has been slow-going since I started designing my app. Getting back up to speed with Sketch has gone well, however, getting up to speed with the design paradigms and standards for iOS and Android design is taking longer. Despite using iOS on a daily basis, I am not yet dialled in on the naming conventions for the various UI controls, nor with the guidelines surrounding their usage. After so many years working on the web, I am having to learn the platform conventions. At least I am somewhat familiar with iOS. When it comes to Android, I am much less familiar. I have never owned an Android phone, so I am having to spend extra attention on what the possible differences might be between the platforms when it comes to layout and UI.

Regardless, I am enjoying the process! Considering that I have never worked in mobile, reviewed the HIG (Apple Human Interface Guidelines) and have scarce knowledge of Android and Material Design this is understandably taking longer than expected. I will need to keep this in mind for future estimates on the timing of my tasks and will need to allow for considerably more time for design tasks.

iOS UI Elements.

As for the Sketch workflow itself. Using symbols and text styles are great! Being able to make use of the Apple iOS UI Kit elements is really helpful. It is however, somewhat tricky at times, because you need to know the names of the elements in order to navigate the menus to find the correct items. The little thumbnails are so small that in order to check to see whether what you are looking at is actually what you want, you need to first add it to the artboard. Then, if it is not, you need to repeat the whole process again. It is not particularly intuitive. I also do not yet udnerstand what the difference is between "Regular" and "Compact" in the naming. Regular is far wider than an iPhone and Compact is narrower. So when it comes to Tab Bars, this makes little sense to me.

iOS Pickers.

Similarly, the elements for the Pickers are not well done. The pickers themselves seem to be flat symbols without text overrides. As such, if you want to edit the Date/Time pickers to be something custom you cannot. Fortunately, there are numerous online Sketch resources, but it seems odd that these symbols are not very comprehensive in this instance. As I understand it, pickers are effectively the iOS equivalent of dropdowns/select boxes on the web. As such, they are widely used, but yet the symbol for something so intrinsic is not well represented.

iOS Library vs Material Templates.

The implementations of the different platforms (iOS and Android) are also a little odd. iOS UI elements can be used as Library items. On one hand, you have easily accessible iOS UI symbols available via the Insert menu. Yet, Material elements are templates. These need to be loaded in a separate template and then copied over to your working document. Come to think of it, I will need to find a Material Library resource.

Open Source for Design.

While Sketch is paid for software, much of the ecosystem around it feels kind of like the open-sourcing of design in many respect. The ease at which one can find and re-used components created by other people is incredibly powerful and I believe is akin to open source if you squint at it. UI Kits are the equivalent, in some respects to libraries like Bootstrap or Foundation. Being able to share patterns, gradients, symbols etc are much like sharing components in code.