9 Web Design Trend ปี 2013 โดย rgb72/design team ตอนที่ 2

March 12, 2013 Design Comments

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

ว่าแล้วเริ่มกันเลย

 

5. CSS

ยาวไกลมาถึง version 3 แล้วสำหรับ Cascading Style Sheet หรือที่เรารู้จักกันในนาม CSS (ขอละไม่พูดถึง CSS 4 นะครับ เนื่องจากยังเป็น draft อยู่)

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

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

และสำหรับเทรนด์ CSS ที่เราคิดว่าน่าจะเป็นกระแสในปีนี้คือ การทำ “แสงเงา” แบบ Deep box และการทำ “สีโปร่งแสง (transparancy)” ดังภาพ

URL: http://rareview.com/

 

URL: http://blog.squarespace.com/

 

6. Typography

การใช้ตัวอักษรใหญ่ๆ และการออกแบบตัวอักษร (Typography) น่าจะเป็นเทรนด์ที่น่าสนใจสำหรับการออกแบบในปีนี้

URL: http://jacksonvilleartwalk.com/

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

URL: http://www.whitepagehq.com/

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

 

7. The Unification of Desktop and Mobile into a Single Version

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

แยกเป็นสองเรื่อง เรื่องแรกคือ ดีไซน์และการออกแบบ

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

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

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

(ตัวอย่างที่เห็นได้ชัดในกรณีนี้คือ facebook.com)

เรื่องที่สองคือเรื่องของเนื้อหา Content

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

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

 

8. Vertical Navigation

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

การทำเมนูทางด้านซ้าย คือ User Interface ที่เหมาะสมกับการใช้งานบนจอมือถือ และ Tablet มากกว่าการทำเมนูด้านบน 

ผลงานออกแบบโดย Steffen Nørgaard Andersen (http://dribbble.com/shots/591601-Leftside)

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

 

9. App Style Interface

เมื่อเราใช้เวลาอยู่กับอะไรนานๆ เราก็มักจะถูกสิ่งเหล่านั้นหล่อหลอม กลืนกิน

App ก็เป็นหนึ่งในสิ่งนั้น

ผลงานออกแบบโดย Jason Wu (http://dribbble.com/shots/323757-Device-Dashboard-iPad-UI-UX-iOS)

ความเรียบง่ายของการออกแบบ App ตั้งแต่ ปุ่มที่มีความนูนน้อย แสงเงาบางๆ และไอคอนสีเดียวแบบ solid นั้น ทำให้การออกแบบในปีก่อนๆ ที่เป็นปุ่มหนา อ้วน Glossy เงามากๆ นั้นดูเชยไป

ผลงานออกแบบโดย Zane David (http://dribbble.com/shots/889785-Profile-Sreen)

นอกจากนี้ความเรียบง่ายที่กล่าวมา ยังทำให้ user รู้สึกว่า มันเบา และ เร็ว อีกด้วย

App Style Interface คืออีกหนึ่งเทรนด์ที่น่าจะมีผลต่อการออกแบบทั้งในแง่ความสวยงามและการใช้งานในปีนี้

ผลงานออกแบบโดย  Bill S Kenney (http://dribbble.com/shots/623608-Button-Style-Sheet)

9 Web Design Trend ปี 2013 โดย rgb72/design team ตอนที่ 1

March 4, 2013 Design Comments

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

เราได้สรุปเทรนด์การออกแบบเว็บไซต์มาได้ 9 ข้อ โดยมีพื้นฐานมาจากสองส่วนใหญ่ๆคือ

1. User behavior หรือพฤติกรรมใช้งานของ user ต่อเว็บไซต์ได้เปลี่ยนไป ซึ่งมีผลมาจากหลายส่วนเช่น ความคุ้นเคยกับการใช้ interface ของ app ในมือถือที่มีลักษณะที่แตกต่าง หรือ การใช้อุปกรณ์เคลื่อนที่ mobile device ซึ่งไม่ support วิธีการใช้งานในแบบเดิมๆ – ส่วนนี้มีผลต่อ User Interface (UI) และ User Experience (UX) ของการออกแบบเว็บไซต์

2. Reference จากเว็บไซต์ต่างประเทศ สไตล์ภาพ และแนวกราฟฟิคใหม่ๆ ที่พยายามหลีกหนีความจำเจน่าเบื่อของดีไซน์เดิมๆที่เราใช้มาในอดีต – ส่วนนี้มีผลต่อความสวยงาม

ดังนั้นเรามาดูกันว่า 9 เทรนด์ที่ว่านั้น มีอะไรบ้าง

1. Responsive Layout

ภาพ: Capture จากเว็บไซต์ www.ge.com

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

2. Retina Support

เทคโนโลยีหนึ่งที่ Apple นำออกมาใช้ในตลาดคือ จอภาพที่เรียกว่า Retina Display จอลักษณะนี้จะมีความละเอียดมาก ขนาดที่ตาเราไม่สามารถแยกแยะ ไม่สามารถมองเห็น จุด pixel ได้เลย ซึ่งจอลักษณะนี้มีใช้กับอุปกรณ์หลายตัว เช่น iPad, Macbook, iPhone และเชื่อว่าจะขยายออกไปใช้กับสินค้าอีกหลายตัวของ Apple

(ข้อมูลเพิ่มเติม: ความละเอียดของจอ Retina Display จะแตกต่างสำหรับอุปกรณ์ที่แตกต่างกัน เช่น ความละเอียดที่ 326ppi สำหรับ iPhone/ iPod, 264 ppi สำหรับ ipad, 220ppi สำหรับ Macbook Pro 15นิ้ว เป็นต้น)

ภาพ: http://madmacman.com/2012/06/27/macbook-pro-retina-display-settings-explained-with-support-apples-faq/

ในความเป็นจริงการออกแบบเว็บนั้น จอ Retina display ก็สามารถมองเห็นได้ดีอยู่แล้ว เพียงแต่ภาพ graphic หรือ ตัวอักษรที่เป็นรูปภาพอาจจะไม่ได้เห็นเป็นอักษรที่ เคลีย ชัดเจน แบบที่แยกด้วยตาไม่ออกได้ “ถ้าเราไม่ได้ทำไว้”

ดังนั้นการออกแบบ ภาพ หรือ ภาพตัวอักษร สำหรับจอ Retina Display แม้ว่าจะเป็นรายละเอียดที่ปลีกย่อย แต่ถือเป็นอีกหนึ่ง requirement ที่เราควรทำให้กับลูกค้าเพื่อรองรับเทคโนโลยีที่กำลังขยายตัว

3. Fixed Header Bars

การทำเมนู bar หรือ header ให้ติดอยู่ด้านบนตลอดเวลา โดยไม่โดนเลื่อนหายขึ้นไปด้านบนเมื่อ user ทำการ scroll เลื่อนขึ้น (หากนึกภาพไม่ออกให้คิดถึงเว็บ facebook.com)

จึงมีเหตุผลใหญ่ๆอยู่สองประการที่ควรทำ Fixed Header Bar คือ

1. ด้วยพฤติกรรมของ user ที่ต้องการความเร็วในการใช้งาน เมื่อ user อ่านข้อมูล และ scroll เลื่อนลงมาด้านล่าง การไม่ใช้ fixed header จะทำให้ menu bar ด้านบนหายไป และนั่นจะทำให้ user รู้สึกเสียเวลา ถ้าต้องเลื่อนกลับขึ้นมาด้านบนเมื่อต้องการเปลี่ยนหน้า

2. ปัจจุบันนี้ เมนู bar หรือ header ด้านบนไม่ได้ทำหน้าที่แค่เป็น เมนู หรือที่สำหรับใส่โลโก้อย่างเดียว แต่หากเป็นที่สำหรับสิ่งสำคัญหลายอย่างเช่น Notification แจ้งเตือน หรือแม้แต่ เบอร์โทรศัพท์ Call Center ที่เป็นประโยชน์มากสำหรับลูกค้า การทิ้งสิ่งเหล่านี้ไว้อยู่ตรงหน้า คือหน้าที่ที่สำคัญอย่างหนึ่งของการเป็น icon แจ้งเตือน หรือ เบอร์โทรศัพท์ฉุกเฉิน

4. Infinite Scrolling

คือการทำให้ user สามารถ scroll เลื่อนลง เพื่อดูเนื้อหาในหน้าหนึ่งได้อย่างไม่มีที่สิ้นสุด หากนึกภาพไม่ออกให้คิดถึง facebook.com หรือ Pinterest.com เมื่อเราอ่าน status ของเพื่อนจนถึงด้านล่างสุด ตัวเว็บจะทำการโหลดข้อมูลขึ้นมาให้อีกเรื่อยๆ ไม่มีที่สิ้นสุด ทั้งนี้เพื่อให้ user ไม่จำเป็นต้องกดปุ่ม “NEXT” เพื่อดูหน้าต่อไปให้เสียเวลา

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

** อย่างไรก็ตาม Infinite Scrolling ไม่เหมาะสำหรับการใช้กับเว็บไซต์ประเภท e-commerce สังเกตได้จากเว็บอย่าง amazon.com เหตุผลก็เนื่องจาก การสั่งให้ข้อมูลไหลเพิ่มเติมเข้ามาเรื่อยๆ จะทำให้ user ดูได้อย่างเพลิดเพลิน จนบางครั้ง หากเค้าต้องการย้อนกลับมาดูสินค้าบางตัวที่เคยผ่านตาไปแล้ว อาจจะกลับมาหาไม่พบ เนื่องจากเว็บไซต์ได้ทำการโหลดข้อมูลสินค้าขึ้นมาเป็นจำนวนมากเกินกว่าจะจำได้ว่าสินค้าที่เคยถูกใจนั้น อยู่ส่วนไหนของหน้า ดังนั้นการแบ่งออกเป็นหน้าหน้า อาจจะทำให้ user สามารถจดจำสินค้าได้ง่ายกว่า เช่น “สินค้าตัวที่ฉันชอบนี้อยู่ในหน้า 3” เป็นต้น

อีก 5 ข้อที่เหลือสำหรับ Web Design Trends มีอะไรบ้าง ขอเก็บไปต่อตอนที่ 2 นะครับ

Search This Site:



rgb72 on Facebook

คำศัพท์ Internet วันละคำ

ASP (คำที่เกี่ยวข้อง: asp, .net, php, SQL server, mySQL)
– Active Server Pages ภาษาในการเขียน program พัฒนาโดยบริษัท Microsoft ตัว program มีหน้าที่เชื่อมต่อระหว่างเว็บไซต์และระบบฐานข้อมูล โดย asp นั้นจะสามารถติดต่อได้กับฐานข้อมูลสองประเภทคือ Microsoft Access และ Microsoft SQL Server

72's Friends

Useful Links

rgb72


being72 คือหนังสือที่รวบรวมเรื่องราวความเป็น rgb72 บริษัทออกแบบเว็บไซต์ ตั้งแต่อดีตถึงปัจจุบัน โดยจัดทำเนื่องในโอกาสครบรอบ 10ปี

+ บทความจากผู้เขียน
+ ตอนที่1: Pre-rgb72 / ทำงานกับ Martha Stewart
+ ตอนที่2: Pre-rgb72 / Arcadian
+ ตอนที่3: Pre-rgb72 / ewit
+ ตอนที่4: เริ่มต้นอย่างเงียบๆ
+ ตอนที่5: Generation 1 (ยุคที่1:บุกเบิก) / เริ่มต้นที่ศูนย์
+ ตอนที่6: โทร โทร โทร...
+ ตอนที่7: นามบัตร
+ ตอนที่8: หนังสือพิมพ์และโทรทัศน์
+ ตอนที่9: MATCHING STUDIO
+ ตอนที่10: มีเงินที่ไหน ให้ไปที่นั่น
+ ตอนที่11: พนักงานคนแรก
+ ตอนที่12: ภาพแทรก ออฟฟิสที่สองของ rgb72
+ ตอนที่13: เพื่อนจาก ewit
+ ตอนที่14: GettyImages ฟ้องจริง ถึงจริง
+ ตอนที่15: เว็บไซต์ที่ทำแบบมากที่สุด
+ ตอนที่16: ความฝันที่ 1 พบชื่อลูกค้าทุกๆ ห้านาทีที่ขับรถ
+ ตอนที่17: สมุย.. สร้างเสร็จได้ในวันเดียว
+ ตอนที่18: ขึ้นศาล.. มันไม่สนุก
+ ตอนที่19: นักธุรกิจต่างชาติ
+ ตอนที่20: ความฝันที่ 2 เที่ยวต่างประเทศ
+ ตอนที่21: Super AE
+ ตอนที่22: สินบน
+ ตอนที่23: ผู้หญิงที่ผมไม่รับ
+ ตอนที่24: งานที่คุณไม่ได้ดู
+ ตอนที่25: นักออกแบบ
+ ตอนที่26: คู่แข่งที่รัก
+ ตอนที่27: เซียนหลังกระดานหุ้น ตอนที่ 1/2
+ ตอนที่27: เซียนหลังกระดานหุ้น ตอนที่ 2/2
+ ตอนแทรก: หาาา?... อะไรนะ!!??
+ ตอนที่28: ยิ่งให้... ยิ่งได้
+ ตอนที่ 29: Wall of Frames
+ ตอนที่ 30: ผี 72
+ ตอนที่ 31: เพื่อนจากตะวันออกกลาง
+ ตอนที่ 32: Photography
+ ตอนที่ 33: Too Far from the Dream





Recent Comments

Powered by Disqus