การออกแบบเคล็ดลับและตัวอย่างโครงร่างแบบเร่งรัดเนื้อหา

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

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

หน้าเว็บที่กำหนดเอง

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

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

โครงร่างโครงร่าง

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

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

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

พื้นที่สีขาวที่สว่างสดใส

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

ย่อหน้าและส่วนหัวของหน้าเป็นจุดเริ่มต้นที่ดีสำหรับการปรับแต่ง การใช้คุณสมบัติ CSS คุณควรจะสามารถจัดการกับระยะขอบภายนอกและขยายส่วนองค์ประกอบข้อความบรรทัดบล็อกแต่ละบรรทัดออก สิ่งเหล่านี้รวมถึงส่วนหัว 1-6 ย่อหน้าบล็อกข้อความทั้งหมดรายการข้อความที่จัดรูปแบบล่วงหน้าและองค์ประกอบที่มีจำนวนน้อยกว่า.

หากคุณต้องการดึงดูดความสนใจของผู้อ่านเป็นสิ่งสำคัญที่จะใช้การเว้นวรรคภายใต้องค์ประกอบข้อความสำคัญ ย่อหน้าและส่วนหัวที่เล็กลงทำงานได้ดีที่สุดโดยใช้ระยะขอบด้านล่าง 15px-25px สำหรับองค์ประกอบหน้าขนาดใหญ่เช่น h1 หรือ h2 ให้พิจารณา 35px + (สิ่งนี้จะขึ้นอยู่กับขนาดตัวอักษรของคุณด้วย) ช่องว่างระหว่างองค์ประกอบแนวตั้งมีความสำคัญสำหรับการเลื่อนและการสแกน "อย่างคร่าว ๆ " อย่างไรก็ตาม line-height เป็นอีกคุณสมบัติ CSS ที่สำคัญซึ่งมีผลต่อระยะห่างระหว่างบรรทัดในองค์ประกอบข้อความ ย่อหน้าควรมีค่าความสูงของบรรทัดที่ใหญ่กว่ามากเมื่อเทียบกับขนาดแบบอักษรดังนั้นจึงมีช่องว่างขนาดใหญ่พิเศษระหว่างบรรทัด.

พิจารณารูปแบบไดนามิก

นอกเหนือจากระยะห่าง, วิชาการพิมพ์ดิจิตอล ควรมีการจัดการในวิธีที่จะทำให้มันกระโดดออกจากหน้า มีเว็บไซต์หลายร้อยล้านแห่งทั่วโลกในทุกวันนี้เป็นเรื่องปกติที่จะเห็นแบบอักษรเดียวกันทุกที่.

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

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

ใช้เมนูแบบเลื่อนลง

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

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

อาจเป็นกลยุทธ์ที่เร็วที่สุดและน่าผิดหวังน้อยที่สุดคือเริ่มต้นด้วยเฟรมเวิร์ก JavaScript ที่นิยมมากที่สุด ได้แก่ jQuery, MooTools หรือ Prototype ไลบรารีเหล่านี้ทั้งหมดมีเอกสารประกอบและหลายแห่งมีสคริปต์เมนูแบบเลื่อนลงใช้ได้ฟรี.

วางแผนมุมมองเนื้อหา

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

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

แผนกลยุทธ์อย่างละเอียด

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

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

7 ตัวอย่างเว็บไซต์หนัก ๆ

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

clicker

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

อนาคตของการออกแบบเว็บ

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

ท่านลอร์ด

ในเลย์เอาต์ตลกนี้ตัวละครหลัก Lord Likely ได้รับ "การ์ตูน" และเจาะเป็นภาพประกอบ ไซต์ถูกแบ่งออกเป็น 3 คอลัมน์โดยเนื้อหาใหม่กีฬาโฆษณาลิงค์ฟีดและคลังข้อมูล การออกแบบตัวเองนั้นย้อนยุคมากและฉลาดในการออกแบบภาพประกอบ.

ไมโครซอฟท์

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

Search Engine Land

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

ทำเนียบขาว

การออกแบบ United States White House ดูสะอาดตาและเป็นมืออาชีพมาก มีข้อมูลมากมายเกี่ยวกับกำหนดการของประธานาธิบดีและเหตุการณ์ทางการเมืองที่สำคัญอื่น ๆ เคล็ดลับหนึ่งในการลดห้องหน้าได้มีการเพิ่มตัวเลื่อนเนื้อหาขนาดเล็กที่มีต่อส่วนหัวของหน้า นี่เป็นการดีสำหรับการแสดงหัวข้อข่าวใหญ่ 3-4 เรื่องเมื่อผู้เยี่ยมชมของคุณเข้าสู่หน้า.

Yahoo Portal

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

ข้อสรุป

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