Recap: ‘“Webflow: Design = Code’’ — Skooldio Alumni Meetup #1

 

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

ตัวอย่าง หน้าตา UI และ Panel การใช้งานของ Webflow

ตัวอย่าง การออกแบบในแต่ละขนาดหน้าจอ (Responsive)

ตัวอย่าง การสร้าง Hover Effects ให้กับองค์ประกอบต่างๆ

Up Next

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