กฎการพิมพ์เว็บ 10 ข้อที่นักออกแบบทุกคนควรรู้

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

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

หากคุณต้องการเรียนรู้การใช้การออกแบบตัวอักษรให้เป็นประโยชน์ ให้ตรวจสอบกฎ 10 ข้อนี้ที่นักออกแบบทุกคนควรจำไว้

1. หยุดใช้ LoremIpsum หลังจากขั้นตอนการออกแบบเบื้องต้น

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

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

2. สร้างข้อความ Sans Serif

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

3. คิดเกี่ยวกับคำพูดที่ชาญฉลาดและสัญลักษณ์อื่นๆ ในช่วงต้นของกระบวนการออกแบบ

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

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

4. ทักษะ CSS ขั้นสูงมีความสำคัญอย่างยิ่ง

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

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

5. การพิมพ์ทั้งแบบไมโครและมาโครมีความสำคัญ

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

การพิมพ์ตัวอักษรมาโครเกี่ยวข้องกับวิธีที่ตัวเลือกของคุณเกี่ยวกับการออกแบบตัวอักษรเชื่อมโยงกับการออกแบบโดยรวมของคุณ มันเกี่ยวข้องกับสุนทรียศาสตร์

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

6. รู้เนื้อหาและการออกแบบ

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

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

7. เข้าใจถึงความสำคัญของลำดับชั้น

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

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

8. มีความคิดสร้างสรรค์แต่ระมัดระวังด้วยสี

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

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

9. ทิ้งข้อความไว้ตรงกลาง

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

10. พิจารณาว่าข้อความของคุณดูเหมือนขยายใหญ่ขึ้นอย่างไร

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

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

เครื่องมือและแหล่งข้อมูลที่เป็นประโยชน์

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

• FontFace Ninja : ยูทิลิตี้นี้ช่วยให้คุณระบุแบบอักษรที่คุณพบบนอินเทอร์เน็ต นี่เป็นเครื่องมือที่ยอดเยี่ยมเมื่อคุณใช้แบบอักษรที่ดึงดูดสายตาคุณจริงๆ ปลั๊กอิน Chrome นี้จะช่วยคุณระบุ ค้นหา และซื้อแบบอักษรที่มีจำหน่ายทั่วไปซึ่งคุณเห็นบนเว็บไซต์ใดๆ
• TypePlate : นี่คือกรอบงานการพิมพ์ที่สมบูรณ์แบบสำหรับนักออกแบบเว็บไซต์ TypePlate สามารถจัดการกับ drop cap, block quotes, scaling, colors และความท้าทายอื่น ๆ ที่เกี่ยวข้องกับการพิมพ์
• มาตราส่วนแบบแยกส่วน : นี่คือมาตราส่วนที่ให้คุณกำหนดแบบอักษรและขนาดแบบอักษรที่เหมาะสมที่สุด นอกจากนี้ยังช่วยให้คุณสร้างความสมดุลระหว่างขนาดแบบอักษรของชื่อและหัวเรื่องของคุณ และแบบอักษรที่คุณเลือกสำหรับข้อความของคุณ
• TIFF : เครื่องมือนี้ช่วยให้คุณสามารถเรียกใช้แบบอักษรที่แตกต่างกันสองแบบ จากนั้นจะแสดงความแตกต่างระหว่างแบบอักษรสองแบบสำหรับคุณ มันยังช่วยให้คุณเปรียบเทียบตัวอักษรและตัวเลขต่าง ๆ จากแบบอักษรหนึ่งไปยังอีกแบบหนึ่ง
• TypeWolf : ใช้เว็บไซต์นี้เพื่อแก้ไขแบบอักษรที่เจ๋งที่สุดและการใช้ตัวอักษรที่สร้างแรงบันดาลใจมากที่สุดบนอินเทอร์เน็ต นี่เป็นแหล่งแรงบันดาลใจที่ยอดเยี่ยมตลอดจนข้อมูล
• ทำไม Fonts Matter โดย Sarah Hyndman : นี่เป็นหนังสือที่ยอดเยี่ยมในการสำรวจความสำคัญของแบบอักษร และวิธีที่การออกแบบตัวอักษรสามารถส่งผลต่อสภาวะของจิตใจได้ เป็นหนังสือที่ยอดเยี่ยมสำหรับผู้ที่หลงใหลในการพิมพ์ แต่ยังสำหรับผู้ที่อาจต้องการการโน้มน้าวใจถึงความสำคัญของการเลือกประเภทงานที่เหมาะสม

บทสรุป

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