พื้นฐานของการออกแบบเว็บไซต์ใหม่ – กรณีศึกษา

เผยแพร่แล้ว: 2022-03-11

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

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

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

การออกแบบเว็บไซต์ที่ไม่ดี
การออกแบบเว็บไซต์ที่ไม่ดี

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

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

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

คุณค่าของการออกแบบเว็บไซต์ใหม่ การวิจัยก่อนโครงการ

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

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

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

ขั้นตอนที่ 1: ทำความคุ้นเคยกับเนื้อหา

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

การออกแบบเว็บไซต์ที่ไม่ดี
เว็บไซต์โบราณคดีตะวันตกเฉียงใต้ก่อนออกแบบใหม่

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

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

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

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

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

กลยุทธ์เว็บไซต์และประเภทแกนเนื้อหา
รายการเนื้อหาหลักของเว็บไซต์

ขั้นตอนที่ 2: สร้างโฟกัส ลดความซับซ้อน จัดระเบียบ.

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

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

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

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

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

การวิเคราะห์เว็บไซต์และแผนที่เนื้อหา
เนื้อหาหลักสองส่วน – สิ่งที่ต้องทำ และ สถานที่

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

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

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

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

โครงสร้างองค์กรที่เหลือตรงไปตรงมา:

  • หน้า “เกี่ยวกับ” เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับองค์กร
  • ลิงค์ตรงไปยังหน้า “ร้านค้า”
  • เพจ “บริจาค”
  • หน้า “อัพเดท” ใหม่

หน้าร้านค้าและการบริจาคเป็นผู้ทำเงิน ดังนั้นจึงจำเป็นต้องรวมไว้ในการนำทางหลัก

เมื่อพิมพ์เขียวขององค์กรเสร็จสมบูรณ์ ก็ถึงเวลาเชื่อมต่อเนื้อหาจริง

ขั้นตอนที่ 3: รับลูกค้าที่เกี่ยวข้อง

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

สำหรับ Archeology Southwest ฉันได้สร้าง Google Doc ที่มีแผนผังไซต์ และขอให้ลูกค้าทำการแมปเนื้อหาเก่ากับโครงสร้างใหม่

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

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

สร้างโครงสร้างภาพผ่าน Wireframing

ในขั้นตอนนี้ ฉันเริ่มให้งานมีโครงสร้างที่มองเห็นได้ เพื่อให้ระบบทำงานได้ดีและผสมผสานแนวคิดที่ว่า "ทุกอย่างเกี่ยวข้องกับตำแหน่ง" ได้สำเร็จ ฉันได้สร้างความสัมพันธ์แบบสองทิศทางระหว่างประเภทโพสต์

นี่คือแนวคิดพื้นฐาน: เมื่อผู้เยี่ยมชมเข้ามาที่เว็บไซต์ Archeology Southwest และเลือก Grand Canyon พวกเขาจะเห็นข้อมูลเกี่ยวกับสถานที่นั้น แต่พวกเขาจะพบข้อมูลที่เกี่ยวข้องกับโครงการ งานกิจกรรม การจัดแสดง และสิ่งอื่น ๆ ที่ผู้ดูแลเว็บไซต์ทำเครื่องหมายเป็นตำแหน่ง- เฉพาะเจาะจง.

เนื่องจากลิงก์เป็นแบบสองทิศทาง ผู้เยี่ยมชมจึงสามารถไปที่แกรนด์แคนยอนได้โดยไปที่หน้าโครงการ ในที่สุดฉันก็ลงเอยด้วยสิ่งนี้:

เค้าโครงและแนวคิดการออกแบบเว็บ
แนวคิดการจัดวางหน้าเว็บไซต์

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

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

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

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

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

ให้โฮมเพจมีเป้าหมายที่ชัดเจน

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

จุดสนใจหลักใหม่จะหมุนรอบบล็อกของสถานที่รอง ตามด้วยทุกสิ่งที่เกิดขึ้นใน archaeologysouthwest.org (นิตยสาร บล็อก กิจกรรม จดหมายข่าว และอื่นๆ ในปัจจุบัน) นี่คือการทำซ้ำของกระบวนการเลย์เอาต์:

หน้าเว็บไซต์ที่ออกแบบใหม่ ซึ่งเป็นส่วนหนึ่งของกระบวนการออกแบบเว็บไซต์ใหม่
การวนซ้ำโครงร่างและการออกแบบขั้นสุดท้ายสำหรับการออกแบบเว็บไซต์ใหม่ (เวอร์ชัน V1, V2, V3)

ด้วย V1 (ซ้าย) ฉันออกแบบเลย์เอาต์พื้นฐานที่คล้ายกับโฮมเพจดั้งเดิม มีลำดับชั้นไม่มากนัก สิ่งแรกที่ผู้ใช้เห็นคือสถานที่เด่น แต่จากที่นั่น ผู้ใช้มักจะหลงทางในคอลัมน์

สำหรับ V2 (กลาง) ฉันได้สร้างคอลัมน์แยกต่างหากที่ง่ายต่อการติดตาม อย่างไรก็ตาม ยังสามารถปรับปรุงได้ นี่คือจุดที่ความรู้ของเนื้อหามีบทบาทสำคัญ ฉันรู้ว่า Archeology Southwest ไม่เคยมีกิจกรรมมากกว่าสองครั้งที่เกิดขึ้นในแต่ละครั้ง ดังนั้นจึงไม่สมเหตุสมผลที่จะมีที่ว่างสำหรับหลายกิจกรรมในหน้าแรก

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

ตำแหน่งเด่น > ยินดีต้อนรับ > นิตยสาร > กิจกรรม > ข่าว

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

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

รวมคู่มือสไตล์แบรนด์

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

สีของแบรนด์และตัวอักษรสำหรับการออกแบบเว็บไซต์ใหม่
คู่มือสไตล์ – สีของแบรนด์และรูปแบบตัวอักษรสำหรับเว็บไซต์ที่ออกแบบใหม่

ทดลองกับการรวมตัวพิมพ์

วิชาการพิมพ์มีความสำคัญต่อการออกแบบเว็บที่ดี ดังนั้นเราจึงต้องหาแบบแผนประเภทของเราตั้งแต่เนิ่นๆ เอกลักษณ์ทางโบราณคดีตะวันตกเฉียงใต้ส่วนใหญ่ใช้แบบอักษร Univers Condensed Light และ Adobe Caslon ไม่มีกฎเกณฑ์ว่าจะใช้ Adobe Caslon เมื่อใด แต่ฉันสังเกตเห็นว่าไม่ได้ใช้บ่อยเท่า Univers

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

แนวคิดการออกแบบตัวพิมพ์เว็บ ส่วนหนึ่งของข้อเสนอการออกแบบเว็บไซต์ใหม่
การศึกษาแบบอักษรสำหรับ Adobe Caslon และ Univers สำหรับการออกแบบเว็บไซต์ใหม่

หลังจากทำการเปรียบเทียบแบบอักษร เป็นที่ชัดเจนว่า Adobe Caslon ควรเป็นแบบอักษรของชื่อเรื่องและ Univers จะใช้สำหรับคำบรรยาย การกำหนดหัวข้อหลักในกรณีประโยคทำให้แบรนด์มีความรู้สึกเป็นส่วนตัวมากขึ้น ในขณะที่ตัวพิมพ์ใหญ่ทั้งหมดสร้างบรรยากาศองค์กรมากขึ้น

ขัดรูปลักษณ์และความรู้สึกของเว็บไซต์

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

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

การออกแบบเว็บตอบสนองสำหรับเดสก์ท็อปและอุปกรณ์มือถือ
เค้าโครงเว็บที่ตอบสนองสำหรับเดสก์ท็อปและมือถือ

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

การออกแบบเว็บใหม่สำหรับเดสก์ท็อปและมือถือ
การเปรียบเทียบการออกแบบเดสก์ท็อปและมือถือสำหรับเว็บไซต์ที่ออกแบบใหม่

ฉันยังอัปเดตปุ่มบริจาคในส่วนท้ายให้เป็นมิตรมากขึ้นโดยเปลี่ยนจากปุ่มเป็นประโยค

จบอย่างแข็งแกร่ง: คำนึงถึงรายละเอียด

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

การออกแบบเว็บไซต์ที่ยอดเยี่ยม
การออกแบบเว็บไซต์ขั้นสุดท้ายสำหรับโบราณคดีตะวันตกเฉียงใต้

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

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

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

การออกแบบเว็บใหม่สร้างขึ้นจากพื้นฐานของการวางแผนอย่างรอบคอบ

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

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

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

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