Hacks ลำดับชั้นภาพ​ ขั้นเทพ

สำหรับ

การออกแบบเว็บไซต์ "สุดเจ๋ง"

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

การสื่อสาร​

ดึงดูดความสนใจ​

ความบันเทิง

การบอกต่อ

ลำดับขั้นภาพในการออกแบบเว็บไซต์

คืออะไร? 

ทำหน้าที่อะไร? 

คือการจัดเรียงข้อมูลหรือคอนเทนท์เพื่อให้นำสายตาของมนุษย์

การนำเสนอส่วนประกอบต่างๆและการเน้นข้อมูล

เทคนิคการจัดโครงสร้างภาพประกอบและข้อความบนหน้าเพจ

 

นำทางผู้เข้าชมผ่านการเดินทางของผู้ซื้อ

ช่วยให้ผู้อ่านโฟกัสกับบางส่วนของเว็บไซต์

ช่วยสร้างความสัมพันธ์กันระหว่างข้อมูล

 

เหมาะสำหรับใคร? 

เป้าหมาย: การใช้ HTML และ CSS ในการพัฒนา UI และ UX ของเว็บไซต์คุณ

 

นักพัฒนา

เป้าหมาย: สื่อสารข้อความที่คุณต้องการสื่อในทางที่ดีที่สุด 

องค์กรธุรกิจ 

เป้าหมาย: การเข้าถึงส่วนที่ต้องการนำเสนอโดยที่ไม่ต้องใช้คู่มือ

 

ผู้เข้าชม 

เป้าหมาย: จัดการทุกอย่างโดยใช้องค์ประกอบและกฏของการออกแบบ

นักออกแบบ 

ควรให้ความสำคัญกับอะไร? 

การเผยแพร่ (Publishing)

เน้น: หัวเรื่อง / ข้อความ | การสมัครสมาชิก | ไอคอนของโซเชียวมีเดีย

 

ผลงาน (Portfolio)

เน้น: รูป thumbnail | ข่าวการประชาสัมพันธ์ | ช่องทางการติดต่อ

 

อีคอมเมิร์ซ (Ecommerce)

เน้น: ปุ่ม CTA | แถบค้นหา | ข้อเสนอการขาย

 

ธุรกิจ (Business)

เน้น: ข้อความที่จะสื่อสาร | ปุ่ม CTA | ผลิตภัณฑ์

 

แจ้งไว้ให้ทราบ (FYI)คุณสามารถเน้นอะไรก็ได้ที่สำคัญกับคุณ

 

เริ่มอย่างไรดี?

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

สแกนหน้าเว็บ 

รูปแบบ F (F Pattern)

>ใช้กับหน้าเว็บที่มีตัวหนังสือเยอะ

>การอ่านเริ่มจากซ้านไปขวา

>วางโลโก้ของคุณไว้ที่มุมซ้าย

รูปแบบZ

>โครงร่างของเว็บนั้นจะไล่ตามเหมือนตัวอักษร Z

>ศูนย์กลางของหน้าเว็บควรจะเด่น

>ใช้ได้ดีกับหน้าเว็บที่มีปุ่ม CTA อันเดียว

รูปแบบซิกแซก

>ใส่เนื้อหาหลักไปบน 6 จุดหลักของความสนใจ

>ใช้ได้ดีสำหรับผู้เข้าชมที่อ่านแบบผ่านๆ

>เป็นการแบ่งครึ่งหน้าเว็บ การออกแบบ แบบแบ่งหน้า

แผนภาพกูเตนเบิร์ก

>หน้าเว็บจะแบ่งออกเป็น 4 ส่วน

>วางสิ่งที่น่าสนใจตรงมุมซ้ายบนและมุมขวาล่าง

>สายตาของผู้เข้าชมนั้นจะมีการมองแบบเฉลียง

ระวัง (LOOK OUT)

ศึกษากลุ่มเป้าหมายของคุณก่อนที่จะทำการเลือกรูปแบบ

การจัดวางกริด 

แบบต้นฉบับ

>เป็นกริดที่ง่ายซึ่งเป็นแบบคอลัมน์เดี่ยว

>เนื้อหาอยู่ตรงกลางของสี่เหลี่ยม

>มีขอบระหว่าง 2 ข้าง

คอลัมน์ (Column)

>สไตล์หนังสือพิมพ์: เนื้อหาอยู่ในคอลัมน์

>การจัดเรียงตัวหนังสือและภาพสามารถปรับเปลี่ยนได้

>มีการเว้นช่องเบรคในภาพรวมการออกแบบ

แบบแยกส่วน (Modular)

>มีการแยกส่วนโดยแถวและคอลัมน์

>สามารถใช้งานได้ดีกับเว็บไซต์ที่มีรูปภาพเยอะ

>โครงสร้างที่เหมือนบล็อคทำให้มีความเด่น

แบบลำดับชั้น (Hierarchical)

>ขนาดของแถวและคอลัมน์นั้นแตกต่างกัน

>การออกแบบนั้นจะแรมดอมด้วยสัดส่วนที่ไม่ซ้ำกัน

>เนื้อหาส่วนประกอบต่างๆจัดวางแบบไม่สมมาตร

ลองคิดดู (Think on it)

กริดแบบ responsive จะมีหน้าตาแบบไหน?

การเน้นสี 

จิตวิทยาสี (Color Psychology)

>รู้จักความหมายและอารมณ์ของสี

>สีพาสเทลไม่สามารถใช้งานได้กับ call-to-action

>ใช้ลักษณะของสีเพื่อเน้นเนื้อหา

พาเลทสี (Color Palette)

>ช่วยจัดโครงสร้างข้อมูลบนเว็บไซต์

>ให้ความต่อเนื่องตลอดหน้าเว็บเพจทุกๆหน้า

>แต่ละสีสามารถให้ความรู้ความเข้าใจ

เคล็ดลับสุดยอด (Super tip)

อย่าใช้สีมากกว่า 3 สีสำหรับการออกแบบ UI

สีที่ดีที่สุดสำหรับเว็บไซต์ 

ขาว (White)

>ให้ความสะอาดเรียบร้อยและภาพลักษณ์ที่ซื่อสัตย์

>นิยมใช้โดยนักออกแบบสไตล์มินิมอล

>พื้นที่สีขาวช่วยพักสายตาได้

น้ำเงิน (Blue)

>ใช้โดยทั่วไปสำหรับลิ้งก์

>ให้ความเป็นบริษัทหรือองค์กร

>สบายตาสำหรับผู้เข้าชม

ดำ (Black)

>ใช้สำหรับตัวหนังสือบนพื้นหลังที่สว่าง

>ให้ความคลาสสิคและความสวยงาม

>เน้นส่วนต่างๆของเว็บไซต์

แดง (Red)

>ใช้สำหรับลิ้งก์เว็บและ CTA

>เพิ่มพลังงานความแอคทีฟและแพสชั่น

>ใช้โทนและเชดสีสำหรับความหลากหลาย

ขออนุญาติ (Excuse me!)

การใช้สีนั้นแตกต่างกันตามธุรกิจและกลุ่มเป้าหมาย

ตัวหนังสือที่สำคัญ 

รูปแบบ (Type)

>มากสุด 2 รูปแบบอักษรและฟ้อนท์

>สามารถใช้เป็น serif, sans serif หรือ script ได้

>ฟ้อนท์นั้นให้อารมณ์ทำให้เกิดความรู้สึกต่างๆได้

นำหนัก (Weight)

>ตัวหนังสือมีความหนาหรือบางแค่ไหน

>แยกหัวข้อด้วยตัวหนา

>หลีกเลี่ยงการใช้ตัวบางกับข้อความที่เยอะ

ขนาด (Size)

> HTML tags (h1 ถึง h6) โครงสร้างตัวหนังสือ

> หัวข้อจะต้องใหญ่กว่าเนื้อความ

> วิธีพื้นฐานในการเพิ่มลำดับชั้นภาพ

ระดับ (Levels)

>หลัก: เนื้อหาที่ดึงผู้ชมไปสู่ดีไซน์ (header, รูปภาพและโฆษนา)

>รอง: เนื้อหาที่สามารถสแกนได้เพื่อช่วยให้ผู้อ่านอยู่ต่อ (subhead, คำพูด, การช่วยเหลือ)

>รองอันดับ 3 : ตัวหนังสือที่เล็กที่สุดบนหน้าเว็บเพจ (footer, ลิ้งก์, เนื้อความ)

Sources:http://newmedia.yedte.rdu.te.pdf/ismis_10/elseniz-kartipu.pdf

https://www.nngroup.com/articles/f-shaped-pattern-readung-web-content/

https://www.nirmal.com.au/web-design-principel-for-business/

https://www.designtoday.io/home/2017/2/23/6-principles-of-visual-hierarchy-for-designers

https://webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-design-webdesign-687

http://vanseodesign.com/web-design/3-design-layouts/

 

wilbert O.Gai;tz. The Essential Guide to User Interface Design: An Introduction to GUI Design Ina Saltz. Typography Essentials: 100 Design Principles for Working with TypeRob Carter, Philip B.Meggs, Ben Day,Typographic Design:Form and Communication

คุณเพิ่มลำดับชั้นภาพในการออกแบบเว็บไซต์ของคุณอย่างไร 

Hacks ลำดับชั้นภาพ​ ขั้นเทพ

การออกแบบเว็บไซต์ "สุดเจ๋ง"

สำหรับ

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

การสื่อสาร​

ดึงดูดความสนใจ​​

ความบันเทิง

การบอกต่อ

ลำดับขั้นภาพในการออกแบบเว็บไซต์

คืออะไร? 

คือการจัดเรียงข้อมูลหรือคอนเทนท์เพื่อให้นำสายตาของมนุษย์

การนำเสนอส่วนประกอบต่างๆและการเน้นข้อมูล

เทคนิคการจัดโครงสร้างภาพประกอบและข้อความบนหน้าเพจ

 

ทำหน้าที่อะไร? 

นำทางผู้เข้าชมผ่านการเดินทางของผู้ซื้อ

ช่วยให้ผู้อ่านโฟกัสกับบางส่วนของเว็บไซต์

ช่วยสร้างความสัมพันธ์กันระหว่างข้อมูล

 

เหมาะสำหรับใคร? 

นักพัฒนา

เป้าหมาย: การใช้ HTML และ CSS ในการพัฒนา UI และ UX ของเว็บไซต์คุณ

 

ผู้เข้าชม 

เป้าหมาย: การเข้าถึงส่วนที่ต้องการนำเสนอโดยที่ไม่ต้องใช้คู่มือ

 

เป้าหมาย: สื่อสารข้อความที่คุณต้องการสื่อในทางที่ดีที่สุด 

องค์กรธุรกิจ 

เป้าหมาย: จัดการทุกอย่างโดยใช้องค์ประกอบและกฏของการออกแบบ

นักออกแบบ 

ควรให้ความสำคัญกับอะไร? 

การเผยแพร่ (Publishing)

เน้น: หัวเรื่อง / ข้อความ | การสมัครสมาชิก | ไอคอนของโซเชียวมีเดีย

 

ผลงาน (Portfolio)

เน้น: รูป thumbnail | ข่าวการประชาสัมพันธ์ | ช่องทางการติดต่อ

 

อีคอมเมิร์ซ (Ecommerce)

เน้น: ปุ่ม CTA | แถบค้นหา | ข้อเสนอการขาย

 

ธุรกิจ (Business)

เน้น: ข้อความที่จะสื่อสาร | ปุ่ม CTA | ผลิตภัณฑ์

 

เริ่มอย่างไรดี?

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

สแกนหน้าเว็บ 

รูปแบบ F (F Pattern)

>ใช้กับหน้าเว็บที่มีตัวหนังสือเยอะ

>การอ่านเริ่มจากซ้านไปขวา

>วางโลโก้ของคุณไว้ที่มุมซ้าย

รูปแบบZ

>โครงร่างของเว็บนั้นจะไล่ตามเหมือนตัวอักษร Z

>ศูนย์กลางของหน้าเว็บควรจะเด่น

>ใช้ได้ดีกับหน้าเว็บที่มีปุ่ม CTA อันเดียว

รูปแบบซิกแซก

>ใส่เนื้อหาหลักไปบน 6 จุดหลักของความสนใจ

>ใช้ได้ดีสำหรับผู้เข้าชมที่อ่านแบบผ่านๆ

>เป็นการแบ่งครึ่งหน้าเว็บ การออกแบบ แบบแบ่งหน้า

แผนภาพกูเตนเบิร์ก

>หน้าเว็บจะแบ่งออกเป็น 4 ส่วน

>วางสิ่งที่น่าสนใจตรงมุมซ้ายบนและมุมขวาล่าง

>สายตาของผู้เข้าชมนั้นจะมีการมองแบบเฉลียง

ระวัง (LOOK OUT)

ศึกษากลุ่มเป้าหมายของคุณก่อนที่จะทำการเลือกรูปแบบ

การจัดวางกริด 

แบบต้นฉบับ

>เป็นกริดที่ง่ายซึ่งเป็นแบบคอลัมน์เดี่ยว

>เนื้อหาอยู่ตรงกลางของสี่เหลี่ยม

>มีขอบระหว่าง 2 ข้าง

คอลัมน์ (Column)

>สไตล์หนังสือพิมพ์: เนื้อหาอยู่ในคอลัมน์

>การจัดเรียงตัวหนังสือและภาพสามารถปรับเปลี่ยนได้

>มีการเว้นช่องเบรคในภาพรวมการออกแบบ

แบบแยกส่วน (Modular)

>มีการแยกส่วนโดยแถวและคอลัมน์

>สามารถใช้งานได้ดีกับเว็บไซต์ที่มีรูปภาพเยอะ

>โครงสร้างที่เหมือนบล็อคทำให้มีความเด่น

แบบลำดับชั้น (Hierarchical)

>ขนาดของแถวและคอลัมน์นั้นแตกต่างกัน

>การออกแบบนั้นจะแรมดอมด้วยสัดส่วนที่ไม่ซ้ำกัน

>เนื้อหาส่วนประกอบต่างๆจัดวางแบบไม่สมมาตร

ลองคิดดู (Think on it)

กริดแบบ responsive จะมีหน้าตาแบบไหน?

การเน้นสี 

จิตวิทยาสี (Color Psychology)

>รู้จักความหมายและอารมณ์ของสี

>สีพาสเทลไม่สามารถใช้งานได้กับ call-to-action

>ใช้ลักษณะของสีเพื่อเน้นเนื้อหา

พาเลทสี (Color Palette)

>ช่วยจัดโครงสร้างข้อมูลบนเว็บไซต์

>ให้ความต่อเนื่องตลอดหน้าเว็บเพจทุกๆหน้า

>แต่ละสีสามารถให้ความรู้ความเข้าใจ

เคล็ดลับสุดยอด (Super tip)

อย่าใช้สีมากกว่า 3 สีสำหรับการออกแบบ UI

สีที่ดีที่สุดสำหรับเว็บไซต์ 

ขาว (White)

>ให้ความสะอาดเรียบร้อยและภาพลักษณ์ที่ซื่อสัตย์

>นิยมใช้โดยนักออกแบบสไตล์มินิมอล

>พื้นที่สีขาวช่วยพักสายตาได้

ดำ (Black)

>ใช้สำหรับตัวหนังสือบนพื้นหลังที่สว่าง

>ให้ความคลาสสิคและความสวยงาม

>เน้นส่วนต่างๆของเว็บไซต์

แดง (Red)

>ใช้สำหรับลิ้งก์เว็บและ CTA

>เพิ่มพลังงานความแอคทีฟและแพสชั่น

>ใช้โทนและเชดสีสำหรับความหลากหลาย

ขออนุญาติ (Excuse me!)

การใช้สีนั้นแตกต่างกันตามธุรกิจและกลุ่มเป้าหมาย

น้ำเงิน (Blue)

>ใช้โดยทั่วไปสำหรับลิ้งก์

>ให้ความเป็นบริษัทหรือองค์กร

>สบายตาสำหรับผู้เข้าชม

ตัวหนังสือที่สำคัญ 

รูปแบบ (Type)

>มากสุด 2 รูปแบบอักษรและฟ้อนท์

>สามารถใช้เป็น serif, sans serif หรือ script ได้

>ฟ้อนท์นั้นให้อารมณ์ทำให้เกิดความรู้สึกต่างๆได้

นำหนัก (Weight)

>ตัวหนังสือมีความหนาหรือบางแค่ไหน

>แยกหัวข้อด้วยตัวหนา

>หลีกเลี่ยงการใช้ตัวบางกับข้อความที่เยอะ

ขนาด (Size)

> HTML tags (h1 ถึง h6) โครงสร้างตัวหนังสือ

> หัวข้อจะต้องใหญ่กว่าเนื้อความ

> วิธีพื้นฐานในการเพิ่มลำดับชั้นภาพ

ระดับ (Levels)

>หลัก: เนื้อหาที่ดึงผู้ชมไปสู่ดีไซน์ (header, รูปภาพและโฆษนา)

>รอง: เนื้อหาที่สามารถสแกนได้เพื่อช่วยให้ผู้อ่านอยู่ต่อ (subhead, คำพูด, การช่วยเหลือ)

>รองอันดับ 3 : ตัวหนังสือที่เล็กที่สุดบนหน้าเว็บเพจ (footer, ลิ้งก์, เนื้อความ)

คุณเพิ่มลำดับชั้นภาพในการออกแบบเว็บไซต์ของคุณอย่างไร 

Sources:http://newmedia.yedte.rdu.te.pdf/ismis_10/elseniz-kartipu.pdf

https://www.nngroup.com/articles/f-shaped-pattern-readung-web-content/

https://www.nirmal.com.au/web-design-principel-for-business/

https://www.designtoday.io/home/2017/2/23/6-principles-of-visual-hierarchy-for-designers

https://webdesign.tutsplus.com/articles/understanding-the-f-layout-in-web-design-webdesign-687

http://vanseodesign.com/web-design/3-design-layouts/

 

wilbert O.Gai;tz. The Essential Guide to User Interface Design: An Introduction to GUI Design Ina Saltz. Typography Essentials: 100 Design Principles for Working with TypeRob Carter, Philip B.Meggs, Ben Day,Typographic Design:Form and Communication

Hacks ลำดับชั้นภาพสำหรับการออกแบบเว็บไซต์ "สุดเจ๋ง"

เว็บสวยขึ้นตำแหน่งกูเกิ้ล​

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

ปรึกษาทีมงาน ฟรี​

กดส่งฟอร์มถึงทีมงาน​

Name/ชื่อ:​

This field is required.

Name/ชื่อ:​

This field is required.

Name/ชื่อ:​

This field is required.

Name/ชื่อ:​

This field is required.

ปรึกษาทีมงานฟรี

กดส่งฟอร์มถึงทีมงาน

ชื่อ - นามสกุล​

This field is required.

ขอบคุณค่ะ

แบบฟอร์มได้ส่งถึงทีมงาน GeniusGraphic เรียบร้อยแล้วค่ะ

 

 

เบอร์โทรศัพท์

This field is required.

อีเมล์ติดต่อกลับ

This field is required.

รายละเอียดธุรกิจของคุณ

This field is required.

@Geniusweb​

ปรึกษาทีมงานฟรี

รับทำเว็บไซต์ รับออกแบบเว็บไซต์ ออกแบบเว็บไซต์ รับจัดทำเว็บไซต์ รับทำเว็บ SEO

095 558 2632 ,​

เว็บสวยขึ้นตำแหน่งกูเกิ้ล

02 531 0682​

@geniusweb