เทรนด์การออกแบบเว็บปี 2021

เผยแพร่แล้ว: 2021-02-17

พ.ศ. 2564 (ใส่ “1 ดีไหม!”)

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

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

แม้ว่านี่จะไม่ได้ครอบคลุมถึงรายละเอียดทั้งหมด แต่นี่คือ 11 เทรนด์การออกแบบเว็บอันดับต้นๆ ที่เราเห็นในปี 2021:

  1. เค้าโครงหน้าด้วยการเลื่อนแนวนอน
  2. เคอร์เซอร์แบบกำหนดเอง
  3. วัตถุ 3 มิติ
  4. ประสบการณ์อีคอมเมิร์ซที่ยอดเยี่ยม
  5. เส้นกริดที่มองเห็นได้พร้อมน้ำหนักเส้นหนา
  6. ตัวเลือกการตั้งค่าผู้ใช้บนเว็บไซต์ (ไม่ใช่แค่แอพ)
  7. การเปลี่ยนจากการสร้างเว็บไซต์เป็นโซลูชันการสร้าง
  8. ภาพประกอบขี้เล่น
  9. การออกแบบตัวอักษรไม่ใช่แค่คำพูด
  10. รูปทรงเรขาคณิตเป็นองค์ประกอบพื้นหลัง
  11. WordPress เป็น CMS

1. เค้าโครงหน้าด้วยการเลื่อนแนวนอน

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

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

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

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

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


2. เคอร์เซอร์แบบกำหนดเอง

ฉันชอบเทรนด์นี้เป็นพิเศษเพราะให้ความรู้สึกทั้งคุ้นเคยและแปลกใหม่ พยักหน้ารับเคอร์เซอร์แบบกำหนดเองของช่วงกลางปี ​​2000 (ยอมรับว่า คุณใช้เคอร์เซอร์หนึ่งในโปรไฟล์ Myspace ของคุณ!) เคอร์เซอร์แบบกำหนดเองกำลังกลับมาอย่างสง่างาม

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

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

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

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

เห็นวงกลมสีขาวเล็กๆนั่นไหม? นั่นคือเมาส์ของคุณบนเว็บไซต์ของ Etienne Pharabot ซึ่งเป็นผู้พัฒนาส่วนหน้าในฝรั่งเศส มีอะไรมากกว่าที่เห็น ฉันขอแนะนำให้เลื่อนดูประโยคต่างๆ ทั่วทั้งไซต์ (มีอีโมจิที่น่าประหลาดใจรออยู่!)

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


3. วัตถุ 3 มิติ

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

ตัวอย่างที่มีสีสันจาก Chip&Byte เอเจนซี่ในอิตาลี ได้เพิ่มองค์ประกอบที่สนุกสนานให้กับเว็บไซต์ของตน เมื่อคุณเลื่อนเคอร์เซอร์ไปรอบๆ (วงกลมสีเทาเล็กๆ!) รูปร่างก็จะเคลื่อนที่ไปด้วย ช่วยเพิ่มความรู้สึกของมิติ

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

Beans Agency ใช้เทรนด์ 3 มิติเพื่อทำให้เมล็ดกาแฟของพวกเขามีชีวิต โดยแสดงในหลายๆ ฉากทั่วทั้งไซต์ เทรนด์นี้เป็นวิธีที่ยอดเยี่ยมในการนำการเคลื่อนไหวมาสู่ตัวละคร หรือให้ความรู้สึก "เหมือนจริง" มากกว่าแค่ภาพประกอบนามธรรมที่แบนราบ

ไม่ขายทั้งหมดบนเทรนด์ 3 มิติ? คุณสามารถใช้แนวทางที่ละเอียดอ่อนได้เสมอ เช่น C-HM Conseil มุมเอียงและเรืองแสงอันหรูหราบนพื้นหลังแบบเอกรงค์โน้มตัวเข้าไปในรูปลักษณ์ของวัสดุโดยที่ไม่โอ้อวด


4. ประสบการณ์อีคอมเมิร์ซที่ยอดเยี่ยม

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

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

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

Zoya's Pantry ร้านขายอาหารออร์แกนิกเพื่อสุขภาพ ปรับปรุงประสบการณ์การช็อปปิ้งเพื่อเพิ่มสินค้าหลายรายการในรถเข็นของคุณ เมื่อคุณคลิก "เพิ่มลงในกระเป๋า" หน้าต่างของคุณจะไม่เปลี่ยนแปลง ดังนั้นคุณจึงสามารถเรียกดูต่อได้โดยไม่สูญเสียตำแหน่งของคุณบนเพจ จากนั้นเพื่อดูรถเข็นของคุณ สิ่งที่คุณต้องทำคือวางเมาส์เหนือไอคอนในการนำทางด้านบน (แทนที่จะคลิกไปยังหน้าอื่น)

คุณจะสังเกตเห็นแนวโน้มการออกแบบบางส่วนในปี 2021 ในเว็บไซต์ The Cool Club จากประสบการณ์อีคอมเมิร์ซที่ง่ายดายไปจนถึงการแสดงผล 3 มิติของผลิตภัณฑ์ (เกมไพ่!) เป็นเรื่องง่ายที่จะเห็นสิ่งที่คุณกำลังซื้อแล้วใส่ลงในรถเข็นของคุณ (ถึงครึ่งหน้าบนของหน้าแรกเลยด้วยซ้ำ!)


5. เส้นกริดที่มองเห็นได้พร้อมน้ำหนักเส้นหนา

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

Eat Sleep Work ใช้ลายเส้นที่มีสีสันเพื่อช่วยทำให้เดสก์ท็อปที่เหมือน Windows มีชีวิตชีวา แม้ว่าจะไม่หนาเกินไป แต่สีน้ำเงินเข้มจะทำให้ตารางโดดเด่นและสร้างโครงสร้างโดยเจตนาทั่วทั้งไซต์

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

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


6. ตัวเลือกการตั้งค่าผู้ใช้บนเว็บไซต์ (ไม่ใช่แค่แอพ)

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

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

ไซต์ของ Sofia Papadopoulou มีความคล้ายคลึงกันโดยมีการตั้งค่าสำหรับเสียง แต่ติดอยู่ที่มุมล่างขวา (ซึ่งปกติแล้วคุณอาจพบปุ่มกลับไปด้านบนที่ติดหนึบ) ค่าเริ่มต้นจะถูกตั้งค่าเป็น "ปิด" อีกครั้ง เสียงที่มีเพียงเครื่องมือที่สงบเงียบ (ไม่มีอะไรบ้า)

ตัวอย่างนี้จาก Studio OUAM ซึ่งเป็นเอเจนซี่โฆษณาในฝรั่งเศส ทำให้ง่ายต่อการเลือกภาษาที่คุณต้องการใช้ขณะเรียกดูไซต์ของพวกเขา อยู่ที่ด้านบนสุดของเมนู โดยมีตัวเลือกสำหรับภาษาฝรั่งเศสหรืออังกฤษ โดยปรับแต่งเว็บไซต์ให้เหมาะกับกลุ่มเป้าหมายหลักสองคน


7. การเปลี่ยนจากการสร้างเว็บไซต์เป็นโซลูชันการสร้าง

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

นี่คือ Soda Studios ซึ่งเป็น “พันธมิตรด้านนวัตกรรม สตูดิโอออกแบบ และห้องปฏิบัติการ” พวกเขาไม่ได้กังวลมากนักกับการแสดงรายการบริการแต่ละรายการที่พวกเขาให้ แต่เน้นที่โซลูชันแบบองค์รวมสำหรับลูกค้าของตน

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

Kappow เป็นหน่วยงานดิจิทัลที่เน้นการออกแบบเว็บไซต์ แต่คุณไม่จำเป็นต้องรู้จากหน้าแรกของพวกเขา แต่พวกเขาแบ่งปันคุณค่าของสิ่งที่งานของพวกเขามอบให้กับลูกค้า: การเติบโตของธุรกิจ การเปิดตัวผลิตภัณฑ์ที่ประสบความสำเร็จ และความได้เปรียบเหนือคู่แข่ง (ใครไม่ต้องการสิ่งนั้น?!)


8. ภาพประกอบขี้เล่น

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

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

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

หากภาพประกอบทั้งหมดไม่เหมาะกับแบรนด์ของคุณ ก็มีตัวเลือกให้ใช้เป็นองค์ประกอบเน้นเสียงได้เสมอเหมือนที่ No Clima ทำ คุณจะพบ “doodle” ที่ด้านบนของภาพถ่ายทั่วทั้งไซต์ ซึ่งให้ความรู้สึกศิลปะที่ประดิษฐ์ขึ้นด้วยมือ นี่เป็นวิธีที่ยอดเยี่ยมในการรวมภาพประกอบและการถ่ายภาพ หากคุณสนใจที่จะใช้ทั้งสองอย่าง!


9. วิชาการพิมพ์คือการออกแบบ ไม่ใช่แค่คำพูด

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

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

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

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


10. รูปทรงเรขาคณิตเป็นองค์ประกอบพื้นหลัง

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

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

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

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

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


11. WordPress เป็น CMS

สุดท้าย แต่ไม่ท้ายสุดคือวิธีสร้างไซต์เหล่านี้ (ท้ายที่สุด ถ้าส่วนหลังไม่ตรงตามวัตถุประสงค์ที่คุณต้องการ ไม่สำคัญว่าส่วนหน้าจะดูดีแค่ไหน!)

ตอนนี้ WordPress มีอำนาจมากกว่า 40% ของอินเทอร์เน็ต นั่นคือเกือบครึ่งหนึ่งของเว็บไซต์ทั้งหมด (รวมถึงเว็บไซต์ที่ไม่ได้สร้างบน CMS) และอาจเนื่องมาจากความยืดหยุ่นของ CMS ในช่วงหลายปีที่ผ่านมา

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


คุณคิดอย่างไรกับแนวโน้มการออกแบบเว็บเหล่านี้ในปี 2564 คุณเห็นด้วยกับการเพิ่มขึ้นของเคอร์เซอร์แบบกำหนดเองหรือคิดว่าการออกแบบ 3 มิติเป็นเพียงแฟชั่น? แจ้งให้เราทราบในความคิดเห็นด้านล่างว่าคุณชอบเทรนด์ไหน หรือเทรนด์ไหนที่คุณคิดว่าหายไปจากรายการนี้!