To meet the desired UI expectations developers have to build a lot of custom UI components.
Why do you need tools for drawing shapes?
UI is the first thing that comes to mind when designing a frontend Application. An app with an attractive UI always attracts end users, hence the UI/UX team always strives for better UI experience. A great UI/UX is key for hyperautomation and providing an intuitive experience to the users.
To meet the desired UI expectations developers have to build a lot of custom UI components for hyperautomation. Some of them can be achieved with pre existing libraries and some need to be designed. Examples of custom UI components are tool tips or a Curvy Bottom sheet. To stand out developers have to spend a lot of time designing these shapes. This may be okay for simple components but will quickly grow in complexity as the UI shapes become more complicated.
There is a traditional way:
For a simple shape just like the tooltip, developers used to design two regular shapes, Rectangle and Triangle and merge both of them
Below is the snippet for the tooltip
| //// Rectangle Drawing let rectanglePath = UIBezierPath(roundedRect: CGRect(x: 11, y: 11, width: 69, height: 13), cornerRadius: 2) UIColor.gray.setFill() rectanglePath.fill() //// Tooltip Drawing |
What about the disadvantages?
Designing simple shapes is easy like tooltip is fairly easy for developers who have understanding for Bezier Curves.
However for the curved structure a more complex calculation is required. This includes calculating the control points and this could count up to a lot of developers efforts
It required a lot of mathematical effort to compute the constants, offsets and even a slight mistake and create an undesirable shape.
Learning curve for Bezier Path is relatively steep.
The same developer who calculated the values might have to change those values depending on which underlying framework he is working on.
For example the developer who has been working on Swift has to write similar code for Android with adjusted values
Tools that are used:
PaintCode(iOS,MacOS,Android,Web)
https://www.paintcodeapp.com/tutorials
https://www.youtube.com/watch?v=AnKgtKxRLX4
Here are some advantages:
These tools provide the developers/designers with a GUI tool via Mouse based control, where the developer can create desired shapes using simple drag & drop. Since minimal coding is required the Designers can also help in designing shapes and share the files to the developer team.
The developer team has to just generate code according to their desired platform.
More Refined Shapes can be created with this tools and the developers can save their time from solving complex equations for calculating values
Output From Paintcode for Curved Shape
| func drawCurvedShape(container: CGRect = CGRect(x: 55, y: 71, width: 103, height: 25)) { //// Color Declarations let blue = UIColor(red: 0.196, green: 0.678, blue: 1.000, alpha: 1.000) //// Rectangle Drawing //// Top Curve Drawing More about the tools for animation: Why are they needed?An application with animations is bound to catch the attention of end users. Fade In, Bounce effects are quite common with apps that we have today. But to stand out in the market, designers along with old trusted animations are adding up to unique animation effects to stand out in the market. Examples include animated characters, Loaders There is a traditional wayAnimated Gifts were previously used for showing animations that were designed by designers in an Image Editor. And a disadvantage:GIFs are heavy and this increases the app size.This also results in low FPS The tools used are:Lottie(iOS,Android,React Native,Web,Windows) Cross Platform Flare Cross Platform https://github.com/2d-inc/flare-swift https://github.com/2d-inc/Flare-Flutter https://github.com/2d-inc/Flare-JS https://github.com/2d-inc/Flare-React Kite Compositor(Mac OS,iOS) Advantage:Provides Layer Animation(animation to native views) Disadvantage:Not supported on other platforms. But maybe we can write a script to generate similar code for Android from a .kite File |
Parting thoughts:
Hoping that this information will help you choose better. If you are interested in our design services feel free to contact us here: Neebal Technologies Pvt Ltd. As an emerging industry for hyperautomation,
Topics: Expert Insights Neebal has all the services that you need to transform the digital experience.