UI Tools for Mobility

|
8 Min Read

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.

To meet the desired UI expectations developers have to build a lot of custom UI components. 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.

Related Articles

|
8 Min Read

Design architectural patterns are the core of mobile application development. The architecture of the application provides you with reusable code and minimizes the code duplication that prevents high coupling and provides solutions for the recurring...

Interested in our Sevices