กริดในการออกแบบเว็บ

 

“มีบางอย่างที่แตกต่างกันระหว่างไซต์นี้กับฉัน … ดูเหมือนว่าจะโปรมากขึ้นและฉันก็ไม่รู้เหมือนกันว่าทำไม!”

คุณเคยมีข้อคิดเห็นแบบนั้นหรือไม่? แต่คุณได้ใช้ Photoshop (หรือโปรแกรมที่คล้ายกัน) บางครั้งคุณรู้กฎการพิมพ์และของเว็บจานสีได้รับเลือกอย่างระมัดระวัง … ในระยะสั้นไม่มีอะไร: เว็บไซต์ของคุณดูเหมือน destructured / désharmonisé

ตัวอย่างของตาราง

ไม่ต้องกังวลคุณอาจไม่ได้ใช้ตารางในการออกแบบของคุณ!

ตารางเช่นเดียวกับในภาพยนตร์ *?

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

* ภาพยนตร์สีน้ำเงินที่มีรถจักรยานยนต์การต่อสู้ที่บันทึกไว้และนายฟลินน์ คุณพบ?

กริด: ฐาน

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

กริดส่วนใหญ่มีขอบด้านข้างเพื่อให้ดวงตาสามารถเพลิดเพลินกับการอ่านเพื่อความสะดวกสบายโดยไม่ “เคาะ” กับขอบของหน้าต่างเบราเซอร์

กายวิภาคของกริด

กริดประกอบด้วยเครื่องหมายแนวตั้งและ / หรือแนวนอน (แกน) โดยคั่นด้วยรางสำหรับจัดโครงสร้างเนื้อหา อย่าลืมขอบภายนอก (สำหรับขอบของหน้าต่าง) และระยะขอบภายใน (ของแต่ละแกน)

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

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

กายวิภาคของกริด

มันง่ายที่จะจินตนาการตัวแปรที่เป็นไปได้ที่แตกต่างกันของกริดโดยการเล่นบน: จำนวนของคอลัมน์ความกว้างของพวกเขาความกว้างของราง, ขอบ …

กริดแนวตั้ง

คุณสามารถเลือกจำนวนคอลัมน์ที่จะแทรกในความกว้างคงที่ ดังนั้นยิ่งคอลัมน์มีจำนวนน้อยลงเท่านั้นความกว้างเท่าใด

ตัวอย่าง:

ตาราง 12 คอลัมน์

ตาราง 16 คอลัมน์

ตารางที่มี 24 คอลัมน์

คอลัมน์เหล่านี้ช่วยให้สามารถแบ่งจังหวะในทิศทางแนวนอน (จากซ้ายไปขวา) เวลาส่วนใหญ่นี้เพียงพอที่จะสร้างการออกแบบ

กริดแนวตั้งและแนวนอน

การเพิ่มหน่วยในแนวนอนทำให้สามารถทำเครื่องหมายได้ในแนวตั้ง (จากบนลงล่าง)

ตัวอย่าง:

ตารางแนวนอนและแนวตั้ง

ตารางที่มีสี่เหลี่ยม

นี้เหมาะสำหรับการจัดแนวหลายบล็อกที่มีซี่โครง

วิธีการเลือกตารางของคุณ?

ไม่มีกฎที่แท้จริง: ขึ้นอยู่กับโครงการ ดังนั้นจึงเป็นสิ่งสำคัญมากในการเตรียมตัวให้ดีสำหรับโครงการปลายน้ำเพื่อให้เข้าใจถึงเนื้อหาของไซต์อย่างละเอียด ในบทความนี้บทความเกี่ยวกับAlsacréationsอาจเป็นที่สนใจของคุณ: Mockups & Rough: ประหยัดเวลา!

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

ที่จะหากริด?

ไซต์หลายแห่งเสนอให้ดาวน์โหลดโมเดลตาราง อย่างไรก็ตามไซต์บางแห่งมีเฉพาะกรอบ CSS ที่ไม่สามารถใช้งานได้โดยตรงในซอฟต์แวร์การออกแบบ

ระบบกริด 960

ระบบกริด 960

“960 gs” เป็นที่รู้จักกันเป็นอย่างดีนอกเหนือจากการเสนอกรอบ CSS แล้วคุณยังสามารถดาวน์โหลดเทมเพลตสำหรับซอฟต์แวร์จำนวน (Photoshop, ดอกไม้ไฟ, GIMP … ) เทมเพลตอยู่ในรูปของเลเยอร์: เพียงวางไว้ในตำแหน่งแรกในเลเยอร์ของคุณและเล่นเคล็ดลับ

รูปแบบตารางแบบโมดูลาร์

รูปแบบตารางแบบแยกส่วน

“Modular Grid Pattern” ช่วยให้สามารถสร้างเส้นตารางได้โดยตรงบนไซต์ จากนั้นคุณสามารถดาวน์โหลดเป็นรูปแบบ (.pat หรือ. png) เพื่อรวมไว้ในองค์ประกอบของคุณ

GUIDEGUIDE

GUIDEGUIDE

“GuideGuide” คือส่วนขยายของ Photoshop (จาก CS4) เพื่อสร้างเครื่องหมายเป็นสัญลักษณ์ของตาราง สำหรับข้อมูลก็ยังอยู่ในช่วงเบต้า

การจัดวางกริด (บล็อค)

หลังจากเลือกตารางแล้วตอนนี้ต้องกรอกข้อมูลโดยจัดบล็อกต่างๆเพื่อจัดเนื้อหา (ภาพข้อความวิดีโอสไลด์โชว์ … )

ชุดค่าผสมจำนวนมาก