UXUI - Website Responsive Design

📍 Design Challenge UXUI รุ่น 45 คืออออ !!!

.

🔥 Landing Page - UNO Coffee [Website Responsive Design]

.

ตัวอย่างผลงานนักเรียนกลุ่ม 1 : สำหรับเนื้อหา 1 สัปดาห์แรกเท่านั้นนนน เก่งมากก

.

เริ่มต้นจาก 0 สู่ผลงานจริง สำหรับโจทย์จำลอง ให้ฝึกฝน ก่อนที่จะลงมือทำจริงใน Pitching Project / Portfolio ของทุกคน

.

♥️ ปล. โจทย์สมมุติแต่ละรุ่น จะเปลี่ยนไปเรื่อย ๆ อ้างอิงจากสถาการณ์ช่วงนั้นและผู้สอนนั้นเอง 55 😂

.

หากอยากเห็น Design กลุ่มอื่น ๆ ไว้แอดมินเอามาแชร์ให้ดูกัน รุ่นนี้งานดีทุกกลุ่มเลยย

.

⚠️ ข้อสงวนสิทธิ์ (Disclaimer)⚠️:

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

.

.

👉 สอบถามรายละเอียดคอร์ส UXUI ได้ที่นี่ https://m.me/uxuistudio9

.

📥 สำหรับองค์กรหรือบริษัท ที่สนใจอบรมสัมมนา on-site/online หรือ Consult Project

สามารถติดต่อได้ทาง IB : https://m.me/uxuistudio9 ได้เลยครับ

.

# Unlock Skill UX/UI - เพราะเราเข้าใจว่า "มือใหม่" ต้องการอะไร

#uxuistudio #uxdesign #uidesign #graphicdesign #uxui #uxuiworkshop #uxworkshop #uiworkshop #Figma

2025/9/6 แก้ไขเป็น

... อ่านเพิ่มเติมในยุคดิจิทัลปัจจุบัน การออกแบบ UX/UI ที่ตอบสนองต่อการใช้งานบนอุปกรณ์หลากหลาย เช่น สมาร์ทโฟน แท็บเล็ต และเดสก์ท็อปนั้น เป็นสิ่งที่สำคัญมาก เว็บไซต์ที่มีการดีไซน์แบบ Responsive จะช่วยเพิ่มประสบการณ์ผู้ใช้และสร้างความพึงพอใจในทุกแพลตฟอร์ม ซึ่งถือเป็นทักษะพื้นฐานที่นักออกแบบ UX/UI ควรเรียนรู้ การเข้าร่วม Design Challenge UX/UI รุ่น 45 นี้ ถือเป็นโอกาสที่ดีสำหรับนักเรียนที่เริ่มต้นจากศูนย์ ในการฝึกฝนและปรับใช้ความรู้จริง ผ่านการออกแบบ Landing Page สำหรับ UNO Coffee โดยเน้นการออกแบบให้ใช้งานง่าย สวยงาม และตอบโจทย์กลุ่มเป้าหมายที่ต้องการเข้าถึงข้อมูลอย่างรวดเร็ว ในกระบวนการเรียนรู้ นักเรียนจะได้เรียนรู้เทคนิคการออกแบบที่สำคัญ เช่น การวางโครงสร้างเนื้อหา (Information Architecture) การใช้สีและองค์ประกอบที่ช่วยเพิ่มการอ่านเข้าใจ (Visual Hierarchy) และการทดสอบการใช้งานจริง (Usability Testing) ซึ่งช่วยให้เกิดผลงานที่มีคุณภาพและพร้อมใช้ทำ Portfolio หรือ Pitching Project สำหรับงานอนาคต นอกจากนี้ การเรียนรู้ UX/UI ผ่านโครงการสมมุตินี้ ยังเปิดโอกาสให้นักเรียนทดลองแสดงความคิดสร้างสรรค์ และแก้ไขปัญหาในสถานการณ์จำลองที่สมจริง โดยมีผู้สอนเป็นผู้ช่วยแนะนำตลอดเส้นทาง สำหรับผู้ที่สนใจการอบรมเพิ่มเติม ทางทีม UXUI Studio ยังพร้อมให้คำปรึกษาและอบรมแบบ on-site หรือออนไลน์ เพื่อเสริมทักษะในด้าน UX/UI อย่างเต็มรูปแบบ ทั้งสำหรับบุคคลทั่วไปและองค์กร สรุปได้ว่า การออกแบบ Responsive Website ไม่เพียงแต่เพิ่มความทันสมัยให้เว็บไซต์ แต่ยังช่วยเพิ่มโอกาสทางธุรกิจ สร้างประสบการณ์ที่ดีให้กับผู้ใช้ และเพิ่มมูลค่าให้กับผลงานของนักออกแบบมือใหม่ได้เป็นอย่างดี

โพสต์ที่เกี่ยวข้อง

ภาพปกแสดงแล็ปท็อปและอุปกรณ์สมาร์ทโฮม พร้อมข้อความ "Ep.2 คำศัพท์สาย tech ที่ UX/UI ควรรู้" บนพื้นหลังสีม่วงเหลือง เป็นการแนะนำบทความเกี่ยวกับคำศัพท์เทคโนโลยีที่นักออกแบบ UX/UI ควรรู้
ภาพอธิบาย Design System พร้อมคำจำกัดความภาษาไทย และตัวอย่างองค์ประกอบ UI ต่างๆ เช่น Accordion, Loaders, Avatars, Buttons และ Typography ที่แสดงถึงชุดคู่มือการออกแบบ
ภาพอธิบาย Breakpoint พร้อมคำจำกัดความภาษาไทย และภาพประกอบแสดงการปรับเลย์เอาต์ของเว็บไซต์ตามขนาดหน้าจอที่แตกต่างกัน (XS, S, M, L) สำหรับ Responsive Design
Ep.2 คำศัพท์สาย Tech ที่สาย UX/UI ต้องรู้!
เข้าใจคำเหล่านี้ ทำงานกับ Dev ลื่นไหลขึ้นเยอะ #uxui #uidesigner #developer #สายtech
Nashavibes

Nashavibes

ถูกใจ 205 ครั้ง

แหล่ง Website สำหรับ UX / UI Designer ครับ~✨💫🌟
1. Figmacomponents.com เว็บรวมองค์ประกอบ UX/UI ใช้ซํ้าครับ สามารถดาวน์โหลดไปใช้ได้ฟรีเลย ทั้งUI แถบเมนู ตั้งค่า agreement policy introduction มีหมดเลย~ 2. Durves.com Design dot pattern ส่วนตัวสำหรับนำไปใช้ในงาน SVGs และ PNGs ครับบ 3. Freepik.com Mockups 2D 3D สำหรับ สินค้าเกือบทุกประเภท ร
ChinoChann

ChinoChann

ถูกใจ 420 ครั้ง

สกิลเสริมที่ทำให้พอร์ต UX/UI น่าสนใจขึ้น
สกิลเสริมที่ทำให้พอร์ต UX/UI น่าสนใจขึ้น และเพิ่มโอกาสได้งาน เดี๋ยววันหลังจะมาเล่าแต่ละสกิลให้ฟัง ฝากกดติดตามไว้ 😉 ย้ำ สกิลพวกนี้ไม่ต้องเก่งขั้นเทพ แต่แค่มีพื้นฐาน ก็ทำให้พอร์ตดูครบและมีโอกาสได้งานมากขึ้น และมันสามารถใช้ได้จริงในชีวิตการทำงาน #UXUI #uxuidesign #รีวิวอาชีพ #วัยทำงาน
Nashavibes

Nashavibes

ถูกใจ 354 ครั้ง

โปรแกรมสำหรับ UXUI Designer 💫
รวมทุกโปรแกรมที่สำคัญสำหรับสาวกอุกอุยทุกคน! ใครที่เคยใช้โปรแกรมไหนแล้วอยากมาแชร์กันบ้าง คอมเม้นมาบอกพิกัดกันได้เล้ยยย 😚 #uxuidesign #โปรแกรมออกแบบ #designer
Dddesignx

Dddesignx

ถูกใจ 169 ครั้ง

ภาพแสดงการออกแบบเว็บไซต์ UNO Coffee แบบ Responsive Design สำหรับเดสก์ท็อปและมือถือ ซึ่งเป็นผลงาน Design Challenge UXUI รุ่น 45 กลุ่ม 4 ประกอบด้วยหน้า Landing Page, รายละเอียดสินค้ากาแฟ, สินค้า UNO และโทนสีที่ใช้ในการออกแบบ
Website Responsive Design - UXUI Design
ปิดท้ายด้วยย ผลงาน Design Challenge UXUI รุ่น 45 - GROUP 4 . 🔥 Landing Page - UNO Coffee [Website Responsive Design] . ตัวอย่างผลงานนักเรียนกลุ่ม 4 : สำหรับเนื้อหา 1 สัปดาห์แรกเท่านั้นนนน เก่งมากก . เริ่มต้นจาก 0 สู่ผลงานจริง สำหรับโจทย์จำลอง ให้ฝึกฝน ก่อนที่จะลงมือทำจริงใน Pitching Project
UXUI STUDIO

UXUI STUDIO

ถูกใจ 1 ครั้ง

ภาพแสดงการออกแบบเว็บไซต์ UNO Coffee แบบ Responsive Design สำหรับ Desktop, Tablet และ Mobile โดยปรับเลย์เอาต์และเนื้อหาให้เหมาะสมกับขนาดหน้าจอที่แตกต่างกัน รวมถึงส่วนเมนูและโปรโมชั่น
ภาพแสดงการออกแบบเว็บไซต์ UNO Coffee ส่วนเมนูเครื่องดื่มและโปรโมชั่นในรูปแบบ Responsive Design สำหรับ Desktop, Tablet และ Mobile โดยมีการจัดเรียงสินค้าและข้อเสนอพิเศษที่ปรับเ��ปลี่ยนตามขนาดหน้าจอ
ภาพแสดงการออกแบบเว็บไซต์ UNO Coffee ส่วนเกี่ยวกับเรา สินค้าขายดี และโปรแกรมสะสมคะแนนในรูปแบบ Responsive Design สำหรับ Desktop, Tablet และ Mobile ที่ปรับการจัดวางข้อมูลและรีวิวลูกค้าให้เหมาะสม
สนามสอบสุดโหดของ UX/UI มือใหม่ - Responsive Design
🚨 Responsive Design คือสนามสอบสุดโหดของ UX/UI มือใหม่ 😎 . เพราะคุณต้องคิด “ทุกขนาดจอ ทุกสัดส่วน ทุก Scenario” และเข้าใจความเป็นไปได้ ทั้งข้อความที่ขยาย ภาพที่หด และการจัดลำดับเนื้อหาที่เปลี่ยนไป . หลายคนยังเข้าใจผิดว่า UX/UI = ออกแบบภาพให้เหมือน Graphic Design แต่จริง ๆ แล้วมันต่างกันตั้งแต่
UXUI STUDIO

UXUI STUDIO

ถูกใจ 2 ครั้ง

5 ความผิดพลาดของ Portfolio UX/UI
❌ 5 ความผิดพลาดของ Portfolio UX/UI ที่เจอบ่อยมาก . 1️⃣ มีแค่ UI แต่ไม่มี Process งานสวยอย่างเดียวไม่พอ คนดูอยากเห็น “วิธีคิด” ของเราด้วย—ตั้งแต่เจอปัญหา → วิเคราะห์ → ตัดสินใจออกแบบ . 2️⃣ Mood & Tone ไม่เหมือนเว็บไซต์/แอป บางพอร์ตดูเหมือนโปสเตอร์หรือ artwork มากไป แต่ถ้าสมัครงานสาย produ
UXUI STUDIO

UXUI STUDIO

ถูกใจ 5 ครั้ง

ภาพแสดงส่วนหนึ่งของเมนูเครื่องดื่ม UNO! Coffee เช่น Pandan Latte, Uji Matcha Latte, Banoffee Latte และเครื่องดื่มคลาสสิก พร้อมราคาและป้ายแนะนำ/ขายดี
Design Challenge UXUI รุ่น 45
ผลงาน Design Challenge UXUI รุ่น 45 - GROUP 3 ถือว่าเก่งมาก สำหรับงานแรกครับ 🤩 . 🔥 Landing Page - UNO Coffee [Website Responsive Design] . ตัวอย่างผลงานนักเรียนกลุ่ม 3 : สำหรับเนื้อหา 1 สัปดาห์แรกเท่านั้นนนน เก่งมากก . เริ่มต้นจาก 0 สู่ผลงานจริง สำหรับโจทย์จำลอง ให้ฝึกฝน ก่อนที่จะลงมือทำจริง
UXUI STUDIO

UXUI STUDIO

ถูกใจ 2 ครั้ง

ภาพแสดงการออกแบบเว็บไซต์ UNO COFFEE แบบ Responsive สำหรับ Desktop, Tablet และ Mobile มีส่วนของเมนูยอดนิยม โปรโมชั่น และเกี่ยวกับ UNO Coffee โดยใช้โทนสีแดงและน้ำตาล
ภาพนำเสนอการออกแบบเว็บไซต์ UNO COFFEE แบบ Responsive ในส่วนของเกี่ยวกับเรา สินค้าขายดี โปรโมชั่น รางวัล เรื่องราวของแบรนด์ และความคิดเห็นลูกค้า แสดงผลบนอุปกรณ์หลากหลายขนาด
ภาพแสดงการออกแบบเว็บไซต์ UNO COFFEE แบบ Responsive ในส่วนของเมนูเครื่องดื่ม เช่น ลาเต้ใบเตย มัทฉะลาเต้ และโปรโมชั่นซื้อ 1 แถม 1 พร้อมราคาและรูปแบบการแสดงผลที่ปรับเปลี่ยนตามขนาดหน้าจอ
UXUI Workshop - Design Challenge
🔥 Design Challenge - Workshop . 1 ใน Workshop ในคลาส Unlock Skill UX/UI ที่ “เปลี่ยนโจทย์ทุกรุ่น” ตามใจอาจารย์ผู้สอน…... . เอ้ย! ตามเทรนด์ Web & App ล่าสุด 😆 . เพราะเป้าหมายของ Workshop นี้คือเข้าใจ “Responsive Design” นั้นเอง 💻📱 . จะออกแบบยังไงให้ใช้งานได้ทั้ง Desktop, Tablet, iPad, แ
UXUI STUDIO

UXUI STUDIO

ถูกใจ 0 ครั้ง

UX/UI ต้องโค้ดเป็นไหม? 💻
คำตอบคือ ไม่จำเป็น แต่ถ้ารู้พื้นฐานนิดหน่อย บอกเลยว่าช่วยงานง่ายขึ้นเยอะ! #uxuidesigner #uxui #remotework #developer #coding
Nashavibes

Nashavibes

ถูกใจ 204 ครั้ง

KPI รัฐบาล - UXUI Design Challenge # 47
🚨 KPI รัฐบาล (Design Challenge # 47 ) . โจทย์ UXUI รุ่นนี้นี้เกิดจาก Painpoint ของแอดเองที่คิดว่า : . เราน่าจะมี “KPI รัฐบาล” กันจริงจังได้แล้วไหม? . เว็บ/แอปที่ทำให้การทำงานของรัฐบาล “ตรวจสอบได้” และ “ติดตามได้” เหมือนติดตามงานโปรเจกต์ จากคำประกาศ → แปลงเป็นตัวชี้วัด → อัปเดตความคืบหน้า → เห
UXUI STUDIO

UXUI STUDIO

ถูกใจ 0 ครั้ง

ผลงานทั้งหมดนี้ ออกแบบโดย "คน" ไม่ใช่ "AI"
📍 ผลงานทั้งหมดนี้ ออกแบบโดย "คน" ไม่ใช่ "AI" . 1 ใน Workshop UX DAY 2 ลงมือทำจริง ในคลาส Unlock Skill UX/UI ที่ “เปลี่ยนโจทย์ทุกรุ่น” ตามใจ Trend (อาจารย์ผู้สอน) 😂 . 🔥 จะเห็นว่าปัจจุบันมี AI Tools มากมาย สามารถสั่งการโดยการ prompt ไม่กี่บรรทัด สร้างงาน UI ออกมาภายในไม่กี่วินาที
UXUI STUDIO

UXUI STUDIO

ถูกใจ 0 ครั้ง

Unlock Skill UXUI รุ่น 49 - รอบเมษายน
Unlock Skill UX/UI รุ่น 49 (ONLINE COURSE) เพราะเราเข้าใจว่า “มือใหม่” ต้องการอะไร #อัปเดตเนื้อหา2026 . 📍 อัดแน่นพื้นฐานฉบับสรุป UX/UI 5 วัน และ 24 Workshop แบบ Interactive สนุกเหมือนอยู่ในห้องเรียน ในวันที่ 25, 26 เมษายน และ 10, 23, 24 พฤษภาคม 69 (วันเสาร์ - อาทิตย์) เวลาเรียน 09.30 - 17.30
UXUI STUDIO

UXUI STUDIO

ถูกใจ 0 ครั้ง

สายงานยอดฮิต UXUI Designer 💻✨
ทำไมคนเปลี่ยนจากกราฟิก มาร์เก็ตติ้ง หรือสายอื่น มาเป็น UX/UI กันเยอะ? เพราะมันคืออาชีพที่ได้ใช้ทั้งความคิดสร้างสรรค์ + การแก้ปัญหา เงินเดือนเติบโตไว ทำงานรีโมทได้จริง #uxui #uxuidesigner #ย้ายสายงาน #รายได้ดี #remotework
Nashavibes

Nashavibes

ถูกใจ 23 ครั้ง

ภาพพื้นหลังเป็นมือคนกำลังถือกระดาษตัวอย่างสี พร้อมข้อความหัวข้อว่า "UX/UI ทำงานร่วมกับใครบ้าง ตั้งแต่เริ่มจนจบ" บนพื้นหลังสีดำ
ภาพแสดงขั้นตอนที่ 1 ของการทำงาน UX/UI คือ "รับโจทย์ + วางเป้าหมาย" โดยระบุผู้ร่วมงานและสิ่งที่ UX/UI ทำในขั้นตอนนี้
ภาพแสดงขั้นตอนที่ 2 ของการทำงาน UX/UI คือ "รีเสิร์ช + เข้าใจผู้ใช้" โดยระบุผู้ร่วมงานและสิ่งที่ UX/UI ทำในขั้นตอนนี้
🧩 UX/UI ไม่ได้ทำงานคนเดียวบน Figma
เพราะในแต่ละเฟสของโปรเจกต์ เราต้องสื่อสารกับคนหลากบทบาท ทั้ง PO, Dev, QA, UX Writer #uxuidesigner #uxuiworkflow #productdesign #uxui
Nashavibes

Nashavibes

ถูกใจ 59 ครั้ง

ภาพหน้าปกแสดงชื่อตอน 'Ep.1 เครื่องมือพื้นฐานของสาย UX/UI' บนพื้นหลังเป็นมือที่กำลังทำงานออกแบบ UX/UI
แผนภาพ User Journey Map แสดงเส้นทางประสบการณ์ผู้ใช้ แบ่งเป็นขั้นตอนต่างๆ เช่น การเข้าถึง การเลือก การแบ่งปัน และการจอง พร้อมระบุอารมณ์และความรู้สึก
แผนภาพ Empathy Map แสดงเครื่องมือทำความเข้าใจอารมณ์ ความคิด และความรู้สึกของผู้ใช้ โดยแบ่งเป็นสิ่งที่พูด คิด รู้สึก และทำ
เครื่องมือที่ UX/UI ควรรู้ ep.1
UX/UI ไม่ได้มีแค่การวาดหน้าจอ แต่คือการเข้าใจ ‘คน’ เครื่องมือเหล่านี้เป็นเครื่องมือที่ได้ใช้จริงในตอนทำงาน #uxui #uxuitools #uxuidesigner #uxuidesign
Nashavibes

Nashavibes

ถูกใจ 64 ครั้ง

จาก 0 → มีพอร์ตจริง + ใบเซอร์จริง ใช้สมัครงานได้จริง ✨ Unlock skill UX/UI กับ @uxui.studio เพราะเราเข้าใจว่ามือใหม่ต้องการอะไร ย้ายสายงานได้ แม้ไม่มีพื้นฐานก็เรียนได้ครบจบที่นี่ สอบถามรายละเอียดเพิ่มเติมได้ทางเพจ Facebook: Uxui.studio 💬 #uxuistudio #uxdesign #uidesign #คอร์สuxui
Nashavibes

Nashavibes

ถูกใจ 12 ครั้ง

ภาพแสดงหลักสูตร “Unlock Skill UX/UI #47” โดย UXUI STUDIO ซึ่งเป็นกระบวนการ UXUI ครบวงจร 5 วัน ครอบคลุมตั้งแต่ UX Research, UX Design, UI Design System, Design Challenge, Pitching Project และ Portfolio Day พร้อมวันที่และเวลาเรียน.
UXUI Process ครบ จบ ในที่เดียว - UXUI Course
✅ UXUI Process ครบ จบ ในที่เดียว ครอบคลุมทุกเนื้อหาสำคัญที่สาย UX/UI ต้องใช้จริง . เรียนแบบ “เข้าใจจากการลงมือทำจริง” ไม่ใช่แค่ฟัง. ผ่าน Workshop + Pitching Project แบบจัดเต็ม พร้อมเทคนิคอีกหลายอย่างที่ช่วยให้ทำงานไวขึ้น คิดเป็นระบบขึ้น . รับประกันความเหนื่อย…แต่ “คุ้มค่าแน่นอน” 💯 . ใครอย
UXUI STUDIO

UXUI STUDIO

ถูกใจ 0 ครั้ง

ภาพโฆษณาคอร์ส Unlock Skill UX/UI รุ่น 46 เน้นการเรียนรู้แบบเวิร์คช็อป 5 วัน ในเดือนพฤศจิกายน 2568 พร้อมสิทธิประโยชน์มากมาย เช่น การปรึกษาหลังเรียนจบและใบรับรอง ราคาโปรโมชัน 6,990 บาท สำหรับผู้ลงทะเบียนภายใน 12 ต.ค. 2568
ภาพแนะนำผู้สอน คุณอดิรุจ อาทิตย์อภิพงศ์ (แบงค์) CEO & Founder ของ UXUI STUDIO พร้อมประวัติการทำงาน ประสบการณ์สอนกว่า 1,000 ��คน และการพัฒนาเนื้อหาคอร์สอย่างต่อเนื่อง
ภาพแสดงโครงสร้างหลักสูตร 5 วันของคอร์ส Unlock Skill UX/UI รุ่น 46 โดยแบ่งเป็น UX DAY 1-2, X DAY 2.5, UI DAY 3, PITCHING DAY 4 และ PORTFOLIO DAY 5 พร้อมหัวข้อหลักในแต่ละวัน
คอร์สเรียน UXUI รุ่น 46 - รุ่นสุดท้ายของปี 2025
Unlock Skill UX/UI รุ่น 46 (ONLINE COURSE) เพราะเราเข้าใจว่า “มือใหม่” ต้องการอะไร #รุ่นสุดท้ายของปี . 📍 อัดแน่นพื้นฐานฉบับสรุป UX/UI 5 วัน 40 ชม. และ 24 Workshop แบบ Interactive สนุกเหมือนอยู่ในห้องเรียน ในวันที่ 1, 2, 9, 22 และ 23 พฤศจิกายน 2568 (วันเสาร์ - อาทิตย์) เวลาเรียน 09.30 - 17.30
UXUI STUDIO

UXUI STUDIO

ถูกใจ 2 ครั้ง

Vibe Coding Journey EP.2 🪷 โดน Claude ลิมิต 4 วัน เลยโค้ดต่อไม่ได้ ก็เลยไปปากคลองตลาด ไปถ่ายรูปดอกบัวพับแบบไทยจริงๆ ช่วยรอกันอีกนิดน้าาา🫶🏻 ✨ #vibecoding #claud #designproces #uxui #ai
Nashavibes

Nashavibes

ถูกใจ 0 ครั้ง

ดูเพิ่มเติม