ขั้นตอนการออกแบบ #Blognone ใหม่

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

การดีไซน์ Blognone

1. คุณเม่นพยายามใช้รูปให้น้อยที่สุด

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

สิ่งที่น่าสนใจคือการใช้ CSS3 เพื่อสร้างกราฟฟิคเหล่านี้ทำให้ภาพรวมดูสวยงามโดยไม่ต้องสร้างออกมา คือไม่ต้องใช้รูปจริง เช่นพวกขอบโค้งต่างๆ หรือเงาของปุ่มในส่วนของ Navigation ,รูปประจำข่าว และอื่นๆ ทำให้รูปที่ดูเหมือนจะใหญ่ในเว็บนี้จริงๆมีขนาดทั้งหมดไม่เกิน 60k ทำให้โหลดเร็วขึ้น โดยคุณเม่นออกแบบในสิ่งที่ “ควรจะเป็น” และ Match กับ Drupal พอดี

2. หน้าแรกคือ “blog”

(ไม่อยากใช้คำว่า News เพราะเว็บชื่อ blognone) จะเห็นว่าตัวอย่างแรกลอก Arstechnica มา ครั้งแรกทีมก็คิดว่าจะทำเป็นเว็บเต็มรูปแบบแต่ไปๆมาก็คงรูปแบบ Blog เหมือนเดิม เพราะเห็นด้วยกับ http://www.usably.net/?p=534

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

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

5.ใช้เรื่อง Pixel Perfect ในการดีไซน์

ซึ่งเป็นสไตล์ของคุณเม่นและไทเกอร์ไอเดียอยู่แล้ว

การดีไซน์เก็บกิ๊กในระดับ pixel-prefect สไตล์ TiGERiDEA

การดีไซน์เก็บกิ๊กในระดับ pixel-prefect สไตล์ TiGERiDEA

6.มีการออกแบบด้วยแนวคิดของ Drupal

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

Blognone ดีไซน์แรก

Blognone R0

Blognone R0

ดีไซน์แรกด้านบน คุณลิ่วเตือนว่าคุณเม่นยังไม่ได้ใส่ banner ขนาด Leatherboard ด้านบน หลังจากพิจารณาแล้วก็เลย Confirm ใส่ Leatherboard ขนาด 728 x 90 pixel

Blognone Revision1

Blognone R1A

Blognone R1A ยังไม่ได้ Login

Blognone R1B

Blognone R1B เมื่อ Login แล้วจะพบชื่อ user มุมบน

พอปรับให้มี ad ก็ต้องปรับเลื่อนเมนูลงมา จะเห็นว่าต้องพิจารณาเรื่องชื่อ Writer username ของ Writer/Contributor ที่ยาวที่สุดใน blognone (bow_der_kleine ) เพราะมันอาจทำให้พื้นที่ชื่อผู้เขียนข่าวดูไม่สวยได้

อย่างไรก็ตาม คุณ MK พบว่าส่วนของ user menu เนื้อที่ค่อนข้างจำกัด เพราะเมนูของ Drupal ค่อนข้างเยอะและให้ไอเดียตัวอย่างเช่นใช้ javascript ทำเป็น dropdown

และมีอีกโจทย์ คือ content ชิ้นที่เป็น features (sticky ในปัจจุบัน) จะทำอย่างไรให้แยกจาก content ปกติ ( เช่นอย่างของ ars นั้นแยกด้วยสี )

Blognone Revision2

Blognone R2A

Blognone R2A

Blognone R2B

Blognone R2B

คุณเม่นออกความเห็นว่าถ้าทำ javascript น่าจะไม่เหมาะกับชาว Geek เลยลองทำกล่องมา มันอาจจะไม่ค่อยเหมาะกับคนลงโฆษณาเล็กน้อย เพราะตำแหน่งโฆษณาจะเปลี่ยน แต่ถ้ารับได้ วิธีนี้สะดวกกว่า (ลองดูรูป Blognone R2B ด้านบน )

ส่วนเรื่อง featured item คุณเม่นทำมาให้ 2 สี สีชมพูและสีฟ้า เผื่อสีฟ้าเอาไปใช้กับ advertorial (ถ้าไม่ชอบ badge แบบแถบข้างก็ตัดออกได้)

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

ส่วนชื่อ Writer ที่มี icon ต้องดูว่าจะ overflow:hidden ทำให้ text ขาดไปนิดหน่อย หรือจะเลือกขึ้นบรรทัดใหม่

Blognone Revision3

Blognone R3

Blognone R3

จากนั้นจากการทำประชาพิจารณ์ใน Blognone ก็ได้คอมเม้นท์อีกมากมายลองดูที่ http://www.blognone.com/node/15598 คุณ MK ได้ช่วยสรุปให้

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

และคอมเม้นท์ของคุณ MK เอง

– รายละเอียดของผู้เขียน (ชื่อ+badge) อยู่ไม่ตรงที่กันในทั้งสองหน้า
– เช่นเดียวกับจำนวนครั้งในการอ่าน หน้าแรกกับหน้าในอยู่คนละที่
– read more น่าจะอยู่ด้านขวาสุดนะครับ ตามลูกศร (ดูของ TechCrunch ประกอบ)
– title ของข่าวยังไม่ค่อยเด่นเท่าไร เมื่อเทียบกับหน้าเว็บทั้งหน้า (ในหน้าใน จะยิ่งเห็นชัด)
– title ของ block ใน sidebar ก็เด่นน้อยไปนิดนึงครับ
– ใน navbar: feature กับ special report คงจะรวมกันครับ แล้วอาจจะเพิ่ม block ของ feature เข้ามาใน sidebar ของหน้าแรกด้วย
โดยข้อสุดท้ายคุณ MK รวมเองก็ได้

เรื่องหน้า Comment

เป็นแบบของ Blognone อันปัจจุบัน มี thread comment ซึ่งเดิมมีปัญหาว่า จะตอบกันจนตกขอบ คุณ MK กะว่าทำระบบใหม่ทีเดียว อาจจะให้มี thread ย่อยได้แค่ 3 ชั้นมากกว่านั้นมันจะไล่กันลงไปตลอด

องค์ประกอบอื่นๆ สำหรับกล่อง comment
– ลิงก์เลขเบอร์คอมเมนต์ (permalink) สำหรับอ้างอิงเดิมคุณ MKใช้ฟอร์แมต #123456 แต่คิดว่าอาจเหลือ # ตัวเดียวพอ จะได้ประหยัดที่
– badge
– ปุ่มสำหรับ reply comment
– สีของคอมเมนต์ แสดงเก่า-ใหม่

Blognone Revision5

Blognone R5

Blognone R5

คุณเม่นทำการดัดแปลงจากความคิดหลายๆคน มีการตัดสินใจเรื่อง Navigation Bar โดยปรับให้คล้ายแบบเดิม แต่ลดบางเมนู (ที่ไปอยู่ใน about ได้) และเพิ่มเมนู Featured ที่คิดว่าน่าจะรวบรวม post ที่เคยขึ้น featured ไว้เพราะคุณเม่นเองเคยจะหาของที่เคยอยู่ featured แล้วหาไม่เจอเช่นกระทู้ประชาพิจารณ์เป็นต้น

Blognone R5 เมื่อคลิกเข้าดูข่าว

Blognone R5 เมื่อคลิกเข้าดูข่าว

เพิ่มเติมหน้า Comment เผื่อ Moderator จะใส่ vote เข้ามา และส่วน login ด้านขวา ถ้าเมนูส่วนตัวเยอะก็ให้มันตกๆ ลงไปหลายบรรทัด
(บรรทัดละ 2 ลิงก์) ได้ สุดท้ายตรงคำเตือนในคอมเม้นท์ ผมว่าอยู่ข้างล่างแล้วไม่ได้อ่าน เลยบีบๆ มาอยู่ด้านขวาทำให้ที่คอมเม้นท์น้อยลง

Blognone Revision6

Blognone R6

Blognone R6

และแล้วก็มาถึง Revision ท้ายครับ ตัวนี้มีการปรับให้หัวข้อข่าวเด่นขึ้นทุกข่าว และหัวข้อใน Sidebar ปรับสีใหม่ ทำให้มีการเปลี่ยนแปลงเยอะเลยทีเดียว

Blognone R6 เมื่อคลิกเข้ามาที่เนื้อข่าว

Blognone R6 เมื่อคลิกเข้ามาที่เนื้อข่าว

เมื่อคลิกเข้ามาที่ข่าวจะมีลักษณะดังรูปครับ และมีรูปแบบของ Comments ด้านล่างเรียนลำดับด้วยเช่นกัน

Comments

  1. เก็บรายละเอียดได้ยิบจริงๆครับ

  2. สมกับทีมงานเทพจริงๆครับ

  3. ชอบ header ของ rev.0 ครับ

    แก้ไปแก้มากลับไปคล้ายของเดิม (นึกถึง design hell ของ oatmeal ;P)
    http://theoatmeal.com/comics/design_hell

  4. ละเอียดมากครับ ได้ความรู้ใหม่เกี่ยวกับ pixel perfect

  5. very interesting…i would like this to take action to my blog..really want @ipattt

  6. well and i got to see how it corresponding to my content’s blog…need consulting indeed

Trackbacks

  1. […] This post was mentioned on Twitter by patchara, @manatsawin. @manatsawin said: RT @iPattt: [blog] ขั้นตอนการออกแบบ Blognone ใหม่ http://bit.ly/c6hBbR […]