Build Smartr

A redesign project focused on improving an existing website’s usability, visual appeal, and clarity.

Build Smartr

A redesign project focused on improving an existing website’s usability, visual appeal, and clarity.

Build Smartr

A redesign project focused on improving an existing website’s usability, visual appeal, and clarity.

Build smartr

Build Smartr is a construction company specializing in prefabrication. Their original website was outdated, difficult to navigate, and failed to clearly communicate their core expertise. As UI designers, our role was to redesign the website to better present their services while collaborating closely with the development team.

Client

Build smartr

Role

UI designer

Time

2 Month

Tool

Figma

Build smartr

Build Smartr is a construction company specializing in prefabrication. Their original website was outdated, difficult to navigate, and failed to clearly communicate their core expertise. As UI designers, our role was to redesign the website to better present their services while collaborating closely with the development team.

Client

Build smartr

Role

UI designer

Time

2 Month

Tool

Figma

Build smartr

Build Smartr is a construction company specializing in prefabrication. Their original website was outdated, difficult to navigate, and failed to clearly communicate their core expertise. As UI designers, our role was to redesign the website to better present their services while collaborating closely with the development team.

Client

Build smartr

Role

UI designer

Time

2 Month

Tool

Figma

Process

Discover
Define
Research
Design
Testing
Develop

Process

Discover

Define

Research

Design

Testing

Develop

Process

Discover

Define

Research

Design

Testing

Develop

Sitemap

The original website had a complex navigation structure and excessive content, which made it difficult for users to find relevant information. We streamlined the structure and reduced unnecessary content to improve clarity and usability.

Key point

We consolidated related content into a single page to create a more cohesive storytelling experience.

Style guide

Typography

Line height and paragraph spacing for heading is 1.5 x font size

A

a

Heading

HEADING AND SUBTITLE

Inter

A strong and versatile typeface, designed together with Degarism and inspired by industrial-era grotesques.

Desktop / Mobile

Heading¬ 1

font-size

font-weight

letter-spacing

Heading 1

64 px

Bold

0

Heading 2

48 px

Bold

0

Heading 3

40 px

Bold

0

Heading 4

32 px

Bold

0

Heading 5

28 px

Bold

0

Heading 6

24 px

Bold

0

Body 1

20px

Regular

0

Body 2

18px

Regular

0

Body 3

16px

Regular

0

Body 4

14px

Regular

0

Caption

14px

Bold

0

Colors

The client wanted to convey a “steel-like” impression. To achieve this, we used a grayscale color palette inspired by the tones and texture of steel.

This approach reinforces the brand’s industrial identity while maintaining a clean and consistent visual appearance.

Main Colors

Black

#252626

Gray

#F6F3F0

White

#FFFCFA

Six Degrees of Separation

Let’s connect

©2024 Seina

Six Degrees of Separation

Let’s connect

©2024 Seina

Create a free website with Framer, the website builder loved by startups, designers and agencies.