ออกแบบ theme แมคมือใหม่.คอม ใหม่

ผมมีโครงการปรับปรุงเว็บ แมคมือใหม่.คอม มาได้สักพักใหญ่ ๆ แล้ว และโพสนี้จะเป็นงานออกแบบ theme ใหม่ในขั้นต้นครับ อันนี้เป็นในส่วนของหน้าแรก

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

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

ส่วนที่สร้างใหม่เลยคือส่วน news เนื้อหาข่าวในหน้าแรก ที่ของเดิมจะยึดโครงสร้างหน้าแรก (frontpage) เดิมของ drupal ที่จะมีเนื้อหาเป็น teaser ของ blog ต่อ ๆ กันลงมาเรื่อย ๆ ยาวติดกันเป็นพรึ่ดไปหมด ผมไม่ต้องการตรงนั้นครับ เลยต้องสร้างหน้า front page ขึ้นมาใหม่แล้วสร้าง block จาก views เพื่อดึงเนื้อหาส่วน teaser ของ blog ที่ผมต้องการมาแสดง(ผมต้องการแสดง teaser สองตอนต่อหนึ่งหน้า) แล้วจากนั้นก็จัดเรียงเนื้อหาใหม่ให้ดูง่ายขึ้นเป็น block ไป

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

layout นี้ทำให้ผมสามารถที่จะใส่เนื้อหาลงไปได้มากกว่าแบบแรก แต่ก็ยังคงความ compact ตามที่ตั้งใจเอาไว้อยู่ แต่ก็แลกมาด้วยความไม่สมำ่เสมอกันของเนื้อหาฝั่งซ้าย-ขวา ที่มักจะเหลื่อมกันไม่ทางใดก็ทางหนึ่ง ผมหาทางแก้ให้พอดีกันไม่ได้ก็เลยปล่อยเอาไว้ให้เหลื่อมกันไปแบบนี้ แล้วค่อยตัดเป็นอีก block นึงไปที่ด้านล่างของหน้าเว็บเลยทีเดียวดีกว่า

คร่าว ๆ สำหรับหน้าแรกมีประมาณนี้ครับ เดี๋ยวโพสหน้ามาต่อกันที่หน้าเวปส่วนอื่น =)