Nucleus UI

Overview

Nucleus UI’s mission is to provide a beautiful and practical UI Kit & Design System that helps designers, agencies, and businesses speed up their processes while maintaining high standards and quality.

Nucleus UI understand the importance of an efficient and well-designed user interface, and that's why we strive to create UI kits that are visually appealing but also functional and user-friendly.

Highlights

350+ upvotes in Product Hunt.
30,000+ downloads in Figma Community.

My Role

As part of the UI Design team for this project, I designed templates for the UI Kit under the supervision of Thomas Budiman.

Purchase on Gumroad

DESIGN

Hero Section

The first section you see when you land on a page. The hero section templates must capture Nucleus UI’s minimalist and simple style so it can be freely stylized later on by the user. These templates are designed specifically to cater various kinds of use case such as highlighting key features, highlighting social proof, and user review

DESIGN

Pricing

Next comes the Pricing Section. These templates were very fun to design. The challenge on designing the Pricing Section was how to present numerous similar information while keeping the hierarchy for Plan Name. Plan Price, and CTA Button on top.

DESIGN

Features

One of the most important section in a landing page where the company highlight their value proposition to the audience. Pretty straightforward process here, although I really like how it turns out.

DESIGN

Testimonial

Ahhh the masonry grid. Pretty challenging to make a responsive one, especially since I initially thought I can use wrapping auto-layout for the cards. The non-masonry testimonials were pretty straightforward. No funny business there.

DESIGN

Statistics

Another one of the fun challenge! These Statistics Section templates are one that you might find on the landing page to show the company’s successful metrics. Again, in this section my best friend was the wrapping-auto layout since the user might want to add or reduce the number of the information they want to display.

DESIGN

Mega Menu

One of the most underrated component out there. Mega menus are often used in websites but somehow only few UI Kits are providing templates for this bad boys. Now, the key here is to keep in mind that the user might want to add or remove items from the menu without destroying the layout. Hence, wrapping auto-layout was my best friend here.

DESIGN

Verification Prompt

The verification prompt you see when you are creating an account. Pretty straightforward, I use all the available components from Nucleus UI and combined it into a coherent section.

DESIGN

FAQ

I initially made 2 different options for the FAQ Section. However, it turns out I only need to combine existing components.

DESIGN

The section you usually find on the bottom of a landing page. The thinking behind these sections was it shouldn’t stand out too much. So, this section would be on the bottom list of the page hierarchy but it’s still there.

REFLECTION

Looking Back.

When I was invited to work on this project I was so excited beyond belief. This opportunity to work on a UI Kit was a very welcomed challenge. Through this project, I get to launch a real product that are already used widely by designers out there. This premise drive me to polish my skill on the details of my work.

Moreover, the kind guidance provided by Thomas Budiman helped me a lot on how a real professional think and work. He guided me upon many design iterations and how to read the client and market needs.

DESIGN