จัดเลย์เอาต์และออกแบบเว็บไซต์เองได้ แม้ไม่มีทักษะดีไซน์

หากพยายามสร้างเว็บไซต์ให้ลูกค้าหรือพอร์ตโฟลิโอ แต่อยู่ในกับดีเลมมา: จะสร้างเว็บไซต์อย่างไรถ้าไม่มีทักษะเว็บดีไซน์?

ตัวเลือกที่มีอยู่

• จ้างเว็บดีไซเนอร์ — แต่งานดีมีราคาสูง
• หาดีไซเนอร์ราคาถูกบน Fiverr/Upwork — เสี่ยงคุณภาพ
• ดาวน์โหลดธีม/เทมเพลตฟรีหรือพรีเมียม — แต่อาจไม่ตรงตามต้องการ

อีกทางหนึ่ง: เรียนทักษะพื้นฐานการจัดเลย์เอาต์และออกแบบเว็บเอง สร้าง front end เอง

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

วิธีการประกอบด้วย:

• เรียนพื้นฐานการประกอบเว็บไซต์ทาง視覺
• ศึกษาเว็บไซต์ที่มีอยู่เพื่อหาแรงบันดาลใจและไอเดีย

นี่คือวิธีที่ผมใช้สร้างเว็บ The Coder Coder — ดีไซน์เรียบง่าย แต่บางครั้งเรียบง่ายก็พอ

ขั้นตอนหลัก

• กำหนดพื้นฐานเว็บไซต์
• วางแผนเลย์เอาต์
• ประกอบดีไซน์
• สร้างผลลัพธ์สุดท้าย

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

1. กำหนดพื้นฐานเว็บไซต์

ก่อนเลือกสีหรือฟอนต์ ตอบคำถามเหล่านี้:

1. เว็บไซต์ส่งเสริมธุรกิจประเภทไหน? เช่น ร้านพิซซ่า สตูดิโอช่างภาพ ร้านหนังสือ — ที่นี่เลือก "Central Coffee" ร้านกาแฟสมมติ

2. จะมีหน้าไหนบ้าง? หน้าหลัก เกี่ยวกับเรา ติดต่อ และหน้าเฉพาะธุรกิจ วิธีดีคือค้นคว้าเว็บคล้ายๆ กัน

2. ศึกษาเว็บไซต์ที่มีอยู่

ดู 3-4 เว็บไซต์ธุรกิจคล้ายกัน บันทึก: หน้าต่างๆ, สไตล์โดยรวม, ความสะดวกในการนำทาง, จุดน่าสนใจ

แหล่งหาเว็บตัวอย่าง: ThemeForest (ธีม/เทมเพลตยอดนิยมมักเป็นดีไซน์ที่ดี)

ตัวอย่างเว็บร้านกาแฟที่ศึกษา:

The7 (ThemeForest)

หน้า: One-page sections: Home, About, Location, Offers, Menu, News, Press, Blog

สไตล์: ทันสมัย สะอาดตา รูปภาพดี

นำทาง: ง่าย

The Wormhole Coffee

หน้า: Homepage, Blog, Location/Contact, Jobs

สไตล์: ทันสมัยบ้าง รูปร้านนอสตัลจิก

นำทาง: ไม่ชัดเจนว่าเป็นร้านกาแฟ นำทางยาก

Caffe Streets

หน้า: One-page sections: Home, Caffe (About), Menu, Roasting, Time Machine, Contact

สไตล์: เรียบง่าย ทันสมัย (Squarespace)

นำทาง: ง่าย ชอบ sticky menu bar

Build Coffee

หน้า: One-page sections: Homepage, About, Hours, Location, Shop, Catering, Events, Contact

สไตล์: เรียบง่าย รูปเต็มจอสลับกับข้อความบนพื้นขาว

นำทาง: ง่าย

Sawada Coffee

หน้า: Homepage, About, Food & Drink, Press, Contact & Hours, Our Restaurants, Jobs

สไตล์: เน้นถ่ายภาพ ข้อความดูเป็นอันรอง

นำทาง: ยาก hamburger menu ซ้ายมือบนหายากลับ

3. บันทึกโน้ตสำหรับเว็บตัวเอง

จากการศึกษา ได้ไอเดียฟีเจอร์ทั่วไปและสิ่งที่ทำงาน/ไม่ทำงาน สำหรับ Central Coffee ใช้ One-page ด้วย sections:

• Header
• Home
• About
• Menu
• Location/Contact
• Footer

4. วางแผนเลย์เอาต์ (Wireframe)

Wireframe = แผนผังเนื้อหาและตำแหน่งประมาณ — ยังไม่มีฟอนต์ สี รูปภาพ

Header

ชอบ top nav bar ของ The7 และ Caffe Streets แต่วางชิดซ้าย (โลโก้ก่อน แล้วเมนู) เดสก์ท็อป แท็บเล็ต/มือถือ: โลโก้ + hamburger menu คลิกแล้ว slide off-canvas menu จากขวา

Home (Hero)

ภาพพื้นหลังพร้อมข้อความทับ (แบบ Build Coffee) ใช้ได้ทั้งเดสก์ท็อปและมือถือ

About

ย่อหน้าสั้น + รูปภายในร้าน เพื่อดึงดูดลูกค้า

Menu

เว็บต่างๆ จัดต่างกัน: The7 = grid พร้อมราคา, Caffe Streets = リスト, Build/Sawada = ลิงก์ PDF — ผมไม่ชอบโหลด PDF บนมือถือ จะทำเมนูง่ายๆ พร้อมรูปอาหาร/เครื่องดื่ม

Location/Contact

วางท้ายเว็บ: สถานที่ ช่วงเวลา ติดต่อ — CTA ท้ายเพจ ตอบคำถาม "แล้วทำไงต่อ?" ช่วยนำทางลูกค้า

Footer

ขั้นต่ำ: แถบเล็ก copyright

5. สร้าง Wireframe 完成版

ใช้ Mockflow (ฟรี 1 โปรเจกต์) สร้าง wireframe เดสก์ท็อปและมือถือ สไตล์ sketch สนุกดี

6. กำหนดสเปกดีไซน์พื้นฐาน

Color Scheme

ใช้โทนกลาง (เทา/ขาว) ส่วนใหญ่ + 1-2 สีเน้น (accent) สำหรับปุ่ม/ลิงก์ สำหรับ Central Coffee ใช้ "Fall Collection" จาก Canva — พาเลตสีน้ำตาลอบอุ่น สร้างความรู้สึกโนสตัลจิกอบอุ่น

Fonts

เว็บส่วนใหญ่ใช้ sans-serif เลือกฟอนต์อ่านง่ายสำหรับข้อความหลัก ฟอนต์หนาหรือตกแต่งสำหรับหัวข้อ Google Fonts ฟรี แต่อย่าโหลดเยอะเกิน (โหลดช้า)

Images/Photography

ร้านกาแฟ: รูปเชิญชวน แสงนุ่ม โนสตัลจิก คนคุยกันเครื่องดื่ม/อาหาร

กราฟิก/โลโก้ฟรี: Canva, Vectr, Snappa

7. สร้างเว็บไซต์จริง!

มี wireframe + design references แล้ว เริ่มโค้ด front end จาก wireframe โดยไม่ต้องมี PSD

ขั้นตอนการ build front end:

1. ตั้งค่าไฟล์เว็บไซต์
2. สร้างโฟลเดอร์/ไฟล์ 구조
3. รัน task runner (ใช้ Gulp)
4. สร้าง HTML file แยกต่อ template

ต่อแต่ละ template:

1. สร้างโครงสร้าง HTML พื้นฐาน
2. สร้าง element ทีละตัว
3. เพิ่ม CSS สไตล์ ตรวจสอบเลย์เอาต์ก่อน
4. เช็คเบราว์เซอร์ตลอดการทำงาน แก้ไขต่อเนื่อง

ทำให้เว็บ Responsive

เช็คบนเดสก์ท็อป (เบราว์เซอร์ต่างๆ) มือถือ (Chrome DevTools device emulation) — จำลองไม่แม่น 100% ควรทดสอบบนโทรศัพท์จริงเมื่อ deploy แล้ว

เครื่องมือทดสอบ: Responsinator.com, Screenfly, Browserstack (จ่ายเงิน ทดสอบบนอุปกรณ์จริง)

ผลลัพธ์สุดท้าย!

สร้างเว็บ Central Coffee เรียบร้อย — ดูได้ที่ GitHub Pages

หวังว่าบทความนี้จะช่วยให้คุณสร้างเว็บเองได้โดยไม่ต้องจ้างดีไซเนอร์!