Responsive Web Design

5 เทคนิคสำหรับ Web Designer ที่จะเริ่มคิดแบบ Responsive

เรื่องที่เกี่ยวข้อง - Leak from Course, Responsive Web Design, Summary

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

1. Design for USER

  • หาสิ่งที่คนอยากได้
  • ทั่วไปแล้วเราจะออกแบบ Web จากความต้องการของเจ้าของธุรกิจที่มาจ้างเรา และไม่ได้คิดว่าใครจะมาใช้ Web เรา
  • ใช้เทคนิค Design ของเรา ออกแบบเนื้อหาให้ลูกค้า “กินง่ายที่สุด”

2. Sketch, Sketch, Sketch, don’t Photoshop until it’s necessary.

  • ติด Sketch sheet ไว้ใช้ อุ่นใจกว่า
  • เก็บ Photoshop ไว้ขั้นตอนหลังๆ เพราะเปลืองเวลา
  • หัด Sketch แบบวาง Layout

3. Start design from content

  • การออกแบบ Content บน Website เหมือนเขียนจดหมายรัก คุณมีโอกาสไม่กี่ครั้งที่จะจับ user ทีเดียวอยู่
  • ไม่มีใครนั่งอ่านทุกอย่างบน Web ของเรา
  • Content Hierarchy
  • Photo Communication
  • Message Communication

4. Mock up in Web Browser

  • Cover with HTML Element
  • Menu on top (Trend)
  • Linear design

5. Test, Test, Test

  • No bullet-proof web version เวอร์ชั่นแรก เวอร์ชั่นเดียวจบ ทำยากกว่าซื้อหวยใต้ดิน แล้วถูกรางวัลที่ 1
  • Test for using first, not beauty.
  • caniuse.com
  • www.nextflow.in.th/learn/

 

 

เริ่มต้นยุค AI ด้วยคอร์สฟรี และพรีเมี่ยม กับพล

หากชอบสิ่งที่พลเล่า เรื่องที่พลสอน สามารถสนับสนุนพลโดยการเข้าเรียนคอร์สออนไลน์ของพลนะคร้าบ

  • เข้าใจง่าย ใช้ได้จริง ออกแบบการสอนอย่างเข้าใจโดยโค้ชพล
  • มีคอร์สสำหรับคนใช้งานทั่วไป จนถึงเรียนรู้เพื่อใช้งานในสายอาชีพขั้นสูง
  • ทุกคอร์สมีใบประกาศณียบัตรรับรองหลังเรียนจบ

เราใช้คุกกี้เพื่อพัฒนาประสิทธิภาพ และประสบการณ์ที่ดีในการใช้เว็บไซต์ของคุณ คุณสามารถศึกษารายละเอียดได้ที่ นโยบายความเป็นส่วนตัว และสามารถจัดการความเป็นส่วนตัวเองได้ของคุณได้เองโดยคลิกที่ ตั้งค่า

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

Allow All
Manage Consent Preferences
  • Always Active

Save