MakeWebEasy News, เทคนิคแต่งเว็บไซต์
MakeWebEasy News, เทคนิคแต่งเว็บไซต์

50 ไอเดีย ออกแบบ Footer สำหรับ บล็อก , เว็บไซต์ (ตอนที่ 1)

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

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

.
01_TennentBrown-662x344
1. ใช้วิธีที่เรียบง่าย

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

.
02_Frankbody-662x247
2. สร้างรูปแบบของตัวเอง

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

.

03_NatLGBTMuseum-662x377

3. ใช้พื้นที่เต็มหน้าจอ

.

ลองทำฟุตเตอร์ให้มีขนาดเต็มหน้าจอดูแทนที่จะจำกัดมันเป็นเพียงพื้นที่สี่เหลี่ยมผืนผ้าเล็กๆ ด้านล่างเท่านั้น อย่างเช่นเว็บไซต์ National LGBT Museum ได้แปลงโฉมเซ็กชั่นทั้งหมดให้เป็นฟอร์มติดต่อขนาดใหญ่เต็มหน้าจอและยังคงสงวนองค์ประกอบของสำคัญของฟุตเตอร์แบบเดิมย่อส่วนไว้ที่เซ็กชันเล็กๆ ด้านล่าง

.
4. ให้ข้อมูลเพิ่มเติม

.
04_MinistryofType-662x155
ฟุตเตอร์ของคุณไม่ได้จำกัดจำนวนลิงค์ เว็บไซต์ The Ministry of Type จึงได้เพิ่มเติมข้อมูลเกี่ยวกับเว็บไซต์และผู้จัดทำเว็บไซต์เอาไว้

.
5. ใส่ลิ้งค์เนวิเกชั่น

.
05_NounProject-662x191
เว็บไซต์ Noun Project ทำลิงค์เนวิเกชันไว้ที่ฟุตเตอร์ เพื่อเป็นทางเลือกให้ผู้เยี่ยมชมย้อนกลับขึ้นด้านบนของเว็บไซต์ได้โดยง่าย

6. ใช้รูปแบบของฟุตเตอร์ที่แหกกฎเกณฑ์

.
06_PortlandWeird-662x206
ใครบอกกันหละว่าฟุตเตอร์นั้นจำเป็นต้องเป็นรูปสี่เหลี่ยมผืนผ้า ดูตัวอย่างเว็บไซต์ Keep Portland Weird ที่ออกแบบฟุตเตอร์ให้เป็นรูปสี่เหลี่ยมจัตุรัส ซึ่งเหมาะกับเลย์เอาท์และเป็นตัวอย่างที่ดีเยี่ยมในการทำฟุตเตอร์ให้มีรูปแบบที่แตกต่าง

.
7. จัดหมวดของข้อมูล

.
07_Brugge-662x233
Visit Bruges
เว็บไซต์ Visit Bruges ได้จัดหมวดหมู่ของข้อมูลเอาไว้ด้วยเส้นขั้นดูเรียบง่าย เหมาะมากถ้าคุณมีข้อมูลเพียงเล็กน้อย มันทำให้ง่ายในการเข้าถึง

.
8. เสนอโปรโมชันพิเศษ

.
08_Cinquante-662x252
ช่วยย้ำเตือนลูกค้าถึงโปรโมชันข้อเสนอพิเศษที่ยังใช้ได้อยู่ตอนนี้ที่ส่วนฟุตเตอร์เหมือนกับเว็บไซต์ Cinquante ที่เสนอการจัดส่งฟรี ซึ่งมันจะช่วยทำให้ลูกค้ากลับมาที่เว็บไซต์อีกครั้งเพื่อซื้อของ

.
9. ใช้การตกแต่งที่ดูสนุกสนาน

.
09_Hive-662x376Hive.io
เว็บไซต์ Hive.io ใช้ส่วนประกอบในส่วนฟุตเตอร์คล้ายกับ confetti ซึ่งดูสดใสเรียบง่ายและดูมีบรรยากาศสนุกสนานร่าเริง โดยพื้นที่ทั้งหมดของฟุตเตอร์จะถูกอุทิศให้กับฟอร์มการลงทะเบียนรับอีเมล์ข้อมูลข่าวสารของเว็บไซต์ แทนที่จะใส่ลิ้งค์จำนวนมาก

.
10. ใช้การแรเงา

.
10_Wake-662x249
Wake.io
บางครั้งดีไซน์ที่เรียบง่ายอย่างใช้การแรเงาไล่ระดับสีก็เป็นวิธีที่ดีที่สุด อย่างการแรเงาบนเว็บไซต์ Wake.io ที่ทำให้ฟุตเตอร์นั้นมีดีไซน์หรูหราและสัมผัสที่ง่ายดาย

.

11. ย่อส่วนฟุตเตอร์

.
11_BuildWChrome-662x376
เว็บไซต์ Build With Chrome ได้ย่อส่วนฟุตเตอร์ และใส่ข้อมูลเล็กน้อยไว้ในบรรทัดเดียว ทำให้มีพื้นที่ว่างในส่วนของบอดี้เว็บไซต์ในการใช้งานแอพพลิเคชัน

.
12. ใช้สีเดียว

.
12_NinjasforHire-662x376
ใช้พื้นหลังสีเดียวและวางข้อมูลลงไปบนบล็อก เหมือนกับเว็บไซต์ Ninjas For Hire ที่ใช้พื้นที่ฟุตเตอร์แบบเต็มหน้าจอ สร้างฟอร์มลงทะเบียนที่เรียบง่ายบนฟุตเตอร์สีส้มสดใส

.
13. ใช้ตัวอักษรภาพ

.
13_VintageHope-662x296
Vintage Hope
Vintage Hope จัดหมวดหมู่ข้อมูลจำนวนมากไว้ที่ให้ง่ายในการเข้าถึงหน้าต่างๆ ของเว็บไซต์ ด้วยกับฟ้อนต์ตัวอักษรภาพที่มีสไตล์สวยงาม

.
14. เพิ่มแผนที่ตั้งบริษัท

.
14_Parliamentcoworking-662x332
Parliament CoWorking
แทนที่จะให้ที่อยู่บริษัท เว็บไซต์ Parliament CoWorking ได้แสดงแผนที่ตั้งอินเตอร์แอคทีพให้ผู้เยี่ยมชมเว็บไซต์เห็นว่าบริษัทตั้งอยู่ตรงไหนและอะไรอยู่ในบริเวณนั้นบ้าง โดยแสดงแผนที่ในส่วนของฟุตเตอร์เต็มจอภาพ แล้ววางหมุดลงไปด้วยกับโลโก้ชื่อย่อ P ตรงที่ตั้ง

.
15. ใช้สไตล์ย้อนยุค

.
15_Dollardreadful-662x157
Dollar Dreadful
ถ้าเว็บไซต์ของคุณเป็นใจ ลองใช้ดีไซน์เรโทรย้อนยุคเหมือนกับ Dollar Dreadful และปรับแต่งโลโก้บริษัทที่เป็นพันธมิตรให้เป็นสไตล์วินเทจติดที่ฟุตเตอร์ก็สวยงามมีเอกลักษณ์

ยังไม่จบนะคะ อาทิตย์หน้า พบกันใหม่กับ 50 ไอเดีย ออกแบบ Footer สำหรับ บล็อก , เว็บไซต์ (ตอนที่ 2) ค่ะ
.

หากมีข้อสงสัยหรือแนะนำสามารถส่งมาได้ตามช่องทางเหล่านี้

   

banner-mweonblog03