เค้าโครงกริดในไซต์ผลงานของ WordPress: เคล็ดลับและตัวอย่างการออกแบบ

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

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

ในโพสต์นี้ ฉันจะแบ่งปันเคล็ดลับและคำแนะนำเกี่ยวกับการออกแบบเลย์เอาต์กริดที่ดีที่สุดสำหรับพอร์ตโฟลิโอ WordPress

การออกแบบกริดที่แน่น

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

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

แต่นักออกแบบอาจเก็บงานของพวกเขาไว้ใกล้ ๆ เพราะภาพหน้าจอยังคงมองเห็นได้ง่ายแม้ในระยะไกล คุณสามารถดูตัวอย่างที่ดีได้ในธีม Ink สำหรับ WordPress

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

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

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

แต่ทางเลือกที่ดีอย่างหนึ่งคือ Bramble ซึ่งมีช่องว่างระหว่างแต่ละชิ้นเพิ่มขึ้นเล็กน้อย

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

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

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

กริดก่ออิฐ

มีคนไม่มากที่รู้เกี่ยวกับตะแกรงก่ออิฐ แต่พวกเขาก็มีมานานแล้ว

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

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

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

หากคุณชอบเลย์เอาต์แบบเต็มหน้าจอ ให้ลองดูที่ธีม Notio ใช้การออกแบบตารางก่ออิฐที่มีรูปขนาดย่อที่แน่นหนาและเอฟเฟกต์แอนิเมชั่นแบบกำหนดเอง

สังเกตว่ากริดจากสองธีมนี้มีความรัดกุมแตกต่างกันไป ภาพหนึ่งมีช่องว่างพิเศษระหว่างภาพ ขณะที่อีกภาพหนึ่งมีภาพขนาดย่อชิดกันชิดกัน

เลย์เอาต์กริดตามเทรนด์จำนวนหนึ่ง และคุณสามารถเลือกได้ตามที่คุณชอบที่สุด

รายละเอียดโฮเวอร์: ใช่หรือไม่?

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

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

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

เมื่อเคอร์เซอร์เลื่อนเมาส์ไปที่รายการพอร์ตโฟลิโอ คุณจะพบข้อมูลสำคัญสองประการ:

• ชื่อ/ชื่อรายการผลงาน
• หมวดหมู่ของรายการ

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

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

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

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

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

ดึงดูดสายตาด้วยภาพถ่ายที่น่าดึงดูด

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

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

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

ฉันแนะนำให้เรียกดูไซต์พอร์ตโฟลิโออื่น ๆ เพื่อดูว่านักออกแบบคนอื่น ๆ ใช้สำหรับรูปภาพในแกลเลอรีของพวกเขาอย่างไร

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

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

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

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

ก้าวไปข้างหน้า

การออกแบบกริดนั้นค่อนข้างเรียบง่ายและธีมพอร์ตโฟลิโอของ WordPress จำนวนมากมาพร้อมกับพวกมันตามค่าเริ่มต้น แต่เลย์เอาต์กริดจะไม่สามารถนำเสนออะไรได้มากนักหากไม่มีงานออกแบบที่งดงามที่จะแสดง

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