2010-2015 Website Graphics trends (เทรนด์เว็บไซต์)

วิวัฒนาการของเทรนด์การออกแบบเว็บไซต์ถูกปรับเปลี่ยนตามกาลเวลา หลายสิ่งหลายอย่างไม่ว่าจะเป็นองค์ประกอบ การแนบลิงค์ การใช้สี หรือแม้กระทั่งรูปแบบการวางตำแหน่งข้อความต่าง ๆ ก็เปลี่ยนไปเรื่อย ๆ ในบทความนี้เราจะพาทุกท่านไปชมหน้าตาเว็บไซต์ในช่วง 2010 ถึง 2015 ( 2010-2015 Website Graphics trends )กัน!

อ่านเทรนด์เว็บไซต์ในปีอื่น ๆ

• 1993 – 1999 Website Graphic Trends
• Website graphic trends 2000-2009

2010 Website Graphics

( Design for Digital and Delight )

การออกแบบในปี 2010 เป็นปีสำหรับยุคดิจิตอลและความโดดเด่น เพราะว่าเมื่อเริ่มต้นในปี 2010 โลกของเราเริ่มกลายเป็นดิจิทัลมากขึ้น และมีการเพิ่ม Web 2.0 CSS และ Html5 ทำให้หน้าตาของเว็บดูทันสมัยมากขึ้น นอกจากนี้ยังมีเทรนด์การออกแบบตามกระแสมินิมอล (เป็นเทรนด์การออกแบบในอันดับต้น ๆ ในปี 2021)

 ➤ กระแสมินิมอล เป็นการออกแบบที่มุ่งเน้นนำเสนอสิ่งที่เรียบง่าย สะอาดตา และมีรายละเอียดต่าง ๆ อ่านง่าย

ในปี 2021 เราจึงมักจะพบเห็นเว็บไซต์ที่เข้าไปแล้วจะเกิดการจดจำได้ทันที และการออกแบบที่ซับซ้อน ผู้ใช้สามารถบรรลุภารกิจของตัวเองได้เสร็จภายในเว็บนั้น ข้อสังเกตที่มักพบเห็น ✔ Large Typography(ใช้ตัวอักษรขนาดใหญ่บนหน้าโฮมเพจ) ✔ Minimalist Design (ดีไซน์แบบมินิมอล) ✔ Introduction Pages (แนะนำตัว) ✔ Single paged Layouts (โฮมเพจหน้าเดียว) ✔ Rounded Corners (มุมโค้ง)

✔ และตัวอย่างอื่น ๆ

………………………………………………………………….

2011 Website Graphics

(Responsive design, ribbons & diagonals)

การออกแบบในปี 2011 เป็นปีของการปรับเปลี่ยนหรือพูดได้ว่าเป็นช่วงปีที่บังคับให้นักออกแบบต้องคิดค้นรูปแบบเว็บใหม่ เนื่องจาก Adobe ได้เปิดตัว Creative Cloud ซึ่งเป็นตัวช่วยที่ดีสำหรับนักออกแบบ ข้อสังเกตที่มักพบเห็น ✔รูปทรงเรขาคณิต ✔ความเรียบง่าย ✔ Ribbons(ริบบิ้น) ✔Diagonals (เส้นทแยงมุม)

✔รูปทรงเรขาคณิต ✔ความเรียบง่าย ✔ Ribbons(ริบบิ้น)

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

✔Diagonals (เส้นทแยงมุม)

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

………………………………………………………………….

2012 Website Graphics

( Typography, simple shapes & Bauhaus )

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

✔การใช้แบบอักษรรูปแบบใหม่ ( Typography )

ตัวอักษรหลาย ๆ แบบ ถูกนำมาใส่ภายในเว็บไซต์ ทำให้มันดูสนใจและดึงดูดสายตาคน

มีทั้งการออกแบบตัวหนังสือบนพื้นผิวต่าง ๆ และการออกแบบในรูปทรงใหม่ ตัวเขียน หรือตัวอักษณผสมรูปภาพ

✔ Bauhaus

(การใช้รูปทรงเรขาคณิตทักซ้อนให้มีหลายมิติ และสีแดง สีเหลือง สีน้ำเงิน)

ความซับซ้อนของการจัดรูปทรงต่าง ๆ จะทำให้เว็บไซต์ดูมิติมากขึ้น แต่อาจสร้างความซับซนได้

………………………………………………………………….

2013 Website Graphics

( Flat design, infographics & white space )

การออกแบบในปี 2013 เป็นปีของการใช้ภาพกราฟิกแบบแบนมากขึ้น ด้วยยุคสมัยที่เริ่มเปลี่ยนโปรแกรมต่าง ๆ ต่างมีผลกับการออกแบบ และ Microsoft เปลี่ยนแนวทางและนำรูปแบบแบน ข้อสังเกตที่มักพบเห็น ✔ภาพ 2 มิติ ✔ อินโฟกราฟิก ✔ พื้นที่ว่าง

**Flat design คือ วิธีการออกแบบโดยเน้นความเรียบง่าย เน้นการใช้งาน ลดทอนกราฟิกที่ไม่จำเป็นลง ใช้งาน WHITE SPACE พื้นที่ว่าง

✔ภาพ 2 มิติ ✔ อินโฟกราฟิก ✔ พื้นที่ว่าง

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

………………………………………………………………….

2014 Website Graphics

( Low poly, neon colors & long shadow )

การออกแบบในปี 2014 เป็นปีที่ยังคงใช้ในธีมของปี 2013 คือเน้นความเรียบง่ายสามารถมองหาปุ่มได้ง่าย มีที่เพิ่มมาเพียงเล็กน้อยคือการปรับเปลี่ยนพื้นหลัง ข้อสังเกตที่มักพบเห็น ✔ การใช้ตัวอักษรแบบ sans serif รวมกับแบบอักษรที่เขียนด้วยลายมือ ✔ การใช้สีนีออน ✔ Retro (แรงบันดาลใจมาจากปกเพลงป็อปและแจ๊สในยุค 70) ✔ รูปทรงเรขาคณิตที่มีสีสัน (Low poly) ✔ การใส่เงาบนสิ่งของหรือตัวหนังสือแบบยาว

** Low poly หมายถึง ภาพโมเดล 3 มิติที่มีการใช้ลักษณะของรูปทรงเรขาคณิตมาประกอบ และเหมือนมีพื้นผิวที่มีเทคเจอร์

✔ การใช้ตัวอักษรแบบ sans serif รวมกับแบบอักษรที่เขียนด้วยลายมือ

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

✔ Retro (แรงบันดาลใจมาจากปกเพลงป็อปและแจ๊สในยุค 70) ✔ การใส่เงา

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

✔ รูปทรงเรขาคณิตที่มีสีสัน (Low poly)

อีก 1 สไตล์การออกแบบที่สามารถทำให้เว็บไซต์ดูสดใส และทันสมัยมากขึ้น อีกทั้งการใช้ Low poly มักมาคู่กับการใช้สีสันที่สดใส

………………………………………………………………….

2015 Website Graphics

( Hero images , Rich Animations )

การออกแบบในปี 2015 เป็นปีที่เป็นช่วงเวลาแห่งการเปลี่ยนแปลง เทรนด์ใหม่และการปฏิวัติเกิดขึ้นสู่การออกแบบสมัยใหม่ มีการใช้ภาพเคลื่อนไหว การเคลื่อนที่ได้ของรูป ความคมชัดของรูป ข้อสังเกตที่มักพบเห็น ✔Hero images (การใช้ภาพดึงดูดสายตา) ✔ Rich Animations (การใช้อนิเมชั่นมากขึ้น)

✔ Hero images (การใช้ภาพดึงดูดสายตา)

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

✔ Rich Animations (การใช้อนิเมชั่นมากขึ้น)

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

Loading animations

Slideshows

Motion animation

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

………………………………………………………………….

ช่วง 2010 ถึง 2015 ในระยะเวลา 5 ปีนี้มีการปรับเปลี่ยนและเว็บไซต์ไม่มากนัก ส่วนใหญ่หากดูภาพรวมจะเห็นได้ว่า ในแต่ละปีจะมีการเพิ่มขึ้นของแนวการออกแบบใหม่มาเรื่อย ๆ ซึ่งจะถูกปรับใช้ตามประเภทของเว็บไซต์นั้นเอง และเทรนด์การออกแบบก็จะถูกปรับเปลี่ยนตลอด และถูกปรับให้สามารถใช้งานง่าย เข้าใจง่าย และมีภาพลักษณ์ที่ตื่นตาตื่นใจอีกด้วย ☺