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

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

 

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

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

  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 ขนาดใหญ่ได้ด้วย

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

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

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

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

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

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

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

Up Next

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

More in:Design

Comments are closed.