Design

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

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 หรือจะเรียนออนไลน์ก็ได้นะครับ ดูคอร์สทั้งหมดได้ที่นี่ แล้วเจอกันครับ 🙂

You may also like

อยากเป็น UX/UI Designer ต้องเรียนอะไร
Design

อยากเป็น UX/UI Designer ต้องเรียนอะไร? แนะนำเส้นทางพาคุณย้ายสายสู่นักออกแบบบน Digital Product

ตอนนี้หลายคนคงกำลังสนใจสายงานใหม่มาแรงอย่าง UX/UI Designer ที่กำลังเป็นที่สนใจ และเป็นที่ต้องการในตลาดอย่างมาก เพราะไม่ว่าจะเป็นบริษัทแบบไหนต่างก็ต้องปรับตัวออก Digital Product อย่าง Website หรือ Application ออกมา  แต่เป็นอาชีพที่มีความรู้เฉพาะตัวแบบนี้ ต้องเริ่มเรียน ...
Business

ทำความรู้จัก Voxel Art งานกราฟิก 3D ยอดฮิตที่สร้างได้ตั้งแต่ Item, Character ยันเมือง

หลายๆ คนอาจจะคุ้นหน้าคุ้นตากับงานภาพสไตล์ Pixel Art หรืองานภาพ Computer Graphic แบบ 8bit ที่ทำให้เรานึกถึงอดีตกันมาบ้างแล้ว (ถ้าใครนึกไม่ออกก็ลองคิดถึงภาพ Arcade Game อย่าง Pac-Man ...

More in:Design

Design

รวม Figma Plugin 2022 ออกแบบไว ใช้งานได้จริง!

ในยุคที่คนทำงานออกแบบ UX/UI เกือบทุกคนหันมาใช้เครื่องมือมาแรงแห่งยุคอย่าง Figma กันอย่างจริงจัง เนื่องจากหน้าโปรแกรมที่เข้าใจง่าย ส่งต่องานกับทีมได้อย่างไม่มีสะดุด ใช้งานแบบฟรีก็ทำได้ แถมมาพร้อมลูกเล่นมากมายที่ช่วยให้งานออกแบบในยุคนี้ทำได้ง่ายกว่าเมื่อก่อน มี Community ที่เปิดให้ทุกคนมาแชร์ widgets หรือ plugins ...
Design

Figma คืออะไร? ทำไมถึงเป็น Tool มาแรงที่สุดในวงการ Design!

Figma คืออะไร ??? ทำไมจึงเป็นเครื่องมือออกแบบอันดับ 1 ที่ UXUI Designer ทั่วโลกเลือกใช้  Figma คือเครื่องมือออกแบบที่ขึ้นแท่นอันดับ 1 ในปี 2022 โดยสามารถใช้ออกแบบได้ตั้งแต่เว็บไซต์, ...
UX Writing คืออะไร Design

ไขข้อข้องใจ! UX Writing คืออะไร ทำไมสำคัญกับ Product พร้อมตัวอย่างน่าสนใจ

UX Writing คืออะไร? ทำไมต้องรู้จักคำนี้ด้วยนะ? คุณอาจจะเคยผ่านการใช้งาน Application มากหน้าหลายตาในแต่ละวัน ซึ่งแอปฯ บางตัวก็ทำให้คุณรู้สึกดีตลอดการใช้งาน เข้าแล้วไม่อยากออก เข้าแล้วอยากเข้ามาใช้บ่อยๆ ทุกวัน แต่กลับกันกับแอปฯ บางตัวที่ทำให้คุณหงุดหงิดใจตลอดการใช้งาน อยากออกแทบตาย ...
Web Design Font Pairing Design

เทคนิคการจับคู่ฟอนต์ไม่ให้เละ ฉบับ Web Designer มือโปร

หนึ่งในปัญหาใหญ่ของคนเริ่มต้นออกแบบเว็บ คือเรื่องของการเลือกใช้ฟอนต์ที่ดูเหมือนง่ายแต่ยาก ยิ่งเป็นเรื่องของการจับคู่ฟอนต์ที่ต่างกันให้มาอยู่ด้วยกันอย่างลงตัวสวยงามยิ่งยากเข้าไปใหญ่ วันนี้เราเลยนำรวมเทคนิคดีๆ ในการจับคู่ฟอนต์ฉบับ Web Designer มือโปรมาเล่าสู่กันฟัง 1.ใช้ฟอนต์ที่ให้ระดับอารมณ์แตกต่างกัน หน้าตาของฟอนต์มีผลต่ออารมณ์ความรู้สึกของคนอ่าน การลองจับคู่ฟอนต์ที่ให้อารมณ์แตกต่างกันจะช่วยให้หน้าเว็บดูมีลูกเล่น น่าสนใจ ไม่ราบเรียบจนเกินไป ก่อนที่จะเลือกจับคู่ฟอนต์ ต้องพิจารณาก่อนว่าบุคลิกเว็บที่เรากำลังออกแบบเป็นอย่างไร ...

Comments are closed.