UI Design

Created by Polywork
3816 People have this badge

What everyone's up to

used Figma
Designed a New Component
Designing for UI Challenge
+ 1

Tooltip component


Designed 4 variants of tooltip. Other variants where the tooltip is in other positions can also be designed. In this version, I have designed the blank state of the tooltip where only the icon is present as this facilitates in prototyping
used Figma
Designed a New Component
Designing for UI Challenge
+ 1

Radio component


Food for thought

Applied interactive component to it but is there a better way of handling the prototype? What if there are 5 options, does it mean that one needs to create 5 instances of it and connect all the noodles?
used Figma
Designed a New Component
Designing for UI Challenge
+ 1

Checkbox component


Designed 8 variants of checkbox and applied interactive component. Tested the prototype and it works like a charm.
Designed a New Component
Designing for UI Challenge
used Figma
+ 1

Design components


Designed 3 components for the day:
  • Toggle
  • Button 
  • Inputs

The nested component for the Newsletter subscription can then use the button and input components.

I used smart animate, auto layout, interactive components to achieve the desired functioning of the components

Roadblocks

  • I have set up the interactive components for buttons and inputs. After creating the newsletter nested component, facing some issues with the interactive components prototyping. It seems that the latest state of the components is preserved in the nested components.
  • The loading spinner animation is not working with smart animate.
  • The smart animation of the button filling up the entire space after the input disappears is not working as expected.
May 14, 2019
Built a UI component library
Started an internship
Interned under GovTech Singapore

• Designed the development life-cycle & implemented the build pipeline for the Design System Components in Moments Of Life (MOL), a React Native Mobile Application.
• Published the components in the MOL App as a NPM package, which is used as a dependency and can be developed separately.
Designed a portfolio
Designed a style guide

6 AM : Designing my portfolio with passion!!!!!

Loading...