UI Tools for Mobility

Table of Content

    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
    let bezierPath = UIBezierPath()
    bezierPath.move(to: CGPoint(x: 15.5, y: 11.5))
    bezierPath.addLine(to: CGPoint(x: 17.75, y: 9))
    bezierPath.addLine(to: CGPoint(x: 20, y: 11.5))
    bezierPath.addLine(to: CGPoint(x: 15.5, y: 11.5))
    bezierPath.close()
    UIColor.gray.setFill()
    bezierPath.fill()

     

    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

    Flutter Shape Maker(Flutter)

    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
        let rectanglePath = UIBezierPath(rect: CGRect(x: container.minX, y: container.minY + 7, width: container.width, height: container.height - 7))
        blue.setFill()
        rectanglePath.fill()


        //// Top Curve Drawing
        let topCurvePath = UIBezierPath()
        topCurvePath.move(to: CGPoint(x: container.minX + 38.4, y: container.minY + 3))
        topCurvePath.addCurve(to: CGPoint(x: container.minX + 80.75, y: container.minY + 7), controlPoint1: CGPoint(x: container.minX + 48.9, y: container.minY + 4.59), controlPoint2: CGPoint(x: container.minX + 66.61, y: container.minY + 8.1))
        topCurvePath.addCurve(to: CGPoint(x: container.minX + 103, y: container.minY + 0.5), controlPoint1: CGPoint(x: container.minX + 93.3, y: container.minY + 6.02), controlPoint2: CGPoint(x: container.minX + 103, y: container.minY + 0.5))
        topCurvePath.addLine(to: CGPoint(x: container.minX + 103, y: container.minY + 7.5))
        topCurvePath.addLine(to: CGPoint(x: container.minX, y: container.minY + 7))
        topCurvePath.addCurve(to: CGPoint(x: container.minX + 38.4, y: container.minY + 3), controlPoint1: CGPoint(x: container.minX, y: container.minY + 7), controlPoint2: CGPoint(x: container.minX + 18.59, y: container.minY))
        topCurvePath.close()
        blue.setFill()
        topCurvePath.fill()
    }

    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 way

    Animated 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, Neebal has all the services that you need to transform the digital experience.      

    Topics: Expert Insights

    Subscribe to our Newsletter