ผลงานเด่น / WEBSITE UI REDESIGN

Vietnam
Yokorei

ปรับดีไซน์เว็บไซต์องค์กรเดิม ให้ดูทันสมัย

UI Design
Figma
Corporate Website

VIETNAM YOKOREI ส่วนหนึ่งของงานออกแบบ Vietnam Yokorei: หน้าแรก

ส่วนหนึ่งของงานออกแบบ Vietnam Yokorei: บริการ

CORPORATE WEBSITE / UI REDESIGN

งานออกแบบเดสก์ท็อปต้นฉบับที่ผู้ออกแบบส่งให้ ด้านบนจับคู่ส่วนหนึ่งของหน้า Home และ Service ส่วนภาพเต็มอยู่ในแกลเลอรีด้านล่าง

01 / OVERVIEW

ภาพรวมโปรเจกต์

ปรับดีไซน์ UI เว็บไซต์องค์กรเดิมทุกหน้าให้ดูทันสมัย โดยใช้เนื้อหาจากเว็บไซต์เดิม

บทบาทของฉัน: UI Designer — ออกแบบทุกหน้าของเว็บไซต์
ขอบเขตงานและการทำงานร่วมกัน: ปรับดีไซน์ UI ทุกหน้าของเว็บไซต์ใน Figma โดยใช้เนื้อหาจากเว็บไซต์เดิม ส่วนการปรับ responsive และพัฒนาเว็บไซต์เป็นหน้าที่ของ Developer
เครื่องมือ: Figma
แหล่งเนื้อหา: เว็บไซต์องค์กรเดิม

02 / CONTEXT

เป้าหมายและบริบท

โจทย์ของโปรเจกต์คือปรับดีไซน์เว็บไซต์ Vietnam Yokorei เดิมให้ดูทันสมัยขึ้น ฉันรับผิดชอบการออกแบบ UI ทุกหน้าใน Figma โดยใช้เนื้อหาจากเว็บไซต์เดิม

เป้าหมายคือปรับหน้าตาเว็บไซต์ให้ดูทันสมัย โดยใช้เนื้อหาที่มีอยู่ ฉันรับผิดชอบการออกแบบหน้าจอ ส่วนทีมพัฒนารับผิดชอบการปรับ responsive และพัฒนาเว็บไซต์

03 / STRUCTURE

หน้าที่อยู่ในขอบเขตงาน

งานปรับดีไซน์ UI ครอบคลุมแปดหน้าตามลิงก์ใน Navigation ของ Header รายการนี้แสดงขอบเขตหน้าที่รับผิดชอบปรับดีไซน์

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

04 / CLOSE-UP

จุดสำคัญของงานออกแบบ

คำอธิบายต่อไปนี้เป็นข้อสังเกตเรื่องลำดับการมองเห็น การจัดกลุ่มเนื้อหา และตำแหน่ง CTA ในภาพที่ได้รับ ไม่ใช่การอ้างเหตุผลของผู้ออกแบบที่ยังไม่ได้ยืนยัน

หน้าแรก

ภาพคลังสินค้าเต็มความกว้างนำเข้าสู่การ์ดจุดเด่นสามใบ แถบติดต่อพื้นเข้มแยกฟอร์มสอบถามออกจากกริดบริการพื้นขาว และมีปุ่ม Contact Us สีแดงอีกจุดด้านล่าง เป็นข้อสังเกตจาก layout และ CTA ที่ปรากฏ ไม่ใช่การอ้างเหตุผลของผู้ออกแบบ

บริการ

หน้าบริการเริ่มจากการ์ดจุดเด่นสามใบ ตามด้วยกริดประเภทสินค้าสองคอลัมน์ และแถวบริการปฏิบัติการสี่รายการ ไอคอนเส้นสีแดงและแผงมุมเฉียงที่ใช้ซ้ำเชื่อมภาพรวมแต่ละกลุ่ม ก่อนจบเนื้อหาด้วยส่วนสถานที่ตั้งพื้นเข้ม

ติดต่อ

แผนที่ขนาดใหญ่อยู่ก่อนส่วนติดต่อแบบสองคอลัมน์ ที่อยู่และโทรศัพท์อยู่ด้านซ้าย ส่วนฟอร์มด้านขวาจัดกลุ่ม Name, E-mail, Tel, Subject และ Message โดยวางปุ่ม Send Message สีแดงทึบใต้ช่องข้อความโดยตรง

05 / UI FOUNDATIONS

พื้นฐาน UI และองค์ประกอบที่ใช้ซ้ำ

ตัวอย่างเหล่านี้ครอปจากภาพงานที่ได้รับโดยตรง เห็นรูปแบบตัวอักษร ช่องกรอก ปุ่ม Header และ Footer ที่ใช้ซ้ำ โดยไม่คาดเดา state ชื่อฟอนต์ หรือ Variables ใน Figma

#D9172Eปุ่มติดต่อ

#232331Navigation และ Footer

#FFFFFFพื้นเนื้อหา

ค่าสีอ่านจากไฟล์ PNG ที่ได้รับ ไม่ได้อ้างว่าเป็น Design Tokens หรือข้อกำหนดแบรนด์ต้นฉบับ

ตัวอักษรและลำดับการมองเห็น

หัวข้อหนาและแคบตัดกับเนื้อหา sans-serif ขนาดเล็กกว่า มีการใช้สีแดงเน้นข้อความและเครื่องหมายเฉียงคู่ซ้ำในหัวข้อ โดยไม่คาดเดาชื่อฟอนต์และขนาดจากภาพ raster