[UI Design] Get Started in UI Design อยากทำงาน UI แต่จะเริ่มยังไงดีย์ ?
ตอนที่ 1 เริ่มต้นเข้าใจ UI Design คืออะไร?
สวัสดีครับพบกันอีกครั้งในบทความเกี่ยวกับงาน Design ต้องบอกเลยว่าในยุคปัจจุบันนี้งานด้าน Design นั้นมาแรงมากๆไม่แพ้งานสาย Developer เลยทีเดียว การจะเป็นนักออกแบบที่ดีได้นั้น ไม่ง่าย แต่ก็ ไม่ยาก เกินจนกว่าจะไปไม่ถึง เรามาเริ่มทำความรู้จักกับ UI Designer กันครับ แล้วจะรู้ว่าการเริ่มเป็น UI Designer ไม่ได้ยากอย่างที่คิด
บางครั้งก็มีเพื่อนๆหรือพี่ๆที่สนใจศาสตร์ทางด้าน UI Design ว่าคืออะไรทำไมเงินเดือนถึงต่างจากสายดีไซน์อื่นๆมากกว่า แล้วถ้าอยากจะเป็น UI Designer จะเริ่มอย่างไร อ่านอะไร รู้อะไร มีที่ไหนสอน บ้าง โอ้วววว…เยอะแยะมากมาย
แต่ไม่ต้องกังวลไปครับ เพราะบทความนี้ อาจจะช่วยได้(บ้าง) สำหรับคนที่อยากเริ่มต้นเป็น UI Designer โดยที่ยังไม่เคยมีประสบการณ์มาก่อน
ก่อนจะทำความรู้จักว่าสิ่งนั้นคืออะไรต้องเข้าใจ “บริบท” ของสิ่งนั้นก่อนเสมอ
ใช่แล้วครับสิ่งที่ผมบอกก็คือ เราต้องเข้าใจว่า UI Designer คืออะไร ?
โดยหัวข้อในบทความนี้มีดังนี้:-
- ทำความรู้จัก UI Design
- UI Design Process ขั้นตอนการทำงานแบบ UI Designer
- คนลักษณะไหนที่เหมาะกับการเป็น UI Designer
- จะเป็น UI Designer ต้องเริ่มอย่างไร ?
เมื่อทุกท่านพร้อมแล้วไปลุยกันเล้ยยยยยย ……
1. ทำความรู้จัก UI Design
UI Design หรือ User Interface Design แยกออกได้เป็นสามคำคือ
User ก็คือ ผู้ใช้ ที่มีประสาทสัมผัสทั้ง 5 ตา หู จมูก ปาก อวัยวะงอกออกมา( มือ เท้า )
Interface คือ ส่วนติดต่อเชื่อมประสานกับผู้ใช้ ไม่ว่าจะเป็น หน้าจอ สิ่งพิมพ์ อุปกรณ์ สิ่งของ หรือแม้กระทั่ง อากาศธาตุ 55+
Design คือ การออกแบบเพื่อแก้ไขปัญหาบางอย่าง
เมื่อรวมกันแล้วก็คือ การออกแบบเพื่อแก้ไขปัญหากับส่วนติดต่อประสานกับผู้ใช้ โดยผู้ใช้จะสามารถติดต่อกับ Interface ของเราผ่านประสาทสัมผัสทั้ง 5 ได้แก่ ตา หู จมูก ปาก ร่างกาย หรือ รูป เสียง กลิ่น รส สัมผัส นั่นเอง
ปรับความเข้าใจให้ตรงกันตรงนี้คือ UI Designer นั้นไม่ได้เป็นคนที่ออกแบบหน้า Application หรือ Website เพียงอย่างเดียว แต่การออกแบบเพื่อให้ตอบโจทย์ผู้ใช้ก็จะเรียกต่างๆกันออกไป เช่น Product design. Interaction design. Sound design. Light design. Multimedia design. Illustration design. Architecture. Interior design. และอีกเยอะแยะมากมาย
ว้าวๆ มั้ยละ 555555+
แต่ในที่นี้ผมจะจอพูดถึง UI Designer (GUI Designer)* ที่ทำหน้าที่ออกแบบ Visual ของ Monitor Device. หน้าตาที่แสดงออกทางหน้าจอของอุปกรณ์ต่างๆ
มาถึงตอนนี้เริ่มสงสัยแล้วใช่มั้ยครับว่า UI Designer ทำอะไรบ้าง?
2. UI Designer ทำหน้าที่อะไร
หน้าที่หลักๆของ UI Designer คือการทำ Visualize ของ UI Application ให้ออกมามีลักษณะใกล้เคียงหรือเหมือนจริงที่สุด เพื่อนำไปให้นักพัฒนาหรือโปรแกรมเมอร์พัฒนาให้ใช้งานได้จริงต่อไป
ขั้นตอนการทำงานของ UI Designer
การทำงานของ UI Designer แบบทั่วๆไป มีขั้นตอนดังนี้
- รับ Requirement สิ่งที่ต้องทำ โดย อาจเป็นการรับ wireframe มาจาก UX Designer หรือรับข้อมูลที่ได้รับจาก Team Research มาแล้ว
- Research หรือหา Reference Style ต่างๆโดย Follow up ตามข้อมูลและ Wireframe ที่ได้จาก Team และข้อสำคัญคือต้องคำนึงถึงรูปร่างหน้าตาของ Product เข้าใจจุดประสงค์ที่เราต้องการออกแบบหน้านั้นๆให้ได้ผลลัพธ์กับ User ด้วย
- เมื่อเราได้หาข้อมูลต่างๆมาแล้วก็เริ่มลงมือ Sketch แบบโดยในกรณีที่ไม่ได้ Wireframe มาก็จะต้องทำเอง แต่ถ้าได้มาเราก็สามารถ ทำ Visualize ได้เลย โดยเครื่องมือการ Sketch ก็คือ ดินสอ ยางลบ กระดาษ นั่นเอง ไม่ควรทำในคอมพิวเตอร์เลยเพราะบางครั้งเราจะอยากเกิดกิเลส ใส่สีเบาๆ ใส่มุมโค้งๆ ซึ่งทำให้งานช้า หัวใจของการ Sketch คือการทำให้เราเห็นรูปแบบของ UI ได้เร็วๆและหลายๆแบบโดยใช้เวลาน้อยที่สุด ในการแก้ไข
- การทำ Visualize ให้เหมือน Product จริงๆ ในขั้นตอนนี้ค่อนข้างมีรายละเอียดยิบย่อยอีก (เอาไว้เขียนแยกอีกทีนะครับ 5555 ) โดยเครื่องมือที่ใช้ในปัจจุบันก็มีมากมาย เช่น Adobe XD (น้องใหม่มาแรง) Figma และ Sketch App (สำหรับระบบปฏิบัติการ MacOs)
- เมื่อเราทำ UI แบบมี Visualize แล้วก็ต้องทำการ Review กับทีมว่างานของเราที่ออกไปนั้นพร้อมที่จะนำออกไป Test ได้หรือไม่
- เมื่อผ่านการ Reviews แล้ว ก็ควรจะนำไป Test เบื้องต้นจากผู้ใช้งานที่ได้ผ่านกระบวนการของ UX Design Process มาแล้ว และรับข้อมูลเพื่อนำ UI ไปแก้ไข
- สมมติว่า UI ของเราทำการ Test มาแบบเบาๆแล้วผ่านถูก Approve เรียบร้อย หน้าที่ต่อไปของเราคือการเตรียม Asset และ design specification เพื่อให้ Developer สามารถทำงานได้ง่ายที่สุดและสร้างปัญหาให้ Developer น้อยที่สุดเพราะแค่ให้เค้าเครียดกับการโค้ดก็น่าสงสารแล้ว 555+
- การ Follow up กับ Team Development ในบางครั้งงานที่เราได้ทำไปแล้วในทางเทคนิคก็อาจจะเกิดปัญหาระหว่างการพัฒนาได้ เราจึงต้องมีทักษะการคุยกับทีม Developer ด้วยนั่นเอง
- เมื่อเราทำงานครบปล่อยจบปิ้ง แต่หน้าที่ของเรายังไม่จบเราก็ต้องไปเริ่มข้อ 1 กันใหม่
และนี่คือหน้าที่คร่าวๆ ของ UI Designer ในการทำงานกับ Product หนึ่งๆ นั่นเอง นอกจากนี้ยังมีอีกลายอย่างที่ UI Designer ควรจะ(ต้อง) ทำได้ คือ ทำ Design Style Guide , Design System , Asset illustration , Product Identity, Element และอื่นๆตามที่เกี่ยวข้อง
3. คนลักษณะไหนที่เหมาะกับการเป็น UI Designer
จำเป็นหรือเปล่าต้องเรียนศิลปะมาหรือเก่งงานด้าน Visualize ถึงจะเป็น UI Designer ได้ขอบอกว่า ไม่จำเป็นครับ ไม่จำเป็นจริงๆขอแค่คุณรักที่จะเรียนรู้และหมั่นฝึกฝนอยู่เสมอก็สามารถทำได้เหมือนกัน แต่คนที่มีพื้นฐานด้านศิลปะมานั้นจะทำให้เกิดข้อได้เปรียบเช่น การจัดวาง หรือ สี ที่ใช้คือมันจะมี Sense มาก่อนคนอื่นแต่ก็งานด้าน UI Design ไม่ใช่งาน ArtWork จ๋าๆมากๆ แต่เป็นงาน Art&Science ที่ต้องใช้ทั้งสาขาทางวิทยาศาสตร์และศิลปะควบคู่กัน มันคืองานศิลปะที่ต้องมีเหตุและผล และต้องทดลอง เก็บผลการทดลอง รับ Feedback เพื่อนำมาปรับแก้ไข เป็นการสื่อสารสองทางระหว่าง User และ นักพัฒนานักออกแบบ ไม่ใช่การใช้อารมณ์ในการทำเพียงอย่างเดียว เพื่อเกิดการสื่อสารทางเดียวแบบงานศิลปะ นั่นเองครับ เพราะฉะนั้น ขอแค่คุณเปิดใจ และหมั่นตามกระแสเทคโนโลยี ก็สามารถเป็น UI Designer ที่ดีได้เช่นกันครับ
- *เพิ่มเติม การออกแบบของ UI Designer นอกจากจะคำนึงถึงความสวยงามและประโยชน์การใช้งานแล้วต้องคำนึงถึงความเป็นไปได้ในการพัฒนาด้วย ดังนั้น UI Designer ที่ดีกว่าควรจะมีพื้นฐานหรือเรียนรู้หลักการพัฒนาด้วย เช่น พื้นฐาน Grid CSS , Grid ในระบบปฏิบัติการประเภทต่างๆอีกด้วยครับ
4. จะเป็น UI Designer ต้องเริ่มอย่างไร ?
กว่าเราจะสามารถเรียกตัวเองว่า UI Designer ได้นั้นต้องผ่านอะไรมาบ้าง จากประสบการณ์ทำงานของผมทางด้าน UI Design มาโดยประมาณ 2 ปี จากที่ผมเป็นคนที่มาจากสาย Graphics Design นั้นพบว่าการจะกลายเป็น UI Design ที่สามารถไปทำงานได้จริงนั้นบอกตรงๆว่าค่อนข้างมี Learning Curve สูงแต่ก็ไม่ได้ยากจนเกินจะเริ่มต้นได้นั่นเอง โดยผมจะสรุปแนวทางออกมาได้ 7 ขั้นการเริ่มเป็น UI Design นั่นเอง
การเริ่มต้นที่ดี ก็คือการหมั่นฝึกฝนและมีวินัยทำอย่างสม่ำเสมอจะช่วยให้ตัวเราพัฒนาตัวเองได้อย่างต่อเนื่องและจะกลายเป็น UI Designer ที่ดีได้นั่นเอง
7 ขั้นการเริ่มเป็น UI Designer
- เรียนรู้ทฤษฎีการออกแบบ การเริ่มต้นเข้าสู่งานสายออกแบบแน่นอนสิ ก็ต้องเรียนรู้ทฤษฎีเบื้องต้นสำหรับงานออกแบบ เพราะทฤษฎีการออกแบบจะเป็นการทำให้คุณมีความคิดสร้างสรรค์มากขึ้น โดยคุณจะได้รู้เกี่ยวกับ หลักจิตวิทยาการรับรู้ของมนุษย์ ว่า ทำไมงานออกแบบบางอย่างถึงรู้สึก เห้ยดูครบ ดูดี สวยงาม แต่งานบางงานกลับดูแย่ ไม่ได้เรื่อง อะไรทำนองนี้ ทุกอย่างมันมีข้อพิสูจน์จากหลักการออกแบบนั่นเอง ในเบื้องต้นลองเรียนรู้จากทฤษฎีองค์ประกอบของการออกแบบ เช่น Gestalt principles , Typography , Color Theory และอื่นๆอีกมากมาย
2.เรียนรู้กระบวนการออกแบบ User Experience Deign (UX Design) เนื่องจากงานทางด้าน UI Design เป็นงานที่ต้องอาศัยการทำงานที่สัมพันธ์กันกับ UX Design นั่นเอง ทำให้การทำงานด้านนี้จำเป็นต้องเรียนรู้ UX Design Process อีกด้วย ทำให้ในบางครั้งเกิดการเรียกตำแหน่ง UI Design ว่า UX/UI Design นั่นเอง เพราะว่า UX ไม่ใช่ UI แต่ UX และ UI แยกออกจากกันไม่ได้นั่นเองครับผม >_< ส่วนเรื่องเบื้องลึกไว้ผมจะมาแชร์อีกทีนะครับ
3.พัฒนาจากตาคนธรรมดาเป็นตาเหยี่ยว ไม่ใช่การตัดแต่งพันธุกรรมใดๆนะครับ แต่เป็นการพัฒนาสายตาของเราให้เป็นคนแม่นยำ ละเอียดรอบคอบมากขึ้น แม้เพียง 1 Pixel ที่ต่างกันก็ต้องมองเห็น และการทำให้สายตาของเรามีลักษณะที่สามารถแยกออกได้ว่างานใดเป็นประเภทงานออกแบบที่ดีหรือไม่ดีอย่างไร ก็คือพัฒนามาจากทฤษฎีการออกแบบ และ การดูงานของผู้อื่นมากๆ ไม่ใช่การก๊อปเพื่อทำตาม แต่คือการก๊อปเพื่อบอกวัตถุประสงค์และข้อดีข้อเสียของงานออกแบบตามทฤษฎีการออกแบบได้เบื้องต้น และเป็นการตามเทรนด์การออกแบบของนักออกแบบคนอื่นๆได้อีกด้วย ทำให้เรามีความสามารถในการทำงานไปอีกขั้น สำหรับวาร์ปที่เราจะสามารถดูงานดีไซน์ เอาไว้เป็นแรงบันดาลใจ (No ก๊อปนะครับ 555+) เช่น dribble , behance ,onepagelove , uimovement , pinterest , collect ui , Instagram และอื่นๆอีกมากมาย (ในคราวต่อไปจะทำบทความรวบรวมมาให้นะครับ อิอิ)
4.อ่านหนังสือและบทความดีไซน์ให้ได้มากที่สุด เพราะการอ่านทำให้เรารู้มากขึ้นมากกว่าเมื่อวานโดยพยายามอ่านให้ได้อย่างน้อยเดือนละ 1 เรื่องก็ยังดีครับ 555+ พยายามทำให้เป็นนิสัยครับ จะทำให้เราเป็นคนขี้สงสัยอยากรู้ตลอดเวลา
5.เรียนรู้การใช้เครื่องมือที่จะทำ UI Design เพราะว่าการที่เราสามารถใช้เครื่องมือการทำงานที่หลากหลายได้นั้นคือข้อได้เปรียบอย่างมาก แต่ถามว่าจำเป็นต้องรู้ทุกตัวรึเปล่าก็ไม่ครับเพราะว่าโปรแกรมการดีไซน์ในปัจจุบันก็มีลักษณะการใช้งานคล้ายๆกัน ในการเริ่มต้นเรียนรู้ระยะแรกอาจจะเลือกโปรแกรมที่เราเห็นแล้วน่าจะชอบหรือสะดวก แต่ในการทำงานจริงๆก็ควรจะเรียนรู้อันที่องค์กรนั้นๆใช้นะครับเพื่อให้สามารถทำงานกับทีมได้นั่นเอง อย่างของผม เริ่มใช้จาก illustrator แต่เนื่องจากโปรแกรมนี้ไม่ได้เอื้ออำนวยเท่าไหร่ในความคิดของผม จึงเปลี่ยนโปรแกรมไปใช้อย่างอื่นแทน ในตลาดโปรแกรมการดีไซน์ในปัจจุบันมีให้เลือกเยอะแยะมากมาย ตามสะดวกเลยครับ เช่น Adobe XD , Figma , Sketch App , Invision , Photoshop , Illustrator เป็นต้น
6.สร้างโปรเจคแบบอุดมคติของตัวเอง เพื่อเป็นการนำทฤษฎีหรือข้อการเรียนรู้ที่ได้รับมาลองทดลองสร้างไว้เล่นๆ เก็บเป็นผลงานตัวเอง พยายามสร้างทุกๆวัน เพื่อเป็นการเก็บพัฒนาการการออกแบบของเราเอง ในเริ่มแรกอาจจะลองกำหนดโจทย์ให้ตัวเอง เช่น ฉันอยากได้แอปพลิเคชั่นฟังเพลงที่มี บลาๆๆๆๆ หรือ แอปพลิเคชั่นขายต้นไม้ เราก็ลองออกแบบเป็น Single pages ก็ได้ครับไม่จำเป็นต้องทำเต็ม Flow เพราะจุดประสงค์ก็คือการฝึกฝนตัวเราเอง แล้วเราจะรู้ได้อย่างไรละว่างานที่เราทำเล่นๆเนี่ยจะดีหรือไม่ดีมีผลอย่างไร เราก็ควรจะนำไปแชร์ให้ชาวโลกเห็นครับ เช่น dribble , Instagram เพื่อให้เพื่อนๆในวงการนักออกแบบได้ให้ feedback กับเราทำให้เราพัฒนาตัวเองได้ดีขึ้น ดีกว่าการเก็บงานไว้ดูคนเดียว ชมตัวเองคนเดียวนะครับ
7. หมั่นออกไปหาความรู้จากผู้ใหญ่ “ผู้ใหญ่” ในที่นี้ไม่ใช่คนที่มีอายุมากกว่านะครับแต่หมายถึงคนที่มีประสบการณ์ทำงานมามากกว่า ออกไปดูดความรู้ประสบการณ์การทำงานของเค้า มาเพื่อเป็นแนวทางให้ตัวเอง เผื่อเราจะได้แนวคิดหรือประสบการณ์ที่เราไม่เคยพบเจอมาก่อน เช่น การไปงาน Meet up , การติดตาม Designer ที่อยู่ในวงการหรือที่เราชื่นชอบ , การลงงานในคอมมูนิตี้ของนักออกแบบเพื่อให้เราได้รับคำแนะนำ , การไปฝึกงาน และอื่นๆอีกมากมาย และแน่นอนทุกครั้งที่คุณออกไปหาความรู้ คุณควรจะเปิดใจกว้างๆ กว้างแบบกว้างมากๆ เพื่อให้เราได้รับไอเดียดีๆใหม่ๆ
ก็สำหรับบทความนี้เป็นการแชร์ประสบการณ์การทำงานเล็กๆของผมเองที่เริ่มต้นการเข้าสู่สายออกแบบเพื่อการใช้งาน ในเบื้องต้น หากผู้อ่านท่านใดมีข้อเสนอแนะสามารถให้คำแนะนำได้เสมอครับ :) และบทความนี้ก็เป็นส่วนหนึ่งในการเดินทางสายออกแบบของผมที่เพิ่งจะเริ่มต้นขึ้น ผู้อ่านท่านใดอยากร่วมเดินทางไปกับผมก็ ช่วยกดติดตามหรือตบมือเป็นกำลังใจให้ผมได้นะคร้าบบบบ…❤ ❤ ❤
ส่วนบทความหน้าจะเป็นหัวข้ออะไร รอติดตามได้เลยครับ สำหรับวันนี้ขอขอบคุณผู้อ่านทุกท่านที่เข้ามาอ่านมากนะครับ สวัสดีครับ
W.Worawut
CMM KMUTT 4th years
(PartTime)Junior UI Designer Donuts Bangkok
ฝาก Reference จ้า
หมายเหตุ
*GUI Design หรือ Graphics User Interface บางที่ก็เรียกการออกแบบหน้าแอปพลิเคชั่นว่า GUI Design เนื่องจากทำให้คำศัพท์ดูระบุชัดว่าเราออกแบบอะไรมากกว่า UI Design อย่างที่บอกไปเบื้องต้นคือ UI Design ไม่ได้ออกแบบแค่หน้าแอปพลิเคชั่นเฉพาะอย่างเดียวเท่านั้นนั่นเองครับ
