9 เว็บไซต์พร้อมแอนิเมชั่นที่สร้างแรงบันดาลใจให้เราเป็นผู้สร้างเว็บ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

มาหยุดชื่นชมเทคนิคการออกแบบที่เกิดขึ้นบนหน้าแรกเพียงอย่างเดียวกันดีกว่า: พื้นหลังสไลด์โชว์ที่อยู่เบื้องหลังคอลเลกชันภาพเคลื่อนไหว เอฟเฟกต์ 3 มิติ คำที่หมุนได้…และทุกอย่างก็ดูสวยงาม

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

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

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

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

มันคือชุดสี การออกแบบ 3 มิติ การเคลื่อนไหวของภาพที่ไม่เหมาะสม หรือภาพประกอบบัตรเครดิตที่เคลื่อนลงมาในลักษณะกายกรรมเมื่อเราเลื่อนลงไปที่หน้าแรกหรือไม่

มันเป็นเรื่องเล็กน้อยของทุกอย่าง

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

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

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

คำว่ามินิมอลและล้ำสมัยคือทั้งหมดที่เรานึกออก หากภาพหนึ่งภาพแทนคำพูดได้นับพันคำ แสดงว่าภาพเคลื่อนไหวบอกได้ 5,000 คำหรืออาจมากกว่านั้นด้วยซ้ำ

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