1. การวิจัยงานออกแบบ (research design)

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

• ศึกษาบริษัทที่ดำเนินธุรกิจในรูปแบบเดียวกัน (มีความเข้าใจเกี่ยวกับจุดเด่น – จุดด้อย, ข้อดี – ข้อเสีย แล้วนำมาปรับใช้กับการออกแบบเพื่อความเหนือกว่าบริษัทอื่นๆ)

• ศึกษาส่วนแบ่งทางการตลาด (หาช่องทางในการทำการตลาดและสร้างความแตกต่างจากบริษัทอื่นๆ)

• ศึกษากลุ่มเป้าหมาย (เข้าใจในความต้องการของลูกค้า)

2. สร้าง Mood Board และการระดมความคิดหรือBrainstorming

รายละเอียดในส่วนนี้ค่อนข้างมีความสำคัญ เนื่องจากถือเป็นจุดเริ่มต้นในการออกแบบ โดยเฉพาะอย่างยิ่ง Mood Board เนื่องจากเป็นส่วนที่สร้างแรงบันดาลใจในการทำงาน (web design inspiration) ซึ่งมีองค์ประกอบคือ

• The FWA (Favourite Website Awards)

การเลือกศึกษาข้อมูลจาก The FWA(Favorite Website Awards)ซึ่งเป็นเว็บไซต์การจัดอันดับและให้รางวัลแก่เว็บไซต์ต่างๆที่มีความโดดเด่น แปลกใหม่น่าสนใจอีกทั้งยังเป็นเว็บไซต์ที่น่าเชื่อถือและเว็บไซต์ที่เข้าประกวดนั้นก็ล้วนแล้วแต่เป็นเว็บไซต์ที่พิเศษในด้านการออกแบบแทบทั้งสิ้น

• Webdesign Inspiration

การเลือกแรงบันดาลใจในการสร้างเว็บไซต์ ไม่ว่าจะเป็นการเลือกใช้ตัวอักษร, สีพื้น, หรือแม้แต่สีสันในการสร้างเว็บไซต์ เป็นต้น

• Adobe Kuler

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

http://www.budgetbanners.co.za/tips-on-how-to-use-colour

3. การสร้าง Wireframe

คือการเอาเนื้อหาในเว็บไซต์มาลองจัดเรียงลงบน Layout ของเว็บไซต์ (Create Wireframe) เราจะเห็นได้ว่าจะมีการเขียนตัวหนังสือเฉพาะพวกหัวเรื่อง หรือในจุดที่สำคัญ ๆ เท่านั้นบน Wireframe และรูปที่จะใช้ในเว็บก็จะ Sketch ไว้เพียงคร่าว ๆ เพื่อบ่งบอกว่าเป็นรูปจากเนื้อหาทั่ว ๆ มีเครื่องมือที่ใช้สร้าง Wireframe ได้อย่างรวดเร็ว เช่น Pencil สามารถใช้ได้กับ Mac

4. Creative Team Meeting

เมื่อเราสร้าง Mood Board, ศึกษางานวิจัย งานออกแบบ และการสร้าง Wireframe รายบุคคลไว้แล้ว ให้นำข้อมูลมาแบ่งปันแลกเปลี่ยนไอเดีย แล้วหาแนวคิดที่ดีที่สุดเพื่อนำไปต่อยอดในการออกแบบที่ดียิ่งขึ้น

5. Sketch

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

6. Design

ขั้นตอนนี้เป็นจุดที่ต้องทำงานหนักสุด ในบรรดา การวิจัยงานออกแบบ (research design), ระดมความคิด, สเกต, ตัวอย่างเว็บไซน์ หรือ Web design Inspiration ดีไซน์เนอร์หลายคนจำนำเสนองานดีไซน์ให้ลูกค้าหลายแบบ เพื่อให้ลูกค้าตัดสินใจ แต่ตัวเลือกทำให้ลูกค้าส่วนใหญ่สับสน เพราะงานที่หลากหลายมักจะทำให้เเนวความคิดหลักในงานออกแบบ ถูกมองข้ามไป เทคนิคของดีไซน์เนอร์ที่เก่งคือ นำเสนอในสิ่งที่ใช่ให้อกับลูกค้าของเขาเพียงดีไซน์เดียว โดยพุ่งการทำงานทั้งหมดไปที่งานเดียวทั้งการใส่ใจ การศึกษาหาข้อมูล และทุ่มเทเวลาให้ กับงานออกแบบ เว็บไซต์ที่ดี และมันอาจจะกลายไปเป็น งานสร้างสรรค์ที่ไปเป็นเเรงบันดาลใจให้กับคนอื่นๆได้อีกด้วย

ส่วนประกอบสำคัญบนหน้าเว็บเพจ ที่ต้องมี

บนหน้าเว็บเพจ จะมีส่วนประกอบสำคัญที่จำเป็นต้องมีอยู่ 3 ส่วน ได้แก่

1. ส่วนหัวของหน้า (Header)

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

2. ส่วนของเนื้อหา (Body)

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

3. ส่วนท้ายของหน้า (Footer)

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

(( เอกสารประกอบ ))

อ้างอิง : https://sites.google.com/a/go.buu.ac.th/web-design-xxk-baeb-web/04-thvsdi-kar-xxkbaeb