เกริ่นก่อนว่า Skooldio Alumni Meetup เป็นงานที่ตั้งใจจัดขึ้นเพื่อชาว Skooldio โดยเฉพาะ เพื่อเปิดโอกาสให้ทั้งศิษย์เก่า วิทยากร ได้มีเวทีปล่อยของ ได้อัพสกิล แลกเปลี่ยนความรู้และประสบการณ์ระหว่างกันทั้งด้าน Design, Innovation และ Technology

โดยงานมีทอัพในครั้งแรกนี้ คุณธนนท์ วงษ์ประยูร (ตั๊ง) Product Designer ที่ Ko-Fi และอดีต UX/UI Designer ที่ Skooldio มาแชร์ประสบการณ์และเทคนิคในหัวข้อ “Design = Code, Bridging the Design and Development Gap with Webflow” ให้ได้ฟังกันครับ

Webflow เป็นเครื่องมือในการออกแบบเว็บไซต์ใช้งานบน Browser เป็นหลัก จึงไม่ต้องวุ่นวายเรื่องติดตั้งโปรแกรม หน้าตาการใช้งานก็ง่ายความคล้ายคลึงกับการใช้ Editor tool

คุณตั๊งแชร์ถึง Design Process ของทีมว่าปัจจุบันใช้ทั้ง Sketch ทำ Ideation + และใช้ Webflow ทำ Prototype ซึ่งช่วยลดการทำงานของ Developer ลงในบางส่วน ทำให้การทำงานสะดวกรวดเร็วขึ้น

สรุปข้อดี Webflow ได้ดังนี้:

1. สื่อสารระหว่าง Designer และ Developer ได้ดีขึ้น
   ช่วยอธิบายคุณสมบัติบางอย่างที่ Image Prototype ยังไปไม่ถึง เช่น Basic Transition, Scrolling Control จึงทำให้ทีม Developer สามารถ Inspect published code ได้เลย
2. ช่วยสร้าง ​ Prototype ที่สมจริงมากขึ้น
   เนื่องจากระบบการทำงานแบบ Code Visually ที่ใช้ Web-logic ในการออกแบบ จึง Auto Generate โค้ดไปเลยในตัว ช่วยสร้าง HTML, CSS กันเลยสดๆ ทำให้ได้เว็บตรงตามที่ออกแบบเป๊ะๆ
3. รองรับ Responsive
   ย่นระยะเวลาที่ต้องคอยออกแบบ Desktop ทีนึง Mobile ทีนึง ด้วย Reusable Component ที่สามารถออกแบบให้รองรับกับหน้าจอหลายๆ ขนาดได้
4. สร้าง Animation และ Micro-interaction
   เพิ่มลูกเล่นด้วยการกำหนด Tricker และ Effects ให้กับจุดต่างๆ ในเว็บโดยไม่ต้องโค้ดเองแม้แต่บรรทัดเดียว
5. สร้าง Dynamic Content พร้อมเชื่อมการทำงานกับหลังบ้าน
   ไม่เพียงแต่การสร้าง Landing Page ทั่วๆ ไป แต่ยังสามารถเชื่อมการทำงานหลังบ้านด้วยระบบ CMS ที่สามารถจัดการ Content บนหน้าเว็บในสเกลเล็กๆ ไปจนถึง Ecommerce ขนาดใหญ่ได้ด้วย

ในมีทอัพนี้ คุณตั๊งได้แนะนำการใช้งานของ Webflow ซึ่งได้เตรียม Assets ให้ผู้เข้าร่วมงานได้ลองทำเว็บไซต์ตามแบบ Landing page ของ Skooldio โดยให้ลองใช้เครื่องมืออย่างไม่ยากนัก เริ่มตั้งแต่การสร้าง Page, การใช้ Panel ต่างๆ ไปจนถึงการปรับแต่งเว็บแบบ ​Responsive

ถึงแม้ Webflow จะมีข้อดีอยู่มากแต่ก็ยังไม่ค่อยเหมาะที่จะใช้ใน Ideation Stage เช่น ตอนเริ่มคิด User flow หรือ Site map รวมไปจนถึงการขึ้น Prototype แบบหยาบๆ (Low-fidelity) เนื่องจากพื้นฐานเป็น Web-logic (ผู้ใช้อาจจะต้องมีความเข้าใจเรื่อง HTML,CSS บ้างเล็กน้อย) จึงไม่เหมาะกับการปรับเปลี่ยนหรือแก้ไขบ่อยๆ ถ้าเทียบกับ Prototype Tools อื่นๆ เช่น Sketch หรือ Adobe XD ที่ทำได้รวดเร็วกว่า

สรุปแล้ว Webflow เป็นเครื่องมือในการออกแบบ Web/App ที่น่าสนใจอย่างมากอีกตัวหนึ่ง เพราะนอกจากจะช่วยประหยัดเวลาในขั้นตอนของการแปลง Design เป็น Front-end code แล้ว ยังสามารถสื่อสารไอเดียพวก Transition ต่างๆ ได้เป็นอย่างดี หากสนใจ Webflow หรือเพิ่งเริ่มศึกษา HTML, CSS ก็สามารถดู VDO Tutorials เพิ่มเติมที่มีอยู่ในเว็บไซต์ของ Webflow เอง ซึ่งมีครอบคลุมเกือบทุกหัวข้อ

สุดท้ายนี้ ใครที่ไม่อยากพลาดงานมีทอัพดีๆ จัดเป็นพิเศษ เฉพาะสำหรับศิษย์เก่า Skooldio แบบนี้ อย่าลืมติดตามอัพเดทผ่าน Skooldio Facebook Fanpage นะครับ

Up Next

สำหรับผู้ที่อยากได้สิทธิ์มามีทอัพครั้งต่อๆ ไป มาเรียนกับเราที่ Skooldio ได้ทั้ง Workshop หรือจะเรียนออนไลน์ก็ได้นะครับ ดูคอร์สทั้งหมดได้ที่นี่ แล้วเจอกันครับ 🙂