เนื้อหา
บทความนี้ปรากฏครั้งแรกในนิตยสาร. net ฉบับที่ 229 ซึ่งเป็นนิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบและพัฒนาเว็บไซต์
สิ่งที่สำคัญที่สุดอย่างหนึ่งที่คุณสามารถมุ่งเน้นในการจัดวางหน้าใน HTML / CSS คือจังหวะแนวตั้งซึ่งเป็นรูปแบบภาพที่บล็อกประเภทหรือบรรทัดของรูปแบบในขณะที่คุณสแกนลงในหน้า
สิ่งอื่น ๆ อาจมีผลต่อจังหวะนี้เช่นส่วนหัวรายการรูปภาพและอื่น ๆ การมีจังหวะในแนวตั้งที่ดีเป็นสิ่งสำคัญยิ่งเพราะช่วยให้อ่านง่ายและสามารถสแกนหน้าของคุณได้
มีบทช่วยสอนที่ยอดเยี่ยมมากมาย (ดูที่นี่และที่นี่เป็นต้น) บนเว็บที่คุณสามารถค้นหาเกี่ยวกับวิธีการบรรลุจังหวะแนวตั้งที่เหมาะสมในทางเทคนิคโดยใช้ ems สำหรับความสูงของเส้นและเรียนรู้เกี่ยวกับสิ่งที่ทำให้ประเภทของคุณ 'อยู่ในเฟส' หมายถึง.
ลำดับชั้น
สิ่งพื้นฐานที่ควรใส่ใจอย่างยิ่งคือความสูงของเส้นระหว่างองค์ประกอบและลำดับชั้นภาพโดยรวมบนหน้า การกำหนดสัดส่วนความสูงของเส้นที่เหมาะสมอาจเป็นการออกกำลังกายที่เกี่ยวข้องกับการออกแบบ แต่สิ่งสำคัญคือต้องเชี่ยวชาญ ลำดับชั้นก็มีความสำคัญเช่นกันเนื่องจากรูปภาพและองค์ประกอบข้อความควรสอดคล้องกันด้วยภาพ - สิ่งที่สำคัญที่สุดมักจะมีขนาดใหญ่กว่าและมาก่อนในหน้า
นักออกแบบสิ่งพิมพ์ได้รับมือกับแนวความคิดเกี่ยวกับจังหวะแนวตั้งมาหลายปีแล้วและในอดีตเมื่อไม่นานมานี้นักออกแบบเว็บไซต์ต้องเข้ามามีส่วนร่วมในสิ่งนี้จริงๆ ด้วยความต้องการที่เพิ่มขึ้นเรื่อย ๆ ในการสร้างเว็บไซต์โดยใช้เค้าโครงกริดและให้ความสำคัญกับการใช้งานที่ตอบสนองเพื่อรองรับความกว้างของหน้าจอที่หลากหลายจึงมีความสำคัญมากกว่าที่เคยเป็นมาจากมุมมองของการออกแบบภาพซึ่งอาจมากกว่าแค่ทางเทคนิค
ห้าตัวอย่างเพื่อตรวจสอบ
1. องค์ประกอบของรูปแบบการพิมพ์ หนังสือเล่มนี้ของ Robert Bringhurst เป็นมาตรฐานสำหรับการศึกษาวิชาการพิมพ์ อ่านกินมันเทลงในสมองของคุณในแบบที่คุณทำได้
2. แฟรงค์ชิเมโร นอกเหนือจากความน่าทึ่งโดยทั่วไปแล้วการออกแบบใหม่ล่าสุดของนักออกแบบเว็บไซต์ส่วนตัวของ Frank Chimero ยังแสดงจังหวะแนวตั้งที่ยอดเยี่ยม เขาใช้เอฟเฟกต์พารัลแลกซ์เพื่อช่วยขับเคลื่อนจังหวะกลับบ้านในขณะที่คุณเลื่อนหน้าลงด้วย
3. แดนเซเดอร์โฮล์ม สำหรับตัวอย่างที่ดีของจังหวะการพิมพ์แนวตั้งที่ยอดเยี่ยมลองดูที่บล็อกของ Dan Cederholm ความสูงของบรรทัดของสำเนาและพาดหัวข่าวอยู่ในสัดส่วนที่พอดี
4. Focus Lab Focus Lab บริษัท ออกแบบเว็บไซต์และการสร้างแบรนด์ใช้ลำดับชั้นอย่างช่ำชองเพื่อช่วยสื่อสารสิ่งที่สำคัญที่สุดสำหรับผู้เยี่ยมชม
5. Typofonderie เว็บไซต์ของ Typography Studio Typofonderie มีจังหวะในแนวตั้งที่ยอดเยี่ยมด้วยรูปภาพและข้อความ ระยะห่างระหว่างองค์ประกอบเป็นสัดส่วนทั่วทั้งเว็บไซต์และลำดับชั้นระหว่างภาพหลักและภาพรอง / ส่วนนั้นสมบูรณ์แบบ
ค้นพบ 10 ตัวอย่างการออกแบบเชิงทดลองที่น่าทึ่งที่ Creative Bloq
