Junior UI Designer ใน 8 เดือน

สวัสดีค่า🙏🏻 เราเป็นนักศึกษาสาขา Software Engineering ที่มีโอกาสได้ฝึกงานในตำแหน่ง Graphic Designer ระยะเวลา 8 เดือนเต็มๆ จึงอยากจะบันทึกเรื่องราวต่างๆตลอดช่วงเวลาการฝึก ถ้ามีใครมาถามเราว่า ฝึกแปดเดือนเนี่ยได้อะไรไปมั่ง? เราก็จะส่งบทความนี้ให้ แล้วบอกเขาว่า “นี่ไง.. แปดเดือนของเรา 💛”

giphy.com

จำได้ว่า ตั้งแต่จบม.6 เราไม่เคยชอบ Coding หรือการทำอะไรที่ยุ่งยากซับซ้อน เพราะเราไม่เก่งเลข แต่ด้วยการตัดสินใจร่วมกับทางบ้าน จับพลัดจับผลูได้มาเรียนวิศวะซอฟต์แวร์เฉยเลย(มันไม่เลขตรงหน้าย😭) ในใจก็คิดไว้ว่า คงเหมือนๆ กับการแต่ง Hi5 หรือ Yenta4 Diary ด้วย HTML น่ะแหละ เพราะมันเป็นสิ่งที่เราชอบมากกกกสุดท้ายได้มาเรียน มันไม่ได้เป็นอย่างที่หวังเลย OOP, ADT, OOAD,.. อย่างที่หลายๆ คนคงพอเดากันได้ มันยาก เราทำได้นะ แต่เราต้องใช้ความพยายามสูงมากๆ ที่จะเข้าใจโลจิกต่างๆ การฝึกงานในตำแหน่ง Graphic Design จึงเป็นความคาดหวังของเราในการเริ่มต้นใหม่ในสิ่งที่เราชอบอยู่แล้วเป็นทุนเดิม ความรู้สึกในตอนนั้นคือ การเลือกเรียนมหาลัยฯใหม่อีกรอบเลยทีเดียว โชคดีที่เราได้รับโอกาสที่ดีจากคนที่ดีๆ

ทักษะเราก่อนเริ่มต้นฝึกงาน ก็ประมาณนี้แหละ ตอนนั้นเรามองว่ามันดูดีมาก แต่พอมาย้อนดูตอนนี้ อายเลยเรา ลองดูซิ มีอะไรแปลกๆไหม ?

UI แรกในชีวิต ทำตามอารมณ์และความรู้สึก (ทำไมปุ่ม Back ไปอยู่ตรงนั้นลู๊กกก😅)

แรกๆ ที่มาฝึกงาน พี่ๆ designer ที่บริษัทให้เราเลือก ว่าเราอยากฝึก Graphic Design แนวไหน ภาพประกอบ? หรือทำ User Interface (UI) สำหรับ Mobile App และ Website ? แน่ซิ เราเลือกอย่างหลัง เพราะมันเกี่ยวกับสาขาที่เราเรียนมามากกว่า พี่ๆให้เราเริ่มที่การศึกษา Design Guideline และพรีเซนต์ให้พี่ๆ ฟัง ตอนนั้นเปิดโลกเรามาก เฮ้ย มันมีแบบนี้ด้วยหรอ การดีไซน์อะไรสักอย่างมันก็มีแบบแผนให้ด้วย ไม่ได้ต่างอะไรจากแขนงอื่น อย่าง Coding ที่ต้องมี Coding Standard, Cooking ที่ต้องมี Cookbook ฯลฯ สำคัญมากนะที่มี Guideline เราไม่จำเป็นต้องเดินตามทุกกระเบียดนิ้ว แต่มันก็เป็นแนวทางที่ทำให้เราเดินไปในทิศทางที่ถูกต้อง เหมาะสมได้

iOS Human Interface Guidelines : https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/
Material design : https://material.io/guidelines/material-design/introduction.html#

ต่อมาพี่ๆ ให้เราเรียนรู้ Tool ต่างๆที่ใช้ในการออกแบบ UI เริ่มต้นด้วยโปรแกรมหลักๆ คือ Sketch เราเริ่มฝึกใช้ Pen tool ในการ Draft รูป เพื่อให้ได้ภาพ Vector ที่สามารถนำไปใช้ในงานได้หลากหลาย ย่อหดไม่มีเปลี่ยนคุณภาพ ตอนนั้นจำได้เลยว่าเหนื่อยมาก แต่ละรูปที่ Draft ต้องพิถีพิถันลงลึกในระดับพิกเซลเลยทีเดียว ตอนพี่ๆ เช็ค พี่ก็จะเทียบระหว่างรูป Master และรูปที่เราDraft ถ้าเหมือน โอเค เย้! ถึงจะให้ผ่าน 😅

ผลงานบางส่วนที่ได้ฝึก Draft ด้วย Pen tool, Sketch ในรูปแบบต่างๆ ทั้ง Fill, Outline, Fill&Outline, Realistic, Flat โดยภาพที่ใช้เป็นต้นแบบนำมาจาก Dribble.com จำไม่ได้ว่าเป็นผลงานของท่านใดบ้าง ขอขอบคุณมา ณ ที่นี้ด้วยค่ะ

มีเกมไว้ฝึก Pen tool ด้วยนะ ลองไปเล่นกันดูได้

The Bézier Game

ต่อจากนั้น เราก็ได้ฝึกทำ icon, การวาง layout, การใช้งาน Grid, ทำ Wireframe, ทำ UI, เช็ค Flow และ Prototype ไปจนกระทั่งสามารถส่งต่องานให้ Developer นำไปใช้ได้ เคยสงสัยเหมือนกันนะ ว่าเราจำเป็นต้องรู้เยอะขนาดนี้เลยเหรอ แค่ UI ทำปุ่มเป็นก็พอมั้ง แค่สี่เหลี่ยมและข้อความ แต่เอาเข้าจริงๆ มันไม่ใช่อย่างงั้นน่ะซิ ถ้าเกิด UI นั้นต้องการ icon ต้องการภาพประกอบ ต้องการพื้นหลังกราฟฟิคดีๆ ซักผืน มันก็เป็นหน้าที่ของ UI Designer ที่ต้องรู้พื้นฐานและสร้างมันออกมาเพื่อเติมเต็ม ทำให้ได้ UI ที่สมบูรณ์

Hard Skill

หลังจากเราได้เรียนรู้ tool ต่างๆในระดับที่สามารถสร้างอะไรซักอย่างขึ้นมาได้ เราก็ได้เข้าสู่กระบวนการทำ User Interface หรือ UI ~ ที่เรารอคอย มาดูขั้นตอนของมันกันเลย

1. คิด วิเคราะห์
   : เมื่อเราได้ Requirement มา ไม่ว่าจะจากลูกค้า หรือ Project Manager ที่ทำการคัดกรองให้แล้ว หน้าที่ของ UI Designer คือทำความเข้าใจ Requirement ให้ทะลุปรุโปร่ง เพื่อที่เราจะสามารถนำไปใช้ในการออกแบบได้ ลองเขียนลำดับการทำงานของมันเป็นขั้นตอนด้วย Flow diagram ง่ายๆดูซิ ว่าถูกไหม ลื่นไหลรึเปล่า
2. ร่าง wireframe
   : หลังจากเราเข้าใจขั้นตอนการทำงานของระบบแล้ว ก็ลองร่าง Wireframe ขึ้นมา เพื่อกำหนดองค์ประกอบคร่าวๆ ที่เราต้องการและเช็คการทำงานอีกครั้ง ถูกผิดก็จะได้ใช้ยางลบลบ แล้วร่างใหม่ได้เลย เปรียบเป็นแปลนบ้าน ก่อนที่เราจะเอาไปสร้างบ้านจริงๆ ประมาณนั้น

Ex. Wireframe ร่างด้วยมือในโปรเจคจบของเรา “Where’s that word” หลังจากวาดเสร็จก็ได้ให้พี่เมนเทอร์ช่วยเช็คและแนะนำ

จากนั้นเราก็จะขึ้น Wireframe แบบ Digital หรือทำบนโปรแกรมในคอม โดยเน้นดูองค์ประกอบและ Flow ของมันเหมือนเดิม ยังไม่สนใจว่าจะสวยยังไง แต่ดูว่าใช้งานได้ไหมเป็นอันดับแรก

Ex. Wireframe ที่เราทำในโปรแกรม Sketch และทำ Flow เพื่อเช็คการทำงานใน Game ว่ากดตรงนี้แล้ว ไปไหนต่อน้า ถูกหรือยัง

นอกจากการโยงเส้นจากจุดเริ่มต้นไปจุดสิ้นสุด การเช็ค Flow ยังสามารถทำวิธีอื่นๆได้อีก เช่น การทำ Prototype แบบง่ายๆใน Marvel เป็นต้น

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

Ex. บางส่วนของ UI ที่เราออกแบบสำหรับเกม “Where’s that word”

4. เคลื่อนไหวโอเคไหมนะ : หลังจากที่ได้ออกแบบ UI เสร็จแล้ว เราควรทำการเช็ค Flow การทำงาน หรือการเคลื่อนไหวอีกครั้ง ด้วยการนำ UI ที่เสร็จแล้ว มาทำให้เคลื่อนไหวได้สมจริง ข้อดีคือเราสามารถเช็คได้ว่างานของเราโอเคแล้วหรือยัง, อีกทั้งยังสามารถส่งไปให้ลูกค้าเช็คเพื่อ Approve ก่อนนำไปพัฒนาต่อ, หรือส่งให้ Developer ดู เพื่อให้เข้าใจการทำงาน หรือการ Interact ของ UI ที่เราทำ จะได้เข้าใจไปในทิศทางเดียวกัน และได้งานที่ดีที่สุดออกมา ส่วน Tool ที่ใช้ก็มีหลากหลายให้เลือก ขึ้นอยู่กับที่เราถนัดเลย เช่น Principle, Photoshop, After Effect

เราอาจจะยังอธิบายเรื่อง Prototype ได้ไม่ละเอียด สามารถเข้าไปอ่านเพิ่มเติมได้ที่บทความนี้น้า 👉🏻 ประเภทของ Prototyping: goo.gl/ZCc8AM

5. ส่งต่อไป ให้คุณ Dev : มาถึงขั้นตอนสุดท้ายแล้ว เมื่อเราทำหน้าที่ของเราเสร็จสมบูรณ์ UI ร้อนๆก็พร้อมเสิร์ฟให้คุณ Dev ไปจัดการต่อ และสานฝันของเราให้เป็นจริง Tool ที่พี่ๆสอนให้เราใช้ ก็คือ Zeplin ที่เราสามารถโยนงานดีไซน์เข้าไป แล้ว Developer สามารถเข้ามาดูและนำไปใช้งานต่อเองได้ มีการระบุค่าสี, ความกว้างยาวของ Object, Export รูปเป็นขนาดที่รองรับสำหรับการทำไปใช้ได้ตามที่ต้องการ ซึ่งสะดวกมากๆ สำหรับ UI designer เองและ Developer

หน้าตาของโปรแกรม Zeplin ( Cr. https://zeplin.io )

Tool ที่ใช้ในการออกแบบแต่ละขั้นตอน สามารถปรับเปลี่ยนไปใช้ Tool อื่นๆ ทดแทนได้ตามที่แต่ละคนถนัด ไม่มีปัญหา~ แค่เพียงข้างต้นที่เราได้นำเสนอไปทั้งหมดนั้น เป็น Tool ที่เราได้ใช้จริง ตั้งแต่เริ่มต้นจนคลอด UI ซึ่งพี่ๆ มักแซวเราเสมอว่า ปัญหาไม่ได้อยู่ที่ใช้ Tool อะไร แต่อยู่ที่คนใช้อย่างเราเองนี่แหละ ใช้เป็นรึเปล่า ฮ่าๆ 😂

จบแล้วค่ากับขั้นตอนการออกแบบ User Interface คร่าวๆ ที่เราได้เรียน ทำ และนำมาใช้ตลอดการฝึกงาน ขอบอกก่อนเลยว่าเป็นเพียงขั้นตอนคร่าวๆ เท่านั้น ในการทำงานออกแบบ UI ยังมีรายละเอียดปลีกย่อยอีกหลายส่วนที่ต้องคำนึงถึง แตกต่างกันไปในแต่ละโปรเจค เป็นเรื่องที่ละเอียดอ่อน ส่วนเนื้อหาที่ยังขาดไปบ้างก็คงจะเป็นในเรื่องของการนำ UX หรือ User Experience มาช่วยในการออกแบบเพื่อให้ได้ UI ที่ดีและตรงใจผู้ใช้ให้ได้มากที่สุด ซึ่งเรายังไม่เข้าใจลึกซึ้งในเรื่องนี้ อยู่ในขั้น newbie อยู่เลย ใครที่ตามอ่านมาจนถึงตรงนี้ อยากแนะนำอะไรสามารถแนะเราได้เลยนะค้า☺️

Soft Skill

นอกจากความรู้หนักๆ Technical Skills เกี่ยวกับ Tool และ UI, เรายังได้เรียนรู้อะไรเยอะมากกกกกกกกกก(เพิ่มก.ไก่ไปอีกร้อยตัว) ที่เราไม่เคยเจอมาก่อนในห้องเรียน ไม่ว่าจะเป็นความกดดันในการทำงานจริงๆ, การปฏิสัมพันธ์กับเพื่อนร่วมงาน กับพี่ๆ หรือแม้กระทั่งคุณลูกค้า ที่เราเคยได้ยินเสียงลือเสียงเล่าอ้างถึงศักดานุภาพมา ไม่คิดว่าจะได้เจอกับตัวเองจริงๆ

เวลาเห็นพี่ๆ ทำงานดีไซน์ และดูง่ายยิ่งกว่าปอกกล้วย เราสงสัยตลอด ว่าพี่รู้ได้ยังไงหว่า ว่ามันต้องเป็นแบบนั้น? ไม่ใช่แบบนี้? หรือแบบโน้น? แต่ตอนนี้เราพอจะเข้าใจแล้วว่าอะไรหลายๆ อย่าง เราไม่มีทางรู้และเชี่ยวชาญได้ หากเราไม่ทำการลงมือปฏิบัติ และฝึกฝนด้วยตนเอง ชั่วโมงบินในการฝึกฝน และสั่งสมประสบการณ์เป็นอีกหนึ่งปัจจัยที่จะทำให้เราเก่งและทำผลงานให้ดีขึ้นได้ แน่ล่ะ Junior Designer อย่างเรา ยังต้องก้าวต่อไปในเส้นทางของการเรียนรู้ สักวันเราคงทำได้ดีขึ้นกว่านี้ และอาจมีใครหลายคนสงสัยว่า เอ๋ ทำได้ยังไงกันหว่า หวังว่าคงมีวันนั้น 😝~

giphy.com

การฝึกงานแปดเดือนนี้ทำให้ตัวเราโตขึ้นมาก ถือเป็นประสบการณ์ที่ดีและมีค่าที่สุด ต้องขอขอบคุณพี่ๆ ทุกคนในบริษัท โดยเฉพาะอย่างยิ่ง พี่ๆ Mentor ของเราทั้งสองพี่เติ้ล Hanii และพี่มิ้น Sansern Wutthirat ที่คอยดูแล สั่งสอน และถ่ายทอดความรู้ให้เด็กน้อยคนนี้มาโดยตลอด รักนะคะ จุ๊บุ ❤️

หวังว่าบทความนี้จะมีประโยชน์ไม่มากก็น้อย สำหรับผู้ที่สนใจในการออกแบบ UI หรือน้องๆ นักศึกษาคนไหน ที่ลังเลว่าควรไปฝึกงานในตำแหน่ง UI Designer ดีไหม จะใช่เราหรือเปล่า ขอให้ทุกคนเจอคำตอบที่ตามหา และพบกันใหม่ในบทความหน้าค่า บ๊ายบายยย 👋🏻