Design System คืออะไร ทำไมนักออกแบบต้องรู้จัก

รู้จัก Design System ให้มากขึ้น ทำไมนักออกแบบเว็บไซต์และแอพพลิเคชั่นต้องรู้จัก และเริ่มทำกับโปรเจค การออกแบบอะไรก็แล้วแต่ ถ้าเราไม่วางโครงสร้างเพื่อรองรับการขยับขยาย ก็สร้างปัญหาต่อโครงสร้างได้เสมอ ทำให้ในปัจจุบันบริษัทยักษ์ใหญ่อย่าง Google, IBM, Microsoft, Apple ต่างให้ความสำคัญกับ Design System เพื่อรองรับการพัฒนาในอนาคต Design System จึงเป็นตัวแก้ปัญหาในการเติบโตของ Product ช่วยควบคุมให้การออกแบบถูกเชื่อมโยงเข้าด้วยกัน ให้งานออกแบบทุกชิ้นที่ถูกปล่อยออกมาโดนควบคุมให้อยู่ภายใต้ Branding ที่ชัดเจน และยังสามารถช่วยทีมนักออกแบบและทีมนักพัฒนานะให้มี Guildline ในการวางโครงหน้าตาของเว็บไซต์และแอพพลิเคชั่นให้ออกมาคล้ายคลึงกันในทุกหน้า Design Principle ในงานของนักออกแบบสิ่งที่ Design System ตอบโจทย์เราได้มากคือการทำ Design Principle ซึ่งมีความหมายคือการวางหลักการออกแบบ เสมอการมีไบเบิ้ลที่คอยควบคุม Product ของเราอยู่ ทำให้ทีมทั้งทีมเข้าใจรูปแบบและแนวทางได้อย่างชัดเจน เช่น ฟอนต์, สี, ปุ่ม และ ขนาดของวัตถุต่างๆ Design Pattern ในงานออกแบบการที่มี Design Pattern เป็นการช่วยลดภาระในการทำงานลงได้ ช่วยเพิ่มความรวดเร็วในการทำงานได้เป็นอย่างดี […]

Worrapob Parboonpasent

31/07/2019

พื้นฐาน ออกแบบเว็บไซต์ Hero image คือส่วนสำคัญ

ในกระบวนการ ออกแบบเว็บไซต์ สิ่งที่ทำให้ลูกค้าสนใจหรือไม่สนใจงานออกแบบของคุณส่วนหนึ่งที่สำคัญคือ Hero image นั่นเอง ด้วยขนาดที่ใหญ่สามารถดึงดูดสายตาของผู้ใช้งานได้มาก ทำให้ความสวยของเว็บไซต์หน้าแรก (Index) มักจะขึ้นอยู่กับ Hero image ออกแบบเว็บไซต์ มาหนึ่งเว็บไซต์จะประกอบไปด้วย Hero image และ Navigation สัดส่วนของ Hero image เมื่อเทียบกันกับแถบเมนูด้านบน (Navigation) มักจะมีขนาดถึง 80-90% ของหน้าจอเลยทีเดียว ทำให้ Hero image ส่งผลต่อความสวยความของเว็บไซต์มากๆ และเรามาดูกันดีกว่าว่าเทคนิคในการออกแบบ Hero image จะเทคนิคไหนมาใช้งานได้บ้าง Mock up หนึ่งในเทคนิคในการออกแบบเว็บไซต์โดยเฉพาะเว็บไซต์ที่มีผลิตภัณฑ์หรือบริการเป็นของตัวเองจะนำเอา Mock up ของผลิตภัณฑ์หรือบริการของตัวเราเอามาแสดงผลเป็นตัวอย่างการใช้งาน เรียกได้ว่าเป็นหนึ่งในเทคนิคที่ถูกนำมาใช้เยอะมาก แต่รูปภาพที่นำมาแสดงก็ควรจะน่าใช้งาน ต้องดึงดูดความสนใจของผู้ใช้งานให้ได้   The grid หลายครั้งที่การใช้ภาพเต็มจอก็น่าเบื่อ หรือหลายครั้งที่ภาพของเราอาจจะไม่สวย หนึ่งในเทคนิคที่นำมาใช้ได้หรือการจัด Grid ให้กับภาพ โดยอาจจะให้น้ำหนัก 60/40 เน้นความสำคัญกับภาพให้ใหญ่สักนิด จะช่วยสร้างความรู้สึกที่แปลกใหม่ให้กับงานของเราได้ไม่ยาก […]

Worrapob Parboonpasent

30/06/2019

ออกแบบเว็บไซต์ หน้า 404 pages

เคยไหมที่ต้อง ออกแบบเว็บไซต์ 404 pages แต่ไอเดียในการออกแบบหน้านี้นั้นไม่มี หลายคนอาจจะคิดว่าหน้า 404 pages เป็นหน้าที่ไม่สำคัญ แต่ในการทำเว็บไซต์นั้นหน้า 404 pages ควรจะต้องทำเอาไว้เพราะมีหลายเหตุผลที่ผู้ใช้งานจะเข้ามายังหน้า 404 pages Color of the Year ประเดิมด้วยหน้า 404 pages ของเว็บไซต์เทรนสีระดับโลกอย่าง Color of the Year มาในรูปแบบเรียบๆ เท่ๆ ดึงเอา CI ของตัวเองมาเล่นได้อย่างดีเยี่ยม เรียกได้ว่าเข้ามาหน้านี้ไม่ต้องเดาให้ยากผู้ใช้งานก็รับรู้ได้ว่ากำลังใช้งานอยู่บนเว็บไซต์ไหน   Waaark อันที่จริงแล้วหน้า 404 pages ไม่จำเป็นจะต้องมีรายละเอียดอะไรมากมาย แต่สิ่งสำคัญคือการทำให้ผู้ใช้งานรู้ว่าตอนนี้เกิดความผิดพลาดอะไรบางอย่างในระบบของเว็บไซต์ ฉะนั้นสิ่งสำคัญที่ควรจะอยู่บน 404 pages คือข้อความที่ทำให้รู้ว่าตอนนี้กำลังมีข้อผิดพลาด   Victoria Spicer อีกหนึ่งหน้า 404 pages ที่ออกแบบเว็บไซต์มาได้อย่างสวยงาม แสดงแบรนด์ของตนเองออกมาได้ชัดเจน และยังมี Keyword สำคัญที่ผู้ใช้งานจะต้องรู้ […]

Worrapob Parboonpasent

30/06/2019

หาชื่อฟอนต์บนเว็บไซต์เพียงคลิกเดียวด้วย Fontanello Chrome Extension

เว็บไซต์ที่นักออกแบบและนักพัฒนาเอาผลงานมาโชว์กันอย่าง https://awwwards.com เวลาเข้าไปดูแล้วรู้สึกอยากว่าแต่ละส่วนของการออกแบบใช้ สี ฟอนต์ อะไรบ้าง หลายครั้งจะต้องไปเปิด Code HTML & CSS เพื่อหาชื่อฟอนต์ให้เจอ

Inthanon Panyasopa

25/05/2019

UX UI กับความเหมือนที่แตกต่าง

นักออกแบบหลายคนที่กำลังเปลี่ยนเส้นทางในการทำงาน คงเคยเห็นตำแหน่ง UX UI ผ่านตากันมาพอสมควร รู้ไหมว่า 2 ตำแหน่งที่มีชื่อคล้ายกันแต่ทำหน้าที่ต่างกันอย่างสิ้นเชิง ใครกำลังเริ่มต้นในหน้าที่นี้เรามาเรียนรู้กันดีกว่าว่าความเหมือนที่แตกต่างกันเป็นอย่างไร UX (User Experience) และ UI (User Interface) แค่ชื่อก็มีความต่างกันพอสมควรแต่สิ่งที่เหมือนกันคือเราต้องทำงานร่วมกับ “ผู้ใช้งาน” ที่เข้ามาใช้งานเว็บไซต์หรือผลิตภัณฑ์ของเรานั่นเอง สำหรับสิ่งที่ทั้ง 2 ตำแหน่งนี้ทำงานต่างกันอย่างสิ้นเชิงคือ UX คือการสร้างประสบการณ์ในการใช้งานที่ดีต้องเป็นคนที่เข้าใจผู้ใช้งานเป็นอย่างมากเพื่อออกแบบประสบการณ์การใช้งานให้ออกมาถูกใจผู้ใช้งานมากที่สุด แต่ UX ที่ดีอาจจะไม่สวยก็ได้ UI คือการออกแบบหน้าตาให้สวยงาม โดดเด่น สร้าง first impression ที่ดีให้กับผู้ใช้งานไม่ว่าจะเป็นเรื่องของสี ฟ้อนต์ การจัดวางองค์ประกอบต่างๆ คำนึงถึงภาพลักษณ์และความสวยงามเป็นสำคัญ   แต่ทั้งสองตำแหน่งจะต้องทำงานร่วมกันเพื่อให้ได้ผลิตภัณฑ์ที่ออกมาดีที่สุด ถ้ามี UX ที่ดีมีการใช้งานที่ง่ายแต่หน้าตาไม่สวยก็ไม่ได้ ถ้ามี UI ที่สวยงามระดับท็อปแต่ใช้งานยากจนกว่าที่ผู้ใช้งานจะเข้าใจคนก็คงปิด ฉะนั้นจึงเกิดเป็นตำแหน่ง UX/UI ที่นำเอาสองตำแหน่งเข้ามารวมกัน โดยจะเป็นนักออกแบบที่เข้าใจผู้ใช้งานในระดับหนึ่ง รู้ว่าผู้ใช้งานชอบแบบไหน ไม่ชอบแบบไหน เพื่อให้มีข้อมูลในการนำมาออกแบบผลิตภัณฑ์ของเรานั่นเอง โดยปกติแล้ว UX จะสร้างสิ่งที่ง่ายต่อการใช้งาน มีประโยชน์แต่ UI […]

Worrapob Parboonpasent

31/03/2019

2 เทคนิคสำคัญทำปุ่ม Call to action

Call to action คือปุ่มที่เอาไว้กระตุ้นความรู้สึก สามารถทำออกมาในหลายรูปแบบเช่น ปุ่ม ป้าย ภาพ จะเป็นกราฟิกบนโปสเตอร์หรือบนเว็บไซต์ แต่ในบทความนี้เราจะมาแนะนำ 2 เทคนิคหลักในการทำ Call to action บนเว็บไซต์เพื่อกระตุ้นยอดคลิ๊กให้พุ่งพลวดกัน ตามธรรมชาติของงานกราฟิก 2 สิ่งที่ทำให้วัตถุดูโดดเด่นขึ้นมาคือ สี และ ขนาด ซึ่งถือว่าเป็นปัจจัยหลักในการทำให้ Call to action ดูโดดเด่นโดนตาโดนใจผู้เข้าชม เทคนิคที่ 1 เรื่องของ ขนาด สิ่งแรกในการสร้างความโดดเด่นระหว่างองค์ประกอบอื่นไม่ว่าจะเป็นข้อความหรือพื้นหลังคือขนาดนั้นเอง การมีขนาดของปุ่มที่ใหญ่จะช่วยให้ผู้ใช้งานโฟกัสไปกับปุ่มนั้นๆ ได้ดียิ่งขึ้น การมีขนาดที่ใหญ่พอเหมาะช่วยให้ผู้ใช้งานมองเห็นได้ชัดเจน แต่คำว่าขนาดใหญ่ในที่นี้ไม่ได้หมายความว่ามันจะต้องใหญ่จนเกินไป จนทำให้ความสวยงามหดหาย ในการทดลองว่างานออกแบบของคุณมีขนาดที่พอเหมาะไหม ให้ลองออกแบบปุ่มที่ต้องการและลองถอยหลังออกมาสักนิด เมื่อคุณมองภาพรวมของงานแล้วพบว่าองค์ประกอบที่เราต้องการยังมองเห็นได้ชัดเจน แสดงว่าปุ่มของคุณมีขนาดที่พอเหมาะเรียบร้อย เทคนิคที่ 2 เรื่องของ สี เรื่องของสีเป็นเรื่องที่ยากของนักออกแบบหลายคน แต่เรามีเทคนิคแสนง่ายในการเลือกสีมาใช้งานให้ปุ่มดูโดดเด่นได้ง่ายๆ เทคนิคในการเลือกสีที่ง่ายนั้นคือ ใช้สีคู่ตรงข้ามนั้นเอง ลองดูตัวอย่างภาพด้านล่างแล้วคุณจะสามารถเข้าใจได้ทันทีเลยว่า การใช้สีคู่ตรงข้ามช่วยให้ปุ่มของคุณโดดเด่นได้ยังไง หน้าเว็บไซต์จะใช้สีหลักเป็นโทนสีแดง อยู่บนพื้นหลังสีฟ้า แต่จุดที่สร้างความโดดเด่นขึ้นมาได้คือจุดของปุ่มสีเขียว ถ้าเราเรียนรู้เกี่ยวกับสีเราจะรู้ว่าสีแดงกับสีเขียวจะเป็นสีคู่ตรงข้ามกัน […]

Worrapob Parboonpasent

23/03/2019

วิธีออกแบบฟอร์มกรอกข้อมูลเพื่อผู้ใช้งาน

ฟอร์มกรอกข้อมูล (forms) เป็นหนึ่งในโจทย์ที่นักออกแบบเว็บไซต์จะต้องพบเจอ ฟอร์มกรอกข้อมูลมีความสำคัญอย่างไร ทำไมเราต้องออกแบบให้เป็นมิตรกับผู้ใช้งานมากที่สุด ในบทความนี้เราจะพาทุกคนไปเรียนรู้กัน ฟอร์มกรอกข้อมูลคือหนึ่งใน UX ที่ผู้ใช้งานจะรู้สึกเบื่อหน่ายในการกรอก ยิ่งถ้าฟอร์มมีช่องกรอกมากมายยิ่งสร้างความน่ารําคาญให้กับผู้ใช้งานเป็นอย่างมาก สิ่งแรกที่เราควรจะทำความเข้าใจคือ ข้อมูลใดคือข้อมูลสำคัญที่เราต้องการจากผู้ใช้งาน ช่องกรอกยิ่งน้อยก็ยิ่งทำให้ผู้ใช้งานเกิดความรําคาญน้อยตามไปด้วย อีกหนึ่งสิ่งที่ควรทำคือการแบ่งหัวข้อของชุดข้อมูลในฟอร์มกรอกข้อมูลของเรา การแบ่งหัวข้อของข้อมูลจะทำให้ผู้ใช้งานไม่สับสนสิ่งที่กำลังกรอกทำให้ใช้งานได้ง่ายขึ้นเป็นมิตรกับผู้ใช้งานมากขึ้น   เพิ่มไฮไลท์ในส่วนของข้อมูลที่จำเป็นด้วยเครื่องหมาย * เพื่อสร้างทางเลือกให้กับผู้ใช้งานว่าจะกรอกหรือไม่กรอกในช่องที่ไม่สำคัญก็ได้ จะช่วยลดความน่าเบื่อในการกรอกข้อมูลลงได้มาก   เคยไหมที่การกรอกข้อมูลของคุณนั้นผิด แต่คุณไม่รู้ว่าข้อมูลไหนที่ผิด มันสร้างความปวดหัวให้กับผู้ใช้งานได้ง่าย โดยเฉพาะฟอร์มกรอกข้อมูลที่มีข้อมูลมากมาย การที่ระบบแจ้งเตือนว่าข้อมูลผิดพลาดนั้นไม่มากพอที่จะนำทางผู้ใช้งานให้ไปแก้ไขข้อมูลได้อยากถูกต้อง   เมื่อปุ่ม ตกลง กับ ยกเลิก มีขนาดที่เท่ากันใช้สีเดียวกันคือจุดพลาดอันใหญ่หลวงของนักออกแบบหลายคน การออกแบบแบบนี้จะทำให้ผู้ใช้งานมีโอกาศกดผิดพลาดเป็นอย่างมาก ทางทีดีถ้าต้องการจะใส่ปุ่ม ยกเลิก ควรจะมีการปรับขนาดและสีไม่ให้โดดเด่นเท่ากับปุ่มตกลง ไม่เช่นนั้นข้อมูลทั้งหมดที่ผู้ใช้งารกรอกมาจะหายไปในพริบตาและสร้างความหงุดหงิดให้กับการใช้งานเว็บไซต์ของคุณ  

Worrapob Parboonpasent

02/12/2018

5 เว็บไซต์แนวมินิมอล ที่ทำออกมาให้สวยสด ไม่จืดจาง

ปกติแล้วเว็บไซต์แนวเรียบง่าย มักจะเป็นโจทย์หลักในการออกแบบเว็บไซต์ในช่วงระยะเวลาที่ผ่านมา เพราะความเรียบง่ายนั้นได้รับความนิยมจากผู้ใช้งานเป็นอย่างมาก ด้วยความเรียบทำให้การใช้งานนั้นง่าย ไม่มีรายละเอียดที่ซับซ้อน แต่ในความเรียบนั้นกลับเป็นโจทย์ที่ยากสำหรับนักออกแบบที่จะทำอย่างไรให้งานออกมาเรียบ แต่มีความสวยงาม Uber Sign Language UBER Sign Language คือเว็บไซต์ที่รู้สึกชอบในแง่ของลูกเล่นในการทำงาน รวมไปถึงการออกแบบเป็นอย่างมาก ด้วยการที่การสื่อสารระหว่างคนปกติกับผู้ที่บกพร่องในการได้ยินทำได้อย่างยากลำบาก UBER Sign Language จึงทำเว็บไซต์ที่สอนให้คุณสื่อสารประโยคง่ายๆ กับผู้อื่นได้ โดยการออกแบบมาในแบบเรียบง่าย แต่มีการใช้สีที่ฉูดฉาดไม่น่าเบื่อ แถมมีลูกเล่นและวิธีการใช้งานที่น่าสนใจ   Why we Explore ความรู้ทางด้านอวกาศจะไม่มีความน่าเบื่ออีกต่อไป Why we Explore ถูกออกแบบโดย Nicolas Lanthemann เป็นเว็บไซต์ที่ให้ความรู้เกี่ยวกับอวกาศในรูปแบบที่น่าตื่นตาตื่นใจ ด้วย interaction ที่น่าสดใจทำให้เว็บไซต์นี้ดูน่าใช้งานเป็นอย่างมาก การออกแบบก็เน้นการจัดวางภาพและข้อความบนพื้นหลังสีดำ ที่น่าสนใจคือวัตถุอุกกาบาตทางผู้ออกแบบทำออกมาในรูปแบบของ 3D ที่ช่วยสร้างความน่าสนใจให้กับเว็บไซต์เป็นอย่างดี   We Ain’t Plastic เปิดมาด้วยภาพที่ดูสวยงามแปลกตา เว็บไซต์ของ digital products design ที่บอกเล่าตัวเองออกมาได้น่าสนใจ เป็นแนวทางที่ดีในการศึกษางานที่ดูเรียบง่าย ด้วยการจัดวางข้อความสีดำและเทา ลงบนพื้นหลังสีขาว เพียงแค่นี้เว็บไซต์ของคุณก็ใช้งานได้อย่างเรียบง่าย แต่สิ่งสำคัญสำหรับการออกแบบเว็บไซต์ประเภทนี้คือ เพียงแค่ข้อความยังไม่พอ สิ่งสำคัญคือคุณจะต้องการรูปภาพที่ดูแปลกใหม่น่าสนใจมาประกอบด้วย […]

Worrapob Parboonpasent

10/11/2018

Apple ปล่อย UI Design Resources ของ Human Interface Guidelines ให้โหลดฟรีทุกโปรแกรม

เป็นที่ทราบกันดีอยู่แล้วว่าแนวทางการออกแบบ UI (user interface) สำหรับ Devices ทางฝั่ง Apple นั้นจะต้องอ้างอิงมาจาก Human Interface Guidelines ซึ่งทางฝั่งของนักออกแบบก็จะต้องดู Guildlines ในส่วนนี้เพื่อกำหนดรูปแบบต่างๆของงานที่กำลังจะทำ

Inthanon Panyasopa

01/08/2018
1 4 5 6