ทิศทางของ Trend WEB Design ในปี 2012 Part1/2

Home » Synerry » Trend & Technology

May 7th, 2012, 9:56 am

Trend WEB Design ในปี 2012

ทุกอย่างในโลกล้วนต้องมี เกิด แก่ เจ็บ ตาย ไม่เว้นแม้แต่เทคโนโลยีก็เหมือนกัน บทความก่อนๆ ผมได้แชร์เกี่ยวกับเรื่อง วิวัฒนาการของ WEB ที่เริ่มตั้งแต่เว็บยุคแรกๆ ที่เรียกกันว่า WEB 1.0 และไล่ยาวไปจน WEB 4.0 ใครสนใจก็ลองไปเปิดดูได้นะครับ แต่สำหรับในหัวข้อนี้ เราจะมาว่ากันเรื่องของ Trend WEB Design ในปี 2012 หรือนับจากนี้นี่แหละ ว่าแนวโน้มมันจะมีอะไรยังไงกันบ้าง ไหนผมก็ทำงานด้านนี้มานานแหละ ก็เลยจำเป็นจะต้องศึกษามันไว้หน่อย พอดูไปดูมาก็คิดว่าน่าจะนำมาแชร์ เพื่อแบ่งปันมุมมอง และความรู้ให้กับคนอื่นๆ บ้าง และถ้าใครมีความเห็นหรือ idea อะไรยังไง ก็แนะนำกันได้นะครับ ถือว่าเรียนรู้ แลกเปลี่ยนไปด้วยกัน อ่ะ...มาว่ากันเลยว่า Trend WEB Design ในปี 2012 ที่เกริ่นๆ มาน่ะเขามีอะไรยังไงกันบ้าง โดยผมได้แบ่งหัวข้อต่างๆ ไว้ตามด้านล่างนี้ และคงต้องขอแบ่งเป็นตอนๆ ด้วย เนื่องจากความยาวก็จะยาวพอสมควรทีเดียว

Single Page Design

Big Images & Photo Backgrounds

Impressive Typography

Focus on Simplicity

Infographics

jQuery / HTML5& CSS3Usage

Sketch / Hand-drawn Design

Think Magazine Design

Simple Color Schemes

Lose the Flash(Maybe)

Responsive WEB

Touchscreen-oriented website designs

Single Page Design

การ Design WEB Site ช่วงหลังๆ มักจะออกแบบให้ข้อมูลทุกอย่างอยู่ในหน้าจอเพียงหน้าจอเดียว (หมายถึงหน้าจอที่แสดงผลบนจอคอมพิวเตอร์หรืออุปกรณ์ต่างๆ ที่เราใช้ในการเชื่อมต่อนี่ละครับ โดยเฉพาะเดี๋ยวนี้จะมีพวก Tablet, Mobile Device ต่างๆ อีกเพียบ) เนื่องจากว่ามีผลการศึกษาและวิจัยของหลายๆ ที่ออกมาว่า "คนท่องเว็บส่วนใหญ่ไม่ค่อยชอบ scroll bar เวลาเข้ามาดูหรือท่องเว็บไซต์" เนื่องจากพฤติกรรมของคนที่ใช้งานเว็บไซต์นั้น ถ้าเปรียบเทียบกับทีวีแล้ว เบื่อง่าย และปรับเปลี่ยนได้ไวกว่าทีวี (ขนาดที่เขาว่ากันว่าทีวีก็ไวแล้วนะ เพราะ Remote อยู่กับมือ) อีกทั้งยังมีทางเลือกที่หลากหลายกว่าการชมทีวีมาก (ไหนจะมี เจ้าพ่อแห่งการค้นหาที่แม่นยำอย่างเฮีย Google แล้วยิ่งไปกันใหญ่ พอกดแล้วไม่ใช่อย่างที่คาดหวัง....คนใช้จะปิด ณ บัดนาวเลยทีเดียว)

ดังนั้นการออกแบบเว็บไซต์ในยุคใหม่ๆ นี้มักจึงมีการผสมผสานกับ script หรือโปรแกรมที่จะใช้ในการเขียนหรือออกแบบเว็บไซต์ ช่วยให้น่าใช้งาน และอยู่ในหน้าจอเดียว ด้วยการนำ script program จำพวกซ่อนเนื้อหาไว้ก่อน แล้วแสดงผลเมื่อกด หรือขยายเนื้อหาออกมาให้เห็น เมื่อ mouse over action มายังปุ่มที่วางไว้ ถือเป็นการแบ่งปันพื้นที่กันว่างั้นเหอะ ลองดูตัวอย่างการออกแบบเว็บนี้ที่ส่วนตัวผมชอบ เพราะว่ามันดูเรียบง่ายมากๆ ลองกดเมนูที่ 2 หรือ 3 ดู

http://eyestylesllc.com /?localScroll =#about

อย่างที่บอกไว้ ถ้าเราลองคลิ๊กเมนูต่างๆ ดูแล้วสังเกตการเปลี่ยน หรือการนำเสนอข้อมูลในส่วนอื่นๆ ที่เขาใช้ script ที่ทำ
ให้ผู้ใช้ไม่ต้องทำการ scroll bar หรือรู้สึกว่าเปิดไปหน้าอื่นๆ แถมเพิ่ม emotion เข้ามาให้ดูน่าสนใจได้อีกต่างหาก ลองดูตัวอย่างเว็บอื่นๆ กันดู

http://fly.twitter.com/

http://appgear.com/

Big Images & Photo Backgrounds

ข้อมูลที่อยู่บนโลกอินเตอร์เน็ตนั้นมีมากมายซะเหลือเกิน และพฤติกรรมของคนใช้งานอินเตอร์เน็ตก็ค่อยๆ ปรับเปลี่ยนกันไป"เดี๋ยวนี้คนชอบมองภาพ มากกว่าอ่านข้อความยาวๆ" ดังนั้นการออกแบบเว็บไซต์สมัยใหม่ จึงมักจะนำภาพมาเป็นองค์ประกอบในการออกแบบ และมีการเลือกภาพ หรือสื่อสารด้วยภาพ ให้คนที่เข้ามาชมเว็บไซต์นั้น เข้าใจ และเข้าถึง สิ่งที่เจ้าของเว็บไซต์ต้องการสื่อสาร ไม่ว่าจะเป็นงานบริการ หรือสินค้าต่างๆ รวมถึงการสื่อสารเรื่องของบุคลิกของแบรนด์ตัวเอง (Brand Personality) โดยตัวอย่างเว็บไซต์ใหญ่ๆ ก็มีอย่างเช่น www.bing.com

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

Impressive Typography

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

Focus on Simplicity

ง่ายๆ เข้าไว้ครับพี่น้อง "สมัยนี้พฤติกรรมคนเล่นเน็ต ไม่ชอบคิดอะไรมากมาย" ไม่เหมือนสัก 5-6 ปีก่อน เว็บไซต์ที่ออกแบบจะต้องวางแผน Creative กันแบบจัดหนัก จัดบางทีคนใช้ยัง งง เลยว่าเข้ามาแล้ว...ฉันต้องกดตรงไหน ยังไง เรียกว่าหากันวุ่นเลย เดี๋ยวนี้ ถ้าเราสังเกต Facebook, Google หรือเว็บใหญ่ๆ ดังๆ ที่คนเขาใช้กันเยอะๆ ส่วนใหญ่ เน้นใช้งานง่ายเข้าไว้ ถามเล่นๆ เลย...มีใครเล่น Facebook แล้วอ่านคู่มือหรือหาวิธีใช้ก่อนใช้จริงบ้าง ผมว่าน้อยนะ น้อยมาก ส่วนใหญ่เปิดมา….ลุยเลย ผมเคยได้ยินลูกค้าท่านหนึ่งพูดกับผม ชอบมากเลย....พี่เขาบอกว่า "นัท...ทำเว็บให้พี่ไม่ต้องคิดไรมาก เอาแบบที่คนโง่ๆ เข้ามาแล้วก็ใช้เว็บพี่เป็น...." รายได้เดือนละไม่ต่ำกว่า 2-3 ล้าน พี่แกสุดยอดมาก....อ่ะ โม้ไปไกล กลับมาลองดูตัวอย่างกันหน่อยโดนใจมาก เพราะอะไรรู้ไหมครับ เว็บของพี่เขาคนเข้าเดือนเป็นล้านๆ คน

Infographics

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

jQuery / HTML5& CSS3Usage

จากที่ flash กลายเป็นประเด็นหลายๆ ปัญหาในการนำมาใช้ทำ animation ผ่านเว็บ ไม่ว่าจะเป็นเรื่องการใช้ทรัพยากรที่มากมาย รวมถึงการไม่รองรับเรื่อง SEO (Search Engine Optimize) และมาตอกย้ำด้วย iPhone, iPad ไม่รองรับ Flash ทำให้ html5 และ css3 กลายเป็นประเด็นหรือเรื่องที่กำลังได้รับความสนใจ และนักพัฒนาต่างๆ ก็ต่างมุ่งมาทางนี้กัน รวมไปถึงเรื่องที่ html5, css3 นั้นมีคุณสมบัติที่โดดเด่นหลายประการรวมถึง Script พวก jQuery ที่นำมาใช้ในการทำพวก Animation ต่างๆ แทน Flash

HTML5 ดีอย่างไร? ดีกว่า Version เก่ายังไง

ฟีเจอร์ใหม่ ที่จะมาเป็นพื้นฐานของ HTML, CSS, DOM, and JavaScript

ลดความจำเป็นสำหรับปลั๊กอินภายนอก (เช่น Flash) ซึ่งสามารถทำภาพเคลื่อนไหวได้แบบ 3 มิติโดยไม่ต้อง
ใช้ Flash

มีการจัดการข้อผิดพลาดที่ดีขึ้น

สคริปต์ใหม่ ที่จะมาแทนที่สคริปต์เดิม (เขียนโค้ดสั้นลง)

HTML5 มีความเป็นอิสระสูง (คล้ายๆ XML )

พัฒนาขึ้นมาโดยพื้นฐานจากผู้ใช้เว็บ

ในแง่ของเราที่เป็น user หรือผู้ใช้งาน อาจจะยังไม่สามารถแยกออกให้ชัดเจนได้ว่า เว็บที่เราดูนั้น พัฒนาด้วย html5 หรือไม่อย่างไร อย่างที่เกริ่นไว้ว่า html5 โดยหลักแล้วจะเน้นไปในเรื่องของการพัฒนา หรือภาษาที่ใช้ในการเขียนเว็บ ลองดูตัวอย่างเว็บที่เขาพัฒนาด้วย html5 จากตัวอย่างนี้ก็ได้ครับ สำหรับผม...มันแทบมองไม่ออกเลย เว้นจะเปิด code ดู

หรือถ้าใครอยากจะดูตัวอย่าง html5 แบบเป็นรูปแบบเลย ลองมาดูที่นี่ได้ครับ มีหลายตัวอย่างให้ดู

ข้อมูลเปรียบเทียบ วิวัฒนาการของ CSS

CSS : Cascading Style Sheets เป็นภาษาสำหรับการกำหนดการแสดงผลหน้าตา ทำให้เราแยกส่วนโค้ดเพื่อแสดงข้อมูล (เช่น HTML) ออกจากส่วนกำหนดการแสดงผล (ก็คือ CSS) ไม่มาปนกันยุ่ง ทำให้โค้ดมีความชัดเจนมากขึ้น

CSS level 1 ที่ประกาศออกมาตั้งแต่ ธันวาคม 2539 นั้นรองรับดังนี้ Font property เช่น ประเภทของ font ตัวเอียง สีของ ตัวหนังสือ, สีพื้น,และส่วนอื่นๆ การแสดงผลของส่วนต่างๆ เช่นพวกช่องว่างของ ข้อความ, ตัวหนังสือ, บรรทัด การจัดเรียงของย่อหน้า เช่น ชิดซ้าย หรือขวาของ รูปภาพ, ตาราง, และส่วนอื่นๆ การเว้นระยะ, เส้นขอบ, เว้นย่อหน้า, และการจัดตำแหน่งของ element ปัจจุบัน W3C ไม่มีการปรับปรุงมาตรฐานใดๆ ของ CSS1 อีกแล้ว

CSS level 2 ประกาศใช้เมื่อ 2541 โดยมีการรวมเข้ามาจาก CSS1 และเพิ่มใหม่อีกหลายอย่าง เช่น absolute, relative และ fixed ตำแหน่งของ element รวมไปถึง z-index การรองรับ bidirectional text รวมทั้งค่า property ใหม่ของตัวหนังสือเช่น shadows CSS level 2 revision 1หรือ CSS 2.1 ได้แก้ error ต่างๆ ใน CSS2 โดยลบลูกเล่นต่างๆ ที่ไม่จำเป็น รวมทั้งปรับข้อกำหนดของมาตรฐาน web browser ใหม่ โดยประกาศใช้จริงอย่างเป็นทางการเมื่อ กรกฎาคม 2550

CSS Level 3 ตอนนี้ยังอยู่ในช่วงของการเริ่มเอามาใช้งานกัน แต่มักจะเจอปัญหากับพวก Browser ที่มีความหลากหลายอย่างมากในปัจจุบัน โดยเฉพาะบางหน่วยงานหรือบางองค์กรที่ยังจำเป็นต้องใช้ IE 6 กันอยู่ ซึ่งเท่าที่ได้ลองมาคิดดูขนาด IE 8 บางครั้งหลายๆ คำสั่งยังทำงานได้ไม่ดีเลย ก็คงต้องอีกสักพักแหละผมว่า ถ้าอยากเห็นภาพในแง่ของผู้ใช้งานมากขึ้น เดี๋ยวลองดูตัวอย่างพวกนี้ดูนะครับ

Sketch / Hand-drawn Design

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

ในส่วนของ Path 1 ขอจบไว้เท่านี้ก่อน แล้วเดี๋ยวยังไงไปต่อ Path 2 กันตามลิงค์ด้านล่างนี้เลยครับ

ข้อมูลอ้างอิง

http://webdesignledger.com/tips/web-design-trends-in-2012

http://www.hongkiat.com/blog/web-design-trend-2012/

http://www.netmagazine.com/features/15-top-web-design-and-development-trends-2012

http://www.webgranth.com/current-web-design-trends-2011-2012

http://webdesignledger.com/tips/web-design-trends-in-2012

http://www.hongkiat.com/blog/web-design-trend-2012/

ทิศทางของ Trend WEB Design ในปี 2012 Part2/2

May 7th, 2012, 4:00 pm

ต่อเนื่องมาจากเรื่อง ทิศทางของ Trend WEB Design ในปี 2012 Part1 นี้เป็นหัวข้อส่วนสุดท้ายที่จะนำเสนอ และข้อสรุปต่างๆ ในตอนท้ายไว้นะครับ จะมีหัวข้อ Think Magazine Design, Simple Color Schemes,Lose the Flash (Maybe), Responsive และปิดท้ายตอนนี้ด้วยเรื่อง WEB Mobile Design & Touchscreen-oriented website designs

Read full entry0 Discusses3303 View