FEATURED WORK / WEBSITE UI REDESIGN

Vietnam
Yokorei

A modern visual refresh for an existing corporate website.

UI Design
Figma
Corporate Website

VIETNAM YOKOREI Vietnam Yokorei home design excerpt

Vietnam Yokorei our service design excerpt

CORPORATE WEBSITE / UI REDESIGN

Original desktop designs supplied by the designer. Home and Service excerpts are paired above; full-page images are available below.

01 / OVERVIEW

Project overview

Redesigned every page of an existing corporate website to give it a modern visual presentation, using the original website content.

My role: UI Designer — all website pages
Scope & collaboration: UI redesign across all website pages in Figma, using content from the existing website. Responsive adaptation and implementation were handled by the developers.
Tools: Figma
Content source: Existing corporate website

02 / CONTEXT

Goal & context

The brief was to update the visual design of the existing Vietnam Yokorei website to make it look more modern. My role covered UI design for all pages in Figma, with content taken from the existing website.

The goal was to modernize the website’s visual presentation while retaining the existing content. My contribution focused on screen design; the development team handled responsive adaptation and implementation.

03 / STRUCTURE

Pages in scope

The UI redesign covers these eight pages. This overview follows the page links in the shared header navigation and shows the scope of the visual redesign.

Home
Company Information
Our Service
Certificate
News Update
Recruitment
Contact Us
Privacy Policy

04 / CLOSE-UP

UI design highlights

The following notes describe visible hierarchy, grouping and CTA placement in the supplied screens. They are observations of the interface, rather than unconfirmed accounts of the designer’s reasoning.

Home

A full-width warehouse photograph leads into three capability cards. A dark contact band separates the enquiry form from the white service grid; a second red Contact Us action appears further down the page. These are visible layout and CTA patterns, rather than confirmed statements of design intent.

Service

The service page moves from three capability cards to a two-column goods category grid, then a row of four operational services. Red line icons and repeated angled panels visually connect these groups; a dark location section closes the main content.

Contact

A large map precedes a two-column contact area. Address and telephone details sit on the left; the form groups Name, E-mail, Tel, Subject and Message on the right. A solid red Send Message button sits directly below the message field.

05 / UI FOUNDATIONS

UI foundations & reusable components

These specimens are direct excerpts from the supplied designs. Repeated typography, form fields, buttons, header and footer can be observed; component states, font names and Figma variables are not inferred.

#D9172EContact action

#232331Navigation & footer

#FFFFFFContent surface

Values sampled from the supplied PNGs, not a claim of original design tokens or brand specifications.

Typography & hierarchy

Tall, condensed bold headings contrast with smaller sans-serif paragraphs. Red emphasis and paired diagonal marks recur in section headings. Typeface names and sizes are not inferred from raster images.

Vietnam Yokorei section heading design excerpt — Section heading · source excerpt

Inputs & primary action

The Contact export shows thin bordered text fields, a larger message area and a solid red Send Message button. This specimen records the visible default appearance only.

Vietnam Yokorei contact form design excerpt — Contact form · source excerpt

Shared header

The logo and contact information sit above a dark horizontal navigation bar. The same structure appears across all eight supplied screens; logo authorship is not claimed.

Shared footer

A dark footer groups About Us, Information and Office into three columns, with red angled section labels. The specimen is a direct crop of the Contact export.

Vietnam Yokorei three-column footer design excerpt — Three-column footer · source excerpt

06 / SCREEN GALLERY

Selected screens

Six desktop layouts, selected for their different content structures. Previews show the upper portion where necessary; enlarge an image to scroll through the full design without changing its proportions.

Vietnam Yokorei Home desktop design. Hero, capability cards, enquiry form and services. — Hero, capability cards, enquiry form and services.

Vietnam Yokorei Our Service desktop design. Capabilities, goods categories and operational services. — Capabilities, goods categories and operational services.

Vietnam Yokorei Contact Us desktop design. Map, office details and enquiry form. — Map, office details and enquiry form.

Vietnam Yokorei Company Information desktop design. Company facts paired with warehouse photography. — Company facts paired with warehouse photography.

Vietnam Yokorei Certificate desktop design. Grouped certificate information and a large warehouse image. — Grouped certificate information and a large warehouse image.

Vietnam Yokorei News Update desktop design. Article previews with a search and recent-post sidebar. — Article previews with a search and recent-post sidebar.

Two more layouts: Recruitment & Privacy Policy

Vietnam Yokorei Recruitment desktop design. Job information, benefits and HR contact details. — Job information, benefits and HR contact details.

Vietnam Yokorei Privacy Policy desktop design. A text-led policy layout with clear section headings. — A text-led policy layout with clear section headings.

07 / THE NEXT CHAPTER

Reflection & project links

Explore the original design file and the other projects in this portfolio.

Open website ↗View Figma ↗Back to Selected Work →

UI design by Sirinya. Content from the existing website. Responsive adaptation by the developers.