เวลาเริ่มงานออกแบบใหม่ สิ่งที่ยากที่สุดอย่างหนึ่งคือ “ยังนึกภาพไม่ออก” ว่างานควรไปทางไหนดี ควรใช้ layout แบบไหน mood ควรเป็นยังไง หน้าเว็บควรเล่าเรื่องแบบไหน หรือ brand ควรมีบุคลิกประมาณไหน
การมีแหล่ง Reference ที่ดีช่วยลดเวลาตรงนี้ได้เยอะมาก เพราะเราไม่ต้องเริ่มจากหน้ากระดาษเปล่า แต่เริ่มจากการดูงานจริง ดูวิธีคิดของคนอื่น แล้วค่อยหยิบสิ่งที่เหมาะกับงานของเรามาปรับใช้
โพสต์นี้เลยรวมเฉพาะหมวด “แรงบันดาลใจและคอมมูนิตี้” ก่อน เป็นชุดเริ่มต้นสำหรับคนที่อยากหาไอเดียงานออกแบบให้เร็วขึ้น โดยเฉพาะงานเว็บไซต์ UI, branding, landing page, portfolio และ presentation
🌐 เว็บรวมงานออกแบบและคอมมูนิตี้
Dribbble - คอมมูนิตี้โชว์งานดีไซน์ขนาดใหญ่ เหมาะกับการดู visual style, UI, branding และ illustration
Behance - รวม portfolio และ case study จากนักออกแบบทั่วโลก เหมาะกับการดูงานเป็นโปรเจกต์เต็ม
Awwwards - รวมเว็บไซต์ที่ได้รางวัลด้านดีไซน์ เหมาะกับการดูเว็บที่มี motion, interaction และ visual direction ชัด
🖥️ Reference สำหรับเว็บไซต์และ Landing Page
Godly - คลัง inspiration สำหรับเว็บไซต์สมัยใหม่ งานค่อนข้างคัดมาแล้ว
Land-book - รวม landing page และหน้าเว็บจากแบรนด์ต่าง ๆ
Lapa Ninja - รวม landing page, free UI kits และตัวอย่างหน้าเว็บ
One Page Love - ตัวอย่างเว็บหน้าเดียว เหมาะกับ portfolio, product page และ campaign page
Minimal Gallery - รวมเว็บสไตล์มินิมอล สะอาด ดูง่าย
🧭 Reference เฉพาะส่วนของหน้าเว็บ
บางครั้งเราไม่ได้ต้องการดูทั้งเว็บ แต่อยากดูเฉพาะส่วน เช่น menu, footer, hero หรือ CTA กลุ่มนี้ช่วยประหยัดเวลามาก
Navbar Gallery - ดูตัวอย่าง navigation bar จากเว็บจริง
Footer Design - ตัวอย่าง footer ที่ดี เหมาะกับการแก้ปัญหาช่วงท้ายเว็บ
CTA.gallery - รวม call-to-action section จากเว็บต่าง ๆ
SupaHero - รวม hero section สำหรับหาไอเดียหน้าแรก
🌙 งานโหมดมืดและเลย์เอาต์สมัยใหม่
Dark Mode Design - แรงบันดาลใจสำหรับงานโหมดมืด
Dark Design - รวมเว็บและ interface โทนมืด
BentoGrids - รวมเลย์เอาต์แบบ bento grid ที่กำลังนิยมในงานเว็บและ product page
📱 Reference สำหรับ Mobile App และ Product UI
Mobbin - คลังหน้าจอแอปมือถือจาก product จริง เหมาะกับการดู flow และ pattern
Appshots Design - ตัวอย่าง mobile app screenshots สำหรับดูการนำเสนอหน้าจอ
UI Sources - ดูหน้าจอและ user flow ของแอปต่าง ๆ
🪪 Portfolio, Logo และ Brand Guidelines
Bestfolios - รวม portfolio ดีไซเนอร์ระดับมืออาชีพ
Logggos - แหล่งดู reference งานโลโก้
Logobook - คลังโลโก้สำหรับดูรูปทรงและแนวคิด
Logo System - ดูระบบโลโก้และ identity
BrandGuidelines - รวม brand guideline จากแบรนด์ต่าง ๆ
schema.supply - รวม identity system และ brand reference
🖼️ Presentation และ Moodboard
🧩 Component และ Design System
Component Gallery - ดูตัวอย่าง component จากหลาย design system
Design Systems Surf - รวม design system สำหรับศึกษา pattern และโครงสร้าง
UI Components Handbook - คู่มือดูตัวอย่าง UI components
🎯 วิธีเลือกใช้ Reference ให้ไม่หลงทาง
เวลาเปิดเว็บ Reference เยอะ ๆ อาจทำให้สับสนได้ง่าย ผมแนะนำให้ดูแบบมีโจทย์:
ถ้ากำลังทำ landing page: ดู Lapa Ninja, One Page Love และ Awwwards
ถ้ากำลังทำแอปหรือ dashboard: เริ่มจาก Mobbin, UI Sources และ Component Gallery
ถ้ากำลังหา mood ของแบรนด์: ดู Behance, BrandGuidelines และ schema.supply
ถ้ากำลังทำ portfolio: ดู Bestfolios และ Deck.Gallery
🧷 สรุป
Reference ที่ดีไม่ได้มีไว้ให้ลอกงาน แต่มีไว้ช่วยให้เราเห็นความเป็นไปได้มากขึ้น เห็นว่า layout แบบไหนเล่าเรื่องได้ดี สีแบบไหนให้ mood ที่ใช่ หรือ component แบบไหนเหมาะกับงานที่กำลังทำอยู่
ถ้าเพิ่งเริ่มเก็บคลังแรงบันดาลใจ ผมแนะนำให้เริ่มจากไม่กี่เว็บก่อน เช่น Awwwards, Godly, Land-book, Mobbin และ Behance แค่นี้ก็ช่วยให้เริ่มงานออกแบบได้ไวขึ้นมากแล้ว
บทความนี้เรียบเรียงจากโปรเจกต์ Awesome Design Resources List โดย darelova และนำมาจัดหมวด/เขียนคำอธิบายใหม่ให้เหมาะกับการใช้งานจริงในภาษาไทย
