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

ui-design-Cover
Design

ถอดองค์ประกอบการออกแบบ UI ที่ดี ด้วยหลัก ‘Component-based Design’

สิ่งหนึ่งที่สำคัญมากในการออกแบบ UI ที่นักออกแบบทุกคนควรรู้ นั่นคือเรื่องของ ‘Component-based Design’ คือการมองแยกส่วนประกอบต่างๆ ที่ร่วมกันเป็นหน้าเว็บไซต์หรือแอปฯ ที่เราออกแบบว่ามีส่วนประกอบมาจากอะไรบ้าง หากใครผ่านการเรียนการออกแบบมาก่อน อาจจะคุ้นเคยกับหลักองค์ประกอบการวาดรูปที่เริ่มตั้งแต่จุด จุดต่อกันกลายเป็นเส้น จากเส้นต่อกันเป็นระนาบ และระนาบประกบกันเป็นรูปทรง เช่นเดียวกันกับการออกแบบ ...
psychology ux ui blog cover
Design

หลักจิตวิทยากับการช่วยออกแบบ UX UI ให้ชีวิต User ง่ายขึ้น

ใครที่กำลังทำงานหรือศึกษาเรื่อง UX UI น่าจะเคยผ่านตาเรื่องของหลักจิตวิทยาการออกแบบที่นำมาใช้กับ UX UI กันบ้างแล้ว แต่เอาเข้าจริงแล้วในฐานะคนที่เป็นหรืออยากเป็น UX/UI Designer ควรมีความรู้พื้นฐานด้านจิตวิทยามากน้อยแค่ไหน โดยหลักการแล้วหลักจิตวิทยาจะช่วยให้ User ใช้งานเว็บหรือแอปฯ ที่เราออกแบบได้อย่างมีประสบการณ์ที่ดีได้อย่างไร ...

More in:Design

Business

ทำความรู้จัก Design Thinking – สกิลมาแรงที่บริษัทชั้นนำทั่วโลกกำลังมองหา

Design Thinking ไม่ใช่แค่ชื่อวิชาในคลาสเรียนของเด็กออกแบบ แต่เป็นสกิลที่กำลังเป็นที่ต้องการของบริษัทชั้นนำในหลายประเทศทั่วโลก เช่น Apple, Google , Microsoft, Tesla หรือ Startup ไทยอย่าง Bitkub อีกด้วย ...
Business

วิธีสร้าง Pitch แบบโอมากาเสะ – ด้วย Storytelling Framework

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

ทำ Data Visualization ให้เวิร์ก – กับ 9 แหล่งความรู้ที่มือโปรแนะนำ

แนะนำ 9 แหล่งความรู้อัปสกิล ซึ่งสรุปจากไอเดียของ 4 Speakers ผู้เชี่ยวชาญในวงการ Data Visualization ที่ไปพูดคุยใน Skooldio Live ตอน The Power ...
Design

Motion กับการออกแบบ UX ตามหลักจิตวิทยาการออกแบบ และการทำงานในสมองของ User

Table of ContentsWhy Motion?ส่วนแรกคือประโยชน์ที่มีต่อสมองของ Userนอกจากจะทำงานกับสมองแล้ว Motion ยังทำงานกับจิตใจของมนุษย์อีกด้วย Why Motion? ทำไม UX/UI Designer ควรให้ความสำคัญกับการนำ Motion Design ...

Comments are closed.