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

อยากเป็น UX/UI Designer ต้องเรียนอะไร
Design

อยากเป็น UX/UI Designer ต้องเรียนอะไร? แนะนำเส้นทางพาคุณย้ายสายสู่นักออกแบบบน Digital Product

ตอนนี้หลายคนคงกำลังสนใจสายงานใหม่มาแรงอย่าง UX/UI Designer ที่กำลังเป็นที่สนใจ และเป็นที่ต้องการในตลาดอย่างมาก เพราะไม่ว่าจะเป็นบริษัทแบบไหนต่างก็ต้องปรับตัวออก Digital Product อย่าง Website หรือ Application ออกมา  แต่เป็นอาชีพที่มีความรู้เฉพาะตัวแบบนี้ ต้องเริ่มเรียน ...
Business

ทำความรู้จัก Voxel Art งานกราฟิก 3D ยอดฮิตที่สร้างได้ตั้งแต่ Item, Character ยันเมือง

หลายๆ คนอาจจะคุ้นหน้าคุ้นตากับงานภาพสไตล์ Pixel Art หรืองานภาพ Computer Graphic แบบ 8bit ที่ทำให้เรานึกถึงอดีตกันมาบ้างแล้ว (ถ้าใครนึกไม่ออกก็ลองคิดถึงภาพ Arcade Game อย่าง Pac-Man ...

More in:Design

Design

รวม Figma Plugin 2022 ออกแบบไว ใช้งานได้จริง!

ในยุคที่คนทำงานออกแบบ UX/UI เกือบทุกคนหันมาใช้เครื่องมือมาแรงแห่งยุคอย่าง Figma กันอย่างจริงจัง เนื่องจากหน้าโปรแกรมที่เข้าใจง่าย ส่งต่องานกับทีมได้อย่างไม่มีสะดุด ใช้งานแบบฟรีก็ทำได้ แถมมาพร้อมลูกเล่นมากมายที่ช่วยให้งานออกแบบในยุคนี้ทำได้ง่ายกว่าเมื่อก่อน มี Community ที่เปิดให้ทุกคนมาแชร์ widgets หรือ plugins ...
Design

Figma คืออะไร? ทำไมถึงเป็น Tool มาแรงที่สุดในวงการ Design!

Figma คืออะไร ??? ทำไมจึงเป็นเครื่องมือออกแบบอันดับ 1 ที่ UXUI Designer ทั่วโลกเลือกใช้  Figma คือเครื่องมือออกแบบที่ขึ้นแท่นอันดับ 1 ในปี 2022 โดยสามารถใช้ออกแบบได้ตั้งแต่เว็บไซต์, ...
UX Writing คืออะไร Design

ไขข้อข้องใจ! UX Writing คืออะไร ทำไมสำคัญกับ Product พร้อมตัวอย่างน่าสนใจ

UX Writing คืออะไร? ทำไมต้องรู้จักคำนี้ด้วยนะ? คุณอาจจะเคยผ่านการใช้งาน Application มากหน้าหลายตาในแต่ละวัน ซึ่งแอปฯ บางตัวก็ทำให้คุณรู้สึกดีตลอดการใช้งาน เข้าแล้วไม่อยากออก เข้าแล้วอยากเข้ามาใช้บ่อยๆ ทุกวัน แต่กลับกันกับแอปฯ บางตัวที่ทำให้คุณหงุดหงิดใจตลอดการใช้งาน อยากออกแทบตาย ...
Web Design Font Pairing Design

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

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

Comments are closed.