UI Moodboard : Let’s serve style before start 🌟

UI Moodboard คืออะไร แล้วดียังไง มาดูกัน !

Rawpixel.com

Introduction

เมื่อลูกค้าเลือกคุณให้ออกแบบเว็บไซต์หรือแอปพลิเคชันให้ ก่อนจะเริ่มออกแบบ User Interface หรือ UI ทีละหน้า คุณจะรู้ได้ยังไงว่านี่แหละคือสไตล์ที่ใช่ ✅

แน่ล่ะว่าภาพในหัวของตัวนักออกแบบเองและลูกค้า ย่อมมีรูปร่างหน้าตาแตกต่างกัน “อยากได้แอปสไตล์หวานๆ สำหรับสาวๆ วัยทำงานใช้ เน้นสีชมพูนะ” ฝั่งลูกค้าอาจมองเห็นแอปเป็นสีชมพูล้วนเหมือนนมเย็น ข้อความสีขาว รายล้อมด้วยดอกไม้โปรยปราย🌸 แต่นักออกแบบอาจมองแอปเป็นสีชมพูบานเย็นเฉพาะองค์ประกอบหลักพื้นหลังสีขาว ตามด้วยข้อความสีเทาเข้มอ่านง่ายๆ ไม่ได้มีดอกไม้อยู่ในหัวเลย .. ก็เป็นไปได้

Rawpixel.com

เมื่อคุณส่งงานแรกให้ลูกค้า อาจจะเป็นตัวอย่าง UI ประมาณ 2–3 หน้าที่คุณทุ่มใช้เวลากับมันเต็มที่ แต่ผลลัพธ์กลับไม่เป็นไปตามหวัง ไม่ได้ตรงใจลูกค้าเลย😢 กว่าจะปรับจูนกันได้ อาจตามมาด้วยการส่ง Reference ภาพตัวอย่างกลับมากลับไป หากเป็นไปด้วยดี ก็สามารถร่วมงานกันต่อไป ได้ผลงานที่ตรงใจลูกค้า แต่อาจต้องแลกมาด้วยการปรับเปลี่ยนระหว่างทำงาน, การสื่อสารที่ลดทอนกำลังใจทั้งสองฝ่าย ฯลฯ

จะดีกว่าไหม ถ้ามีอีกทางให้คุณเลือก สามารถลดปัญหาดังกล่าว ลดความคลุมเครือ เพิ่มความชัดเจน และทำให้คุณมีความสุขกับการออกแบบ UI มากขึ้นได้ มาลองทำความรู้จักกับมันดู UI Moodboard

Moodboard

เป็นบอร์ดรวบรวมไอเดียให้ออกมาเป็นภาพ ไม่ว่าแบบนิ่งหรือเคลื่อนไหว เพื่อแสดง Moods | Look & Feel ของงาน ถูกใช้กันอย่างแพร่หลายในงานสายศิลปะ จุดประสงค์เพื่อเป็นเครื่องมือสื่อสารให้มองเห็นไอเดียเป็นภาพเดียว โดยองค์ประกอบที่เลือกมาแสดงขึ้นอยู่กับงานที่นำไปใช้ เช่น บางบอร์ดมีไว้เพื่อรวบรวมงานต้นแบบที่นักออกแบบอ้างอิงมา, บางบอร์ดแสดงชุดรูปภาพที่มองเห็นและสามารถทำให้ผู้ชมเข้าถึงอารมณ์ของงาน และมองภาพรวมของงานได้ชัดเจนตั้งแต่ต้น, บางบอร์ดแสดงชุดสีที่ใช้ หรือรูปแบบการเคลื่อนไหว ซึ่งหลายคนอาจจะเคยเห็นผ่านตากันมาบ้างแล้ว

toptal.com/designers/visual-identity/guide-to-mood-boards

design.google/library/evolving-google-identity

UI Moodboard

เป็นบอร์ดเฉพาะสำหรับงานออกแบบ UI ที่มีจุดประสงค์เดียวกันกับ Moodboard ในงานประเภทอื่น คือเพื่อรวบรวมองค์ประกอบต่างๆ ในงานออกแบบ UI แสดงให้ผู้ชมได้ยลโฉม ไม่ว่าจะเป็นดีไซน์เนอร์ในทีมเดียวกัน, โปรแกรมเมอร์ หรือลูกค้า จะมองเห็นไปในทิศทางเดียวกันว่า งานออกแบบนี้จะดำเนินไปไหนทิศทางไหน สไตล์อะไร สัมผัสได้ถึง Moods | Look & Feel ของงาน สามารถวิเคราะห์ร่วมกันได้ว่า มีสิ่งไหนไม่เหมาะ ควรปรับให้สมบูรณ์เข้ากับงานมากยิ่งขึ้น ก่อนที่จะดำเนินการออกแบบในขั้นถัดไป

ภาพด้านล่างเป็นตัวอย่าง UI Moodboards บางส่วน ที่ทำขึ้นโดยทีมดีไซน์ของ 20Scoops CNX ขออนุญาตปกปิดเนื้อหาบางส่วนเพราะเป็นความลับบริษัทค่ะ 😃

Example of UI Moodboards : 20Scoops CNX Design Team

UI Moodboard : Its strength

💪😘 ต่อนักออกแบบ : ไม่ว่าจะลุยเดี่ยว หรือออกแบบเป็นทีม Moodboard จะช่วยให้เราสามารถรวบรวมไอเดีย องค์ประกอบ สไตล์ สร้างทิศทางการออกแบบที่เราต้องการนำเสนอลูกค้าออกมาให้เห็นเป็นรูปธรรม อีกทั้งยังสามารถใช้เป็นสื่อกลางในการพูดคุย กำหนดขอบเขตของงาน และลดปัญหาที่อาจเกิดขึ้นได้ภายหลัง

💪😍 ต่อลูกค้า : มองเห็นภาพรวมของงาน สไตล์ อารมณ์ ถูกใจใช่ตามที่ต้องการไหม สามารถพูดคุยกับดีไซน์​เนอร์ได้เลยว่าต้องการปรับเปลี่ยนจุดไหน อะไรที่ใช่ / ยังไม่ใช่ เสริมความเชื่อมั่นระดับหนึ่งก่อนตัดสินใจจ้างนักออกแบบ

บอร์ดที่ออกแบบได้ดี ชัดเจน จะเหมือนกับการวิดีโอคอลแบบใช้ Wifi แรงสูง ทำให้ทั้งสองฝั่งเห็นภาพชัด เสียงคม สื่อสารกันได้รู้เรื่อง

HOW TO

จะเป็นการเริ่มต้นที่ดี หากเรามีข้อมูลที่เป็นประโยชน์พร้อมในมือ ไม่ว่าจะเป็นข้อมูลเกี่ยวกับแบรนด์ที่เรากำลังพัฒนาเว็บไซต์หรือแอปพลิเคชันให้อยู่, ข้อมูลความต้องการของกลุ่มผู้ใช้งาน (Target Group / End User) หรือลูกค้าที่จ้างงาน (Customer) ล้วนเป็นประโยชน์ในการจุดประกายไอเดีย ✨

เมื่อเรามีข้อมูลเบื้องต้น ลองนึกถึงอารมณ์หรือ Moods ที่เข้ากับระบบนั้นๆ ดู เราจะลองสมมุติสถานการณ์ประกอบ (Example Situation) เพื่อให้เข้าใจได้ง่ายขึ้น สมมุติว่าเราได้รับ Requirement มาว่าต้องการแอปพลิคลิชันแพลตฟอร์ม iOS ชื่อ Blossom Girl สำหรับเด็กผู้หญิงอายุแปดขวบขึ้นไปไม่เกินสิบสี่ ใช้ในการวาดรูประบายสีแบบง่าย อยากให้แอปมีสีสันไม่ฉูดฉาดเป็นโทนสี Pastel อ่อนหวาน ชมพู เขียว ขาว แบบไม่ทำร้ายสายตา ดูน่ารักน่าใช้ โดยให้ภาพ Reference มาเป็น..

เราจะเริ่มจากลองนึกภาพสไตล์งาน UI ที่เข้ากับน้องๆ ว่าแอปจะออกมาเป็นสไตล์ไหนได้บ้าง คิดสไตล์ที่โดนใจไว้สัก 2–3 สไตล์ ถ้าคิดไม่ออกจริงๆ🤔 ให้ลองหาแรงบันดาลใจจากแหล่งที่เป็นประโยชน์ เช่น ลองศึกษาแอปวาดรูปสำหรับเด็กที่ดังๆ ได้เรทติ้งสูงๆ ดูว่า เขาออกแบบมาสไตล์ไหน อะไรคือข้อดีข้อเสีย คิดว่าเขามีเรื่องราวในการออกแบบยังไง ทำไมผู้ใช้ที่เป็นเด็กหญิงอายุแปดถึงสิบสี่ถึงติดใจใช้งาน อย่าลืมนะ! ว่าขั้นตอนการทำ Moodboard นี้เราจะยังไม่โฟกัสไปที่ ต้องมีฟังก์ชันอะไร ทำงานได้แบบไหน แต่เราจะโฟกัสไปในเรื่องอารมณ์และสไตล์ของงานเป็นหลัก

เราใช้วิธีกำหนด Keyword ให้บอร์ดที่เรากำลังออกแบบอยู่ มันทำให้เรากำหนดขอบเขตให้การค้นคว้าของตัวเองได้ง่ายขึ้น

Moods
Optimistic, Loving

Tone
Happy, Fanciful

Style
Light theme, Clean, Girl

จากนั้นจึงละเลงหาองค์ประกอบต่างๆ มาวางรวมๆ กันไว้ โดยในหนึ่งบอร์ด องค์ประกอบที่แนะนำให้มีใน UI Moodboard คือ

1. Color Palette

ชุดสีหลักที่ใช้ มีสีอะไรบ้าง สีไหนเป็นสีหลัก สีรอง สีที่ใช้กับชุดข้อความ ใช้กับพื้นหลัง ฯลฯ ยังไม่ต้องลงละเอียดถึงขั้นเลือกสีแดงเฉดนี้ใช้กับ Error case สีเหลืองเฉดนี้ใช้กับ Warning แต่เน้นเฉพาะชุดสีหลักพื้นฐานที่บ่งบอกถึงอารมณ์ของงานนั้นๆ ได้

Example Situation : ในงานแอปวาดรูปของน้อง บอร์ดแรกที่เราคิดไว้เป็นสไตล์ Pastel แบบคลีนๆ ชมพูตัดขาว ชุดสีที่เราเลือกมาใช้เป็นโทนชมพู Pastel ตัดเขียว มีเหลืองส้มปนๆ สำหรับใช้เน้น พื้นหลังสีขาว และข้อความสีน้ำตาลเข้ม โดยสุดท้ายเราเลือกตัดทอนให้เหลือเฉพาะชุดสีหลัก ที่คิดว่าสามารถถ่ายทอด Mood ได้ ออกมาเป็นสามสีในฝั่งขวา

2. Fonts

Font หรือ Typeface ที่ใช้มีอะไรบ้าง ควรเลือกมาอย่างน้อย 1–3 ฟอนต์ต่อ 1 บอร์ด เพื่อให้ผู้ชมได้เห็นรูปแบบที่ต่างกันได้พอสมควร หัวข้อจะแสดงยังไง ถ้าเป็นคำบรรยายจะแสดงแบบไหน เราสามารถทดลองโดยหาชุดข้อความตัวอย่างที่เกี่ยวข้องกับแอปมาลองใช้กับ Font ที่เราเลือก เป็นการคาดการณ์ล่วงหน้าว่าถ้าใช้จริงจะออกมาประมาณไหน เข้ากับแอปอย่างที่เราคิดจริงไหม

Example Situation : เราเลือกโชว์สไตล์หัวข้อกับเนื้อหาหรือ Title/Header กับ Body เพื่อให้เห็นความต่างชัดเจน โดยเลือกข้อความเนื้อหาเป็นสไตล์ Sans-serif อ่านได้ง่าย ในกรณีที่ต้องแสดงข้อความยาวหลายบรรทัด เช่น ในหน้าข้อตกลง, ระเบียบการใช้งาน, วิธีใช้ หรืออื่นๆ ส่วนหัวข้อเราเลือกเป็นแบบ Handwriting เพื่อสื่อถึงอารมณ์อ่อนหวาน เหมือนใช้ดินสอ หรือสีสร้างอักษร ให้เข้ากับตัวแอป

3. Photography / Illustration style

Photography และ Illustration style จะเป็นการแสดงตัวอย่างภาพถ่าย และภาพประกอบที่จะแสดงในแอป จะเป็นส่วนที่สื่ออารมณ์ของ Moodboard ได้เข้าใจง่ายที่สุดเพราะมองออกมาเป็นภาพ

Photography Style เป็นประโยชน์มากสำหรับแอปที่เน้นแสดงรูปภาพหรือภาพประกอบ เช่น แอปขายสินค้า เสื้อผ้า ที่ต้องการควบคุมให้กราฟฟิกในแอปเป็นไปในทิศทางเดียวกัน ใน Moodboard เราควรนำเสนอรูปถ่ายตัวอย่างสินค้า ว่าภาพถ่ายแนวไหน ถึงจะเข้ากับสไตล์ UI ที่เรากำลังทำอยู่

หลายครั้งที่เราเจอแนวภาพที่ Object มันใช่! นี่แหละ Mood ที่เราตามหา แต่สีของภาพคือต่างจากชุดสีใน Moodboard เราไปโดยสิ้นเชิง เราจะเลือกนำภาพมาปรับสีให้เป็นโทนเดียวกับชุดสีที่เราวางไว้ เพื่อรักษาอารมณ์ของบอร์ดให้อยู่ภายในกรอบไม่หลุดไปไกล หรือแตกแยกออกมา ( 📝 แนะนำเช็คลิขสิทธิ์ของภาพก่อนน้า ว่าสามารถนำมาใช้ได้ไหม)

Example of Photography from Netflix, PULL&BEAR, SHEIN

Illustration style สำหรับแอปที่ต้องมีภาพประกอบ การใช้ภาพประกอบใน UI อาจมาในรูปแบบของ Empty State หน้าว่างไม่มีข้อมูล มีตัวการ์ตูนน้อยๆ โผล่มาต้อนรับ หรือเป็นภาพประกอบสำหรับเนื้อหา ตัวอย่างภาพประกอบที่เราเลือกมาใช้ใน Moodboard ควรชัดเจนว่าเป็นสไตล์ไหน เช่น ภาพประกอบแบบสีน้ำไหม, ภาพการ์ตูนญี่ปุ่น, ภาพ 2D แบบ Flat เน้นเป็น Object, ภาพ 2D แบบ Flat เน้นเป็นภาพบุคคลพร้อมท่าทาง หรือจะเป็นภาพแนวสามมิติ เป็นต้น

www.franlabuschagne.com

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

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

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

4. Iconography

ไอคอนสไตล์ไหนที่เหมาะจะใช้กับแอป เราจะเลือกมาแสดงซัก 1 เซ็ต ประมาณ 5–10 ไอคอน (อาศัยพลังขยันล้วนๆ 😂) โดยจะเป็นไอคอนที่มีความหมายเกี่ยวข้องกับแอป และคิดว่าน่าจะได้ใช้ เพราะฟังก์ชันคืออะไรตอนนี้ยังไม่รู้ชัด เช่น แอปกดเงิน เราจะเลือกไอคอนเซ็ตบัตรเครดิต เหรียญ ธนบัตร ฯลฯ ส่วนแอปเสื้อผ้าเราจะเลือกเป็นไอคอนรถเข็น เสื้อยืด กางเกง แว่นตา ฯลฯ

Flaticon.com

Thenounproject.com

สไตล์ไหนดี? มีไอคอนหลากหลายสไตล์มากกกกก Filled, Rounded, Outlined, Sharp บลาๆ จะรู้ได้ไงว่าควรใช้สไตล์ไหน ตอนเลือกไอคอนลองถามตัวเองกลับอีกทีว่าไอคอนสไตล์นี้ตอบโจทย์ Moods ที่เรามีในหัวไหม เช่น เราต้องการให้ Moodboard นำเสนออารมณ์เข้มแข็ง หรูหรา เฉียบๆ แบบเห็นแล้วอู้วววดูแพง💸 เราคงไม่เลือกไอคอนสไตล์ Drawing ที่ดูอิสระเกินไป หรือไอคอนแบบ Rounded ที่อาจจะดูเป็นมิตรมากไป สิ่งนี้แหละจะช่วยเราตัดสินเบื้องต้นได้ว่าเป็นสไตล์ที่ใช่ หรือไม่ใช่

Example Situation : เราเลือกไอคอนสไตล์ขอบมนหรือ Rounded แบบไม่มีลูกเล่นอะไรมากให้แอป เพื่อให้ดูเป็นมิตรกับผู้ใช้ ไม่น่ากลัวสำหรับน้องๆ และเข้าใจได้ง่ายว่าคือไอคอนอะไร โดยไม่ใช้ Text ช่วยอธิบาย

5. App Bar Style / UI 1 Page

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

ถ้าเป็นการออกแบบแอปพลิเคชัน เจ้าตัว App Bar (Android) หรือ Navigation Bar (iOS) จะเป็นส่วนสำคัญที่ทำให้เข้าถึงอารมณ์งานได้ดี ลองนึกภาพตามนะคะ ถ้า UI App Bar มีรูปแบบมาตรฐานตรงตาม Design Guideline ใช้ชุดสีอ่อน ตามด้วยไอคอนเมนูแบบเหลี่ยม ย่อมให้อารมณ์แตกต่างจาก App Bar แบบ Custom ใช้ชุดสีเข้ม ไม่มีไอคอนเลย แสดงเมนูเป็น Text Link แบบอักษรตัวพิมพ์ใหญ่

นอกจาก App Bar จะทำให้เข้าถึงอารมณ์และภาพลักษณ์ของ UI เราได้แล้ว ยังเป็นส่วนที่เราสามารถนำชุดสีที่วางไว้, ไอคอนที่มี, ฟอนต์ที่เลือก มาแสดงตรงส่วนนี้ได้ หากได้ออกแบบโปรเจคเว็บไซต์ เราก็เลือกแสดง Navigation Bar ของหน้าเว็บแทน

Android App Bar & iOS Navigation Bar

จะแสดงแค่ส่วนนำทางก็กระไร การวางเจ้า App Bar ไว้โดดๆ ยังไงก็ไม่มีทางทำให้ทุกคนเข้าใจไปในทางเดียวกันได้ว่าแอปจะออกมาหน้าตาแบบไหน การแสดงให้เห็น UI ทั้งหน้าชัดกว่าอยู่แล้ว ให้ลองเลือก UI หน้าหลักที่เราคิดว่าเป็นส่วนที่แสดงสไตล์ของแอปนี้ออกมาได้มากที่สุด คล้ายๆ กับเวลาเราใช้แอปอะไรบ่อยๆ แล้วเรากำลังจะเล่าเม้าท์มอยให้เพื่อนฟังว่าแอปนี้ดียังไง ภาพ Screenshot แรกที่แว้บเข้ามาในหัวคือหน้าไหน โอ้ยเห็นรู้เลยอ่ะว่าเป็นแอปนี้ๆๆ📍 เลือกหน้านั้นแหละมาทำตัวอย่าง UI

Unsplash.com @brucemars

ถ้าอยู่ในขั้นที่เราได้รับ Requirement มาแบบไม่จัดเต็ม เช่น Log in ได้ด้วย Social Media เอาล่ะซิ Social Media สมัยนี้มีไม่รู้กี่สิบร้อย ในตัวอย่าง UI ที่เราจะออกแบบเพื่อให้เห็นสไตล์ เราไม่จำเป็นต้องลงลึกถึงรายละเอียด แต่เราสามารถจำลองฟังก์ชันขึ้นมาก่อนได้จากข้อมูลที่มีอยู่

มีหลายครั้งเหมือนกันที่เราตัดสินใจเลือกไม่ได้ว่าควรทำหน้าไหน เพราะชั่งใจยังไงก็ดูสำคัญไปหมดทุกหน้า😭 หรือลูกค้า Request มาเลยว่าอยากได้มากกว่า 1 หน้าคือหน้านี้กับหน้านู้น พร้อมระบุฟังก์ชัน เราสามารถทำตามนั้นได้เลยนะ ปรับให้เข้ากับสถานการณ์

Example Situation : เนื่องจากลูกค้า(ที่ไม่มีจริง😛) ของเราต้องการแอปสำหรับ iOS ดังนั้นตัวอย่าง UI ที่เราทำ จะเลือกขึ้นบน Artboard Screen Size ของ iPhone XS ใน 1X Scale หลังออกแบบเสร็จ เราเลือกนำ Mockup Device มาใส่ เพื่อทำให้ดูสมจริงขึ้น แต่ยังเข้ากับอารมณ์ที่ต้องการสื่ออยู่ ด้วยตัวเครื่องสีขาว และตัดทอนส่วนประกอบจริงของตัวเครื่องบางส่วน

6. Spatial Awareness (or white space usage)

เคยไหมเวลาเห็นงาน UI สวยๆ ที่มีฟังก์ชันเยอะยั้วเยี้ย แต่มันกลับถูกจัดเรียงออกมาได้ดูดี สวย เข้ากันได้สมบูรณ์ในทุกๆ หน้า ปัจจัยหนึ่งที่ช่วยได้คือเรื่องระยะห่างการจัดว่าง หรือ Spatial Awareness

ไม่ได้พิมพ์ผิดนะ คือการจัดว่างจริงๆ ในขั้นตอนนี้เราจะพิจารณาถึงระยะห่าง ที่เป็นช่องว่างหรือ White Space ว่าเราเลือกจัดวางองค์ประกอบให้มีระยะห่างจากกันเท่าไหร่ สามารถเลือกใช้

• Grid System เข้ามาช่วยว่าพื้นที่ไหนวางอะไรได้บ้าง?
• Margin พิจารณาค่าระยะห่างระหว่างแต่ละกราฟฟิก
• Line Height พิจารณาระยะห่างระหว่างบรรทัดของชุดข้อความตัวอย่าง
• การจัด Alignment ของชุดข้อความตัวอย่าง ชิดซ้าย อยู่ตรงกลาง หรือชิดขวา

งานที่มีพื้นที่ว่างต่างกัน จะสื่ออารมณ์ที่ต่างกันอย่างเห็นได้ชัด

Example Situation : เราลองจัดให้กราฟฟิกในฝั่งซ้ายใกล้กัน เพื่อให้ดูใกล้ชิด ไม่ห่างเหิน แต่พอลองพิจารณาอารมณ์ใกล้ชิดไม่ห่างเหินแล้ว ดูจะเลยเกินไปเป็นอึดอัด😥 เลยลองเปลี่ยนค่าระยะห่างต่างๆ เป็น 16px ขั้นต่ำ ไล่จากค่า 16px, 32px, 40px, 48px, … เรื่อยไป เข้าใกล้กับคอนเซปต์แอปที่คิดไว้มากกว่า จึงได้ออกมาตามภาพฝั่งขวา

7. Overall Contrast (helps emphasise hierarchy & structure)

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

Example Situation : เราไม่ควรเริ่มต้นด้วยการวาง Layout ให้เป๊ะก่อนตั้งแต่แรก เพราะอาจจะทำให้ไอเดียที่เรามีถูกตีกรอบไว้ด้วยรูปแบบที่กำหนด แรกๆ เราจะเพิ่มทุกอย่างเข้าไปวางแบบคร่าวๆ ไม่จำกัดรูปแบบ เพื่อเทียบให้เห็นคร่าวๆ ว่าแต่ละองค์ประกอบที่เลือกมา เข้ากันได้ไหม มีตรงไหนผิดแผกแปลกไปหรือเปล่า

หากมั่นใจว่ามาถูกทาง ให้เริ่มจัดวางในรูปแบบที่เราต้องการได้เลย ลุย! ไม่จำกัดว่าต้องเป็น Layout แบบไหน จะแนวตรง ตั้ง ทแยงมุม สามารถจัดให้เข้ากับงานของเราได้เลย ลองนึกภาพตามนะคะ ถ้าเป็นงานที่เป็นทางการต้องส่งภาครัฐ แน่นอนว่า Layout ที่เหมาะสมที่สุดต้องเรียบง่าย เป็นระเบียบ ไล่สายตาดูได้ง่าย หรือหากเป็นงานของบริษัทเทคโนโลยีล้ำๆ อวกาศ เราอาจเลือกเป็น Layout อื่น ข้อมูลพุ่งทะยานมาจากฝั่งซ้าย จบด้วยตัวอย่าง Mockup UI ในฝั่งขวา …อะไรประมาณนี้

และแล้วววววว ท้าดา💕 เสร็จแล้วค่ะ Moodboard สมมุติในสไตล์หวานแหววของเรา

📝 Tips: ในหนึ่งงานเราต้องทำ Moodboard หลายๆ สไตล์ส่งอยู่แล้ว การทำ Layout ให้คล้ายคลึงกัน ตกลงให้เรียบร้อยว่าองค์ประกอบจะมีอะไรบ้าง ชุดสีจะวางตรงไหน รูปอยู่ตรงไหน แบบคร่าวๆ จะเป็นประโยชน์หากเราต้องทำ Moodboard ร่วมกับดีไซน์เนอร์ในทีม จัดสรรแบ่งงานกันได้ง่าย หรือสำหรับลูกค้าเวลาไล่ดูสไตล์ต่างๆ ของหลายๆ บอร์ด สามารถเปรียบเทียบหรือดูความต่างได้ง่ายกว่าด้วย

8. Add-ons Items

Giphy.com @sambmotion

องค์ประกอบในข้อ 1–6 เป็นองค์ประกอบหลักที่แนะนำว่าควรมีในทุก Moodboard แต่ถ้าหากไม่พอ ขอเพิ่มได้จ้า🤗 จะเป็นในกรณีที่เราออกแบบ Moodboard สำหรับงานที่มีจุดเด่นเฉพาะ และหากเสริมองค์ประกอบนั้นๆ เข้าไปแล้ว สไตล์งานจะชัดเจนขึ้น สื่ออารมณ์ได้ดีขึ้น

องค์ประกอบที่เราได้เพิ่มในเกือบทุก Project คือ Text Field และ Button เราจะทำ State คร่าวๆ พอให้เห็นภาพ เช่น Text Field เราจะเลือกออกแบบ State แรกที่เห็น ก่อนพิมพ์ข้อความแสดงยังไง, State ตอนพิมพ์ Cursor จะอยู่ตรงไหน Textfield จะยังแสดงอยู่หรือเปล่าและ State ตอนพิมพ์ข้อความสำเร็จ ส่วน Button เราจะเลือกแสดง State ปกติพร้อมกดและ State Disabled ปุ่มไม่พร้อมกด

อย่าลืมนะ! ว่าทุกอย่างที่เราออกแบบไว้ใน Moodboard ใช้เพื่อเป็นแนวทางให้เห็นภาพรวมของงานเท่ากันในทุกฝ่าย ไม่ได้หมายความว่าเราต้องนำมาใช้ในงานจริงทุกอย่าง เพราะเมื่อได้เริ่มออกแบบจริง แน่นอนว่าต้องมี Process อื่นๆ เข้ามา เพื่อทำให้งานไม่ได้แค่สวยแต่ใช้งานได้ดีด้วย ตามลำดับ

Template

ที่ Design Team 20Scoops CNX ตกลงกัน ว่าควรมีองค์ประกอบอะไรบ้างใน 1 UI Moodboard
1. Color Palette
2. Fonts (1 — 3 per moodboard)
3. Photography / Illustration style
4. Iconography
5. App Bar Style / UI 1 Page
6. Spatial Awareness (or white space usage)
7. Overall Contrast (Helps emphasise hierarchy & structure)
8. Add-ons (Depends on project)

QA

เนื่องจากเราเองได้ลองใช้ UI Moodboard ในหลายๆ โปรเจค คำถามเหล่านี้เป็นคำถามแรกๆ เลยที่ผุดขึ้นมาในความคิดตอนช่วงแรกที่เริ่มทำ แต่ตอนนี้เราสามารถตอบคำถามของตัวเองได้ทุกข้อแล้ว เลยอยากขอแชร์เผื่อใครอยากลองเริ่มทำแล้วมีคำถามเหล่านี้ผุดขึ้นมาเหมือนๆ กัน 💬

Q : ต่อหนึ่งงานทำกี่บอร์ด

A : ปกติเราส่ง 2–3 UI Moodboards ต่อ 1 งาน แต่ถ้างานไหนขยันหรือมีทีมช่วย อาจจะส่งมากขึ้น แน่นอนว่าทำหลายบอร์ดได้ แต่สไตล์ทุกบอร์ดต้องต่างกันชัดเจนนะ

Q : ทำไมพูดถึงแต่ข้อดี

A : งานออกแบบ UI Moodboard ไม่ได้มีแต่ข้อดี ข้อเสียก็มี หากเรานำไปใช้ไม่ถูกวิธี แนะนำว่าก่อนเริ่มทำ เราควรตกลงกับทีมเรา พูดคุยกับลูกค้าให้เข้าใจ ว่าจุดประสงค์ที่เราทำขึ้นเพื่ออะไร ทำไมมันถึงคุ้มค่าต่อการที่เขาจะต้องเสียเวลาตรงส่วนนี้ไป

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

Q : ใช้เวลาทำนานไหม

A : แรกๆ เราทำนาน เพราะไม่เคยทำมาก่อน ต้องมาเค้นสมองประลองไอเดีย แต่พอทำบ่อยๆ เข้าเราทำเร็วขึ้น และคิดว่าการปรับเวลาให้ทำ UI Moodboard ออกมาประจักษ์แก่สายตาไวที่สุด เป็นเรื่องดี อย่าลืมว่านี่ไม่ใช่การทำให้สมบูรณ์แบบสำหรับนำไปใช้กับทั้งโปรเจค แต่เป็นการสร้างหลายๆ ทางเลือก เริ่มเค้าโครง เพื่อเริ่มต้นโปรเจคเท่านั้น ดังนั้นเราควรบริหารเวลาให้เหมาะสม 🕓

ใช้เวลาออกแบบ UI Moodboardให้เหมาะ เพราะเป็นจุดเริ่ม แต่ต้องครอบคลุม มองบอร์ดแล้วเห็นภาพ เข้าใจ Moods

Q : มีเคล็ดลับอะไรหรือเปล่า

A : ด้วยเวลาอันเหมาะสมที่เรามี เราควรใช้มันอย่างคุ้มค่า ใส่ไอเดียให้เต็มที่ นำเสนอสารที่เรามี ออกมาเป็นสื่อให้ผู้อื่นเข้าใจให้ได้ มันถือเป็นโอกาสที่ดีมากๆ เลยนะกับพื้นที่ตรงนี้ ส่วนเคล็ดลับเราไม่มีบางทีไอเดียก็ไม่มา😂 แต่เวลาเราคิดไม่ออก เราจะไม่ติดอยู่ตรงนั้นนานๆ เราจะพยายามออกไปหา ค้นคว้าเพิ่ม เริ่มจากจุดเล็กๆ อาจมีขอทีมช่วยบ้าง เพราะไอเดียดีๆ ย่อมไม่ได้เกิดที่คนเดียว หรือลองเอาเรื่อง User Experience (UX) เข้ามาช่วยบ้าง นึกถึงกลุ่มเป้าหมายให้ชัดขึ้น เราก็พ้นช่วงเวลาคิดไม่ออกเหล่านั้นมาได้

— The Story Behind

Film Credit: Jang Junaem

20Scoops Design Team ประกอบไปด้วยพี่มิ้น (Sansern Wuthirat), พี่เติ้ล (Hanii) และเราเอง — เรื่องราวความเป็นมาว่าทีมเรารู้จักเจ้า UI Moodboard ได้ยังไง ต้องขอขอบคุณพี่เติ้ล Hanii Interactive Designer ของทีม คนริเริ่ม ปิ๊งไอเดียเมื่อประมาณสองปีก่อน หลังจากเห็น Moodboard ของงานออกแบบแพคเกจจิ้งแล้วนึกขึ้นได้ว่า ทำไมเราไม่ลองมาจับ Moodboard กับงานออกแบบ UI ดูบ้าง เพื่อให้ทำงานได้ง่ายขึ้น เริ่มจากลองเลือกองค์ประกอบมาจัดวาง ออกแบบ ใช้งานจริง แรกๆ Process ยังไม่ชัด แต่หลังจากเกิดการลองผิดลองถูก ทำหลายครั้งในสถานการณ์ที่แตกต่าง ตกผลึกมาเป็นองค์ประกอบ 8 ข้อ ตอนนี้พูดได้ว่าทีมเราพอใจกับ Process การทำ UI Moodboard ที่มีอยู่ แต่แน่นอนเราจะไม่หยุดพัฒนา และปรับให้เข้ากับสถานการณ์อื่นๆ อีกที่จะเข้ามาในอนาคต 🌏✌️

The End

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

ถ้าชอบฝากปรบมือให้กำลังใจ👏 เพื่อเป็นพลังงานในการเขียนบทความต่อไปหน่อยน้า ขอให้ทุกคนมีวันที่สดใส และมีความสุขกับงานออกแบบ UI ค่ะ

Happy Designing 🎉

_____

More Reading

Design Mood. 7 Motives to Create Mood Boards.

Creating Better Moodboards for UX Projects

20Scoops