Website Responsive Design - UXUI Design

ปิดท้ายด้วยย ผลงาน Design Challenge UXUI รุ่น 45 - GROUP 4

.

🔥 Landing Page - UNO Coffee [Website Responsive Design]

.

ตัวอย่างผลงานนักเรียนกลุ่ม 4 : สำหรับเนื้อหา 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/19 แก้ไขเป็น

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

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

แหล่ง 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

ถูกใจ 439 ครั้ง

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

Dddesignx

ถูกใจ 243 ครั้ง

ภาพปกแสดงแล็ปท็อปและอุปกรณ์สมาร์ทโฮม พร้อมข้อความ "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

ถูกใจ 228 ครั้ง

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

UXUI STUDIO

ถูกใจ 0 ครั้ง

ภาพแสดงการออกแบบเว็บไซต์ 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

ถูกใจ 4 ครั้ง

ภาพแสดงส่วนหนึ่งของเมนูเครื่องดื่ม 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

ถูกใจ 213 ครั้ง

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

UXUI STUDIO

ถูกใจ 5 ครั้ง

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

Nashavibes

ถูกใจ 13 ครั้ง

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

Nashavibes

ถูกใจ 378 ครั้ง

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

UXUI STUDIO

ถูกใจ 0 ครั้ง

ภาพแสดง UI SOURCES เป็นแหล่งรวมแรงบันดาลใจด้านการออกแบบ UI/UX ที่แท้จริง นำเสนอตัวอย่าง UI ของแอปต่างๆ เช่น การเริ่มต้นใช้งาน, ตัวกรองการค้นหา และไมโครอินเทอร์แอคชัน เน้นการสนับสนุนผู้เริ่มต้นโดย UXUI STUDIO พร้อมเมนูนำทางเช่น "Home", "Apps", "Screenshots", "Interactions"
UI SOURCES - Real design inspiration
📍 UI SOURCES . แหล่งรวม User Journey ของ Top Grossing Apps . 👀 แอบดู UX ของ Top Grossing Apps ผ่าน User Journey Recording แบบครบตั้งแต่เริ่มจนจบ [end to end ] . ช่วยให้คุณลด iteration cycle, เก็บ insight ได้เร็ว, มองเห็น trend และ benchmark เทียบคู่แข่ง/มาตรฐานอุตสาหกรรมได้ทันทีแบบง่าย ๆ .
UXUI STUDIO

UXUI STUDIO

ถูกใจ 0 ครั้ง

Uxui ไม่ได้ใช้แค่ figma หรอ?
หลายคนคิดว่า UX/UI = Figma เท่านั้น แต่จริง ๆ แล้วมันมี 2 เส้นทาง Design อย่างเดียว หรือ Design + Build เว็บจริง เลย #UXUI #uxuidesigner #figma #designer #uxuidesign
Nashavibes

Nashavibes

ถูกใจ 80 ครั้ง

7 UI COMPONENTS ที่มือใหม่ควรรู้
#uxui #frontend #kumoriiz #ความรู้ไอที #it
kumoriiz

kumoriiz

ถูกใจ 2 ครั้ง

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

Nashavibes

ถูกใจ 25 ครั้ง

ภาพหน้าจอเว็บไซต์ Awwwards แสดงตัวอย่างการออกแบบ UI/UX และเว็บที่หลากหลาย พร้อมโลโก้ Awwwards และข้อความ “เวทีโชว์งาน UXUI/WEB จากทั่วโลก!” และตัวการ์ตูนจาก UXUI Studio ที่สื่อถึงการเป็นแหล่งรวมแรงบันดาลใจสำหรับมือใหม่
UXUI - คลังรวมเว็บจากทั่วโลก
📍 Awwwards คือคลัง “เว็บจากทั่วโลก” ของชาว UX/UI + Web Dev ✨ . รวมเว็บจากทั่วโลก เหมือนเวทีโชว์ของสาย Web Design / UXUI / Creative Dev . ✅ เวลาไอเดียตัน ๆ เปิดดูทีไรได้ ref มาเพรียบทั้ง interaction / layout / motion . ใครอยากหาเว็บ reference สาย “พรีเมียม” เริ่มจากที่นี่ได้เลย . 👉 จิ้ม ๆ เ
UXUI STUDIO

UXUI STUDIO

ถูกใจ 1 ครั้ง

ดูเพิ่มเติม