การพัฒนาและออกแบบเว็บไซต์ 101

web_development_101ต้องการทราบพื้นฐานของการพัฒนาและออกแบบเว็บหรือไม่? น่ากลัว …


แต่มีปัญหากับแนวความคิดนี้หรือมีหลายอย่างที่จริง …

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

มาตอบคำถามทั้งหมดนี้กัน คู่มือเริ่มต้นสำหรับการพัฒนาและออกแบบเว็บไซต์.

[แจ้งเตือนสปอยเลอร์. ใช่คุณสามารถสร้างเว็บไซต์ที่มีคุณภาพในการลองครั้งแรก]

Contents

สิ่งที่อยู่ในคู่มือนี้?

โอเคสิ่งแรกก่อนเราดีใจที่คุณได้อ่านต่อไปและคุณได้ตัดสินใจที่จะลองพัฒนาเว็บไซต์! นี่คือวิธีการเล่น:

บทที่นำเสนอในลักษณะที่ง่ายมากโดยมีเนื้อหาหลักทางด้านซ้ายและรายการที่ดำเนินการทางด้านขวา ชอบมาก

คำแนะนำเบื้องต้น: บทที่ 1

ตอนนี้วิธีการดำเนินการ:

  • ในขณะที่อ่านครั้งแรกของคุณ: เราแนะนำให้คุณอ่านทุกอย่างจากบนลงล่าง สิ่งนี้จะทำให้คุณมีมุมมองที่ดี 10,000 ฟุตของหัวข้อและช่วยให้คุณเข้าใจส่วนที่สำคัญที่สุดของหัวข้อ นอกจากนี้ยังจะช่วยให้คุณมีเครื่องมือพื้นฐานและวิธีการเกี่ยวกับวิธีจัดการกับงานแต่ละงาน.
  • ในขณะที่การอ่านครั้งที่สองของคุณและเพิ่มเติม: ใช้ TOC และกระโดดข้ามไปยังส่วนที่คุณสนใจมากที่สุด นอกจากนี้อย่าลังเลที่จะใช้ปุ่มแชร์ที่อยู่ติดกับทุกบทและส่งลิงค์ไปยังตัวคุณเองหรือให้เพื่อน / ผู้ติดตามของคุณที่อาจสนใจ.

พร้อมหรือยัง? ไปที่บทที่ 1.

คู่มือนี้มีไว้สำหรับใคร?

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

นอกจากนี้คุณไม่จำเป็นต้องมีความรู้ด้านเทคนิคก่อนเริ่มต้น (นอกเหนือจาก “ทักษะการใช้เว็บ” พื้นฐาน) จุดรวมของคู่มือนี้เป็นหลักสูตร“ 101” สำหรับทุกคนที่สนใจในการสร้างเว็บไซต์และเรียนรู้การพัฒนาเว็บ.

ต่อไปนี้เป็นสาเหตุบางประการที่คุณอาจสนใจ:

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

แนวคิดหลักที่จะชี้นำเรา

นี้เป็นสิ่งสำคัญ! และโปรดอย่าโกรธเราถ้าคุณเป็นนักพัฒนาเว็บขั้นสูงที่อ่านข้อความนี้ แต่แนวคิดหลักที่จะแนะนำเราตลอดทั้งการพัฒนาเว็บและการออกแบบ 101 แหล่งข้อมูลนี้คือ:

“ วิธีการต้านทานน้อยที่สุด”

นี่คือหลักการสามข้อของวิธีการต้านทานน้อยที่สุด:

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

บทที่ 1: แผน

ความคิดประเภทเว็บไซต์ชื่อโดเมนและโฮสติ้งของคุณ.

ก่อนที่คุณจะตั้งค่าเว็บไซต์คุณจะต้องมีแผน

แดกดันตามที่อาจฟังดู ’80s แสดง’ The A-Team ‘ได้สอนเราแผนดีคือ กุญแจสู่ความสำเร็จ.

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

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

แต่…

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

ให้คิดถึงสิ่งต่อไปนี้แทน

  1. แยกตัวเองออกจากเป้าหมายทางเทคนิคใด ๆ ที่คุณอาจมี. ตัวอย่างเช่นเป้าหมายของการเรียนรู้เทคโนโลยีเว็บไซต์หรือซอฟต์แวร์บางเว็บไซต์.
  2. ถามตัวคุณเองคำถามหลักหนึ่งข้อ: “ ฉันต้องการเว็บไซต์อะไร”

นี่ไม่เกี่ยวกับคุณนี่คือเป้าหมายของไซต์.

คำถามที่คุณต้องถามตัวเองก่อนตั้งค่าเว็บไซต์ของคุณ

  1. ไซต์หมายถึงอะไรเพื่อให้บรรลุ?
  2. อะไรคือ “สิ่ง” หลักที่นำเสนอผ่านเว็บไซต์? (เช่นธุรกิจผลิตภัณฑ์โพสต์บล็อกเป็นต้น)
  3. เว็บไซต์จะมีจุดประสงค์พิเศษหรือไม่? (เช่นร้านอีคอมเมิร์ซผลงานของช่างภาพ ฯลฯ )
  4. ใครคือกลุ่มเป้าหมาย?
  5. ทำไมพวกเขาถึงสนใจในหัวข้อของเว็บไซต์?
  6. ไซต์ใดบ้างที่เจ็บปวดสำหรับสมาชิกผู้ชมแต่ละคน?

เกี่ยวกับคำถาม 3 ข้อสุดท้ายนี้มาพูดคุยกันสักครู่ …

มี 2 ​​กฎหลักสำหรับการสร้างเว็บไซต์ นี่คือกฎ # 1:

 ผู้อ่าน / ผู้เยี่ยมชมมาก่อนพวกเขาคือบุคคลหลักที่เว็บไซต์ของคุณต้องพึงพอใจ.

เว็บไซต์ของคุณไม่ใช่ของคุณ มันเป็นของพวกเขา.

(กฎ # 2 เราจะหารือในอีกสักครู่)

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

“ฮึ! ผู้คนแค่ไม่เข้าใจว่าไซต์นี้เกี่ยวกับอะไร พวกเขาจะโง่ขนาดนี้ได้อย่างไร!” – คุณคิดท้ายที่สุด แต่เมื่อปรากฎว่าคนโง่เขลาเป็นคุณ.

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

ดังนั้น…นำกระดาษแผ่นนั้นมาและตอบคำถามทุกข้อด้านบน.

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

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

คุณควรทำ * นี่ * หรือ * ที่ *? ไปที่แผ่นคำตอบและค้นหา คุณควรใช้แถบข้างกว้างหรือแคบ ไปที่คำตอบค้นหาว่ามีแนวโน้มที่จะสะท้อนกับผู้อ่านเป้าหมายมากขึ้น และอื่น ๆ.

ชื่อโดเมนและเว็บโฮสติ้ง

หากคุณต้องการเป็นเจ้าของเว็บไซต์คุณต้องมีชื่อโดเมนและเว็บโฮสต์.

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

ดังนั้นโฮสต์และโดเมน …

ข่าวร้ายที่นี่ก็คือพวกเขาทั้งคู่ต้องเสียเงิน.

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

แต่มาเริ่มกันตั้งแต่ต้น.

โฮสต์เว็บ:

  • กล่าวง่ายๆคือเว็บโฮสต์เป็นที่ตั้งของเว็บไซต์ของคุณและที่ที่ผู้เข้าชมสามารถค้นหาได้ ในบางวิธีโฮสต์เว็บสำหรับเว็บไซต์ก็เหมือนกับอพาร์ทเมนท์สำหรับมนุษย์ ภายใต้ประทุนเว็บโฮสต์คือ บริษัท ที่ให้เช่าเซิร์ฟเวอร์เพื่อแลกกับเงิน (…อพาร์ทเมนต์ขนาดเล็กสำหรับเว็บไซต์ของคุณ).
  • ในการเริ่มต้นจะมีแผนการโฮสต์ที่ใช้ร่วมกันแบบมาตรฐาน คุณสามารถรับสิ่งเหล่านี้ได้ในราคาเริ่มต้นเพียง $ 3 / เดือน นี่เป็นการเปรียบเทียบที่ดีของโฮสต์เว็บยอดนิยม ตรวจสอบและตัดสินใจว่า บริษัท ใดในนั้นที่เหมาะสมกับคุณ อย่างไรก็ตามคำแนะนำของเรามีไว้สำหรับ SiteGround, A2 Hosting และ Dreamhost.

โดเมน:

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

 

คำแนะนำและเคล็ดลับในการเลือกชื่อโดเมน

โอเคดังนั้นการไปที่ผู้รับจดทะเบียนโดเมนและการซื้อโดเมนจริง ๆ เป็นเรื่องหนึ่ง แต่คุณจะเลือกชื่อโดเมนที่ถูกต้องได้อย่างไร?

มีโรงเรียนสองแห่ง:

  • ชื่อโดเมนเนม. โดเมนเหล่านั้นประกอบด้วยคำที่ไม่มีอยู่จริง คิดว่าอย่างเช่น Google.com หรือ Yahoo.com ก่อนที่ บริษัท เหล่านั้นจะมาด้วยกันคำพูดเหล่านั้นก็ไม่มีความหมายอะไรเลย ส่วนต่างของชื่อโดเมนที่มีตราสินค้าคือ … ดีมีตราสินค้าสูงน่าจดจำและง่ายต่อการแยกไซต์ของคุณจากที่อื่น.
  • ชื่อตามคำหลัก. เหล่านั้นประกอบด้วยคำที่มีอยู่ใส่ในลำดับที่อธิบายถึงวัตถุประสงค์ของเว็บไซต์ คิดว่าอย่างเช่น Pizza.com หรือ StartBloggingOnline.com ด้วยชื่อโดเมนเช่นนั้นผู้เข้าชมของคุณจะสามารถคาดเดาประเภทของเว็บไซต์ที่พวกเขากำลังจะเข้าชมได้อย่างถูกต้อง ข้อเสียคือโดเมนเหล่านั้นโดยทั่วไปจะมีแบรนด์น้อยกว่า.
  • ชื่อรวม. เหล่านี้คือโดเมนที่มีตราสินค้าและโดเมนที่ใช้คำหลักรวมกัน คิดว่า Facebook.com หรือ Copyblogger.com ชื่อดังกล่าวแนะนำบางส่วนของลักษณะของเว็บไซต์ต่อผู้เข้าชม แต่พวกเขายังคงสามารถสร้างแบรนด์ได้อย่างมาก.

หลักเกณฑ์ทั่วไปบางประการโดยไม่คำนึงถึงประเภทโดเมนที่คุณเลือก:

  • ทำให้โดเมนจดจำได้ง่าย.
  • ทำให้สั้นและง่าย. โดเมนที่ยาวขึ้นก็จะทำให้เกิดความสับสนมากขึ้น.
  • รับ. com (ถ้าเป็นไปได้). .com เป็นโดเมนหลักระดับบนสุด อย่าไปทำอะไรอย่างอื่นเลย.
  • พยายามหลีกเลี่ยงการใส่ยัติภังค์. รับชื่อของคุณในรูปแบบหยดเดียวเช่น “cakerecipes.com” แทน “cake-recipes.com”

สิ่งที่ต้องเตรียมหลังจากบทนี้:

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

ต้องการความช่วยเหลือเพิ่มเติมหรือ นี่คือการอ่านเพิ่มเติมสำหรับคุณ:

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

บทที่ 2: การออกแบบและ Wireframing

ใช้กระดาษและปากกาและรอยขีดข่วนพร้อมกับโครงสร้างเว็บไซต์ของคุณ

โอเคมาเข้าสู่ขั้นตอนการออกแบบ.

สิ่งแรกสิ่งแรกนี่คือจรรยาบรรณในการทำงานที่เรากำลังจะไปโดยที่นี่:

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

ในบทที่ 1 เราพูดถึงบางสิ่งที่เราเรียกว่ากฎ # 1 ของการสร้างเว็บไซต์ ตอนนี้เป็นเวลาสำหรับกฎ # 2:

กฎข้อที่ 2 ของการสร้างเว็บไซต์:

คิดเนื้อหาก่อน.

เนื้อหาเป็นสิ่งสำคัญในเว็บไซต์ ไม่ใช่การออกแบบ เนื้อหา.

คนเข้ามาหาเนื้อหา พวกเขาไม่ได้มาเพื่อการออกแบบ การออกแบบเป็นเพียงยานพาหนะเพื่อส่งเนื้อหา.

อย่าเริ่มต้นด้วยลักษณะที่เว็บไซต์ของคุณ เริ่มด้วยเนื้อหา เนื้อหา. เนื้อหา. เนื้อหา.

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

“จริงๆ? หน้าตาไม่สำคัญหรอกเหรอ?” – คุณถาม.

แทนที่จะให้เราเต้นแบบนี้ลองดูหน้านี้:

เว็บไซต์ที่เรียบง่าย

หน้าเว็บที่เรียบง่ายนี้เป็นคำอธิบายที่ดีที่สุดว่าการออกแบบคืออะไรและจุดประสงค์ใดที่ให้บริการออนไลน์.

ดังนั้นอย่าลืมเนื้อหาก่อน!

เนื้อหาและโครงสร้างเว็บไซต์

ตกลงดังนั้นเนื่องจากเนื้อหาเป็นสิ่งที่สำคัญที่สุดคุณต้องมี (ส่วนใหญ่) เนื้อหาไว้ล่วงหน้า หรืออย่างน้อยคุณต้องมีความคิดที่ดีว่าจะมีเนื้อหามากน้อยเพียงใดและอยู่ในรูปแบบใด.

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

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

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

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

ตัวอย่าง:

เนื้อหาโครงสร้าง

เกาด้วยกันโครงลวด

โครงร่างในการออกแบบเว็บเป็นเพียงแผนผังหน้าเว็บหรือพิมพ์เขียว – คู่มือภาพที่แสดงถึงกรอบของเว็บไซต์ (Wikipedia บอกเรา).

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

เกาโครงลวดด้วยกัน

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

ดังนั้นวิธีการโครงร่าง?

มีสองวิธีถ้าคุณเป็นมือใหม่:

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

สำหรับหลังไปที่นี่ – คำแนะนำที่ดี.

(ตรวจสอบให้แน่ใจว่าได้สร้างโครงร่างของหน้าสำคัญทุกประเภทที่คุณระบุไว้ในขั้นตอนก่อนหน้า)

สิ่งที่ต้องเตรียมหลังจากบทนี้:

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

อ่านเพิ่มเติม:

  • 9 ขั้นตอนในการวางแผนเนื้อหาเว็บไซต์
  • ยังใหม่กับการออกแบบเว็บใช่ไหม เริ่มที่นี่.

บทที่ 3: UX และ UI

อย่าประมาทความสำคัญของประสบการณ์ผู้ใช้และส่วนต่อประสานผู้ใช้

เช่นเดียวกับประสบการณ์ผู้ใช้และส่วนต่อประสานผู้ใช้.

WebDesignerDepot ให้คำจำกัดความของบทกวีที่ค่อนข้างสอง:

UI คืออานม้าโกลนและรัชสมัย.

UX คือความรู้สึกที่คุณสามารถขี่ม้าและผูกเชือกวัวของคุณได้.

สำหรับคำนิยามที่ใช้งานได้จริง:

  • UI คือสิ่งที่ผู้ใช้เห็นเมื่อพวกเขาดูไซต์ของคุณ.
  • UX เป็นสิ่งที่พวกเขารู้สึกเกี่ยวกับมัน.

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

ทั้งการออกแบบ UX และ UI เป็นหัวข้อใหญ่ในตัวเองและมีองค์ประกอบขนาดเล็กจำนวนมากที่มีบทบาทในผลลัพธ์สุดท้าย.

กล่าวโดยย่อคือมีหลายสิ่งให้เรียนรู้หากคุณเพิ่งเริ่มต้นการเดินทาง.

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

เป้าหมายของผู้ใช้

UX นั้นเกี่ยวกับเป้าหมายของผู้ใช้ … ไม่มากเท่ากับเป้าหมายของคุณ … เป้าหมายของผู้ใช้.

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

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

เป้าหมายเหล่านั้นสำเร็จได้ง่ายเพียงใด?

ถัดไปให้ความสำคัญกับคำถามต่อไปนี้:

  • ผู้เข้าชมสามารถบรรลุเป้าหมายได้อย่างง่ายดายหรือไม่ – พวกเขาสามารถรับข้อมูลที่แน่นอนที่พวกเขามาในลักษณะที่เรียบง่ายหรือไม่?

ในการตอบคำถามนี้คุณต้องกลับไปที่โครงโครงร่างโครงสร้างเนื้อหาของคุณและตรวจสอบอีกครั้ง.

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

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

ยากที่จะคิดทั้งหมดนี้ด้วยตัวคุณเองมันไม่ได้?

ขอแนะนำให้คุณตรวจสอบแหล่งข้อมูลที่ระบุไว้ในส่วน “อ่านเพิ่มเติม” ของบทนี้ … แต่คุณสามารถลอง “แฮ็ค” เพื่อพูด.

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

จดบันทึกย่อข้อสรุปอย่าทำผิดพลาดเหมือนกันกับเว็บไซต์ของคุณ.

การใช้ Emotion เป็นเครื่องมือ

เมื่อทำงานกับ UI และ UX ของไซต์ของคุณสิ่งที่คุณตั้งใจจะทำให้ผู้เยี่ยมชมของคุณรู้สึก.

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

ในการทำงานในส่วนที่เกี่ยวกับอารมณ์ของงานหนึ่งในเครื่องมือที่ดีที่สุดคือสี.

สีมีความหมายต่างกันในวัฒนธรรมที่ต่างกัน การเข้าใจความแตกต่างเหล่านั้นสามารถทำให้งานของคุณง่ายขึ้นมาก นี่คือแผ่นโกงที่ดี.

เมื่อคุณอยู่ในสนามเบสบอลของสีที่คุณต้องการใช้ (อาจเป็นไปได้) ต่อไปนี้เป็นแนวทางทั่วไปบางประการเมื่อทำงานกับสี:

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

วิชาการพิมพ์

ในหลายกรณีวิชาการพิมพ์เป็นที่ที่คุณจะชนะ (หรือแพ้) เกมสร้างเว็บไซต์.

มันง่ายมากที่จะลืมเกี่ยวกับการพิมพ์ได้อย่างสมบูรณ์และใช้ Arial กับทุกสิ่ง.

ไม่แนะนำ.

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

ขนาดใหญ่และตัวอักษรที่ยิ่งใหญ่เป็นที่นิยมมากในสมัยนี้และยังทำให้ผลงานของนักออกแบบโดยเฉพาะอย่างยิ่งงานออกแบบของผู้เริ่มต้น – ง่ายขึ้นมาก.

ลองใช้ไซต์นี้ตัวอย่าง:

bonobos

สังเกตเห็นอะไร ใช่แบบอักษรมีขนาดใหญ่มากและดูดี!

นี่คือวิธีการทำงานเกี่ยวกับเรื่องนี้:

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

การทำเช่นนี้จะช่วยเร่งกระบวนการของคุณและยังให้ผลลัพธ์ที่ยอดเยี่ยม.

ตัวอย่างเราพบแบบอักษรที่ชื่อว่า Bree Serif ใน Google Fonts ที่เราชอบ:

บรี-Serif

จากนั้นเราก็นำมันไปที่ Font Pair และเว็บไซต์แนะนำว่า Bree Serif ทำงานได้ดีกับ Open Sans ที่สมบูรณ์แบบ:

บรี-Serif-เปิดซอง

โครงสร้างสุดท้าย

ในที่สุดขั้นตอนสุดท้าย!

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

สิ่งที่ต้องเตรียมหลังจากบทนี้:

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

อ่านเพิ่มเติม: 

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

บทที่ 4: WordPress, HTML หรือเทมเพลต?

ตัดสินใจเลือกเส้นทางที่จะไป – ระบบการจัดการเนื้อหาหรือรหัสตั้งแต่เริ่มต้น

นี่คือจุดเริ่มต้นของการทำงานจริงที่สกปรกและเปื้อนมือ!

นี่อาจเป็นส่วนที่น่ากลัวที่สุดของกระบวนการ (ยอมรับ!).

เป็นเวลาที่เหมาะสมที่จะวางปากกาและกระดาษไว้และเริ่มทำงานกับซอฟต์แวร์บางอย่าง.

และออกไปทางประตูมีคำถามมากมาย …

  • ฉันควรเรียนรู้ HTML?
  • แล้ว CSS ล่ะ?
  • เทมเพลตเว็บไซต์ HTML สำเร็จรูปจะช่วยฉันได้ไหม?
  • ฉันต้องเรียนรู้ภาษาการเขียนโปรแกรมเช่น PHP หรือไม่?
  • ฉันได้ยินมาว่า WordPress เป็นวิธีสร้างเว็บไซต์ในทุกวันนี้.
  • ฉันเห็นโฆษณา Squarespace Super Bowl เกิดอะไรขึ้นกับสิ่งนั้น?
  • สิ่งนี้เรียกว่า Joomla หรือ Drupal?
  • และในและในและใน.

คำตอบสำหรับทุกคนนั้นคือใช่.

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

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

ดังนั้นนี่คือวิธีที่เราจะดำเนินการต่อจากบทนี้ไปข้างหน้า เป็นครั้งแรก, เลือกบุคคลที่กำหนดคุณดีที่สุด:

  • ก) ฉันต้องการเรียนรู้ว่าการพัฒนาเว็บเกี่ยวกับอะไรพื้นฐานทั้งหมดผลงานภายในทั้งหมดของเว็บไซต์และกลไกทั้งหมดที่ทำให้เว็บไซต์ทำงานได้.
  • ข) ฉันต้องการเรียนรู้วิธีใช้เครื่องมือสร้างเว็บไซต์ที่น่าเชื่อถือซึ่งจะช่วยยกระดับการยกของฉันได้อย่างมาก.
  • ค) ผมไม่ทราบว่าจะทำอย่างไร. ฉันแค่ต้องการเว็บไซต์ที่ฉันสามารถสร้างตัวเองและมันจะทำงานได้อย่างถูกต้อง.

ตอบแล้ว)? ไปที่บทที่ 5.

ตอบข)? ไปที่บทที่ 6.

ตอบ c)? อย่าลังเลที่จะตรวจสอบบทความนี้แล้วกลับมา (ควรช่วยคุณเลือกเส้นทางที่สมบูรณ์แบบ):

  • 8 บล็อกที่ดีที่สุดและสร้างเว็บไซต์ตรวจสอบแพลตฟอร์ม … แต่ละแพลตฟอร์มจะอธิบายพร้อมกับข้อดีข้อเสียและทรัพยากรยังแนะนำตัวเลือกที่ดีที่สุด (Wix หรือ SB) สำหรับความต้องการเฉพาะของคุณ.

คุณเคยอ่านไหม ที่ดี! ดังนั้นบุคคลใดข้างต้นอธิบายคุณได้ดีที่สุด – a) หรือ b)?

เครื่องมือที่อาจมีประโยชน์ระหว่างทาง:

  • กราฟิก: Paint.NET, Gimp, Pixlr.
  • การเขียนโค้ด: Notepad ++, TextWrangler, SublimeText.
  • การจัดการงาน: Trello.
  • ออกแบบ: โทนสี, Google Fonts, เครื่องมือจากที่นี่.
  • การถ่ายภาพ: Unsplash, AllTheFreeStock

บทที่ 5: รู้เบื้องต้นเกี่ยวกับ HTML, CSS & จาวาสคริ

เว็บไซต์มีความเป็นจริงอย่างไร

ในบทนี้เราจะชี้ให้เห็นพื้นฐานเบื้องต้นของการพัฒนาเว็บอธิบายคำศัพท์ที่สำคัญที่สุดแล้วส่งคุณไปยังแหล่งข้อมูลเฉพาะที่คุณสามารถเสริมความรู้และทักษะของคุณ.

HTML

HTML เป็นภาษาของเว็บไซต์ ทุกหน้าเว็บถูกสร้างหรือแปลงเป็น HTML ในบางช่วงเวลา.

ตัวอย่างเช่นหากต้องการดูโครงสร้าง HTML ของคำแนะนำนี้ที่คุณกำลังอ่านอยู่ที่นี่เพียงกด“ Ctrl + U” บนแป้นพิมพ์.

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

หากต้องการเรียนรู้ HTML อย่างมีประสิทธิภาพเราแนะนำให้คุณสมัครหลักสูตรใดหลักสูตรหนึ่ง (ฟรีหรือจ่ายเงิน) บนเว็บ สิ่งที่ดีที่สุดสามารถพบได้ที่ Codeacademy หรือ Treehouse.

ตัวอย่างเช่นนี่คือส่วนเฉพาะของ Codeacademy เกี่ยวกับ HTML และ CSS.

หน้าแรกของ CodeCademy

นั่นคือแนวทางที่ครอบคลุมสำหรับ HTML.

CSS

CSS – เพื่อข้ามรายละเอียดทางเทคนิคที่น่าเบื่อ – รับผิดชอบในการออกแบบทุกอย่างที่ปรากฏบนหน้าเว็บ.

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

เพื่อความเข้าใจที่ดีขึ้นเกี่ยวกับวิธีการทำงานอย่างแท้จริงให้ไปที่หลักสูตรด่วนนี้ที่ Codeacademy.

สำหรับการเรียนรู้เชิงลึกเพิ่มเติมให้ตรวจสอบส่วน CSS ที่ Codeacademy หรือ Treehouse.

JavaScript, jQuery, Bootstrap ฯลฯ.

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

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

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

แต่มันไม่ใช่ เพียงตรวจสอบหลักสูตรเริ่มต้นนี้ที่ Codeacademy (โดยวิธีนี้เป็นวิธีที่เราได้เรียนรู้ Bootstrap).

สิ่งที่ต้องเตรียมหลังจากบทนี้:

  • โดยพื้นฐานแล้วร่างแรกของเว็บไซต์ HTML / CSS ของคุณสร้างขึ้นโดยสมบูรณ์ จากตรงนั้นคุณสามารถเริ่มทำซ้ำและปรับปรุงผลลัพธ์สุดท้ายได้.

บทที่ 6: แพลตฟอร์มการสร้างเว็บไซต์

ตั้งค่าไซต์แรกของคุณหรือไม่ ลองแพลตฟอร์มเว็บไซต์ฟรีเช่น WordPress, Joomla หรือ Drupal

บทที่ 6: แพลตฟอร์มการสร้างเว็บไซต์

  • Squarespace
  • WordPress
  • Joomla & Drupal

มีผู้สร้างเว็บไซต์ออกมีมากกว่าที่คุณสามารถสั่นคลอนที่ (หากคุณเป็นคนที่สั่นคลอนในสิ่งต่าง ๆ )

โอเคตลกกัน.

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

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

เริ่มต้นด้วยสิ่งที่ง่ายที่สุดที่จะเข้าใจ:

Squarespace

แพลตฟอร์มเว็บไซต์เดียวที่โฆษณาในช่วง Super Bowl.

กล่าวโดยย่อคือโซลูชันที่มีประโยชน์มากที่ทุกคนสามารถใช้งานได้ ไม่จำเป็นต้องมีทักษะมาก่อน.

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

WordPress

สุจริตเรารัก WordPress.

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

ภาพเคลื่อนไหว WordPress

นอกจากนี้ในปัจจุบันยังเป็นแพลตฟอร์มเว็บไซต์ยอดนิยมของพวกเขาทั้งหมด ร่วมกันโดยผู้สร้างของ WordPress – Matt Mullenweg – WordPress ตอนนี้อำนาจ 25% ของอินเทอร์เน็ตทั้งหมด คนเหล่านั้นทั้งหมดอาจผิด?

ตกลงดังนั้นในการเริ่มต้นกับ WordPress คุณจำเป็นต้องมีโดเมนและโฮสติ้งของคุณเท่านั้น ซอฟต์แวร์ WordPress นั้นฟรีอย่างสมบูรณ์.

ในการเริ่มต้นโปรดติดตามเส้นทางใดเส้นทางหนึ่งต่อไปนี้:

ก)“ เส้นทางเริ่มต้นที่รวดเร็ว”

  • ไปที่นี่เพื่อเรียนรู้วิธีการติดตั้ง WordPress และเปิดตัวเว็บไซต์ของคุณในช่วงบ่าย.
  • เลือกชุดรูปแบบฟรีจากไดเรกทอรีอย่างเป็นทางการ – ตรวจสอบให้แน่ใจว่าสอดคล้องกับเป้าหมายเว็บไซต์ของคุณและเค้าโครง / การออกแบบไม่ไกลจากโครงสร้างที่คุณต้องการ (คุณจะปรับเล็กน้อย).
    • ตรวจสอบแหล่งข้อมูลทั้งสองนี้เพื่อเรียนรู้วิธีกำหนดธีมที่มีอยู่.
    • หรือคุณสามารถเลือกธีมพรีเมี่ยมอเนกประสงค์ที่สามารถปรับได้ผ่านส่วนต่อประสานผู้ใช้ที่ใช้งานง่าย (ไม่มีการเข้ารหัส) ธีม X เป็นตัวอย่างที่ดีของสิ่งนี้.
  • ติดตั้งปลั๊กอินที่ได้รับความนิยมและดีที่สุดบางส่วนเพื่อรับคุณสมบัติพิเศษ.

b)“ เส้นทางในเชิงลึก”

  • เริ่มต้นด้วยการเรียนรู้ WordPress ผ่านหลักสูตรออนไลน์ Treehouse เสนอสิ่งที่น่ากลัว.
  • เลือกธีมและปลั๊กอินของคุณเหมือนด้านบน อีกวิธีหนึ่งคือสร้างธีมของคุณเองจากพื้นดินขึ้นมา.

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

Joomla และ Drupal

แม้ว่าจะแตกต่างกันเล็กน้อย แต่ Joomla และ Drupal เป็นระบบจัดการเนื้อหาที่ยอดเยี่ยมสำหรับโครงการเว็บขั้นสูง.

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

บางครั้งขึ้นอยู่กับความซับซ้อนของโครงการของคุณพวกเขาอาจต้องใช้เวลามากขึ้นในการเป็นผู้เชี่ยวชาญและมีความพยายามมากขึ้น.

สำหรับการฝึกอบรมเชิงลึกเพิ่มเติมมีหลักสูตรที่ยอดเยี่ยมบน Lynda.com ทั้งสำหรับ Joomla และ Drupal.

สิ่งที่ต้องเตรียมหลังจากบทนี้:

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

บทที่ 7: การออกแบบที่ตอบสนองต่อมือถือ

ผู้คนมากกว่า 60% ใช้โทรศัพท์มือถือและแท็บเล็ตเพื่อท่องเว็บ

การตอบสนองมือถือเป็นสิ่งสำคัญอย่างยิ่งในการสร้างเว็บไซต์ซึ่งอาจเป็นมากกว่าที่เคยเป็นมา.

นี่คือสิ่งที่ปัญหาทั้งหมดเกี่ยวกับ:

โดยพื้นฐานแล้วในตอนนี้มีผู้ใช้โทรศัพท์มือถือมากขึ้นในการเข้าถึงเว็บมากกว่าที่เคยเป็นมา ในความเป็นจริงคาดว่าขณะนี้มีผู้ใช้อินเทอร์เน็ตบนมือถือมากกว่าผู้ใช้อินเทอร์เน็ตบนเดสก์ท็อป (75.1% เทียบกับ 52.7%).

แต่มีปัญหา.

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

ปัญหาทั่วไปบางประการ ได้แก่ :

  • แบบอักษรเล็กเกินไป,
  • เลย์เอาต์ตัวเองไม่ปรับไปที่หน้าจอขนาดเล็ก,
  • หรือเทคโนโลยีที่ใช้สร้างเว็บไซต์ที่ไม่สามารถใช้งานได้บนมือถือ.

นี่คือที่ความคิดของการตอบสนองมือถือเข้ามาเล่น.

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

นี่คือคำอธิบายที่ดีกว่า: การออกแบบเว็บที่ตอบสนองได้ดีคืออะไร?

ดังนั้นสิ่งที่ต้องทำในตอนนี้คือการตรวจสอบและตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณทำงานบนอุปกรณ์มือถือ ใช้อุปกรณ์ของคุณเองเพื่อตรวจสอบสิ่งนี้ แต่ให้ลองทดสอบมือถือของ Google หรือลองใช้เครื่องมืออย่าง Responsive Design Tester.

หากมีปัญหาคุณจะต้องแก้ไข.

วิธีแก้ปัญหาบางอย่าง:

  • การออกแบบเว็บไซต์ที่ตอบสนองได้ – วิธีการ
  • วิธีทำให้เว็บไซต์ตอบสนองในเวลาประมาณ 15 นาที

บทที่ 8: รวบรวมทั้งหมดเข้าด้วยกัน

คุณรู้พื้นฐานแล้วตอนนี้ถึงตาคุณแล้ว

เดี๋ยวก่อนเราใกล้จะถึงแล้ว!

นี่คือบทสุดท้ายในการเดินทางที่ยาวนานของเรา.

ณ จุดนี้คุณควรมีเว็บไซต์แรกของคุณที่สร้าง … ไม่ว่าจะเป็น WordPress, HTML / CSS ที่สร้างขึ้นด้วยมือ, เครื่องมือสร้างเว็บไซต์หรือเครื่องมืออื่น ๆ ที่คุณเลือกสำหรับงาน.

ในระยะสั้นขอแสดงความยินดี! แต่ยังมีอีกสองสิ่งที่ควรทำ:

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

หากนั่นเป็นครั้งแรกที่คุณอ่านทรัพยากรนี้เราขอแนะนำให้คุณกลับมาใช้ใหม่สองครั้งและถือว่าเป็นไฟล์อ้างอิงสำหรับการศึกษาต่อ.

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

สุดท้ายเราอยากรู้ … สิ่งที่ท้าทายที่สุดของคุณเมื่อพูดถึงการสร้างเว็บไซต์การพัฒนาเว็บไซต์หรือการออกแบบ กรุณาแบ่งปันความคิดเห็นหรือผ่าน Twitter พวกเราทุกคนหู!

ขอบคุณที่อ่านคุณยอดเยี่ยม!

  • Total116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map