วิธีสร้างกรอบการออกแบบที่มีประสิทธิภาพ (รวมกรอบงาน Sketch UI ฟรี)

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

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

มาสรุปประเด็นหลักที่กรอบงานการออกแบบแก้ไข เหตุใดคุณจึงต้องใช้ และองค์ประกอบที่คุณจะต้องสร้างเมื่อสร้าง คุณจะพบเฟรมเวิร์ก Sketch UI ที่ดาวน์โหลด ได้ฟรี ในบทความที่อนุญาตให้คุณสร้างเฟรมเวิร์กการออกแบบของคุณเอง

กรอบการออกแบบคืออะไร?

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

บ่อยครั้ง งานนี้ซ้ำซาก และสามารถรวมเข้าด้วยกันและทำให้มีประสิทธิภาพมากขึ้นโดยการสร้างระบบของรูปแบบและส่วนประกอบที่สัมพันธ์กัน กล่าวคือ กรอบการออกแบบ .

กรอบการออกแบบช่วยแก้ปัญหาหลายประการ ได้แก่ :

• ขจัดความไม่สอดคล้องกันในการออกแบบผลิตภัณฑ์
• เพิ่มการทำงานร่วมกัน ประสิทธิภาพ และการสื่อสารระหว่างทีมออกแบบและผลิตภัณฑ์
• การปรับปรุงการออกแบบในภายหลังในกระบวนการออกแบบทำให้หงุดหงิดน้อยลง

ปัญหาแรก: ความไม่สอดคล้องกันในผลิตภัณฑ์

ความสม่ำเสมอเปลี่ยนการออกแบบที่ดีให้เป็นการออกแบบที่ยอดเยี่ยม ความสม่ำเสมอช่วยปรับปรุง UX การใช้งานทั่วไป และประสิทธิภาพที่ผู้ใช้สามารถใช้ผลิตภัณฑ์ดิจิทัลได้ ไม่ว่าจะเป็นเว็บไซต์ขนาดเล็ก แอพ หรือผลิตภัณฑ์ SaaS ขนาดใหญ่ ความไม่สอดคล้องกันในการออกแบบส่งผลต่อรูปลักษณ์ ความรู้สึก ความน่าเชื่อถือ และประสบการณ์ผู้ใช้ของผลิตภัณฑ์

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

กรอบการออกแบบแก้ปัญหานี้ด้วยการสร้างมาตรฐานที่สอดคล้องกัน

ปัญหาที่สอง: ช่องว่างในการทำงานร่วมกันและการสื่อสาร

บ่อยครั้งในระหว่างกระบวนการพัฒนาเมื่อมีสมาชิกในทีมหลายคนที่เกี่ยวข้องกับการทำงานออกแบบในหลายจุดในกระบวนการ อาจเกิดความสับสนได้หากไม่มีชุดมาตรฐานที่จะแนะนำทีม

กรอบการออกแบบช่วยเพิ่มความร่วมมือและประสิทธิภาพโดยการปรับปรุงกระบวนการสื่อสารและให้มาตรฐานและทิศทางที่ชัดเจน ไม่ต้องเสียเวลาไปกับการวิ่งไปมาเพื่อพยายามคิดว่าสีหรือแบบอักษรใดเหมาะสมที่จะใช้

ปัญหาที่สาม: การเปลี่ยนแปลงการออกแบบขั้นสุดท้าย

นักออกแบบต้องทำการเปลี่ยนแปลงสีเดียวในไฟล์การออกแบบที่มี 120 อาร์ตบอร์ดที่พัฒนาแล้วกี่ครั้ง จำเป็นต้องเปลี่ยนไอคอนที่เป็นส่วนหนึ่งของ 200 ส่วนประกอบกี่ครั้ง

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

วิธีสร้างกรอบการออกแบบ

ตอนนี้เรารู้แล้วว่าเฟรมเวิร์กการออกแบบคืออะไรและปัญหาที่แก้ไขได้อย่างไร เรามาพูดถึงการสร้างเฟรมเวิร์กกัน (และสิ่งที่อยู่ในการดาวน์โหลด Sketch UI kit ที่มีให้ในบทความต่อไป)

กรอบงานการออกแบบที่ใช้สำหรับบทความนี้เป็นไฟล์ Sketch ไฟล์เดียวที่จัดวางโดยใช้ลำดับชั้นของส่วนประกอบที่เฉพาะเจาะจง ซึ่งเรียกกันว่า "สัญลักษณ์" ใน Sketch สัญลักษณ์เหล่านี้ทำให้ง่ายต่อการใช้งานการเปลี่ยนแปลงทั้งไฟล์ด้วยการคลิกเพียงครั้งเดียว การเปลี่ยนแปลงในองค์ประกอบ "หลัก" หรือ "สัญลักษณ์" จะมีผลทันทีในกรณีอื่นๆ ทั้งหมด

ลำดับชั้นของกรอบการออกแบบ

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

สี

สีเป็นองค์ประกอบที่สำคัญที่สุดในลำดับชั้นของเฟรมเวิร์กการออกแบบ UI—ทุกองค์ประกอบในการออกแบบใช้สี สีกระตุ้นปฏิกิริยาและอารมณ์ที่รุนแรงในผู้คน และกำหนดรูปลักษณ์ ความรู้สึก และโทนสีโดยรวมของผลิตภัณฑ์

แนวปฏิบัติที่ดีคือการแบ่งสีออกเป็นกลุ่ม:

1. สีหลักคือสี หลักของแบรนด์ ซึ่งโดยทั่วไปจะใช้เพื่อสร้างชุดสีทั่วไปของโครงการและสำหรับส่วนประกอบที่สำคัญ เช่น ปุ่ม
2. สีรอง ช่วยเสริมจานสีหลัก—มักจะเป็นเฉดสี ความอิ่มตัว หรือสีอ่อนของสีหลักที่แตกต่างกัน ระดับสีเทา มักใช้สำหรับการพิมพ์หรือพื้นหลัง ระดับสีเทาประมาณห้าถึงแปดระดับก็เพียงพอแล้ว
3. สีความคิดเห็นของระบบ เป็นกลุ่มสำคัญที่นักออกแบบมักลืมไป สีเหล่านี้แสดงข้อความของระบบ รวมถึงการเตือน คำเตือน และการแจ้งเตือน

Grid: The Design Space

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

กริดมีสองประเภท: แนวตั้ง และ แนวนอน

ตารางแนวตั้งเป็นตารางที่ใช้กันมากที่สุดและจัดวางทุกอย่างในแนวนอน มีระบบกริดยอดนิยมมากมาย เช่น Bootstrap หรือกริด 960px ที่เก่ากว่า

ตารางแนวนอนไม่ใช่เรื่องธรรมดา ตารางแนวนอนใช้สำหรับการพิมพ์ มันสร้างจังหวะแนวตั้งสำหรับย่อหน้าและเห็นได้ทั่วไปในหนังสือพิมพ์

ตัวดัดแปลง: กฎโวหาร

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

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

ปฏิบัติต่อตัวดัดแปลงเป็นพารามิเตอร์สำหรับบล็อคส่วนประกอบที่ตามมาทั้งหมด สร้างสัญลักษณ์ Sketch จากสามรูปร่างที่แตกต่างกัน: สี่เหลี่ยมผืนผ้า สี่เหลี่ยมผืนผ้าโค้งมน และวงกลม ใช้รูปร่างเหล่านี้เพื่อสร้างทุกองค์ประกอบเดียวของ UI รวมถึงปุ่ม ส่วนประกอบอินพุต ช่องแบบฟอร์ม ฯลฯ และองค์ประกอบพื้นหลัง

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

วิชาการพิมพ์: เนื้อหา

วิชาการพิมพ์เป็นองค์ประกอบสุดท้ายของกรอบการออกแบบที่สำคัญ สามารถแบ่งออกเป็นสองกลุ่ม: สำเนาหน้าคงที่เช่นส่วนหัวและย่อหน้า และสำเนาส่วนประกอบแบบโต้ตอบ เช่น ปุ่ม การนำทาง หรือช่องป้อนข้อมูล

ออกแบบรูปแบบและขนาดของหัวเรื่องทั้งหมด (H1, H2, H3 เป็นต้น) และย่อหน้า สำเนาหน้าคงที่มักจะไม่มีรูปแบบโวหาร (สีหรือน้ำหนัก) มากมาย รูปแบบเดียวที่เกี่ยวข้องกับรูปแบบการคัดลอกหน้าคงที่คือไม่ว่าจะอยู่บนพื้นหลังสีอ่อนหรือสีเข้ม ดังนั้นจึงเป็นการดีที่สุดที่จะสร้างชุดสีสองชุดเพื่อให้แน่ใจว่าการคัดลอกหน้าคงที่ใช้งานได้ทั้งสองชุด

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

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

ไอคอน

มีไอคอนสองกลุ่มในระบบการออกแบบ: ไอคอนข้อมูลและไอคอนส่วนต่อประสานผู้ใช้ โดยทั่วไป กลุ่มแรกจะเป็นส่วนหนึ่งของระบบภาพประกอบและไม่ได้ใช้สำหรับส่วนประกอบการโต้ตอบ UI ใดๆ (เช่น ปุ่ม) กลุ่มที่สอง—ไอคอน UI—เพิ่มความหมายให้กับองค์ประกอบที่ซับซ้อนมากขึ้น: ปุ่ม ป้ายกำกับ หรือตาราง ในขณะที่ใช้พื้นที่เพียงเล็กน้อย ไอคอนใน UI ยังสามารถใช้เป็นทริกเกอร์ฟังก์ชันได้ เช่น "แก้ไข" "คัดลอก" "ดาวน์โหลด" และ "ลบ"

เริ่มต้นด้วยไอคอนง่ายๆ ที่ใช้สำหรับการโต้ตอบ UI เช่น ลูกศร "เพิ่ม" (+) หรือ "ปิด" (x) แนวปฏิบัติที่ดีคือการออกแบบในขนาดต่างๆ (12px, 16px, 24px 32px)

ส่วนประกอบ

ปุ่ม

ปุ่มเป็นองค์ประกอบที่สำคัญที่สุดอย่างหนึ่งในการออกแบบ UI อย่างไม่ต้องสงสัย และในช่วงหลายปีที่ผ่านมา ปุ่มต่างๆ ได้ผ่านการเปลี่ยนแปลงมากมายเนื่องจากแนวโน้มการออกแบบได้ผ่านพ้นไป

เมื่อออกแบบปุ่ม อย่าลืมออกแบบ "สถานะ" ของปุ่มแต่ละปุ่ม ตามกฎแล้ว ปุ่มจะมีหลายสถานะและให้การตอบกลับด้วยภาพแก่ผู้ใช้เพื่อระบุสถานะปัจจุบัน (ไม่ได้ใช้งาน โฮเวอร์ กดอยู่ ปิดใช้งาน ใช้งานอยู่ ฯลฯ)

มีสองวิธีในการทำเช่นนี้ วิธีแรกคือการออกแบบรูปลักษณ์ของปุ่มแยกกันสำหรับแต่ละสถานะ (ปกติ ใช้งานอยู่ โฮเวอร์ และกด) วิธีแก้ปัญหานี้อาจใช้เวลานาน แต่ให้ความยืดหยุ่นได้มากในภายหลัง (วิธีนี้ถูกใช้ในเฟรมเวิร์ก Sketch UI ฟรีที่รวมอยู่ด้านล่าง)

วิธีที่สองคือการออกแบบสถานะทั้งหมดตามค่าเริ่มต้น ตัวอย่างเช่น สร้าง หนึ่ง สัญลักษณ์ Sketch ที่จะเปลี่ยนสี ความอิ่มตัว หรือความสว่างของแต่ละสถานะ

ในการดำเนินการนี้ ให้วางสัญลักษณ์เป็นโอเวอร์เลย์ของปุ่มโดยใช้โหมดการผสมภาพสเก็ตช์อย่างใดอย่างหนึ่ง: ฮิว ความอิ่มตัว หรือโอเวอร์เลย์ ใช้สี่เหลี่ยมสีดำที่มี โหมดการผสมสี บนปุ่มปกติเพื่อเปลี่ยนความอิ่มตัวของสี การเปลี่ยนความทึบของโอเวอร์เลย์ในภายหลังทำให้ปุ่มมีความอิ่มตัวมากขึ้นหรือน้อยลง

ส่วนประกอบอินพุต

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

ส่วนประกอบที่ซับซ้อน

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

ส่วน

ในขั้นตอนนี้ กรอบการออกแบบสามารถพัฒนาเพิ่มเติมได้โดยการสร้างส่วนทั่วไปของแอปพลิเคชันหรือเว็บไซต์ ด้วยการออกแบบสิ่งต่างๆ เช่น การนำทาง ส่วนหัว ส่วน "เกี่ยวกับเรา" และแกลเลอรี นักออกแบบสามารถประหยัดเวลาในระยะหลังๆ ของโครงการได้ การสร้างรูปแบบต่างๆ ของส่วนต่างๆ ของผลิตภัณฑ์จะช่วยให้ปรับตัวเข้ากับโครงการต่างๆ ได้ง่ายขึ้น

แนวทางปฏิบัติที่ดีที่สุดสำหรับกรอบการออกแบบ

ทดสอบกรอบการออกแบบอย่างต่อเนื่อง

การทดสอบควรรวมอยู่ในกระบวนการออกแบบหรือพัฒนาใดๆ หลีกเลี่ยงข้อผิดพลาดและส่วนประกอบที่ขาดหายไปโดยการสร้างชิ้นงานออกแบบขนาดเล็กและ "ทดสอบความเค้น" เหล่านี้ ตัวอย่างเช่น ตรวจสอบว่าการเปลี่ยนส่วนประกอบที่สร้างตั้งแต่เริ่มต้นยังเปลี่ยนส่วนประกอบที่เพิ่มล่าสุดด้วยหรือไม่

สร้างส่วนประกอบ UI อย่างง่าย

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

อย่าเน้นสไตล์เดียว

กรอบงานการออกแบบควรเป็นแบบสากล ดังนั้นแทนที่จะเน้นที่สไตล์เฉพาะ ให้เน้นที่ส่วนประกอบที่สามารถใช้เพื่อสร้างสไตล์ได้

สร้างกรอบการออกแบบของคุณเอง

ในโครงการต่อไปของคุณ ให้ใช้เวลาในการเริ่มต้นเพื่อสร้างกรอบการออกแบบอย่างรอบคอบ คุณจะพบว่าสิ่งนี้ช่วยปรับปรุงกระบวนการออกแบบโดยรวม เพิ่มประสิทธิภาพ และเพิ่มความสอดคล้องในการออกแบบผลิตภัณฑ์ ซึ่งช่วยปรับปรุงการใช้งาน คุณจะประหยัดเวลา สื่อสารแนวคิดการออกแบบได้อย่างมีประสิทธิภาพมากขึ้น และทำให้ลูกค้าและผู้มีส่วนได้ส่วนเสียมีความสุขเมื่อแนวคิดเหล่านั้นเป็นจริงในเวลาเพียงไม่กี่วินาทีบน 120 Sketch artboards

คุณพร้อมที่จะเริ่มกรอบการออกแบบของคุณเองแล้วหรือยัง?

ดาวน์โหลดไฟล์ Sketch ที่นี่ มีคำแนะนำเกี่ยวกับวิธีการใช้งาน

ระบบการออกแบบที่สร้างแรงบันดาลใจและกรอบงาน UI

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

การออกแบบวัสดุของ Google – ปัจจุบันเป็นหนึ่งในเฟรมเวิร์กการออกแบบที่ได้รับความนิยมมากที่สุดในโลก เรียนรู้วิธีที่ Google จัดวางขั้นตอนการออกแบบทั้งหมดและสร้างลำดับชั้นของส่วนประกอบที่มีประโยชน์

ภาษาการออกแบบของ IBM – IBM แบ่งปันกระบวนการออกแบบทั้งหมด รวมถึงการอธิบายอย่างละเอียดในทุกรายละเอียด พวกเขายังแบ่งปันทรัพยากรมากมายตั้งแต่ภาษาการออกแบบ ตั้งแต่ไอคอนธรรมดาไปจนถึงไลบรารีแอนิเมชั่น UI

Atlassian – แหล่งข้อมูลการเรียนรู้ที่ยอดเยี่ยมอีกแหล่งหนึ่ง คู่มือรูปแบบผลิตภัณฑ์ของพวกเขาเป็นระบบการออกแบบที่ยอดเยี่ยมสำหรับการศึกษา พวกเขาแบ่งปัน Web GUI pack ซึ่งเป็นไฟล์ Sketch ที่มีส่วนประกอบและแนวคิดมากมาย

• • •

อ่านเพิ่มเติมเกี่ยวกับบล็อก Toptal Design:

• eCommerce UX – ภาพรวมของแนวทางปฏิบัติที่ดีที่สุด (พร้อมอินโฟกราฟิก)
• ความสำคัญของการออกแบบที่เน้นมนุษย์เป็นศูนย์กลางในการออกแบบผลิตภัณฑ์
• ผลงานออกแบบ UX ที่ดีที่สุด – กรณีศึกษาและตัวอย่างที่สร้างแรงบันดาลใจ
• หลักการฮิวริสติกสำหรับอินเทอร์เฟซมือถือ
• การออกแบบที่คาดหวัง: วิธีสร้างประสบการณ์ผู้ใช้ที่มีมนต์ขลัง