Design Trend 2016

เป็นประเพณีของเว็บ UI Blogazine เราจะมาอัพเดทเทรนด์งานดีไซน์ของปี 2016 กันครับ หนึ่งในเว็บที่ผมแนะนำให้เข้าไปดูเทรนด์ประจำคือ เว็บ Shutter Stock Trends ซึ่งเป็นเว็บซื้อขายภาพมืออาชีพที่ใหญ่มากของโลก ทำให้มีข้อมูลการค้นหาและการซื้อขายภาพในจำนวนมหาศาล (Big Data) เมื่อนำข้อมูลเหล่านี้มาวิเคราะห์ จะทำให้เราทราบถึงเทรนด์ของโลกได้เลยทีเดียวครับ

หลังจากนั้นเราก็อาจเข้าไปดูงานศิลป์ที่ Dribbble, Behance, หรือ Pinterest ก็พอจะทำให้เราเห็นกระแสโลกดีไซน์ได้เยอะทีเดียวเช่นกันครับ แน่นอนครับ เทรนด์ที่ผมนำเสนอมาอาจจะมาจากความคิดเห็นส่วนตัวบ้างด้วย แต่ก็บอกเล่าจากงานที่ผ่านหูผ่านตามาไม่น้อย รองรับชมดูนะครับ

Flat Lay (ภาพถ่ายมุมสูง)

ภาพถ่ายมุมสูงธีมเครื่องสำอางค์

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

ภาพวาดมุมสูงจากเว็บ istockPhoto

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

เครื่องบินบังคับหรือโดรนแบบติดกล้อง

แต่ด้วยเจ้าอุปกรณ์โดรนนี้ที่ราคาไล่ตั้งแต่หมื่นต้นๆ จนอาจเป็นหลักแสน มาช่วยเปิดสร้างโอกาสให้กับนักสร้างสรรค์ที่ชื่นชอบการถ่ายภาพได้มีมิติการนำเสนอผลงานได้หลากหลายยิ่งขึ้น และเห็นโลกเราสวยงามขึ้นในมุมมอง Bird-Eye-View ลองหาซื้อมาไว้สักตัวไหมครับ แล้วจะรู้ว่า… มันแพงเหมือนกันนะ ^^!

 ภาพถ่ายจากโดรน ที่มา: http://forum.eurovelo6-france.com/discussion/1346/printing-services-at-its-best

Boho (ขนนก, ดอกไม้, ใบไม้เล็ก)

ภาพแนวโบโฮ

โบโฮ (Boho) เป็นงานดีไซน์แนวที่เน้นการใช้ขนนกเป็นตัวดึงดูดความสนใจ และใช้ดอกไม้หรือใบไม้แซมๆ ประดับ ในมุมมองส่วนตัว ผมมองว่า มันเป็นเทรนด์ที่ต่อยอดจากปีที่แล้ว เพียงแต่เปลี่ยนตัวละครเด่น จากที่ดอกไม้เด่นในปีที่แล้ว ก็เอาขนนกมาชูโรงแทนหรือเอามาเสริมช่วยสร้างสีสันผลงานให้ดูมีความสมดุลกันระหว่างผลิตภัณฑ์ธรรมชาติจากพืชและสัตว์

ภาพโบโฮแซมด้วยดอกไม้,กิ่งไม้, เขากวางและใบไม้

ภาพโบโฮแซมจะเน้นการใช้ขนนกเป็นหลัก

แนวแฟชันการแต่งตัวสไตล์โบโฮ

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

Sacred Geometry (ภาพเรขาน่าบูชา)

ภาพต้นไม้ที่มีรูปแบบการสร้างด้วยรูปทรงเรขาคณิต

ธรรมชาติได้ซ่อนความงามของมันน่าอัศจรรย์ใจยิ่ง เมื่อรูปลักษณ์ของมันสามารถสร้างได้จากรูปทรงเรขาคณิตพื้นฐานทั่วไป สมัยเด็ก คงมีโอกาสได้ใช้วงเวียนวาดภาพศิลปะจากรูปทรงเรขาคณิตกันใช่ไหมครับ ก็ไม่รู้ว่ายังไงนะครับ แต่มันกำลังเป็นเทรนด์ดีไซน์ปี 2016

ภาพเพดานโบสถ์ที่เกิดจากการสร้างสรรค์ด้วยรูปทรงเรขาคณิต

Sacred Geometry เป็นภาพแนวที่มีองค์ประกอบของวงกลม, เส้นตรง, สี่เหลี่ยม, หรือหลายเหลี่ยม มาวาดเกิดจุดตัดกันอย่างมีระบบระเบียบ จนเกิดเป็นรูปร่างแปลกตาอย่างไม่น่าเชื่อ จนแทบศรัทธาอยากบูชาในความสุดยอดของวิชาเรขาคณิตนี้ขึ้นมาเลยครับ

ผลงานศิลปะที่สร้างจากวงกลม

การออกแบบโลโก้ Apple ที่อาศัยการตัดกันของเส้นเรขาคณิต

การออกแบบโลโก้ที่ดี ควรจะสร้างมาจากรูปทรงเรขาคณิตง่ายๆ นี่แหละครับ เพราะจะทำให้การรับรู้ของสมองเราเป็นไปได้ง่าย อันเกิดจากองค์ประกอบที่เป็นรูปแบบที่เราคุ้นเคยดีอยู่แล้ว เห็นง่ายๆ อย่างงี้ แต่ตอนดีไซน์โลโก้ด้วยแนวคิดนี้ ก็ยากพอตัวเลยนะครับ ดั่งเช่นโลโก้ Apple เป็นตัวอย่างที่เกิดจากการใช้มาตราส่วนทองคำ (Golden Ratio) รวมกับรูปสี่เหลี่ยมกับวงกลมได้อย่างลงตัว (เกินไป)

Metallics (วัสดุเหล็ก)

ภาพหยดฝนโลหะ

ใน Shutter Stock Trend จะแสดงเทรนด์การใช้ภาพวัสดุโลหะเป็นลำดับสุดท้าย เทรนด์นี้ผมคงต้องขอบอกเลยว่า ค่อนข้างเฉพาะเอามากๆ เพราะผมเองก็ไม่ค่อยได้เจอผลงานแนวนี้สักเท่าไร แต่จากข้อมูลของเค้าว่างั้น รู้ไว้ก็ดูน่าสนใจทีเดียวครับ

ภาพดอกกุหลาบแนว Metallics

ภาพตราพิมพ์ตัวเลขโลหะ

Handwriting Letters (ตัวอักษรเขียนด้วยมือ)

ภาพผลงานของ Nicky Laatz

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

ภาพตัวอย่างด้านบน ก็นำเอามุมมอง Flat Lay มาผสมผสานกับตัวอักษรลายมือก็ดูมีสีสันขึ้นเยอะเลยครับ หรือจะเอาฟอนต์ลายมือไปทำหน้าปกหนังสือ หรือสกรีนบนเสื้อยืดก็ดูน่าสนใจนะครับ ( ͡° ͜ʖ ͡°)

ฟอนต์ผลงานของ Nicky Laatz เมื่อนำไปใช้ออกแบบหน้าปกโน้ตบุ๊ค

Conversational UI (UI พิมพ์สั่งการ)

ภาพจาก http://www.theappbusiness.com/blog/chat-as-your-next-interface

แทบเรียกได้ว่าบทความใน Medium (เว็บบล็อคเกี่ยวกับงาน UX/UI Design ชื่อดัง) ในช่วงต้นปีที่ผ่านมา ผมได้อ่านเจอเรื่องเกี่ยวกับ Conversational UI เยอะมาก และต่อไปคงเป็นพระเอกในหลายๆ app ดังๆ ต่อไปแน่นอนครับ

Conversational UI เป็น UI ที่ใช้การพิมพ์ข้อความ (Chat) สั่งการ แทนที่การเลือกกรอกฟอร์มหรือกดปุ่มเพื่อดำเนินการใดๆ เช่น เราแค่พิมพ์ว่า “เรียกแท็กซี่ให้หน่อย ไปเยาวราช ตอนนี้” แอพพลิเคชันก็จะแปลงเอาคำพิมพ์ของเรา ไปสั่งการเปิดแอพ Grab แล้วทำการระบุเป้าหมายปลายทางให้กับเราเลย โดยที่ไม่ต้องมาเสียเวลา เลือกเปิดแอพ > เลือกบริการเรียกแท็กซี่ > ปักหมุดบ้านของเรา > กดปุ่มยืนยัน

ภาพจาก http://mikemoir.com/mikemoir/conversational-ui-paradigm/

ความฉลาดของ Conversaional UI จะขึ้นอยู่กับอัลกอริธึมของ AI ของผู้พัฒนาที่จะรับเอาข้อมูลป้อน (Input) จากทางเสียงหรือการพิมพ์ มาแปรวิเคราะห์ตีความเพื่อทำตามคำสั่งนั้นๆ ในการสั่งการทางเสียง ทาง Apple ก็พัฒนา Siri (สิริ) ขึ้นมา ส่วน Google ก็เป็น Google Voice Search ซึ่งการสั่งการทางเสียงจะมีข้อเสียตรงที่เรื่องสัญญาณรบกวนจะมากกว่าการพิมพ์ และสำเนียงการพูดที่หลากหลายเกินบรรยาย การพิมพ์สั่งการจึงดูเป็นอะไรที่แน่นอนกว่า คาดการณ์ได้ดีกว่า หลายๆ app จึงมีการนำไปใช้งานเรียบร้อย เช่น Line, Slack, Intercom เป็นต้น

Polygon (สามเหลี่ยมก่อเป็นภาพ)

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

ภาพโพลิกอน (Polygon หรือ Low Poly) จาก iStockPhoto

Flat + Diffused Shadow (สไตล์เรียบ แต่มีเงาฟุ้ง)

ผลงานของ WORAWALUNS

การออกแบบ UI ปี 2016 ยังคงเป็นแบบแนว Flat และมีการเล่นระดับ (Layering) ของ UI ด้วยแนวคิด Material Design ของ Google แต่ปีนี้จะพิเศษตรงที่การแสดงผลงาน หรือนำเสนอข้อมูลจะเป็นลักษณะการ์ด (Card) โดยที่แต่ละการ์ดจะใช้เงาฟุ้งหนักหน่อย (Diffused Shadow) ไม่ใช่แค่เงาบาง หรือแค่เส้นขอบอ่อนๆ เหมือนอย่าง Flat UI ยุคแรกๆ

ผลงานของ Sasha Gorosh

วิดีโอสอนการทำเงาฟุ้งด้วย Sketch

หากใครสนใจวิธีการทำเงาฟุ้ง ผมแนะนำให้ดูวิธีการจาก Blog Invision ซึ่งดูเหมือนจะง่าย แต่ถ้าไม่รู้ทริก ก็จะทำได้ไม่สวยนะครับ ในวิดีโอจะใช้ Sketch ทำ แต่ desinger ที่ใช้ Photoshop อาจต้องมีทำขั้นตอนแตกต่างกันหน่อย แต่โดยหลักการแล้วไม่ต่างกันครับ

Color of The Year 2016 (สีแห่งปี 2016)

Pantone องค์กรกำหนดมาตรฐานสีระดับโลกได้ประกาศให้สี Rose Quartz และสี Serenity เป็นสีประจำปี 2016 สีออกนวล แนวพาสเทล (Pastel) เช่นนี้ คงถูกใจผู้หญิงหลายๆ คน Designer อยากลองสีใหม่ๆ คู่สีนี้ก็น่าจะเป็นหนึ่งในนั้นด้วยนะ จะได้อินเทรนด์

โค้ดสีของ Rose Quartz และ Serenity

UI Desgin Tool Getting Better (เครื่องมือออกแบบ UI ดีขึ้นเรื่อยๆ เลย ดีจังᕕ( ᐛ )ᕗ)

การออกแบบ UI กำลังได้รับความสะดวกสบายและรวดเร็วขึ้นเรื่อยๆ ครับ Invision เป็นเว็บแอพที่ช่วยให้เรานำเสนอ flow การใช้งาน UI แบบเสมือนจริงที่นำมาลิงค์ต่อกันแต่ละหน้าให้ยูสเซอร์ได้ลองใช้งาน เพื่อให้ designer ได้เห็นข้อบกพร่อง แล้วทำการปรับปรุงก่อนที่จะส่งตัว mockup ให้กับ developer ไปเขียนโค้ดจริง Invision ยังมีเครื่องมือเสริมอีกเพียบ ไม่ว่าจะเป็นการสร้าง mood board (บอร์ดตัวอย่างอารมณ์โทนสี), การให้ความคิดเห็น (Feedback & Comment), Versioning (การทำเวอร์ชันของชิ้นงาน) เป็นต้น

อีกเครื่องมือหนึ่งที่กำลังพยายามแซงหน้า Photoshop ที่เป็นเจ้าตลาดอยู่ ณ ขณะนี้ คือ Sketch สำหรับสาวกผู้ใช้งาน MAC การใช้งาน Sketch ค่อนข้างตรงประเด็นหากต้องการออกแบบ UI ด้วยเพราะมีเทมเพลตที่พร้อมให้เราเรียกใช้, รองรับการขยายความละเอียดของภาพกราฟฟิคเพื่อให้แสดงผลได้ในระดับ Retina หรือ High Definition, การโคลนข้อมูลซ้ำๆ ที่ง่ายกว่า Photoshop ฯลฯ ทำให้ตอนนี้ Plugin เสริมของ Sketch ถูกทำขึ้นเพียบจนเลือกใช้ไม่ถูกเลยทีเดียว

ทางฝั่ง Adobe เห็นการพัฒนาของ Sketch แล้วก็รู้สึกหวั่นไม่น้อย หากปล่อยไว้เช่นนี้คงต้องเสียส่วนแบ่งของผู้ใช้งานออกแบบ UI แบบมีนัยสำคัญก็เป็นได้ ดังนั้น Adobe จึงเปิดตัวโปรแกรมใหม่ ซึ่งตอนแรกใช้ชื่อ Comet ต่อมาจึงเปลี่ยนเป็นชื่ออย่างเป็นทางการว่า Adobe Expericence Design CC (Xd) ซึ่งเป็นโปรแกรมสำหรับออกแบบ UI โดยเฉพาะ

ฟีเจอร์ของ Xd เรียกได้ว่าจัดมาเพื่อเทียบเคียงกับ Sketch แน่นอน บางฟังก์ชันก็เจ๋งกว่าด้วยนะ ลองดูตัวอย่างการใช้งานนะครับ

อินเทรนด์ใหม่ ไม่ทิ้งเทรนด์เก่า

บทสรุปหลังที่เราได้รู้จักเทรนด์ design ปี 2016แล้ว คงไม่ใช่ต้องทำอะไรตามๆ เทรนด์ปีนี้อย่างเดียว และทิ้งเทรนด์เก่าปีที่แล้ว อยากจะให้เรารับสิ่งใหม่ๆ นี้เข้าไปในองค์ความรู้ของเราเท่านั้น ส่วนเทรนด์เก่าๆ เช่น Long Shadow (ทำเงายาวๆ) ก็ยังสามารถหยิบยืมมาใช้สร้างสรรค์ผลงานได้เช่นกันนะครับ เราจะได้มีเทคนิคนำเสนอผลงานได้เยอะขึ้น ลูกค้าหรือยูสเซอร์ของเราจะได้ตื่นตาตื่นใจเมื่อได้ใช้งานหรือดูสื่อกราฟฟิค

ขอให้สนุกกับงาน design ปี 2016 นะครับ <(￣︶￣)>