Redesign Web: Come with me to our Nextzy’s Galaxy!
งานไม่แน่น แต่หิวงานมากกกกก.. ก็เลยขออาสาออกแบบกาแล็คซี่ใหม่ให้กับออฟฟิศซะเลย 🌕✨
ย้อนกลับไปเมื่อ 2 ปีก่อน ในสมัยที่ฝึกงานอยู่ที่บริษัทนี้กับเพื่อนอีกคน ตอนนั้นเราได้ช่วยกันออกแบบเว็บ Nextzy ขึ้นมา โดยมีคอนเซ็ปต์เป็น ธีมอวกาศ ที่มาจากคำว่า “Next to the Galaxy” ซึ่งเป็นชื่อเต็มของ Nextzy
ในตอนนั้น พวกเราใช้กราฟฟิคตามสไตล์ Nextzy ที่เน้นความสนุกสนาน ไม่เป็นทางการ แต่ก็มีความเรียบง่ายตามแบบฉบับเว็บบริษัททั่วไป เลยได้หน้าตาออกมาแบบนี้
พอได้ย้อนกลับมาดูเว็บที่ตัวเองได้ออกแบบไว้ ก็ถึงกับเขิน เพราะเห็นได้ชัดว่าเวอร์ชั่นนี้มีข้อผิดพลาดอยู่มากกก ไม่ว่าจะเป็นเรื่องของการเรียง Priority ความต้องการของผู้ใช้, ระยะห่างระหว่าง Component, ภาพที่ขนาดไม่สมส่วน และไม่ได้ทำ Design System
ทั้งหมดนี้ จึงทำให้ Dev เขียนโค้ดออกมาแล้วเจอปัญหาต่างๆอย่างเช่นเลย์เอาท์ไม่ตรง Grid และไม่สามารถทำดีไซน์ให้ตรงกับที่เราออกแบบได้เป๊ะๆ
แต่ก่อนจะเริ่มออกแบบก็มีปัจจัยหลายอย่าง
ที่ส่งผลจนทำให้เราต้องมานั่งคิด ไม่ว่าจะเป็นเรื่อง
- Branding ของบริษัท — ว่าเราอยากจะสื่อให้ผู้ใช้มองเราในแบบไหน รู้สึกสนุกสนานหรือว่าเป็นทางการ
- ความเหมาะสมการใช้งาน — ควรจะ Represent ให้เว็บเป็นลักษณะแบบไหนที่สามารถใช้งานได้ง่ายไม่ซับซ้อน
- ความต้องการของผู้ใช้ — เพราะผู้ใช้คือคนที่จะเข้ามาดูเว็บของเรา ซึ่งเป็นปัจจัยสำคัญในการกำหนดฟีเจอร์ที่จะต้องมี
- หลักการออกแบบ — ถือว่าเป็นสิ่งสำคัญสำหรับนักออกแบบ UI อย่างเราๆ ถ้าเราตามหรือเสพพวก UI บ่อยๆ จะทำให้เรารู้ว่าตอนนี้โลกของการออกแบบมันไปถึงไหนแล้ว
เริ่มด้วยการถามและวางแผน
โดยการให้พี่ที่เป็น Sale เป็นคนให้ข้อมูลว่าควรจะมีข้อมูลอะไรบ้าง และอันไหนสำคัญมากน้อยเพียงใด เพราะเป็นคนที่คลุกคลีกับลูกค้ามากที่สุด
แถมได้คนใจดีมาช่วยทำ Sitemap/Flow สรุปจากที่เราคุยๆกัน และคิดคอนเทนต์ที่จะใส่มาให้ด้วยย
พอได้ข้อมูลเบื้องต้นมาแล้ว สิ่งที่เราจะทำต่อก็คือ
Low-Fidelity : Wireframe
ตอนนั้นคิดอยู่ 2 ธีม ไม่เท่ห์โครตๆก็น่ารักใสๆตามสไตล์ Nextzy แต่ยังตัดสินใจไม่ได้ ก็เลยออกแบบเบื้องต้นด้วยการวาดใส่กระดาษเพื่อเอาภาพในหัวของตัวเองออกมา แล้วเรียบเรียงว่าอะไรควรวางตรงไหนก่อนจะลืม
หลังจากนั้นก็เอาเลย์เอาท์ที่วาดออกมาทำเป็น Wireframe ในโปรแกรม Sketch ให้ดูเป็นผู้เป็นคน ให้คนอื่นเขาดูก็สามารถเข้าใจกับเราได้ ซึ่งออกมาเป็นแบบนี้
หน้าเว็บจะแบ่งเป็นหลายๆ Section ดังนี้
- Header
- Our Objective
- Our Services
- Our Products
- Our Happy Clients
- How We Work (Working Process)
- Contact
(จริงๆแล้วมีหน้า Blogs ด้วย แต่ว่าขี้เกียจพิมพ์อ่ะ ขออธิบายแค่หน้าหลักก็พอนะ)
ในตอนออกแบบ Wireframe นั้น นอกจากความต้องการหลักๆแล้ว ก็ได้แอบไปถามทุกๆคนในทีมว่าต้องการหรือไม่ต้องการอะไร สรุปได้ใจความว่า
- ไม่เอาเลย์เอาท์แบบเดิมๆ ไม่เอาเด็ดขาดดดด! — (เสียใจอะ คนเค้าตั้งใจทำให้เลยนะ)
- ไม่เอาแบบกดหรือสไลด์ซ้ายขวาได้ — ตรงนี้เลยใช้เวลาค่อนข้างมากกับการคิดเลย์เอาท์ที่ต้องใส่เนื้อหาค่อนข้างเยอะ ตัดไม่ได้ และจะต้องทำให้ในหน้าเว็บดูคลีนที่สุด (แต่ก็เอาว่ะ มา!)
ซึ่งในตอนออกแบบก็พยายามดู Reference จากหลายๆที่และ Research ค่อนข้างเยอะ ไม่ว่าจะเป็น Pinterest, Dribbble , Collect UI หรือ awwwards
เพิ่มเติม — ขอแนะนำเว็บสำหรับบทความที่เกี่ยวกับดีไซน์ที่ชื่อว่า Hey Design เพราะเว็บนี้จะรวมงานเจ๋งๆพร้อมอธิบายคอนเซ็ปต์ให้เราดูเพื่อเป็นแรงบันดาลใจด้วยย
คิดอะไรยังไงถึงได้ออกมาเป็นหน้าเว็บแบบนี้?
เพราะว่าอยากให้ทุกคนรู้จักและเข้าถึงง่ายที่สุด
ปุ่ม Product กับ Contact เอาไว้ข้างบนสุดเลย เพราะจากการสอบถามมา ลูกค้าส่วนใหญ่อยากจะเห็น Product ที่เราเคยทำ และอยากจะดู Contact เพื่อติดต่อหาเราโดยเฉพาะ ซึ่งปุ่มทั้งสองนี้ เมื่อกดก็จะเลื่อนลงไปที่ Section ของแต่ละอันที่อยู่ข้างล่าง
อยากให้ทุกคนเข้าใจเป้าหมายของพวกเรามากขึ้น
โดยใช้วิธีการเลือกหัวข้อแล้วเปลี่ยนคอลัมของเนื้อหาแทนการวางเรียงแบบธรรมดาๆ เพื่อไม่ให้ตัวหนังสือเยอะเกินไปจนไม่อยากจะอ่าน
อยากโชว์ให้ทุกคนเห็น
จะโชว์เรื่องของ Service และ Product ต่างๆ ของออฟฟิศ ซึ่งส่วนนี้ค่อนข้างสำคัญมาก เลยอยากให้พื้นที่เยอะกว่าส่วนอื่น แต่ !! ก็ไม่อยากให้มันเยอะเกินไปจนทำให้เว็บของเราดูน่าเบื่อ
ในส่วนของ Service ที่เอาไว้แสดงให้ผู้ใช้เห็นว่าที่บริษัทเรารับงานอะไรแบบไหนบ้าง จึงออกแบบให้เป็นตารางที่มีการจัดวางเลย์เอาท์แบบกว้างๆเพื่อให้ใช้พื้นที่ได้อย่างคุ้มค่าและข้อความที่อยู่ในตารางจะโดดเด่นมากกว่าปกติ
ส่วนคำโปรยในหัวข้อนี้ีก็จัดให้ดูแน่นมากขึ้น โดยให้ตารางบางส่วนกินพื้นที่ด้านข้างด้วย เพื่อไม่ให้ตัวหนังสือตรงนี้ยาวเกินไปจนไม่น่าอ่าน
ก็เลยได้ออกมาเป็นแบบนี้
ส่วนการแสดง Product จะใช้วิธีหมุน Wheel เพื่อแสดง Product แต่ละตัว สาเหตุที่ออกแบบเป็นแบบนี้ เพราะเวลาเรานึกถึง Wheel ก็จะนึกถึงเกมส์ที่มี Interaction กับผู้ใช้ จึงคิดว่าลูกเล่นตรงนี้น่าจะตอบโจทย์ความเป็น Nextzy ได้ดี
และอยากประหยัดพื้นที่ไม่ให้ผู้ใช้ต้องเลื่อนดู Product เยอะเพราะว่ามีหลายตัว ถ้าเราใช้วิธีวางเลย์เอาท์แบบเดิมๆ เอามาเรียงกันยาวๆ ก็อาจจะทำให้ไม่สามารถบอกรายละเอียดของโปรดักส์ได้ครบ หรือไม่ก็ต้องทำให้มันกดเพื่อแสดงข้อมูลเพิ่มเติมได้ ซึ่งจะทำให้ยุ่งยากสำหรับผู้ใช้
ดังนั้นการใช้ Wheel จะช่วยให้ผู้ใช้สามารถกดเลือกดูข้อมูลทีละตัวและแสดงข้อมูลละเอียดๆได้ง่าย และไม่จำเป็นต้องแสดง Product ครบทั้งหมด เพราะบางทีผู้ใช้ก็อยากจะดูแค่ไม่กี่ตัวเท่านั้น
อยากให้รู้ขั้นตอนทำงานของพวกเรา
ซึ่งมีตั้ง 9 ข้อแหนะ แถมต้องเรียงลำดับ จะมีอะไรดูดี ดูง่าย และทำง่ายไปกว่าการออกแบบให้เป็น Timeline แบบนี้อีกอ่ะ
พอ Wireframe เสร็จเรียบร้อยและทุกคนในทีมเห็นชอบ ก็เริ่มทำในส่วนต่อไป
นั่นก็คืออออออออ
High-Fidelity : User Interface
เนื่องจากหลายๆคนที่ออฟฟิศอยากคงความเป็น Nextzy ที่น่ารักใสๆ สนุกสนาน ก็เลยจัดธีมอวกาศให้เหมือนเดิม เพิ่มเติมคือสีที่ใช้หลากหลายเพื่อเพิ่มลูกเล่นให้มากขึ้น
เริ่มจากกำหนดสีหลัก (Primary Color) คือ สี Dark ซึ่งเป็นสีน้ำเงินมืดที่ให้อารมณ์ท้องฟ้ายามค่ำคืน และตัดด้วยสีไล่ระดับ (Gradient) เป็นสี Rosy Pink และ Clear Blue เพื่อเอาไว้ใช้กับพวก Object เล็กๆน้อยๆ เช่น ปุ่ม เส้น และกราฟฟิคนู้นนี่นั่น
ดาวเคราะห์น้อยทั้งหลาย
จากที่เกริ่นไปคอนเซ็ปต์ของเว็บคือธีมอวกาศ ดังนั้นก็เลยใช้ดาวที่เป็นอัตลักษณ์ของเว็บนี้ถึง 3 แบบ โดยที่ 2 ดวงมีวงแหวนล้อมรอบด้วยยย
แผนที่
คอนเซ็ปต์คืออยากให้มีธงปักบนแผนที่ของดวงดาวเพื่อแสดงถึงอณาเขต ทำกราฟฟิคกับเส้นทางเพื่อให้มี Mood & Tone เดียวกันทั้งเว็บไซต์และดูคลีนๆ แต่ถ้าอยากดูแผนที่แบบ Google Maps ก็สามารถกดที่ธงได้เลย
และก็ได้ออกมาเป็น UI ที่มีทั้งสีสันและกราฟฟิคต่างๆ ครบถ้วนเรียบร้อยยย
นอกจากเรื่องของสีและกราฟฟิคที่สำคัญในการทำ UI แล้ว เรื่องของ Design System และ Summary CI ก็สำคัญไม่แพ้กัน เพราะเราจะต้องสรุปสิ่งที่ Dev จะต้องใช้ ไม่ว่าจะเป็นพวก Button State, Icon State, Text Size และอื่นๆอีกมากมาย เพราะว่าอยากจะให้ผู้ใช้รู้สึกว่า Component เหล่านี้มี Interaction กับเค้า
หลังจากนั้นก็ Export เพื่อจัดเตรียมทุกอย่างไว้ให้ Dev เอาใช้ในการพัฒนาโปรเจค
ทั้งหมดนี้นอกจากจัดเตรียมไว้เพื่อให้ Dev ขึ้นโปรเจคได้ง่ายแล้ว ยังมีไว้เพื่อให้ตัวเราเองสามารถทำงานได้ง่ายด้วย จะได้หยิบมาวางๆได้เลย
ยังไม่พอ ต้องใส่ Animation เจ๋งๆด้วยสิ
ความคิดในตอนแรกนั้นว่างเปล่ามากจ้า ไม่รู้จะสรรหา Tool ตัวไหนมาทำ Animation ดี แต่ก็ต้องทำเพราะว่าไม่งั้น Dev จะไม่เข้าใจว่าเราอยากจะได้แบบไหน
จากที่ลองใช้ Invision ที่เค้าว่ากันว่า Animate เป็น Object ได้ ก็ดันไม่ตอบโจทย์คนขี้เกียจแบบเราซักเท่าไหร่ เพราะรู้สึกว่ามันค่อนข้างวุ่นวายสำหรับเรา ก็เลยไปลอง Tool ตัวอื่นๆดู จนสุดท้ายไปถูกใจ Plugin ตัวนึงใน Sketch ที่เคยโหลดไว้เมื่อนานมาแล้ว ที่มีชื่อว่า Anima Toolkit
ทำได้ตั้งแต่ Interaction ง่ายๆ
จนไปถึงการทำ Keyframe อะไรแบบนี้
และ Plugin ตัวนี้ยังสามารถทำอะไรได้อีกเยอะมาก ขนาด Spec Export ก็ยังทำได้เลย แต่จากที่ลองเล่นมา เหมือนยังมีบัคนะคะ ตอน Export บางครั้งก็เล่นได้บ้างไม่ได้บ้าง ผิด Spec บ้างในบางครั้ง
ถ้าใครมี Tool อนิเมชั่นตัวไหนที่ดีกว่าเจ้าตัวนี้ ก็แนะนำกันมาได้น้าาา อยากได้มากๆ ขอประกาศไว้ตรงนี้เลยละกัน
สุดท้ายแล้ว.. ที่ขาดไม่ได้ นั่นก็คือ Spec Export
จากที่เคยเล่าว่าเวอร์ชั่นก่อนหน้านี้ที่มีความผิดพลาดค่อนข้างเยอะ ส่วนนึงก็มาจากตรงนี้ล่ะ เพราะฉะนั้นครั้งนี้เลยจัดให้
โดยใช้ Plugin ที่ชื่อว่า Sketch Measure ที่จะมาทำหน้าที่ช่วยวัดค่าความห่างระหว่าง Component ต่างๆ, สีของ Component แต่ละตัว และอื่นๆ
เพียงเท่านี้ Dev ก็สามารถทำตามดีไซน์โดยไม่ต้องมานั่งถามหรือนั่งกะเองอีกต่อไปแล้ว อยากรู้ว่าตรงไหนต้องใช้อะไรหรือทำยังไงก็เช็คจาก Spec Export ตัวนี้ได้เลย
แค่นี้ก็เสร็จสิ้นทุกกระบวนการของการออกแบบ UI แล้วค่ะทุกค้นนน ปลื้มปริ่มเป็นที่สุด
สรุป
ขั้นตอนทั้งหมดสำหรับการออกแบบหน้าเว็บนี้จะมีคร่าวๆดังนี้
- สอบถามข้อมูลและความต้องการ
- ออกแบบ Low-Fidelity (Wireframe) และ High-Fidelity (UI)
- ทำ Interaction หรือ Animation เพื่อให้ Dev เข้าใจความต้องการ
- สรุป CI ของ Component, Design System และ Spec Export
ในระหว่างขั้นตอนเหล่านี้ก็เจอปัญหาบ้างเล็กน้อย หลักๆจะเป็นเรื่องของการทำในสิ่งไม่เคยทำและการใช้ Plugin บางตัวที่ยังไม่เสถียรเท่าไหร่ แต่เราก็สามารถหาทางออกและพยายามให้ออกมาเป็นหน้าเว็บจนได้
ส่วนการออกแบบ UI พื้นฐาน คือต้องเข้าใจผู้ใช้ มีหลักการของการออกแบบ เช่น Spacing, Size, Grid และทำสรุป CI หรือ Component ไว้ให้ทีมใช้ ยิ่งทำละเอียดๆมากเท่าไรก็จะเป็นเรื่องดี เพราะสามารถช่วยให้ Dev ทำงานได้เหมือนที่ดีไซน์ไว้ และตอนทำจริงเราจะได้ไม่ต้องมานั่งเสียเวลาบอก Dev ไปซะทุกอย่างทุกขั้นตอน
สุดท้ายนี้ไม่มีอะไรมาก ฝากถึง Dev ที่ได้ทำ Landing Page นี้ ทำให้ได้เหมือนที่น้องออกแบบนะ จะใช้ Dev กี่คนก็ได้ แต่ดีไซน์คนเดียวน่ะ อิอิ / หลบรองเท้า
ส่วนใครที่สนใจอยากจะเริ่มต้นทำ UX/UI ก็สามารถอ่านจากบล็อกนี้ได้จ้า ❤️
