วิธีเข้าถึงการออกแบบสำหรับนักพัฒนา

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

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

ทำไมนักพัฒนาจึงควรเรียนรู้การออกแบบ

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

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

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

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

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

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

การสร้าง Mindset ด้านการออกแบบ

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

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

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

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

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

หนึ่งในวิธีที่ดีที่สุดในการเรียนรู้การออกแบบจริงๆ คือพยายามสร้างการออกแบบของผู้อื่นขึ้นมาใหม่ การเลือกแยกสิ่งที่ใช้ได้ผลและไม่ได้ผล และการค้นหาว่าทำไมการออกแบบเฉพาะจึงน่าสนใจเป็นหนึ่งในทักษะที่มีค่าที่สุดที่นักออกแบบหน้าใหม่หรือนักพัฒนาสามารถเรียนรู้ได้ การวางการหมุนที่ไม่ซ้ำใครในการออกแบบที่มีอยู่นั้นเป็นเรื่องปกติในอุตสาหกรรม (พิสูจน์ได้จากคุณสมบัติ “Rebound”) ของ Dribbble

การออกแบบในเบราว์เซอร์

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

มีเครื่องมือที่สามารถช่วยในการออกแบบในเบราว์เซอร์และทำให้ชีวิตของทั้งนักออกแบบและนักพัฒนาง่ายขึ้น ปลั๊กอินเบราว์เซอร์อย่างง่ายมีให้สำหรับทุกอย่างตั้งแต่การเลือกจานสีไปจนถึงการสำรวจโค้ด CSS และ HTML ของไซต์อื่น

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

Webflow เป็นอีกตัวเลือกหนึ่งสำหรับการออกแบบในเบราว์เซอร์ที่นักพัฒนาอาจชื่นชอบ แม้ว่าส่วนต่อประสานการออกแบบจะเป็นภาพ แต่โค้ดที่ส่งออกนั้นสะอาด CSS และ HTML เชิงความหมายที่นักพัฒนาจะประทับใจ (ไม่ใช่เครื่องมือการออกแบบภาพทั้งหมดที่จะส่งออกโค้ดที่สะอาด) Webflow มีเครื่องมือสำหรับการออกแบบและการจัดวาง ตลอดจนเครื่องมือ CMS และอีคอมเมิร์ซในตัว ตลอดจนตัวเลือกการโฮสต์

การใช้สี วิชาการพิมพ์ และเลย์เอาต์

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

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

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

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

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

ทฤษฎีสีพื้นฐาน

ทฤษฎีสีเป็นหนึ่งในแง่มุมที่ซับซ้อนที่สุดของการออกแบบภาพ การเปลี่ยนเฉดสีเล็กน้อยสามารถเปลี่ยนผลกระทบทางสายตาและอารมณ์ของสีได้อย่างสมบูรณ์ เป็นเหตุผลหนึ่งที่นักออกแบบหลายคนที่อยู่ในวงการนี้มาหลายปียังคงต่อสู้กับสีสัน

แม้ว่าหนังสือหลายเล่มจะเขียนเกี่ยวกับทฤษฎีสี แต่ก็มีหลักการพื้นฐานบางอย่างที่นักออกแบบ-นักพัฒนาสามารถเรียนรู้เพื่อเริ่มต้นได้ รวมสิ่งเหล่านี้เข้ากับเครื่องมือออกแบบสีที่มีอยู่มากมาย และสร้างจานสีที่น่าพึงพอใจได้อย่างง่ายดาย

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

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

เมื่อนักออกแบบมีความเข้าใจพื้นฐานเกี่ยวกับความหมายของสีแล้ว พวกเขาสามารถใช้เครื่องมือต่างๆ เช่น Coolors, Design Seeds หรือ Colormind เพื่อสร้างจานสีสุดท้ายที่เข้ากันได้สำหรับการออกแบบของพวกเขา

การใช้ HSL Color

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

สำหรับคนส่วนใหญ่ (รวมนักออกแบบด้วย) ค่าฐานสิบหกดูเหมือนจะไม่มีความสัมพันธ์ซึ่งกันและกัน สองสีที่ดูคล้ายกันมากอาจมีค่าฐานสิบหกต่างกันโดยสิ้นเชิง ตัวอย่างเช่น #68B4D4 และ # 92C8E0 เป็นเฉดสีฟ้าที่ค่อนข้างใกล้เคียงกัน (สีหนึ่งสว่างกว่าและสว่างกว่าสีอื่นเล็กน้อย) แต่ค่าฐานสิบหกของพวกมันไม่มีความสัมพันธ์ที่ชัดเจน

อย่างไรก็ตาม ค่า HSL ของพวกเขาแสดงให้เห็นว่ามีความเกี่ยวข้องกันมากเพียงใด: #68B4D4 กลายเป็น HSL (198, 58%, 62%) และ #92C8E0 กลายเป็น HSL (198, 56%, 73%) ตัวเลขแรกในลำดับ (198 ในกรณีนี้) ระบุสีเฉพาะ ตัวเลขที่สองคือเปอร์เซ็นต์ของความอิ่มตัว (สีสว่างหรือสดใสแค่ไหน) ตัวเลขที่สามคือเปอร์เซ็นต์ของความสว่าง (หรือเพิ่มสีขาว) ของสี

เนื่องจาก HSL กับ hex จะเห็นความสัมพันธ์ระหว่างค่าสีได้ง่าย นักพัฒนาจึงมักพบว่าการจัดการสีผ่านโค้ดด้วย HSL นั้นง่ายกว่ามาก

หลักวิชาการพิมพ์

วิชาการพิมพ์เป็นอีกพื้นที่หนึ่งที่สามารถดึงดูดนักออกแบบที่มีประสบการณ์ได้ แต่เช่นเดียวกับทฤษฎีสี มีเครื่องมือดีๆ ที่สามารถช่วยได้

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

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

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

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

อีกวิธีง่ายๆ ในการรวมฟอนต์คือการเลือกฟอนต์จากตระกูลฟอนต์ขนาดใหญ่ มีหลายครอบครัวที่มีทั้งเวอร์ชัน display, serif และ sans serif ที่ทำงานร่วมกันได้ดี (เช่น Mrs Eaves และ Mr Eaves, Fedra หรือ Museo และ Museo Sans) นี่อาจเป็นวิธีที่ง่ายที่สุดในการเริ่มต้นทดลองจริงๆ กับการรวมฟอนต์เข้าด้วยกัน เนื่องจากฟอนต์เหล่านี้ได้รับการออกแบบมาให้ดูดีเมื่ออยู่ด้วยกัน

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

มาตราส่วนทั่วไปหนึ่งที่ใช้ในทั้งการพิมพ์ (และโดยทั่วไปในเลย์เอาต์การออกแบบ) ประกอบด้วย 4, 8, 16, 24, 36, 48, 72, 108 เป็นต้น ตัวเลขเหล่านี้สามารถนำมารวมกันในรูปแบบต่างๆ เพื่อสร้างการออกแบบที่มีภาพที่สวยงาม สัดส่วน (เช่น แบบอักษร 24 พิกเซลรวมกับความสูงของเส้น 36 พิกเซล)

หลักการเค้าโครงพื้นฐาน

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

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

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

ทางที่ดีที่สุดคืออย่าใช้ชื่อตัวหนาสีน้ำเงิน 72 พิกเซลในหน้าหนึ่ง แล้วใช้ชื่อสีแดง 36 พิกเซลในหน้าอื่นสำหรับเนื้อหาประเภทเดียวกัน เนื่องจากความสอดคล้องของเลย์เอาต์เป็นกุญแจสำคัญ ในทำนองเดียวกัน การเว้นวรรค (padding) ระหว่างชื่อเรื่องและข้อความเนื้อหาที่มีขนาด 36 พิกเซลในส่วนหนึ่งและอีก 32 พิกเซลในส่วนอื่นจะทำให้เกิดภาพที่ไม่สอดคล้องกัน แม้ว่าคนๆ หนึ่งอาจไม่เข้าใจในทันทีว่าทำไมความแตกต่างถึงสั่นคลอน แต่พวกเขาจะรู้สึกได้

เช่นเดียวกับมาตราส่วนการพิมพ์ที่กล่าวถึงข้างต้น องค์ประกอบการเว้นวรรคที่มีขนาด 4, 8, 16, 24, 36, 48, 72 หรือ 108 พิกเซลจะสร้างการออกแบบที่น่าพึงพอใจ ควรใช้พื้นที่ว่าง เพียงพอ ระหว่างองค์ประกอบต่างๆ ให้มีพื้นที่สำหรับหายใจ นักออกแบบรุ่นใหม่มักหลีกเลี่ยงพื้นที่สีขาวและอาจจบลงด้วยการออกแบบที่ดูรกและล้นหลาม

บางคนอาจตั้งคำถามว่าทำไมมาตราส่วนถึงมีระยะห่างเท่าเดิม เหตุใดจึงมีความแตกต่างเพียง 4 พิกเซลระหว่างตัวเลขสองตัวแรก แต่ 36 พิกเซลกระโดดระหว่างสองตัวเลขสุดท้าย เหตุผลง่าย ๆ คือ ในสเกลขนาดเล็ก การเพิ่มขึ้น 4 พิกเซลสามารถระบุได้ง่าย (8 พิกเซลมีขนาดใหญ่เป็นสองเท่าของ 4 ซึ่งมองเห็นได้ง่าย) แต่ด้วยตัวเลขที่มากกว่า ความแตกต่างระหว่าง 72 พิกเซลและ 76 พิกเซลนั้นไม่สามารถเห็นได้ง่าย ความแตกต่างที่ใหญ่ขึ้นจะมองเห็นได้ง่ายกว่าเมื่อขนาดเพิ่มขึ้น

ระยะห่างที่สม่ำเสมอเป็นเหตุผลหนึ่งที่ทำให้แนวทางการออกแบบที่ใช้ตารางเป็นหลักได้รับความนิยมอย่างมาก การเริ่มต้นด้วยตาราง (โดยทั่วไปคือ 12-, 16- หรือ 24 คอลัมน์) ช่วยให้นักออกแบบมีกรอบงานในการทำงานซึ่งจะทำให้ทุกอย่างสอดคล้องกัน รางน้ำในตัวระหว่างคอลัมน์ยังช่วยให้แน่ใจว่าองค์ประกอบการออกแบบที่แตกต่างกันและเนื้อหาภายในจะมีพื้นที่หายใจ

บทสรุป

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

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

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

• หลักการออกแบบและความสำคัญ
• นักออกแบบควรรู้โค้ดดิ้งมากแค่ไหน?
• สเปกตรัมของความเป็นไปได้: Go-To UI Color Guide
• เพิ่ม UX ของคุณด้วยหลักการออกแบบการโต้ตอบที่ประสบความสำเร็จเหล่านี้
• Design Foundations – A Guide to Visual Hierarchy (พร้อมอินโฟกราฟิก)