ทิศทางเนื้อหาภาพสิ่งที่คุณต้องรู้
ทิศทางภาพของเนื้อหา มีการกล่าวถึงน้อย แต่มีความสำคัญอย่างยิ่งต่อการออกแบบเว็บไซต์ที่มีการแปลงสูง ผู้เข้าชมทุกคน "ดูดซับ" เว็บไซต์ใหม่ในการโหลดหน้าแรก - ไม่ว่าพวกเขาจะทำอย่างมีสติหรือไม่.
สุนทรียภาพมีบทบาท แต่มันเป็นเรื่องของ ความรู้สึกโดยรวมของการออกแบบ. ความรู้สึกนี้สามารถได้รับผลกระทบจากช่องว่าง, การพิมพ์, สมมาตร แต่ส่วนใหญ่ สัมพันธ์ ระหว่างองค์ประกอบของหน้า.
นักออกแบบต้องการให้ผู้เยี่ยมชม อยู่บนหน้า และ ให้เลื่อน โดยดึงดูดความสนใจของพวกเขาและทำให้พวกเขาสนใจในเว็บไซต์ หลักการออกแบบควรมุ่งเน้นเสมอ ในฟังก์ชั่นก่อนฟอร์ม. ซึ่งหมายความว่าการออกแบบควร เติมเต็มเนื้อหา, อย่าผลักมันลงไปทีหลัง.
ในโพสต์นี้ฉันต้องการแสดงเคล็ดลับในการใช้ ปรับปรุงเลย์เอาต์และการไหลของเนื้อหาภาพของคุณ บนเว็บไซต์ของคุณ.
มุ่งเน้นไปที่องค์ประกอบ
ทุกชิ้นส่วนของเว็บไซต์สร้าง ตามรูปแบบโดยรวม. รูปแบบโดยรวมนี้สร้างองค์ประกอบที่เป็นไปตามกฎของทฤษฎี Gestalt ที่ระบุว่า ทั้งหมดนั้นมากกว่าผลรวมของส่วนต่าง ๆ เสมอ.
แต่ละพื้นที่ของหน้ามารวมกันเพื่อ รูปแบบทั้ง. องค์ประกอบการออกแบบจำเป็นต้องสร้าง แรงดึงโน้มถ่วง ในเนื้อหา ทุกอย่างในหน้าควร แนะนำผู้เข้าชมตามธรรมชาติต่อไปจนกว่าจะถึงด้านล่างของหน้า.
นี่คือเหตุผลที่ความสัมพันธ์ระหว่างส่วนต่าง ๆ ของเนื้อหา (ภาพข้อความปุ่ม ฯลฯ ) มีความสำคัญต่อการออกแบบ.
เป้าหมายของคุณควรเป็น ให้กำลังใจผู้คน เพื่อเรียกดูไซต์จากความชอบของตนเอง พูดง่ายกว่าทำเสร็จ แต่คุณสามารถเรียนรู้ได้มากมาย ศึกษาตัวอย่างจริง.
โฮมเพจสำหรับ Monkop เป็นตัวอย่างที่ดีของลำดับชั้นทางภาพด้วย ทั้งข้อความและภาพ. มีการใช้พื้นที่จำนวนมากระหว่างองค์ประกอบและตัวอักษรที่เติมเต็มภาพเวกเตอร์ที่มีตราสินค้า.
ในขณะที่คุณเลื่อนคุณจะสังเกตเห็น บล็อกหน้าตรงแนวนอน หารด้วยสีเส้นขอบและกราฟิก เหล่านี้ถูกสร้างขึ้นด้วย รูปแบบการออกแบบ ในใจที่จะ ข้อเสนอที่สอดคล้องกัน ตลอดทั้งหน้า.
ที่ด้านล่างคุณจะพบกับ แยกสองคอลัมน์ ด้วยภาพด้านหนึ่งข้อความบนอีกด้านหนึ่ง ภาพยัง สลับข้าง ในรูปแบบของขวาซ้ายซ้ายขวา สิ่งนี้ดึงดูดความสนใจและ สลายความน่าเบื่อ ของหน้าทั่วไปในขณะที่ยังคง รักษากระแสธรรมชาติ ในเนื้อหา.
สุนทรียศาสตร์การออกแบบที่คล้ายกัน สามารถพบได้บนเว็บไซต์ของ Picjumbo ซึ่งเป็นหน้า Landing Page สำหรับ addon รูปภาพสำหรับผู้ใช้ Photoshop และ Sketch.
หน้าแรกให้ความสำคัญกับโลโก้และวิดีโอตัวอย่าง ในขณะที่คุณเลื่อนคุณจะสังเกตเห็นภาพเคลื่อนไหวที่กำหนดเองที่เคลื่อนไหวไปทั่วหน้า อนิเมชั่นนี้จริงๆ ดึงดูดความสนใจ, และรับมุมมอง สนใจที่จะเลื่อน.
โดยรวมแล้วความรู้สึกหน้า เปิด และ เรียกดูได้ง่าย. เนื้อหาคือ แบ่งออกเป็นบล็อกแนวนอน ด้วยการพิมพ์ที่คมชัดและไอคอนที่สะอาด.
พิจารณาถึงองค์ประกอบต่าง ๆ ของหน้า สมดุลกัน, ช่องว่างระหว่างองค์ประกอบความแตกต่างระหว่างสีและรูปร่างที่แตกต่าง สิ่งเหล่านี้มีบทบาทในการจัดองค์ประกอบโดยรวม ทุกไซต์จะดึงน้ำหนักที่แน่นอนไปยังเนื้อหา.
ไม่มีคำตอบที่แน่นอนเพราะมันแตกต่างกันสำหรับทุกเว็บไซต์ ตัวอย่างเช่น, ลิงค์การนำทางบางอันดูดีขึ้นเมื่อมันใหญ่และใหญ่เกินไป. คนอื่น ๆ พอดีดีกว่าเมื่อพวกเขา เล็กด้วยตัวอักษรตัวพิมพ์ใหญ่.
ฉันแนะนำให้คุณศึกษาเว็บไซต์อื่น ๆ ในช่องของคุณ วิเคราะห์ว่าพวกเขารวบรวมกันอย่างไร แม้แต่ลองสร้างโครงร่างใหม่เพื่อดูว่าองค์ประกอบใดที่ทำให้การออกแบบ "มารวมกัน" ในที่สุด.
เรื่องการออกแบบประเภท
วิธีที่คุณออกแบบการพิมพ์ของคุณจะ ส่งผลกระทบต่อทิศทางเนื้อหา บนเว็บไซต์ของคุณ สิ่งนี้เกี่ยวข้องกับลำดับชั้นของประเภทและ สไตล์การออกแบบขององค์ประกอบหน้าต่างๆ เช่นย่อหน้า, ส่วนหัว, สัญลักษณ์แสดงหัวข้อย่อย, เครื่องหมายคำพูดและองค์ประกอบโครงร่างพิเศษเช่นคอลัมน์หรือตาราง.
ภาพ อาจส่งผลต่อเค้าโครงเช่นกันดังนั้นจึงเป็นความคิดที่ดีในการออกแบบเนื้อหา ด้วยความก้าวหน้าทางธรรมชาติ. เขียนเนื้อหาในลักษณะที่ ไหลลงหน้า, และ ทำให้คนอ่าน ผ่านแต่ละย่อหน้า.
เครื่องมือที่ยิ่งใหญ่ที่สุดที่คุณมีในการกำจัดคือ ดวงตาของคุณสำหรับการออกแบบ. เรียนรู้ที่จะรับรู้ถึงความแตกต่างในองค์ประกอบการพิมพ์และความสัมพันธ์กับองค์ประกอบของหน้าอื่น ๆ สร้างความสัมพันธ์ระหว่างส่วนของหน้าเพื่อแยกความแตกต่างของเนื้อหา.
บางสิ่งที่คุณอาจพิจารณา:
- ขนาดตัวอักษร
- ตระกูลแบบอักษร
- ความคมชัดของสี
- ความสัมพันธ์ส่วนของหน้า
- ความสูงของบรรทัดและย่อหน้าย่อหน้า
- การเว้นวรรคตัวอักษรและตัวบน / ตัวพิมพ์เล็ก
ตัวอย่างเช่นดูที่หน้าแรกของการตรวจสอบแคมเปญ ลิงค์การนำทางด้านบนใช้ตัวพิมพ์ใหญ่ทั้งหมดที่มีตัวอักษรขนาดเล็ก ส่วนหัวอื่น ๆ ในหน้า ทำตามการออกแบบตัวพิมพ์ใหญ่ทั้งหมดนี้ ที่ สร้างความรู้สึกของความสม่ำเสมอ.
ส่วนหัวขนาดใหญ่อื่น ๆ ในเว็บไซต์คือ โดดเด่นมากขึ้น, และพวกเขากระโดดออกจากหน้าจริงๆ เพียงแค่ดูที่การออกแบบส่วนหัวทั่วไปก็ควรจะง่าย บอกความแตกต่าง ระหว่างส่วนหัวและสำเนาเนื้อหาที่จับคู่.
สไตล์การออกแบบตัวอักษรในการตรวจสอบแคมเปญนั้นสวยงามและมีสไตล์ ผสมผสานอย่างเป็นธรรมชาติในรูปแบบ. ต้องฝึกฝนเพื่อให้ได้ผลลัพธ์เช่นนี้ แต่ยิ่งคุณพยายามมากเท่าไหร่ก็จะยิ่งง่ายขึ้นเท่านั้น.
หากต้องการเรียนรู้เพิ่มเติมอีกเล็กน้อยฉันขอแนะนำลิงก์ต่อไปนี้:
- หลักการออกแบบ: น้ำหนักภาพและทิศทาง
- ทำงานกับ Visual Weight ในแบบของคุณ
- 19 ปัจจัยที่ส่งผลกระทบต่อความสมดุลขององค์ประกอบ
เนื้อหาแนวทาง
เข้าใจว่า เว็บไซต์ประเภทต่างๆ มี วิธีการต่าง ๆ สำหรับชี้แนะผู้เยี่ยมชมเว็บไซต์ ตัวอย่างเช่นหน้า Landing Page ต้องการแนะนำผู้เยี่ยมชมด้วย เกร็ดความรู้ของข้อมูล, ไอคอนขนาดเล็ก, ภาพหน้าจอ, และ รับรอง.
เว็บไซต์อื่น ๆ เช่นบล็อกมักจะไม่นำคนมาที่หน้าแรกพร้อมกัน คนส่วนใหญ่ ลงจอดบนหน้าบทความ, ดังนั้นรูปแบบการโพสต์บล็อกมีความหมาย เน้นข้อความ, และดึงดูดผู้คน ต่อไปในเนื้อหา. นี่คือที่มาของการเขียนคำโฆษณาคุณภาพเพราะคุณต้องการให้ผู้อ่านออกไปเที่ยวทุกคำ.
เครือข่ายโซเชียลและเว็บแอปจำเป็นต้องมี ประสบการณ์การใช้งานที่มีคุณภาพ, นั่นเป็นหัวข้อที่แตกต่างกันเล็กน้อย แต่พิจารณาว่าฟีด Facebook นั้นถูกออกแบบมาอย่างไร ส่งเสริมการเลื่อนและการโต้ตอบกับผู้ใช้.
วิธีการออกแบบที่คุณใช้เพื่อให้ผู้คนเข้าชมเว็บไซต์จะ เปลี่ยนแปลงตลอดเวลา. แต่โดยทั่วไปแล้วเป้าหมายของคุณคือ แนะนำผู้เยี่ยมชม ด้วยทิศทางเนื้อหาภาพ.
ลองดูที่ หน้า Landing Page และ ออกแบบบล็อก เพื่อจุดแตกต่าง.
Cactus เป็นเครื่องมือสร้างเว็บไซต์แบบคงที่สำหรับ OS X หน้าแรกของพวกเขา ตามสไตล์การออกแบบของ Apple อย่างใกล้ชิด - ช่องว่างมากมายและฟอนต์ sans-serif แบบบาง.
เนื้อหาถูกจัดเรียงเป็นคอลัมน์บล็อกและกลุ่มข้อความพร้อมกราฟิกอย่างง่าย ความสวยงามแบบเดียวกันนี้คือ ทั่วไปกับผลิตภัณฑ์ของ Apple, ดังนั้นผู้ใช้ Mac จะเพลิดเพลินไปกับสไตล์การออกแบบนี้.
ข้อมูลเกี่ยวกับผลิตภัณฑ์ - รวมถึงคุณสมบัติและการตั้งค่า - มีการระบุไว้ในหน้าแรก หน้าตัวเอง ส่งเสริมการเลื่อน ผ่านเนื้อหาที่ไม่ซ้ำไอคอนพื้นฐานและรูปแบบคอลัมน์สลับของบล็อกเนื้อหาด้านซ้าย / ขวา.
เป้าหมายที่นี่คือการให้ข้อมูลแก่ ผู้ใช้ที่มีอยู่, และเพื่อขาย ผู้ใช้ใหม่ ความคิดของแคคตัส.
เปรียบเทียบการออกแบบนั้นกับหน้าแรกของ The Next Web เนื้อหาคือ ประปรายมากขึ้น ในหน้าแรกของบล็อกเพราะมี หัวข้อโพสต์ต่างๆมากมาย.
สี่เหลี่ยมสร้างระบบกริดที่หุ้ม โพสต์หลายรายการในรูปแบบเดียว. เป้าหมายที่นี่คือการ รับผู้ใช้อ่านเนื้อหา บนเว็บไซต์ ไม่สำคัญว่าผู้เข้าชมจะดาวน์โหลดอะไร แต่จะสำคัญถ้าพวกเขา อ่านหนังสือรอบ ๆ.
วิธีที่จะทำให้คนอ่านอยู่ด้วย ภาพถ่ายที่ดี และ หัวข้อข่าวลวง. TNW ทำงานได้ยอดเยี่ยมในเรื่องนี้และเลย์เอาต์ของพวกเขาคือ สร้างขึ้นเพื่อให้ผู้คนท่องอินเทอร์เน็ต ด้วยภาพขนาดย่อของโพสต์ที่เกี่ยวข้องในแถบด้านข้างและพื้นที่เนื้อหา.
การนำผู้เข้าชมไปสู่การกระทำที่เฉพาะเจาะจงนั้นแตกต่างกันไปในทุกไซต์ แต่คุณสามารถเรียนรู้ได้มากมายโดยการศึกษาว่าเว็บไซต์ที่ประสบความสำเร็จอื่น ๆ ทำอะไรและเรียนรู้วิธีคัดลอก.
วางใจในดวงตาของคุณ
คุณสมบัติการออกแบบส่วนบุคคลสามารถอธิบายได้เชิงวิเคราะห์ แต่การเปลี่ยนแปลงการใช้งานสำหรับแต่ละเว็บไซต์ ภาพฮีโร่ที่มีลิงก์ "เลื่อนเพิ่มเติม" ไม่ทำงานเหมือนเดิม ในทุกเว็บไซต์.
เรียนรู้ที่จะออกแบบเป็นอย่างมาก กระบวนการทางสายตา. ดวงตาของคุณสำหรับการออกแบบเป็นสิ่งสำคัญที่สุด คุณจำเป็นต้อง เห็นสิ่งต่าง ๆ อย่างเหมาะสม เพื่อระบุสิ่งนี้ ลำดับชั้นทางภาพ. หากคุณสามารถดูได้บนเว็บไซต์อื่น ๆ คุณจะสามารถทำซ้ำบนเว็บไซต์ของคุณเอง.
คำแนะนำที่ดีที่สุดที่ฉันมีคือ แค่เชื่อสายตาคุณ. สร้างรายการเว็บไซต์โปรดของคุณและใช้เวลา 5 นาทีในการเรียกดูแต่ละรายการ เขียนองค์ประกอบที่คุณชื่นชอบลงบนหน้าและผลกระทบที่มีต่อการออกแบบ สิ่งนี้จะช่วยคุณ ทำให้เป็นแนวความคิดเหล่านี้จากมุมมอง UI / UX, มากกว่ามุมมองของผู้ใช้.
อย่ากลัวที่จะลองสิ่งต่างๆ! ไม่มีใครเก่งเรื่องการออกแบบ เพียงแค่ โดยการอ่านบทความเกี่ยวกับการออกแบบ ใช่พวกเขาช่วย - พวกเขาสามารถช่วยได้มากจริงๆ แต่คุณ จำเป็นต้อง ไปยัง สร้างสิ่งต่าง ๆ ตั้งแต่เริ่มต้นเพื่อเรียนรู้อะไร โรงงาน และอะไร ไม่.
ฝึกสายตาด้วยการศึกษารูปแบบเว็บไซต์ที่คุณชอบและสร้างมันขึ้นมาใหม่ เมื่อเวลาผ่านไปคุณจะสร้างไลบรารีรูปแบบในใจของคุณซึ่งทำให้การออกแบบไซต์ใหม่ง่ายขึ้นมาก.
ห่อ
หวังว่าเคล็ดลับเหล่านี้จะช่วยให้คุณเริ่มต้นใช้งานได้และเตรียมแผนงานพื้นฐานให้คุณปฏิบัติตาม มันไม่ใช่เรื่องง่ายที่จะกลายเป็นนักออกแบบเว็บไซต์ แต่โลกนี้ต้องการพรสวรรค์และมันไม่ง่ายที่จะสอนตัวเองถึงแนวคิดพื้นฐานเหล่านี้.
ศึกษา ตัวอย่างที่ดีที่สุดของเว็บไซต์ที่มีองค์ประกอบของหน้าเว็บที่คุณเพลิดเพลิน. รถไฟ ตาของคุณที่จะรับรู้ความสัมพันธ์และคุณจะได้อย่างรวดเร็ว พัฒนา ทักษะที่จำเป็นต่อการ ทำซ้ำ ความสัมพันธ์เหล่านั้นในงานของคุณเอง.
