Ask Blognone

เรื่องธีมของ Blognone เป็นเรื่องที่พูดกันมานานมาก แต่มันไม่สำเร็จเสียที :D ตอนนี้โครงการเริ่มมีความคืบหน้า เลยมารายงานให้ทุกท่านได้ทราบครับ

อัพเดต เพิ่มแบบข่าวไม่ต้องมีรูป

ข้ามมาที่ผลงานเลย ตอนนี้เราได้ prototype ของธีมใหม่แล้ว ออกแบบโดยคุณ @iMenn แห่ง Tiger Idea ดีไซเนอร์เขียนโน้ตมาให้สั้นๆ ดังนี้

ลองดูไอเดียกันครับ

  1. พยายามใช้รูปให้น้อยที่สุด
    ที่เห็นน่าจะมีแค่รูปที่เป็น เมนู (อยากใช้ฟ้อนท์นี้ > และใช้ซ้ำตอนเป็น Side Header ต่างๆ), รูป Gradient BG ของ Header, โลโก้, ลูกศร, bullet นอกนั้นจะใช้ CSS3 ครับ ทั้ง text-shadow, border-radius, box-shadow ซึ่ง Browser ส่วนใหญ่รองรับหมดแล้ว และหากไม่รองรับ ก็ยังอ่านรู้เรื่อง แค่ไม่เนียนกิ๊ก

  2. หน้าแรกคือ "blog" (ไม่อยากใช้คำว่า News เพราะเว็บชื่อ blognone)
    จะเห็นว่าลอก Ars มาเรย :D เพราะเห็นด้วยกับ http://www.usably.net/?p=534

  3. ปรับโทนสีให้วัยรุ่นขึ้นอีกนิด

  4. เสนอ CI ใหม่ คือสีแบบนี้ กับฟ้อนท์ TitilliumMaps26L ซึ่งฟรีครับ

หน้าตาเป็นดังนี้ (คลิกเข้าไปดูภาพใหญ่กันเองนะครับ)

blognone-r3

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

อัพเดต

ในกรณีข่าวไม่มีรูปประกอบครับ

bn-web-r4

Hiring! บริษัทที่น่าสนใจ

CP AXTRA Public Company Limited - Lotus's company cover
CP AXTRA Public Company Limited - Lotus's
CP AXTRA Lotus's is revolutionizing the retail industry as a Retail Tech company.
Token X company cover
Token X
Blockchain, ICO, Tokenization, Digital Assets, and Financial Service
Carmen Software company cover
Carmen Software
Hotel Financial Solutions
Next Innovation (Thailand) Co., Ltd. company cover
Next Innovation (Thailand) Co., Ltd.
We are web design with consulting & engineering services driven the future stronger and flexibility.
United Information Highway Co., Ltd. company cover
United Information Highway Co., Ltd.
UIH is Thailand’s leading Digital Infrastructure and Solution Provider for Business
KKP Dime company cover
KKP Dime
KKP Dime บริษัทในเครือเกียรตินาคินภัทร
Kiatnakin Phatra Financial Group company cover
Kiatnakin Phatra Financial Group
Financial Service
Fastwork Technologies company cover
Fastwork Technologies
Fastwork.co เว็บไซต์ที่รวบรวม ฟรีแลนซ์ มืออาชีพจากหลากหลายสายงานไว้ในที่เดียวกัน
Thoughtworks Thailand company cover
Thoughtworks Thailand
Thoughtworks เป็นบริษัทที่ปรึกษาด้านเทคโนโยลีระดับโลกที่คว้า Great Place to Work 3 ปีซ้อน
Iron Software company cover
Iron Software
Iron Software is an American company providing a suite of .NET libraries by engineer for engineers.
CLEVERSE company cover
CLEVERSE
Cleverse is a Venture Builder. Our team builds several tech companies.
Nipa Cloud company cover
Nipa Cloud
#1 OpenStack cloud provider in Thailand with our own data center and software platform.
CDG GROUP company cover
CDG GROUP
Provider of IT solutions to public, state, and private sectors in Thailand for over 56 years
Bangmod Enterprise company cover
Bangmod Enterprise
The leader in Cloud Server and Hosting in Thailand.
CIMB THAI Bank company cover
CIMB THAI Bank
MOVING FORWARD WITH YOU - CIMB is the leading ASEAN Bank
Bangkok Bank company cover
Bangkok Bank
Bangkok Bank is one of Southeast Asia's largest regional banks, a market leader in business banking
Gofive company cover
Gofive
“We create world-class software experience”
KBTG - KASIKORN Business-Technology Group company cover
KBTG - KASIKORN Business-Technology Group
KBTG - "The Technology Company for Digital Business Innovation"
Siam Commercial Bank Public Company Limited company cover
Siam Commercial Bank Public Company Limited
"Let's start a brighter career future together"
Icon Framework co.,Ltd. company cover
Icon Framework co.,Ltd.
Global Standard Platform for Real Estate แพลตฟอร์มสำหรับธุรกิจอสังหาริมทรัพย์ครบวงจร มาตรฐานระดับโลก
REFINITIV company cover
REFINITIV
The Financial and Risk business of Thomson Reuters is now Refinitiv
H LAB company cover
H LAB
Re-engineering healthcare systems through intelligent platforms and system design.
LTMH TECH company cover
LTMH TECH
LTMH TECH มุ่งเน้นการพัฒนาผลิตภัณฑ์ที่สามารถช่วยพันธมิตรของเราให้บรรลุเป้าหมาย
Seven Peaks company cover
Seven Peaks
We Drive Digital Transformation
Wisesight (Thailand) Co., Ltd. company cover
Wisesight (Thailand) Co., Ltd.
The Best Choice For Handling Social Media · High Expertise in Social Data · Most Advanced and Secure
MOLOG Tech company cover
MOLOG Tech
We are Modern Logistic Platform, Specialize in WMS, OMS and TMS.
Data Wow Co.,Ltd company cover
Data Wow Co.,Ltd
We enable our clients to realize increased productivity by solving their most complex issues by Data
LINE Company Thailand company cover
LINE Company Thailand
LINE, the world's hottest mobile messaging platform, offers free text and voice messaging + Call
LINE MAN Wongnai company cover
LINE MAN Wongnai
Join our journey to becoming No.1 food platform in Thailand

mrmamon Thu, 03/25/2010 - 14:54

สวยดีครับ แล้วข่าวที่ไม่มีรูปก็ต้องไปหามาด้วยหรอครับ

ดีกว่าแบบเก่าแน่นอนครับ คุณเม่นออกแบบให้ทั้งที
แต่ผมเห็นว่าสเน่ห์อย่างนึงของ Blognone ที่ผมชอบ คือไม่มีรูปประกอบข่าวอยู่ในหน้าแรกน่ะครับ ส่วนตัวจึงอยากให้ธำรง (ธำรง!) แบบนั้นไว้อยู่

ส่วน Navigation บนสุด คิดว่าสามารถรวมกันได้มั้งครับ ตรงแถบสีเทา (main nav) กับแถบสีเขียว (blog nav) เพราะดูบางอันอาจจะไม่ค่อยมีคนใช้เท่าไหร่ เช่น Poll

คือจริงๆ แล้วผมไม่ทราบว่าคนอื่นใช้งาน Blognone ยังไง แต่ผมจะเป็นพวกที่อ่านหน้าแรก และกด page 1 2 3 ไล่อ่านไปจนหมดข่าวใหม่ๆ เลยอยากให้เน้น pagination อาจมีสองที่ บน ล่าง ไรแบบนี้ครับ

คู่สีผมว่าทึมไปนิดหน่อย (รสนิยมใครรสนิยมมันเนอะ) เพราะบวกกันแล้วมันจะได้สีเทาๆ ตันๆ แต่ว่าก็สวยดีครับ

ลองเสนอดูครับ : )

ขอชมก่อนเลยว่า สวยงามมากครับ ดู soft กว่า theme ปัจจุบันเยอะ ออกไปในแนว Apple style + Light + Gradient ตามเทรนนิยมในปัจจุบัน

1. เห็นด้วยเรื่องแถบครับ ผมว่าเป็นแถบเดียว แบบเดิมดีกว่าครับ อีกอย่าง ในหน้าอย่าง forum ถ้ามาทำแถบด้านล่าง(สีเขียว) มันจะกินพื้นที่มาก เนื่องจากมีหลายตัว และด้วยข้อจำกัดของความกว้างที่แค่ 2/3 ของหน้า page ผมว่ามันอาจจะไม่ flexible ในอนาคต

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

2. เห็นด้วยเรื่องที่คือรูปครับ การมีรูปทำให้เกิดการ distract จากหัวข้อข่าว และบางทีการเลือกรูปขึ้นมาประกอบข่าว ด้วยการ random ตาม tag นั้น อาจจะไม่สอดคล้องกับเนื้อข่าวเลยก็ได้

3. สีของ background ควรใช้สีขาวครับ ไม่ควรใช้เทา เพราะมันจะทึมๆ อย่างที่คุณ champ ว่า ถ้าใช้เทาควรใช้ในส่วนของ box ย่อยๆดีกว่า

4. font ของหัวข้อข่าว เล็กไปหน่อย เมื่อเทียบกับขนาดของเนื้อหาข่าว ผมคิดว่า น่าจะเพิ่มขึ้นไปหน่อยครับ

5. โดยส่วนตัว ผมไม่ชอบให้มี ads banner ข้าง logo ของ web ครัับ มันให้ความรู้สึกเหมือนสูญเสียความเป็นตัวตนของ web ครับ (แม้ว่า อาจจะสามารถได้ค่า ads เพิ่มมากขึน ก็ตาม

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

เป็นข้อเสนอแนะนะครับ โดยภาพรวมแล้วสวยงามและมืออาชีพมากครับ
ขอบคุณครับ :)

ด้านขวาของโลโก้มันเป็นแบนเนอร์กระมังครับ คงแล้วแต่แบนเนอร์ที่ลูกค้าออกแบบมาอีกที

yokey Thu, 03/25/2010 - 15:03

สวยดีครับ น่าจะดึงดูดใจกับผู้อ่านใหม่ๆ ได้มากขึ้น แม้ไม่ชอบแนว IT แต่เจอธีมดีๆ สวยๆ ก็ช่วยให้เกิดความชอบได้ครับ

ข่าวที่ไม่มีรูป คิดว่าอยากจะ Gen ตาม Tag น่ะครับ ถ้าไม่มี Tag ก็ Gen ตามประเภทข่าวอีกที เป็นรูป Default ไว้น่ะครับ อยากให้มีเพราะดูสวยอีกหน่อย

ผมเองไม่ค่อยได้เข้าเว็บ เพราะอ่านจาก Feed ตลอด เลยคิดเองว่า แฟนประจำที่ต้องการความ Slim น่าจะอ่านจาก Feed อยู่แล้ว ส่วนคนอ่านจากเว็บน่าจะรับรูปกับความอ้วนได้มากกว่า เลยดูอ้วนนิดๆ ครับ

ส่วนเรื่องความทึม ในตัวอย่างมีทั้ง Featured และ Advertorial ทำให้แสดงข่าวปกติที่พื้นหลังสีขาวสว่างๆ แค่ 1 ข่าว ซึ่งตอนออกแบบ พอข่าวปกติเยอะ มันไม่ค่อยทึมนะครับ ยังไงเดี๋ยวต้องลองดูของจริงกันอีกที :)

rulaz07 Thu, 03/25/2010 - 15:11

มาใช้ Wordpress กันเต๊อะ!
ตกใจนึกว่า blognone จะเปลี่ยนใจจาก drupal ซะแล้ว

รวมๆ สวยดีนะครับ ชอบช่อง sign in ^ ^

ผมว่าปรับ contrast เพิ่มอีกนิดนึงน่าจะดีครับ

ผมอ่าน blognone เหมือนคุณ champ เลยครับ คือกด page บ่อยสุดในบรรดาลิงก์ทั้งหมด

เนอะ รูที่เอาไว้ให้กรอก Sign in ถ้ามันสีอ่อนกว่านี้จะรู้ทันทีว่าเป็นช่อง form ครับ
แล้วคนที่ล็อกอินเข้ามาแล้วจะเห็นอะไรเอ่ย เป็นกล่อง Profile รึเปล่า

kurosame Thu, 03/25/2010 - 15:16

อยากให้มี list ทางขวามือที่เก็บลิสโพสที่เป็น featured ไว้หน่อย
เพราะเวลามันตกไปจากหน้าแรก มันมักจะตามตัวยาก

ปล โพลหน้าแรกไปไหนเนี่ย

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

เห็นด้วยครับ ลดขนาดภาพนิดนึงได้ไหมเอ่ย :)
(สารภาพว่าแวบแรกผมคิดว่าภาพประกอบเนี่ยเป็น Avatar ของผู้เขียนซะอีก)

เรื่องรูปประจำข่าวที่ออกแบบเท่านี้ เพราะชื่อ user ที่เป็น writer ที่ยาวที่สุดคือ bow_der_kleine ครับ ฮ่าฮ่า

(สังเกตว่าคุณโบว์จะใส่มือถือไม่ได้ด้วย ที่ไม่พอ :P)

แต่ประเด็นนี้น่าสนใจ เดี๋ยวทดไว้ก่อนครับ

เห็นด้วยครับ ลดขนาดภาพนิดนึงได้ไหมเอ่ย :)
(สารภาพว่าแวบแรกผมคิดว่าภาพประกอบเนี่ยเป็น Avatar ของผู้เขียนซะอีก)

zalapao Thu, 03/25/2010 - 15:24

สวยมากครับ แต่ผมดูธีมใหม่แล้วยังไม่สื่อว่าเป็นเว็บข่าวไอทีสักเท่าไหร่
(ประมาณถึงอ่านภาษาไทยไม่ออกก็รู้ว่าเป็นเว็บไอที)
และถ้ามีไอคอน twitter facebook rss ด้านบนก็ดูร่วมสมัยดีครับ ^^

xredzanakub Thu, 03/25/2010 - 15:30

Font กับ สี ของมัน...
ผมว่ามันดูอ่อนไป ผมลองดูดีๆ แล้วมันอ่านยากนะนี่
ปวดตายังไงๆไม่รู้สิ

nu18de29 Thu, 03/25/2010 - 15:30

สวยครับ เป็นการก้าวย่างที่ดีทีเดียว
แต่อยากให้รักษา แบบfont คำว่า Blognone ไว้แบบเดิม
จะดู Classicและมีภาพเก่าๆติดมาด้วยนิดนึง

สวยดีครับ มีรูปตามข่าวด้วย แล้วก็แบ่งหมวดหมู่ข่าวออกชัดเจนดีครับ

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

ครั้งแรก ๆ อาจจะโหลดช้าบ้าง แต่หลัง ๆ มีใน cache คงจะไม่ช้าเท่าไหร่ สำหรับผมแล้วผมชอบอ่านผ่านทางเว็บมากกว่า feed บริโภคความสวยงามเป็นหลัก :P

จำนวน คอมเม้นท์ น่าจะอยู่ตรงที่มานะ (เห็นรูปล่างมันย้ายไปอยู่ใต้ชื่อคนเขียน)

สีสันสวยและดูทันสมัยดี แต่คิดว่ารูป graphic มีมากและแน่นเกินไป ควรลดลง เพิ่มพื้นที่ว่าง และปรับให้รูป graphic โดดเด่น

"หากไม่รองรับ ก็ยังอ่านรู้เรื่อง แค่ไม่เนียน"

อยากเห็น version ไม่เนียนด้วยครับ

เพิ่มเติม อีกประการครับ

ผมว่า จำนวนข่าว 3 ข่าวต่อ 1 หน้า น้อยไปนิดหนึ่งครับ

ผมเป็นคนหนึ่งที่ชอบโหลด มาทีเดียวแล้ว scroll เอา ไม่ค่อยต้องชอบกด next หรือ page ต่อไปเรื่อยๆครับ โดยเฉพาะถ้าเข้า web จากในมือถือ

งามหรู! ชอบครับ

  • สี CI Blognoneนี่น้ำเงินเขียวรึเปล่าครับ (ผมว่าสีเขียวมันน้อยไปหน่อย) อาจจะลองรวมแถบเทาข้างบนให้เป็นแถบเขียวเดียวอย่างที่ท่านอื่นว่า ก็น่าจะดีครับ

  • ส่วนทางด้านขวามือออกจะสีเทาๆทึมๆไปหน่อย (แต่ถ้าเปลี่ยน BG เป็นสีขาวอาจจะดีขึ้น หรือ color coded หัวข้อต่างๆให้ดูชัดเจนขึ้น (แต่ผมไม่แน่ใจว่ามันจะดูหลากสีไปรึเปล่า)

tekkasit Thu, 03/25/2010 - 16:16

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

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

ชอบ!
ปรกติเป็นคนขี้บ่น (ก็รู้ๆ อยู่) แต่นี่ถูกใจมาก
อ่อ คุณเม่น -___-" เหอๆๆๆๆ
(ขอคารวะ สอนออกแบบตีมหน่อยดิครับ ฮ่าๆๆ)

บอกตรงๆ ไม่เคยใช้ navbar ด้านบนของ blognone เลย
แต่เที่ยวนี้มันดูเป็น bar ให้กดมากขึ้น คงจะได้ลองดูมั่งล่ะ

Ekae Thu, 03/25/2010 - 17:05

สวยมากครับ ชอบริบบิ้นที่บอกว่าข่าวเป็น advertorial หรือ featured มากทำให้ข่าวเด่นขึ้นเยอะ

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

แล้วในกรณีที่ข่าวไม่มีรูป ผมแนะนำให้ใช้ logo blognone แปะเลยคับ

naphob Thu, 03/25/2010 - 17:37

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

gotobanana Thu, 03/25/2010 - 18:08

ดีน่ะ แปลกดี
บอกไม่ถูกอ่ะ
แต่เปลี่ยนก็ต้องใช้อยู่แล้ว

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

ผมคิดว่า

  1. น่าจะมีคลังรูปพื้นฐาน (ตาม Tag มาตรฐาน ส่วนใหญ่ก็เป็นโลโก้)
  2. เรื่องย่อขยาย คนเขียนข่าวไม่ควรต้องทำครับ มีทางออกทั้งเขียน Script ย่ออัตโนมัติ หรือไม่ก็ย่อแค่ CSS (จะเห็นว่าในตัวอย่าง fix ความกว้างไว้ครับ สูงเท่าไหร่ก็ได้ แต่ถ้ามากเกินก็ overflow:hidden อยู่ดี
  3. เรื่องลิขสิทธิ์ผมไม่ค่อยมีความรู้ครับ แต่เท่าที่อ่านๆ มา Thumbnail น่าจะเป็น fair use นะครับ - เช่น ลิขสิทธิ์ ทางอินเทอร์เน็ต (13)

hisoft Thu, 03/25/2010 - 18:17

สวยครับ แต่ไม่อยากให้หน้าแรกมีภาพอ่ะครับ

ย้ายรูป น้องได๋ ขึ้นไปวางข้างๆ ชื่อบล็อกเลยครับ
(จะได้เห็นรูปทุกวันๆ เป็น mascot ประจำบล็อก)

chakrit Thu, 03/25/2010 - 20:08

อันแรก --

รูปอยู่ด้านซ้ายมันอยู่ใน path เวลากวาดสายตาอยู่แล้ว อ่าน Title เสร็จขึ้นบรรทัดใหม่ ก็เจอรูปก่อน เซ็ต context ของเนื้อหาไปในตัว แล้วข่าวก็อยู่ติดจากรูปเลย ย้ายตาไปอ่านต่อได้ทันที สบายๆ

แต่ถ้ารูปอยู่ทางขวา จะต้องกระโดดตาไปดูรูปทางขวาก่อน และถึงแม้ว่าจะไม่ได้ดูรูป เวลาอ่านข่าวแล้วอยากดู มันก็ไกลอ่ะครับ ถ้าไม่ดูรูปจริงๆ ก็ยังเหมือนกับมีอะไรมาดึงดูดความสนใจไปจาก Type ในข่าวน่ะครับ

เสนอว่า เอารูปอยู่ทางซ้ายมือน่ะดีแล้วครับ

อันที่สอง --

เพิ่ม Contrast ตรง Navigation สีเขียวหน่อยน่ะครับ ไม่ได้หมายถึง Contrast สีนะ อย่างอื่นก็ได้ เปลี่ยนสี ใส่กรอบ ฟอนต์ indent ออกมา หรือว่า ajax ฯลฯ

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

จริงๆ ตรงส่วนด้านบนก็เหมือนกัน แต่ว่าโฆษณาด้านข้าง + ด้านบน มันให้อารมณ์เทาๆ เหมือนกัน ก็พอถูไถ แต่ถ้าทำให้มันเด่นในลักษณะเดียวกัน จะมองง่ายว่าเป็น Navigation เหมือนกันนะครับ

สุดท้ายคือ ถ้ามีตัวบ่งบอกที่มากกว่า text ว่า เป็น subnav ของ blog อย่างเช่นลูกศร หรือว่าสามเหลี่ยมเล็กชี้เอาไว้หน่อย หรือใช้สีเดียวกัน เหมือนที่ comment ด้านบนบอก ก็น่าจะดีครับ

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

น่าจะทำให้ nav กับ subnav มัน connect กันหน่อย แล้วแตกต่างจากเนื้อข่าว หัวข้อข่าว มากกว่านี้น่ะครับ

เป็นความเห็นส่วนตัวน่ะครับหัด Design อยู่ ผิดถูกยังไงขออภัยด้วยครับ

oakyman Thu, 03/25/2010 - 22:05

พวก title/header เล่นสีน้ำเงิน-เขียว แค่นี้ไปเลยดีกว่าครับ background ของ header ที่เป็นสีเทาก็เปลี่ยนเป็นสีเขียวไปซะ :)
sign in อยู่บน nav bar ได้?

มีคนเรียกร้องไม่เอารูปเยอะ สงสัยจะต้องเตรียม Blognone lite !!?

โอ๊ะ ชอบครับ :)

ขอแถมนิดนึงนะครับ

  • ข้อความในย่อหน้าเดียวกันดูแน่นมากครับ, เพิ่ม line-height สักหน่อยน่าจะอ่านง่ายขึ้น
  • จากที่เห็นในประกาศ ไอคอนของคนเขียนข่าวอาจจะมากขึ้นเรื่อยๆ (ต่อไปอาจมีอย่างอื่นที่ไม่ใช่มือถือ) ถ้าในหน้าหลักแสดงไอคอนเฉพาะตำแหน่ง (Founder, Writer, Contributer) น่าจะจัดได้ลงตัวกว่าครับ

ninja741 Fri, 03/26/2010 - 01:03

layout สวยดี

แต่ทำไมสีมันขัดๆกันนะครับ

0xffeeddaa Fri, 03/26/2010 - 02:12

สวยครับ แจ่มเลย
แต่ขอธีมเดิมไว้ด้วยนะครับ ส่วนตัวคิดว่าธีมตอนนี้อ่านเนื้อหาง่ายดี

แต่ต้องขอลองธีมใหม่ก่อนครับ ไม่รู้ว่าจะอ่านง่ายขนาดไหน

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

+ดูทันสมัยดี
+โชว์รูปข่าวที่ต้องมีรูปได้ดี
-โลโก้ Blognone ขอแบบเดิมได้ไหม?
-เนื้อที่แสดงข่าวน้อยลง หมายถึงว่ามันแสดงจำนวนข่าวต่อหน้าได้น้อยลง?

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

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

เรื่องสไตล์นี่คงแล้วแต่คนชอบนะครับ ผมเฉยๆ เลยต้องจ้างดีไซเนอร์คิดให้ :P

แต่ค้านนิดนึงตรงที่ว่า แอปเปิลเคยทำ Serif นะครับ (ตัวอย่าง)

สวยดีครับ แต่เวลา login account แล้ว menu sign in หน้าตาจะเป็นยังไงเหรอครับ

แล้วก็เรื่อง logo ผมก็ชอบแบบเดิมเช่นกันครับ

อยากให้เป็น BG ขาว และมีการเว้น Spacing ของเนื้อหามากกว่านี้ครับ เสน่ห์ของ Blognone อยู่ที่ความสะอาดตาและ Minimalist อย่างถึงพริกถึงขิงครับ ...

ขอบคุณครับ สวัสดีครับ

Apple
public://topics-images/apple_webp.png
SCB10X
public://topics-images/347823389_774095087711602_515970870797767330_n_webp.png
Windows 11
public://topics-images/hero-bloom-logo.jpg
Huawei
public://topics-images/huawei_standard_logo.svg_.png
Google Keep
public://topics-images/google_keep_2020_logo.svg_.png
Instagram
public://topics-images/instagram_logo_2022.svg_.png
SCB
public://topics-images/9crhwyxv_400x400.jpg
Microsoft
public://topics-images/microsoft_logo.svg_.png
Basecamp
public://topics-images/bwpepdi0_400x400.jpg
FTC
public://topics-images/seal_of_the_united_states_federal_trade_commission.svg_.png
Pinterest
public://topics-images/pinterest.png
Palantir
public://topics-images/-nzsuc6w_400x400.png
AIS Business
public://topics-images/logo-business-2021-1.png
PostgreSQL
public://topics-images/images.png
JetBrains
public://topics-images/icx8y2ta_400x400.png
Krungthai
public://topics-images/aam1jxs6_400x400.jpg
Palworld
public://topics-images/mccyhcqf_400x400.jpg
Bill Gates
public://topics-images/bill_gates-september_2024.jpg
VMware
public://topics-images/1nj4i1gp_400x400.jpg
Take-Two Interactive
public://topics-images/0khle7nh_400x400.jpg
OpenAI
public://topics-images/ztsar0jw_400x400.jpg
Thailand
public://topics-images/flag_of_thailand.svg_.png
ServiceNow
public://topics-images/ytnrfphe_400x400.png
Klarna
public://topics-images/urcllpjp_400x400.png
Google Play
public://topics-images/play.png
Drupal
public://topics-images/drupal.png
Virtua Fighter
public://topics-images/virtua_figther_2024_logo.png
Paradox Interactive
public://topics-images/paradox_interactive_logo.svg_.png
Europa Universalis
public://topics-images/europa-icon.png
Nintendo Switch 2
public://topics-images/mainvisual.png
Cloudflare
public://topics-images/cloudflare_logo.svg_.png
Samsung
public://topics-images/samsung.png
Google
public://topics-images/google_2015_logo.svg_.png
Uber
public://topics-images/uber.png
Microsoft 365
public://topics-images/m365.png
USA
public://topics-images/flag_of_the_united_states.svg_.png
GM
public://topics-images/0pe0po-z_400x400.jpg
Perplexity
public://topics-images/perplex.jpg
Xperia
public://topics-images/xperia.png
iOS 18
public://topics-images/ios-18-num-96x96_2x.png
True
public://topics-images/true_logo.png
SoftBank
public://topics-images/softbank.jpg
Pac-Man
public://topics-images/pacman.png
Harry Potter
public://topics-images/harry.png
Marvel
public://topics-images/marvel.png
Skydance
public://topics-images/skydance.png
SEA
public://topics-images/sealogo.png
Find Hub
public://topics-images/find.png
Gemini
public://topics-images/google_gemini_logo.svg__1.png
Accessibility
public://topics-images/accessibility-128x128_2x.png
Material Design
public://topics-images/m3-favicon-apple-touch.png
Android 16
public://topics-images/android16.png
Android
public://topics-images/android_0.png
Firefox
public://topics-images/firefox_logo-2019.svg_.png
Google Messages
public://topics-images/messages.png
Notepad
public://topics-images/notepad.png
Singapore
public://topics-images/flag_of_singapore.svg_.png
Airbnb
public://topics-images/airbnb.png
PS5
public://topics-images/ps5.png
Krafton
public://topics-images/krafton.png
Doom
public://topics-images/doom-game-s_logo.svg_.png
AMD
public://topics-images/amd_logo.svg_.png
GTA
public://topics-images/gta_0.png
DoorDash
public://topics-images/doordash.png
YouTube
public://topics-images/yt.png
YouTube Music
public://topics-images/yt-music.png
Facebook
public://topics-images/fb.png
iQiyi
public://topics-images/iqiyi_0.png
Viu
public://topics-images/viu.png
Amazon Prime Video
public://topics-images/prime-vid.png
Spotify
public://topics-images/spotify.jpg
Apple TV
public://topics-images/apple-tv.png
HBO Max
public://topics-images/max.png
Threads
public://topics-images/threads.png
Alexa
public://topics-images/alexa.png
Kindle App
public://topics-images/kindle.png
Shopee
public://topics-images/shopee.png
Waze
public://topics-images/waze.png
Bilibili
public://topics-images/bili.png
Google Maps
public://topics-images/maps.png
Apple Music
public://topics-images/apple-music.png
Claude
public://topics-images/claude.png
TikTok
public://topics-images/tiktok.png
Xbox
public://topics-images/xbox.png
Tesla
public://topics-images/tesla.png
Chrome
public://topics-images/chrome.png
Google Calendar
public://topics-images/gcal.png
Google Home
public://topics-images/ghome.png
Google Meet
public://topics-images/meet.png
NotebookLM
public://topics-images/notebooklm.png
Reddit
public://topics-images/reddit.png
Assassin’s Creed
public://topics-images/ac.png
Mark Zuckerberg
public://topics-images/zuck.jpg
Meta
public://topics-images/meta.png
Meta AI
public://topics-images/meta-ai.png
Epic Games
public://topics-images/epic_games_logo.svg_.png
Unreal
public://topics-images/unreal_engine_logo-new_typeface-svg.png
Fortnite
public://topics-images/fortnite.png
DeepMind
public://topics-images/deepmind.png
Databricks
public://topics-images/databricks.png
Netflix
public://topics-images/netflix-logo.png
Microsoft Azure
public://topics-images/azure.png
Microsoft Copilot
public://topics-images/microsoft_copilot_icon.svg_.png
Bing
public://topics-images/bing.png
EA
public://topics-images/ea.png
Intel
public://topics-images/intel.png
Amazon
public://topics-images/amazon.png
AWS
public://topics-images/aws.png
Zoom
public://topics-images/zoom.png
Dropbox
public://topics-images/dropbox_0.png
Roblox
public://topics-images/roblox.png
Dell Technologies
public://topics-images/dell-tech.png
Nothing
public://topics-images/nothing.svg_.png
Microsoft Teams
public://topics-images/teams.png
Mojang
public://topics-images/mojang.png
Minecraft
public://topics-images/minecraft.png
Redis
public://topics-images/redis_logo.svg_.png
Ubisoft
public://topics-images/ubisoft_logo.svg_.png
Elden Ring
public://topics-images/elden.png
Brave
public://topics-images/brave.png
Opera
public://topics-images/opera.png
Vivaldi
public://topics-images/vivaldi.png
Microsoft Edge
public://topics-images/edge.png
Duolingo
public://topics-images/duolingo.png
LinkedIn
public://topics-images/linkedin.png
Canva
public://topics-images/canva.png
Realme
public://topics-images/realme.png
NASA
public://topics-images/nasa-logo.png
Booking.com
public://topics-images/booking.png
Agoda
public://topics-images/agoda.png
Bolt
public://topics-images/bolt.png
Grab
public://topics-images/grab.png
Temu
public://topics-images/temnu.png
LINE
public://topics-images/line.png
Facebook Messenger
public://topics-images/messenger.png
WhatsApp
public://topics-images/whatsapp.png
Telegram
public://topics-images/telegram.png
Signal
public://topics-images/signal.png
X.com
public://topics-images/x.png
Grok
public://topics-images/grok.png
xAI
public://topics-images/xai.png
CapCut
public://topics-images/capcut.png
Edits
public://topics-images/edit.png
Google One
public://topics-images/gone.png
Tinder
public://topics-images/tinger.png
Whoscall
public://topics-images/whoscall.png
OneDrive
public://topics-images/onedrive.png
Lightroom
public://topics-images/lr.png
Meitu
public://topics-images/meitu.png
Outlook
public://topics-images/outlook.png
Excel
public://topics-images/excel.png
PowerPoint
public://topics-images/ppt.png
Microsoft Word
public://topics-images/word.png
Phone Link
public://topics-images/phone-link.png
OneNote
public://topics-images/onenote.png
Windows App
public://topics-images/windows-app.png
Notion
public://topics-images/notion.png
Google Drive
public://topics-images/drive.png
YouTube Kids
public://topics-images/yt-kids.png
Gboard
public://topics-images/gboard.png
DeepSeek
public://topics-images/deepseek_logo.svg_.png
Prince of Persia
public://topics-images/prince-persia.png
Sony
public://topics-images/nq0nd2c0_400x400.jpg
Cisco
public://topics-images/jmyca1yn_400x400.jpg
Alibaba
public://topics-images/4axflwia_400x400.jpg
Alibaba Cloud
public://topics-images/qm43orjx_400x400_cloud.png
Coinbase
public://topics-images/consumer_wordmark.png
CarPlay
public://topics-images/carplay.png
Rust
public://topics-images/rust-logo-blk.png
Red Hat
public://topics-images/redhat.png
Anthropic
public://topics-images/anthropic.png
Xcode
public://topics-images/xcode.png
Tim Cook
public://topics-images/tim-cook.jpg
Donald Trump
public://topics-images/trump.jpg
Microsoft Surface
public://topics-images/surface.jpg
Copilot+ PC
public://topics-images/copilotpc.png
Stellar Blade
public://topics-images/stellar-blade.jpg
Snapdragon
public://topics-images/snapdragon_chip.png
Qualcomm
public://topics-images/qualcomm-logo.svg_.png
CoreWeave
public://topics-images/coreweave.png
Ford
public://topics-images/ford.png
Xiaomi
public://topics-images/xiaomi.png
Google Cloud
public://topics-images/google_cloud_logo.svg_.png
PlayStation Network
public://topics-images/psn.png
PlayStation Plus
public://topics-images/ps-plus.png
Windsurf
public://topics-images/windsurf.png
Square Enix
public://topics-images/square-enix.png
MIT
public://topics-images/x7hyjl3t_400x400.jpg
Zoox
public://topics-images/zoox.jpg
Evernote
public://topics-images/1neatidg_400x400.jpg
Magic the Gathering
public://topics-images/magic.png
Call of Duty
public://topics-images/cod.png
NVIDIA
public://topics-images/nvidia_logo.svg_.png
Satya Nadella
public://topics-images/nadella.png
Nintendo
public://topics-images/nintendo.png
Japan
public://topics-images/japan_flag.png
China
public://topics-images/china-flag-sq.png
Sam Altman
public://topics-images/sam-altman.png
SNK
public://topics-images/snk_logo.svg_.png
EPYC
public://topics-images/epyc.png
HPE
public://topics-images/hpe.png
Juniper
public://topics-images/juniper.png
CMA
public://topics-images/cma.png
App Store
public://topics-images/app-store.png
DoJ
public://topics-images/doj.png
Siri
public://topics-images/siri.png
Apple Intelligence
public://topics-images/apple-intelligence.png
Acer
public://topics-images/acer.png
GeForce
public://topics-images/geforce.png
Omen
public://topics-images/omen.png
HP
public://topics-images/hp.png
Alienware
public://topics-images/alienware.png
Dell
public://topics-images/dell.png
Bungie
public://topics-images/bungie.png
Marathon
public://topics-images/marathon.png
Lenovo
public://topics-images/lenovo-2015-svg.png
Intel Arc
public://topics-images/badge-arc-graphics.png
GitHub
public://topics-images/8zfrryja_400x400.png
GitHub Copilot
public://topics-images/copilot.png
Foxconn
public://topics-images/foxconn_0.png
Visual Studio
public://topics-images/vs.png
Visual Studio Code
public://topics-images/vscode.png
WSL
public://topics-images/wsl.png
Linux
public://topics-images/linux.png
Tencent
public://topics-images/tencent_logo_2017.svg_.png
Entra
public://topics-images/microsoft_entra_id_color_icon.svg_.png
RHEL
public://topics-images/rhel-icon.png
MSI
public://topics-images/msi-logo-for_digital_use_b.png
MCP
public://topics-images/mcp.png
Docker
public://topics-images/docker.png
RISC-V
public://topics-images/risc-v-logo.svg_.png
Fedora
public://topics-images/fedora.png
ASUS
public://topics-images/asus.png
ROG
public://topics-images/rog-logo_red.png
Naughty Dog
public://topics-images/naughty-dog.png
AIS
public://topics-images/357073423_657473419752809_8491928084596189631_n.png
National Telecom
public://topics-images/nt.jpg
Elon Musk
public://topics-images/elon_musk_2015_0.jpg
OpenShift
public://topics-images/openshift-logotype.svg-0.png
Shift Up
public://topics-images/shiftup.png
Bethesda
public://topics-images/bethesda.png
The Elder Scrolls
public://topics-images/tes.png
CATL
public://topics-images/img_7841.png
Radeon
public://topics-images/radeon.png
Waymo
public://topics-images/waymo.jpg
Borderlands
public://topics-images/borderlands4.png
Android XR
public://topics-images/android-xr.png
Ninja Theory
public://topics-images/ninja.jpg