ui-design-Cover
Design

ถอดองค์ประกอบการออกแบบ UI ที่ดี ด้วยหลัก ‘Component-based Design’

สิ่งหนึ่งที่สำคัญมากในการออกแบบ UI ที่นักออกแบบทุกคนควรรู้ นั่นคือเรื่องของ ‘Component-based Design’ คือการมองแยกส่วนประกอบต่างๆ ที่ร่วมกันเป็นหน้าเว็บไซต์หรือแอปฯ ที่เราออกแบบว่ามีส่วนประกอบมาจากอะไรบ้าง

dot-line-plane-shape

หากใครผ่านการเรียนการออกแบบมาก่อน อาจจะคุ้นเคยกับหลักองค์ประกอบการวาดรูปที่เริ่มตั้งแต่จุด จุดต่อกันกลายเป็นเส้น จากเส้นต่อกันเป็นระนาบ และระนาบประกบกันเป็นรูปทรง

ui-identity-element

เช่นเดียวกันกับการออกแบบ UI เราจะเริ่มออกแบบแอปฯ หรือเว็บไซต์ จากองค์ประกอบที่เล็กที่สุดก่อน กำหนด Identity เช่น สี, Text และไอคอนต่างๆ จากนั้นก็เอามาประกอบกัน เอา Text มาประกอบกับกล่อง เอาไอคอนมาทำเป็นปุ่มต่างๆ นั่นคือ Element

ui-component-composition

จากนั้นก็เอารูป เอากล่อง และ Text ต่างๆ มารวมกันเป็น Component ใส่คอนเทนต์ต่างๆ ลงไปได้ และเอามาเรียงกันเป็น Composition

UI-Layout-page

จากนั้นก็นำมาจัดวางเป็น Layout และกลายเป็น Page หรือหน้าเว็บในที่สุด

เพื่อจะให้เห็นตัวอย่างมากขึ้น เราจะลองมาแยกองค์ประกอบจากหน้าเว็บของ Airbnb กันดูให้เห็นชัดๆ

UI-Design-airbnb-page

เริ่มต้นที่ภาพหน้าเว็บของ Airbnb เรามองรวมๆ จะเห็นเป็นหน้าเว็บหนึ่งหน้า (Page)

UI-Design-airbnb-layout

ลองมองแยกส่วนประกอบดูเราจะเห็น Layout ของเว็บ

UI-Design-airbnb-composition

ลองโฟกัสแยกไปที่ section ต่างๆ จะเห็น Composition

UI-Design-airbnb-component

พอแยกลงมาใน Component จะเห็นว่าจริงๆ แล้วมีแค่สอง Component เท่านั้น ที่เอาไปใช้ซ้ำๆ กันตลอดทั้งหน้าเว็บ

UI-Design-airbnb-element

มองละเอียดลงมาอีกใน Element จะเห็นส่วนย่อยๆ เป็นรูป Text และกล่องสี่เหลี่ยม

Ui-Design-airbnb-identity

จากนั้นก็มาดูในส่วนที่ละเอียดที่สุด เราจะรู้กระทั่งว่า Text ที่ใช้อยู่นั้นคือ Font อะไร ขนาดเท่าไหร่

UI-Design-airbnb-all-platform

การมองแยกองค์ประกอบแบบนี้มีประโยชน์มากเมื่อต้องออกแบบ Responsive Design และจะเอาดีไซน์ไปบนหน้าจอหรือระบบปฏิบัติการที่แตกต่างกันก็จะทำได้ง่าย ไม่ว่าจะเป็น iOS, Android หรือ เว็บ เป็นต้น

UI-Design-with-Figma

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

.
🚩 ดูรายละเอียดคอร์สได้ที่ 👉 https://to.skooldio.com/FIwOp5oZjkb

You may also like

Behavioural Science คืออะไร
Business

Behavioural Science คืออะไร มารู้จักกับเครื่องมือออกแบบพฤติกรรมกันดีกว่า

เชื่อว่าหลายๆ คนอาจจะเคยตั้งคำถามกับตัวเองว่ารู้ทั้งรู้ว่าการลดน้ำหนักเป็นเรื่องที่ดี แต่ทำไม่ได้สักที หรือบางทีอยากออมเงินให้ได้ตามเป้า แต่ก็ล้มเหลวไปซะทุกที แต่พอมาใช้ Application กลับช่วยให้เราเดินตาม Resolution ได้ง่ายขึ้น เหมือนตั้งใจออกแบบมาให้เราปรับพฤติกรรมโดยเฉพาะ หรือนโยบายบางอย่างขององค์กรทำไมถึงตอบโจทย์พนักงานขนาดนี้นะ  มารู้จักกับเทคนิคเบื้องหลังสิ่งเหล่านี้กันว่า Behavioural Science ...
Web Design Font Pairing
Design

เทคนิคการจับคู่ฟอนต์ไม่ให้เละ ฉบับ Web Designer มือโปร

หนึ่งในปัญหาใหญ่ของคนเริ่มต้นออกแบบเว็บ คือเรื่องของการเลือกใช้ฟอนต์ที่ดูเหมือนง่ายแต่ยาก ยิ่งเป็นเรื่องของการจับคู่ฟอนต์ที่ต่างกันให้มาอยู่ด้วยกันอย่างลงตัวสวยงามยิ่งยากเข้าไปใหญ่ วันนี้เราเลยนำรวมเทคนิคดีๆ ในการจับคู่ฟอนต์ฉบับ Web Designer มือโปรมาเล่าสู่กันฟัง 1.ใช้ฟอนต์ที่ให้ระดับอารมณ์แตกต่างกัน หน้าตาของฟอนต์มีผลต่ออารมณ์ความรู้สึกของคนอ่าน การลองจับคู่ฟอนต์ที่ให้อารมณ์แตกต่างกันจะช่วยให้หน้าเว็บดูมีลูกเล่น น่าสนใจ ไม่ราบเรียบจนเกินไป ก่อนที่จะเลือกจับคู่ฟอนต์ ต้องพิจารณาก่อนว่าบุคลิกเว็บที่เรากำลังออกแบบเป็นอย่างไร ...

More in:Design

psychology ux ui blog cover Design

หลักจิตวิทยากับการช่วยออกแบบ UX UI ให้ชีวิต User ง่ายขึ้น

ใครที่กำลังทำงานหรือศึกษาเรื่อง UX UI น่าจะเคยผ่านตาเรื่องของหลักจิตวิทยาการออกแบบที่นำมาใช้กับ UX UI กันบ้างแล้ว แต่เอาเข้าจริงแล้วในฐานะคนที่เป็นหรืออยากเป็น UX/UI Designer ควรมีความรู้พื้นฐานด้านจิตวิทยามากน้อยแค่ไหน โดยหลักการแล้วหลักจิตวิทยาจะช่วยให้ User ใช้งานเว็บหรือแอปฯ ที่เราออกแบบได้อย่างมีประสบการณ์ที่ดีได้อย่างไร ...
Business

ทำความรู้จัก Design Thinking – สกิลมาแรงที่บริษัทชั้นนำทั่วโลกกำลังมองหา

Design Thinking ไม่ใช่แค่ชื่อวิชาในคลาสเรียนของเด็กออกแบบ แต่เป็นสกิลที่กำลังเป็นที่ต้องการของบริษัทชั้นนำในหลายประเทศทั่วโลก เช่น Apple, Google , Microsoft, Tesla หรือ Startup ไทยอย่าง Bitkub อีกด้วย ...
Business

วิธีสร้าง Pitch แบบโอมากาเสะ – ด้วย Storytelling Framework

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

ทำ Data Visualization ให้เวิร์ก – กับ 9 แหล่งความรู้ที่มือโปรแนะนำ

แนะนำ 9 แหล่งความรู้อัปสกิล ซึ่งสรุปจากไอเดียของ 4 Speakers ผู้เชี่ยวชาญในวงการ Data Visualization ที่ไปพูดคุยใน Skooldio Live ตอน The Power ...

Comments are closed.