Home » Design » Currently Reading:

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)

Search This Site:



rgb72 on Facebook

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

AdSense
– ระบบการโฆษณาบน Google
— WEB101 by rgb72

72's Friends

Useful Links

Related Articles:

ทำ Design demo ยังไงให้ผ่าน? กับ 4 ความรู้สึกที่ลูกค้าอยากมี เมื่อฟังเราเสนอ Design demo

March 1, 2015





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

งานออกแบบที่นักออกแบบสมควรจะทำ.. และลูกค้าสมควรจะได้รับ

October 16, 2014





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

5 คู่สี ที่ต้องระวังในการเลือกใช้ เพราะจะทำให้ลูกค้าเข้าใจงานของคุณผิด!

August 4, 2014





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

ฟอนต์ยอดฮิตในเยอรมัน “DIN 1451”

April 27, 2014





Font ตัวหนึ่งที่พบในงานออกแบบหลายชิ้นเมื่อหลายปีก่อน วันนี้เดินอยู่ในเยอรมันแล้วเจอแต่ font “DIN 1451” นี้ เต็มไปหมด จึงจำให้ต้องไปค้นหาดูว่า font นี้มีต้นกำเนิดมาได้อย่างไร แล้วก็ค้นพบว่า font นี้เป็น font ทางการของเยอรมันเลยหรือนี่!?

2014 เทรนด์ไหนจะอยู่ เทรนด์ไหนจะไป? พฤติกรรม user ที่มีผลต่อการออกแบบและการตลาดออนไลน์

January 8, 2014





ฟันธงไปเลยว่า เทรนด์ไหนจะมา เทรนด์ไหนจะร่วง โดยใช้พฤติกรรมผู้ใช้งานเป็นพื้นฐาน และพฤติกรรมที่ว่านี้จะมีผลต่อเทรนด์การออกแบบและการตลาดออนไลน์อย่างไรบ้าง