ออกแบบเว็บไซต์ด้วย Framer

Graphic design ความรู้สำหรับ การออกแบบ ออกแบบเว็บ Phothoshop ตัดต่อวีดีโอ

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
chakrit
PHP Super Hero Member
PHP Super Hero Member
โพสต์: 788
ลงทะเบียนเมื่อ: 27/06/2022 9:32 am

ออกแบบเว็บไซต์ด้วย Framer

โพสต์ที่ยังไม่ได้อ่าน โดย chakrit »

Framer คือโปรแกรมออกแบบ Website หรือ Application และยังสามารถสร้าง Interactive Prototype ได้อีกด้วยอำนวยความสะดวกสุดๆไปเลย Framer ไม่ได้มีดีแค่นี้นะยังมีตัวช่วยต่างๆในการออกแบบมาทำให้ดูดีและง่ายต่อการใช้งานอีกด้วยเจ้าตัวโปรแกรม Framer ต้องบอกเลยไม่ใช่โปรแกรมต้องโหลดเหมือ Adobe XD สุดเยอดไปเลยใช่ไหมงั้นเราไปดูกันเลยดีกว่า

Framer สามารถออกแบบทั้งแอปพลิเคชัน (Application) หรือแม้แต่บนหน้าเว็บไซต์ (Website) ให้เป็นเรื่องง่ายๆ วิธีการใช้งานของโปรแกรม Framer นั้นต้องบอกเลยว่าง่ายมากๆ โดยจะมีเครื่องมือให้เราเลือกใช้โดยการลากและวางสิ่งที่เราอยากได้มาตบแต่งเว็บไซต์ หรือแอพพิเคชั่นนของเรา เราสามารถทำออกแบบ Workflow(เวิร์กโฟลว์ ) ให้ลูกค้า หรือคนในทีมเข้าใจหลักการทำงานของ Application (แอปพลิเคชัน) หรือ Website(เว็บไซต์) ของเรา เรามาดูหน้าตาของเจ้าตัว Framer กันดีกว่า
หน้าเว็บไซต์Framer
หน้าเว็บไซต์Framer
webframer.jpg (31.92 KiB) Viewed 892 times
หากใครไม่มีรหัสผ่านก็สามารถสมัครสมาชิกได้ที่เว็บนี้เลย คลิกที่นี้
ถ้าทุกคนสมัครสมาชิกแล้วเราก็ไปดูเครื่องมีที่มีมาให้เราใช้กันเลย
หน้าตาของเว็บFramer
หน้าตาของเว็บFramer
หน้าตาของframer.jpg (14.9 KiB) Viewed 892 times
หน้าตาดูใช้งานใช่ไหมละมาดูในส่วนแรกกันดีกว่า
หน้าเว็บที่เราออกแบบ
หน้าเว็บที่เราออกแบบ
pages.png (14.35 KiB) Viewed 892 times
ในส่วนของตรงนี้จะสามารถเพิ่มหน้าเว็บไซต์ที่เราต้องการเพิ่มเข้าไปได้ หรือหากใครต้องการจะออกแบบเป็น Application ก็กดบวกตรง Canvas ได้เลย และยังสามารถเลือกรุ่นของโทรศัพได้อีกด้วย
เลือกออกแบบเป็นApplication
เลือกออกแบบเป็นApplication
canvas.png (43.52 KiB) Viewed 892 times
ที่ขาดไปไม่ได้เลยคือ ตัวเมนู Insert จะเห็นว่ามีตัวเลือกให้เราเลือกใช้เยอะเลย
เมนูinsert
เมนูinsert
insert.png (84.85 KiB) Viewed 892 times
สรุป Framer เป็นโปรแกรมสำเร็จรูปที่ช่วยในการออกแบบเว็บไซต์มีเครื่องมือให้เลือกใช้หลากหลายอย่างและยังสามารถ Run ดูตัวอย่างเองได้อีกด้วยนอกจากเครื่องมือเหล่านี้ยังมีเครื่องมืออีกมากมายให้เลือกใช้หากใครสนใจก็เข้าไปลองเล่นกันได้นะคับ ข้อดีคือไม่ต้องโหลดโปรแกรมเลยละและวิธีการใช้ก็แค่ ลากวางเท่านั้นเองและยังสามารถนำไปใช้เป็นทีมได้อีกด้วย หรือถ้าหากใครไม่ถนัดก็สามารถเลือกใช้ Figma ได้เหมือนกัน หรือจะเป็น Adobe XD แต่ก็มีปลักอินให้เลือกใช้หลากหลายแต่ต้องดาวน์โหลดมาใช้นะ

อ้างอิง
https://www.framer.com/
https://th.linkedin.com/company/framer
https://akexorcist.dev/prototyping-tools-the-fast-way-to-get-started-the-mobile-app-development/
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 29