วิธีจัดวางและออกแบบเว็บไซต์ (ไม่มีทักษะการออกแบบ!)

หากคุณกำลังพยายามสร้างเว็บไซต์ฟรีแลนซ์สำหรับลูกค้า หรือแม้แต่พยายามสร้างพอร์ตโฟลิโอ คุณอาจเจอปริศนานี้:

คุณจะสร้างเว็บไซต์ได้อย่างไรหากไม่มีทักษะการออกแบบเว็บไซต์

นี่คือตัวเลือกบางส่วน:

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

อีกทางเลือกหนึ่งสำหรับคุณคือการเรียนรู้ทักษะพื้นฐานในการจัดวางและออกแบบเว็บไซต์ และสร้างส่วนหน้าของคุณเอง

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

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

วิธีนี้เกี่ยวข้องกับ:

• เรียนรู้พื้นฐานเกี่ยวกับวิธีการรวมเว็บไซต์ด้วยภาพ
• และค้นคว้าการออกแบบเว็บที่มีอยู่เพื่อรับแรงบันดาลใจและแนวคิดสำหรับตัวคุณเอง

เป็นกลยุทธ์ที่ฉันใช้สร้างเว็บไซต์ Coder Coder จริงๆ! จริงอยู่ที่มันเป็นการออกแบบที่ค่อนข้างเรียบง่าย ไม่มีอะไรหรูหราเกินไป แต่บางครั้งความเรียบง่ายก็เป็นสิ่งที่คุณต้องการ

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

และแน่นอนว่าแต่ละเว็บไซต์ที่คุณสร้างจะให้ประสบการณ์แก่คุณ เมื่อเวลาผ่านไป คุณจะสามารถสร้างการออกแบบที่ซับซ้อนมากขึ้นเรื่อยๆ เมื่อคุณฝึกฝนฝีมือต่อไป

นี่คือขั้นตอนหลักของกระบวนการนี้:

• ตัดสินใจพื้นฐานของเว็บไซต์ของคุณ
• วางแผนเลย์เอาต์ของเว็บไซต์ของคุณ
• ผสมผสานการออกแบบ
• สร้างผลิตภัณฑ์ขั้นสุดท้าย

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

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

1. ตัดสินใจพื้นฐานของเว็บไซต์ของคุณ

ก่อนที่คุณจะเริ่มเลือกสีหรือฟอนต์ เรามาตอบคำถามทั่วไปเกี่ยวกับเว็บไซต์นี้กันก่อน:

1. เว็บไซต์จะส่งเสริมธุรกิจประเภทใด

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

เพื่อจุดประสงค์ของเราที่นี่ เราจะเลือกร้านกาแฟสมมติชื่อเซ็นทรัลคอฟฟี่ เพราะทุกคนชอบกาแฟใช่ไหม

2. เว็บไซต์จะมีหน้าอะไรบ้าง

หน้าทั่วไปบางหน้าอาจเป็นหน้าแรก หน้าเกี่ยวกับ หน้าติดต่อ และหน้าเฉพาะสำหรับอุตสาหกรรมที่ธุรกิจอยู่

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

2. ค้นหาเว็บไซต์ที่มีอยู่

ตรวจสอบเว็บไซต์อื่นๆ ที่มีอยู่สำหรับธุรกิจประเภทเดียวกัน ดู 3-4 เว็บไซต์เหล่านี้และดูว่ามีหน้าใดบ้าง

พยายามสังเกตว่าเว็บไซต์ได้รับการออกแบบและจดบันทึกอย่างไร:

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

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

นี่คือตัวอย่างร้านกาแฟหนึ่งร้านจากธีมที่ฉันพบ

The7

หน้า:
เว็บไซต์หน้าเดียวพร้อมส่วนต่างๆ:หน้าแรก เกี่ยวกับ ที่ตั้ง ข้อเสนอ เมนู ข่าว ข่าว โพสต์ในบล็อก

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

การนำทาง:
ใช้งานง่าย

และนี่คือเว็บไซต์บางส่วนที่ฉันพบจากการค้นหา "ร้านกาแฟในชิคาโก":

กาแฟรูหนอน

หน้า:
หน้าแรก, บล็อก, สถานที่/ติดต่อ, โอกาสในการทำงาน

สไตล์:
ความทันสมัย; ภาพร้านยิ่งชวนให้คิดถึง

การนำทาง:
ไม่ชัดเจนในทันทีว่านี่คือร้านกาแฟ การนำทางไซต์ค่อนข้างยาก

ถนนคาเฟ่

หน้า:
เว็บไซต์หน้าเดียว ส่วนต่างๆ ได้แก่ หน้าแรก ร้านกาแฟ (เกี่ยวกับ) เมนู การคั่ว ไทม์แมชชีน (น้ำผลไม้) แบบฟอร์มการติดต่อ

สไตล์:
เรียบง่ายทันสมัย ​​(สแควร์สเปซ)

การนำทาง:
ค่อนข้างง่ายที่จะนำทาง; ฉันชอบแถบเมนูที่ติดหนึบด้านบนที่เลื่อนคุณลงไปยังแต่ละส่วน

สร้างกาแฟ

หน้า:
เว็บไซต์หน้าเดียว ส่วนต่างๆ ได้แก่ หน้าแรก เกี่ยวกับ ชั่วโมง สถานที่ ร้านค้า การจัดเลี้ยง กิจกรรม ติดต่อ

สไตล์:
การออกแบบที่เรียบง่ายคือการผสมผสานระหว่างภาพถ่ายเต็มความกว้างระหว่างส่วนต่างๆ ของพื้นหลังสีขาวกับข้อความ

การนำทาง:
ใช้งานง่ายมาก

กาแฟซาวาดะ

หน้า:
โฮมเพจ เกี่ยวกับ อาหารและเครื่องดื่ม ข่าว ติดต่อ &ชั่วโมง ร้านอาหาร งานของเรา

สไตล์:
การออกแบบเป็นส่วนใหญ่เกี่ยวกับการถ่ายภาพ และข้อความก็ดูเหมือนจะมาภายหลัง

การนำทาง:
การนำทางค่อนข้างยาก แทบไม่เห็นเมนูแฮมเบอร์เกอร์ที่มุมขวา

3. จดบันทึกสำหรับเว็บไซต์ของคุณเอง

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

จากการวิจัยของคุณ ตอนนี้คุณสามารถเริ่มจดบันทึกสำหรับไซต์ของคุณเองได้แล้ว

สำหรับ Central Coffee ฉันคิดว่าเราจะใช้เว็บไซต์หน้าเดียวง่ายๆ โดยมีหัวข้อต่อไปนี้:

• ส่วนหัว
• หน้าแรก
• เกี่ยวกับ
• เมนู
• ที่ตั้ง/ติดต่อ
• ส่วนท้าย

4. วางแผนเลย์เอาต์ของเว็บไซต์ของคุณ

ตอนนี้เราพบโครงร่างของไซต์แล้ว เราจะทำเนื้อหาแต่ละหน้าหรือส่วนที่มีองค์ประกอบที่เราต้องการที่จะใส่ในแต่ละหน้า เลย์เอาต์ที่เราจะสร้างนั้นเรียกอีกอย่างว่า wireframe .

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

ส่วนหัว

ฉันชอบแถบการนำทางด้านบนที่อยู่ในหน้าสาธิต Seven Coffee และเว็บไซต์ Caffe Streets

อย่างไรก็ตาม ทั้งสองหน้านั้นอยู่กึ่งกลาง และฉันอยากให้มันจัดชิดซ้าย โดยมีโลโก้ก่อนและส่วนหลัง

นั่นสำหรับเวอร์ชันเดสก์ท็อป สำหรับแท็บเล็ตและมือถือ เราจะมีโลโก้และเมนูแฮมเบอร์เกอร์ในส่วนหัวตามค่าเริ่มต้น

การคลิกที่แฮมเบอร์เกอร์จะเป็นการเปิดเมนูนอกพื้นที่ซึ่งจะเลื่อนเข้ามาจากด้านขวาเพื่อแสดงการนำทางส่วน

หน้าแรก

เนื่องจากเป็นไซต์หน้าเดียว "หน้าแรก" จะเป็นสิ่งที่คุณเห็นบนหน้าจอในตอนแรกเมื่อคุณโหลดเว็บไซต์ และชอบที่ Seven Coffee มีสโลแกนเล็กๆ น้อยๆ ภายใต้ชื่อ

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

เกี่ยวกับ

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

เมนู

แต่ละเว็บไซต์จัดการเมนูต่างกัน:

• Seven Coffee มีตารางรายการเมนูพร้อมราคา
• Caffe Streets มีแต่รายการนะคะ
• และ Build และ Sawada เชื่อมโยงไปยัง PDF ของเมนู

โดยส่วนตัวแล้วฉันเกลียดเวลาที่ฉันท่องเว็บไซต์บนโทรศัพท์และต้องดาวน์โหลดไฟล์ PDF ดังนั้น ฉันจะใช้เมนูง่ายๆ ที่มีรายการเครื่องดื่มและอาหาร และรวมรูปภาพบางส่วนไว้ด้วย

ที่ตั้ง/ติดต่อ

ฉันต้องการใส่สถานที่ เวลาทำการ และข้อมูลติดต่อที่ด้านล่างของเว็บไซต์ ฉันเดาว่าผู้ใช้จะเริ่มที่ด้านบนสุดของไซต์และเลื่อนลงมาด้านล่าง

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

ส่วนท้าย

ส่วนท้ายจะค่อนข้างน้อยที่สุด มันจะเป็นแถบเล็กๆ ที่มีข้อมูลลิขสิทธิ์

5. สร้างโครงร่างที่สมบูรณ์ของคุณ

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

มันค่อนข้างใช้งานง่าย และฉันชอบตัวเลือกสไตล์คร่าวๆ เพราะมันสนุก 🙂

(คลิกที่ภาพขนาดย่อเพื่อดูภาพเต็มในแท็บใหม่)

6. กำหนดข้อกำหนดการออกแบบขั้นพื้นฐาน

อีกครั้ง เราจะไม่สร้างสไตล์ที่มีรายละเอียดสูงและหรูหรา เราจำเป็นต้องคิดหาพื้นฐานบางอย่างแม้ว่า… อย่างเช่น:

โครงร่างสี

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

หากคุณต้องการแรงบันดาลใจสี Canva มีจานสีตัวอย่างที่คุณสามารถลองใช้ได้

สำหรับเว็บไซต์ Central Coffee ฉันจะใช้ Fall Collection จากลิงก์ Canva ซึ่งเป็นจานสีโทนร้อนที่มีสีน้ำตาลเป็นหลัก

ฉันกำลังพยายามทำให้นึกถึงความหลังและบรรยากาศสบายๆ ของร้านกาแฟ

แบบอักษร

เมื่อย้อนกลับไปที่เว็บไซต์ แทบทุกคนจะใช้ฟอนต์ sans-serif (เช่น ตัวอักษรที่ไม่มี “serif” หรือแถบท้ายที่เหมือนกับข้อความในเครื่องพิมพ์ดีด) ฉันจะเลือกแบบอักษรธรรมดาสำหรับข้อความส่วนใหญ่ของคุณ จากนั้นคุณสามารถเพิ่มแบบอักษรที่มีน้ำหนักมากขึ้นสำหรับหัวเรื่องและพาดหัวข่าวได้

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

รูปภาพ/ภาพถ่าย

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

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

• Canva
• เวกเตอร์
• สแนปปา

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

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

เนื่องจากเราไม่มีนักออกแบบที่จะสร้าง PSD ที่มีรายละเอียด เราจะเริ่มสร้างเว็บไซต์จากโครงร่างที่เราเพิ่งสร้างขึ้น

นี่คือวิธีที่ฉันมักจะสร้างส่วนหน้าของเว็บไซต์:

1. ตั้งค่าไฟล์เว็บไซต์
2. สร้างและจัดโครงสร้างโฟลเดอร์และไฟล์
3. รับตัวรองงานและดำเนินการ (ฉันใช้ Gulp สำหรับโครงการนี้)
4. สร้างไฟล์ HTML แยกกันสำหรับแต่ละเทมเพลต

จากนั้นทำตามขั้นตอนเหล่านี้สำหรับเทมเพลต HTML แต่ละรายการ:

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

ตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณตอบสนอง

ขณะที่คุณกำลังสร้างไซต์ โดยทั่วไปควรตรวจสอบว่าสไตล์ของคุณดูราบรื่นบนเดสก์ท็อป แท็บเล็ต และอุปกรณ์เคลื่อนที่

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

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

ต่อไปนี้คืออุปกรณ์จำลองอุปกรณ์บางส่วนที่คุณใช้ทดสอบการแสดงผลเว็บไซต์ได้:

• Responsinator.com (ฟรี)
• Screenfly โดย Quirktools (ฟรี)
• Browserstack (ชำระเงิน) — Browserstack ให้คุณทดสอบเครื่องเสมือนบนอุปกรณ์จริงได้

ผลิตภัณฑ์สำเร็จรูป!

นี่คือภาพหน้าจอของเว็บไซต์ Central Coffee ที่เสร็จสิ้นแล้ว:

คุณสามารถตรวจสอบไซต์จริงได้ในหน้า Github.io ของฉัน

นั่นคือวิธีที่ฉันออกแบบและสร้างเว็บไซต์โดยไม่ต้องจ้างนักออกแบบ

ฉันหวังว่าคุณจะพบว่าโพสต์นี้มีประโยชน์! แจ้งให้เราทราบความคิดใด ๆ ที่คุณมีในความคิดเห็นด้านล่าง

ไม่อยากพลาดโพสต์? หากคุณยังไม่ได้สมัคร คลิกที่นี่ และคุณจะได้รับการแจ้งเตือนเมื่อมีโพสต์ใหม่ในบล็อก