25Jan, 2022
Language blog :
Thai
Share blog : 
25 January, 2022
Thai

รวม Design System จากแบรนด์ดัง เขาทำยังไงกันบ้าง

By

3 mins read
รวม Design System จากแบรนด์ดัง เขาทำยังไงกันบ้าง

(หมายเหตุ: บทความนี้เป็นส่วนหนึ่งของซีรีส์ Design System ของ 34)

เชื่อว่าทุกคนที่เป็นนักออกแบบหรือ UX/UI Designer ทุกคนจะต้องเคยพบเจอเหตุการณ์ต่าง ๆ เหล่านี้ไม่ว่าจะเป็น

  • ใช้สีเยอะไปหมด มีสีเทาเป็น 10 เฉดสี สรุปอันไหนใช้กับตรงไหนถึงจะถูกต้องกันแน่นะ
  • ตัวอักษรที่ขนาดไม่เท่ากัน Header 42px บ้าง 30px บ้าง ตรงนี้ควรจะใช้แบบหนาหรือบาง ระยะห่างระหว่างบรรทัด (Leading) เพี้ยนไปหมด เว้น Section ใต้ Banner หน้าหนึ่ง 50px แต่พอไปใช้กับอีกที่หน้าเว้น 40px
  • ปุ่มมีกี่รูปแบบ แล้วสรุปสีปุ่มอันไหนเป็น CTA ในงานของเรา แล้วตอนที่ Hover จะเป็นยังไง คิดออกแบบเผื่อไว้รึยัง

อ่านแค่นี้ทุกคนน่าจะเห็นถึงความวุ่นวาย และสารพัดปัญหาที่พบเจอจากการออกแบบจริงแล้ว ซึ่งปัญหาเหล่านี้ทำให้เกิดการแก้งานย้อนหลังมากมายหลังจากที่เราได้เริ่มทำงานไปได้เยอะแล้ว สรุป ท้ายก็ต้องย้อนกลับมาปรับแก้สิ่งที่เคยทำผิดพลาด เสียเวลา และปวดหัวไล่ตรวจกันไปยาว ๆ แต่ถ้าคุณได้รู้จักและเริ่มทำ Design System ตัวช่วย Guideline ดี ๆ ก่อนเริ่มโปรเจกต์แล้วละก็ ปัญหาจะเบาบางลงหรือหมดไปนั้นเอง ทีนี้เรามาทำความรู้จัก Design System กันเถอะ

Design System คืออะไรกันนะ

Design System คือระบบการออกแบบที่มีความสำคัญอย่างยิ่งในการช่วยให้บริษัท และนักออกแบบอย่างเรานั้นเข้าใจ จัดระเบียบ วางแผน และกำหนดภาพลักษณ์ของแบรนด์ได้เป็นอย่างดี เปรียบเหมือนคู่มือที่จำเป็นจะต้องสร้างขึ้นมาเพื่อใช้สื่อสารกับคนในทีมหรือองค์กร เป็นสื่อกลางที่ทำให้ภาพรวมของงานมีความสม่ำเสมอ (Consistency) ไม่ว่าจะเป็น Components ส่วนต่างๆ ร่วมกัน ทั้งตัวอักษร (Typography) ขนาด (Sizing) สี (Colors) Button (ปุ่ม) Space Grids & Layouts (ระยะ กริด และการจัดวาง) Text field (กล่องข้อความ) Shadow & Elevation (เงา) Icons (สัญลักษณ์) หรือ Component ต่าง ๆ อีกมากมายขึ้นอยู่กับรูปแบบ Platform กันไป

ซึ่งที่กล่าวมาด้านบนนั้น เป็นเพียงแค่ตัวอย่างมาตราฐานที่ Design System ควรจะต้องมี แต่ยังมีบางส่วนที่อาจจะนอกเหนือจากนี้ได้ ไม่มีค่ากำหนดรูปแบบที่ถูกต้องตายตัวเสมอไป ขึ้นอยู่กับความต้องการของแบรนด์และโปรเจกต์นั้น ๆ ซึ่งอย่างไรก็ตามไม่ว่าจะ Platform ไหนก็ตาม เราจึงควรจะต้องเตรียม Design System ให้เรียบร้อยซะก่อน เพื่อเป็นการเริ่มงานที่วางโครงสร้างไว้ถูกต้อง ตามระบบแบบแผนที่ได้มีการคิด กำหนดและออกแบบไว้ โดยที่ทีมที่เกี่ยวข้องทั้งหมดจะต้องสามารถเข้าใจ ทำงานได้โดยลดการสื่อสาร และการทำงานซ้ำซ้อนให้น้อยที่สุด ไม่ต้องเริ่มต้นทำใหม่ เป็นการช่วยให้การสื่อสารระหว่างทีมต่าง ๆ เป็นไปได้ง่ายขึ้น ไม่ว่าจะเป็นทีม Designer ด้วยกันเอง หรือเวลามอบหมายส่งต่องานให้กับผู้เกี่ยวข้องอื่น ๆ อย่าง Developer-Project Manager- Product Managers-Marketing หรือกับผู้บริหาร และลูกค้าของเราเองก็ตาม

แล้วทำไมต้องทำ Design System ด้วยละ เรามาดูข้อดีและประโยชน์ของมันกัน 

  1. ประหยัดเวลาการทำงานได้มากขึ้นเยอะ
  2. งานออกมามีความสม่ำเสมอของ UI เพิ่มความน่าเชื่อถือของแบรนด์
  3. ลดความซับซ้อนและความคลุมเครือ
  4. ส่งเสริมและช่วยให้ทำงานได้สะดวกมากยิ่งขึ้น เวลาทำงานร่วมกันและเป็นเอกฉันท์ ทุกฝ่ายที่เกี่ยวข้องเข้าใจตรงกัน
  5. เข้าใจในงานมากยิ่งขึ้น ว่าระบบการทำงานว่าทำงานอย่างไร
  6. ส่งต่องานให้ผู้รับผิดชอบคนต่อไปได้ทำและเข้าใจโปรเจกต์ง่ายขึ้น
  7. การสร้างรูปแบบ โครงสร้างฐานที่ดี เพื่อการปรับปรุงแก้ไขให้ดียิ่งขึ้นในอนาคต
  8. สื่อสารและอธิบายให้ผู้พัฒนา (Developer) น้อยลงในระหว่างการส่งต่อไปยังผู้พัฒนา

ตัวอย่างบริษัท/แบรนด์ที่ทำ Design System

ในฐานะนักออกแบบเราสามารถเรียนรู้ได้มากมายจากการศึกษาระบบเหล่านี้ เพราะถ้าหากเราเข้าใจวิธีการสร้าง และเจาะลึกถึงวิธีการเหล่านี้แล้ว ก็จะช่วยให้ทำงานได้เป็นไปตามขั้นตอนตามองค์ประกอบของแบบฟอร์ม โดยตัวอย่างเหล่านี้บางเว็บสามารถดูผ่านเว็บไซต์ได้โดยตรง หรืออาจจะเป็นไฟล์ PDF, XD, Figma, Sketch ให้ดาวน์โหลดไปศึกษา เพื่อเป็นตัวอย่างให้นำไปปรับใช้กับงานของคุณในการทำแต่ละโปรเจกต์/เว็บไซต์⁣จากบริษัทใหญ่ ๆ ดังนี้

Apple

Apple

Audi

Audi

Atlassian

Atlassian

Airbnb

Airbnb

Fluent Design (Microsoft)

Fluent Design (Microsoft)

Google Material

Google Material

Facebook 

Facebook

IBM Design

IBM Design

AXA

AXA

Adobe's

Adobe's

Spotify

Spotify

หรือถ้าอยากดูเพิ่มเติมก็สามารถเข้าไปดูได้ที่ : Design Systems Repo หรือ designsystems ซึ่งเขาได้รวบรวมเว็บไซต์ที่มีการทำ Design System ของแต่ละแบรนด์นั้นๆ ให้คุณได้เลือกดูและศึกษาอีกมากมาย หรือสนใจอยากดู Design System แบรนด์ไหนเป็นพิเศษก็ลองใส่ keyword คำค้นหา ชื่อแบรนด์ + design system ก็ได้แล้วจะได้ไอเดีย ความน่าสนใจ รูปแบบ การจัดเรียง และข้อมูลของแต่ละแบรนด์ในการทำ Design System มากยิ่งขึ้น

Design Systems

ทุกครั้งก่อนที่จะเริ่มการออกแบบแล้วทางทีม Design และทีม Develop ควรตกลง สื่อสาร และทราบถึงข้อกำจัดในการออกแบบบนแต่ละแพลตฟอร์มก่อนว่าต้องการใช้อะไรบ้าง ควรจะต้องมีอะไรใน Design System หรือรูปแบบนี้จะมีผลต่องานหรือไม่ ช่วยให้สามารถทำงานให้เกิดขึ้นได้จริง และไม่ลำบากต่อการพัฒนาจนเกินไป ซึ่งก็เปรียบเสมือนกับการวางแบบแผนงานที่แน่นอน ชัดเจน จะช่วยให้การออกแบบและพัฒนานั้น เกิดขึ้นไปในทิศทางเดียวกัน ตามความต้องการของผู้ออกแบบและผู้ใช้งาน ช่วยลดระยะเวลาในการทำงานและเพิ่มความรวดเร็วมากยิ่งขึ้นนั้นเอง

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

 

แหล่งอ้างอิง

Written by
Senna Labs
Senna Labs

Subscribe to follow product news, latest in technology, solutions, and updates

- More than 120,000 people/day visit to read our blogs

Other articles for you

01
March, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
1 March, 2024
UX for Psychology - Loss Aversion (ความกลัวการสูญเสีย)
หลายคนคงเคยเจอเหตุการต่างๆ บนโลกดิจิทัลที่สามารถนำพาเราไปเสียเงินหรือสมัครใช้บริการได้ง่าย ๆ ทั้งที่ไม่รู้ตัว ลองมาดูกันว่า พวกเขาเหล่านั้น ใช้วิธีหลอกล่อนักชอปอย่างเรากันอย่างไรบ้าง พื้นฐานของคนทั่วไปนั้นไม่อยากที่จะสูญเสียอะไรไป แม้แต่สิ่งที่อาจจะไม่จำเป็น เราอาจจะพบการทำการตลาดในเชิงนี้ได้บ่อย ๆ ทั้ง ๆ ที่เราไม่รู้ตัว และอาจจะไม่จำเป็นต้องซื้อแต่โดนกระตุ้นด้วยข้อมูลที่เรารับมาแบบงง ๆ เช่น Flash sale 40% สินค้าที่มีจำนวนจำกัด นั้นจะน่าสนใจมากกว่าการเดินเจอสินค้าเดียวกันในห้างที่ลดราคา 40% เช่นเดียวกัน ข้อความบนเว็บช็อปปิ้งที่ส่งมาหาคุณว่าสินค้าที่คุณเคยสนใจกำลังลดราคาอยู่ อย่าพลาดโอกาสที่จะซื้อตอนนี้ มักกระตุ้นความต้องการซื้อของเราได้เป็นอย่างดี เพราะเรากลัวที่จะเสียโอกาสดี

By

3 mins read
Thai
01
March, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
1 March, 2024
ทำไม Google Fonts ถึงเป็นทางเลือกที่ดีในการออกแบบเว็บไซต์
แต่ก่อน เวลาที่เว็บไซต์ถูกดีไซน์ด้วยฟอนต์แปลก ๆ หรือมีเอกลักษณ์เฉพาะตัว จะทำให้ผู้ใช้งานบางคนมองไม่เห็น เพราะในเครื่องของผู้ใช้งานไม่มีฟอนต์นั้น ระบบก็จะเลือกเอาฟอนต์อื่นในเครื่องขึ้นมาแสดงผล เห็นเป็นฟอนต์อื่นไป ทำให้ดีไซเนอร์ต้องแก้ปัญหาด้วยการทำรูปแล้วเอามาแปะในเว็บไซต์แทน หรือแม้ว่าจะแสดงผลตามที่ถูกออกแบบมา ความเร็วก็อาจเป็นปัญหาในการโหลดและเข้าถึง เพราะฟอนต์ถูกโหลดจากเซิร์ฟเวอร์ แต่สมัยนี้ไม่มีใครใจเย็นพอที่จะรออะไรนานๆ เพราะจากรายงานระบุว่า 40% ของคนที่เข้าเว็บไซต์ จะออกหรือปิดทันทีถ้ามีการโหลดนานกว่า 3 วินาที โดยเฉพาะนักช็อปออนไลน์เกือบครึ่งที่พร้อมจะหันหลังให้อีคอมเมิร์ซเว็บไซต์ที่โหลดช้ากว่า 2 วินาที และ 79% บอกว่ามีโอกาสที่จะไม่ใช้บริการอีก Google Fonts คืออะไร? (กันแน่) หลายคนคงรู้จัก Google Fonts แต่วันนี้เราจะพามาทำความรู้จักให้มากขึ้น

By

4 mins read
Thai
01
March, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
1 March, 2024
How SennaLabs helped S&P Food transform their online e-commerce business
S&P Food’s yearly revenues were 435 mils $USD. 10% of the revenue was from online sales. The board of directors felt that online sales should account for more. The digital

By

4 mins read
English

Let’s build digital products that are
simply awesome !

We will get back to you within 24 hours!Go to contact us
Please tell us your ideas.
- Senna Labsmake it happy
Contact ball
Contact us bg 2
Contact us bg 4
Contact us bg 1
Ball leftBall rightBall leftBall right
Sennalabs gray logo28/11 Soi Ruamrudee, Lumphini, Pathumwan, Bangkok 10330+66 62 389 4599hello@sennalabs.com© 2022 Senna Labs Co., Ltd.All rights reserved.