คู่มือนินจาสำหรับวิธีการออกแบบเว็บให้ดีขึ้น
เผยแพร่แล้ว: 2017-05-10ก่อนหน้านี้ เว็บไซต์ได้รับการออกแบบมาอย่างประณีตโดยเริ่มจากจุดที่ไม่มีอะไรเลย โดยไม่มีการดำเนินการรูปแบบหรือสไตล์ที่วางแผนไว้ล่วงหน้า พวกเขาได้รับการปรับปรุงอย่างมากด้วยวิธีนี้
เปรียบเสมือนความจริงที่เฉียบคมหรือในตำนาน แต่เว็บไซต์เคยมีความคิดสร้างสรรค์และไม่แน่นอนมากขึ้นด้วยเฉดสีที่ดูเป็นธรรมชาติและการออกแบบเชิงทดลอง และบางแห่งก็มีวิดีโอเล่นอยู่เบื้องหลัง ในแต่ละแง่มุม มันสนุกและเจ๋งกว่าที่เป็นอยู่ในปัจจุบันมาก
ทุกวันนี้ เว็บไซต์อื่น ๆ ที่คุณเยี่ยมชมมีลักษณะคล้ายกับเว็บไซต์ใด ๆ ราวกับว่าสร้างขึ้นในชุดรวม บางสิ่งที่เห็นได้ชัดเจนเป็นส่วนใหญ่ ได้แก่ – การมีอยู่ของภาพฮีโร่หรือตัวเลื่อนภายในเว็บไซต์ ประกอบกับแถบนำทางที่ส่วนบนของหน้าจอ เส้นจำนวนมากที่เขียนด้วยฟอนต์แบบกำหนดเองบางรายการพร้อมกับปุ่มที่ใช้เลื่อนไปตามหน้า และด้วยคำอธิบายสั้น ๆ เกี่ยวกับผลิตภัณฑ์หรือบริการที่องค์กรนำเสนอ
เห็นได้ชัดว่าเห็นได้ชัดว่าปีนี้สิ่งที่คล้ายกันจะเหนือกว่า อย่างไรก็ตาม เพื่อให้ได้บางสิ่งที่นอกกรอบ มีบางสิ่งที่ต้องจำไว้และสิ่งที่คุณจะได้รับในวันนี้
เหตุผลเบื้องหลังการออกแบบเว็บที่สูญเสียมันเป็นสัมผัสที่สร้างสรรค์
ตามความจริงที่น่าสงสัย ไม่มีใครสามารถอธิบายได้มากนักว่า สถาปัตยกรรมของเว็บไซต์ในสถานการณ์แบบเก่านั้นค่อนข้างจะเลอะเทอะในบางโอกาส แต่กลับมีศูนย์รวมของพลังงานสร้างสรรค์และการทดลอง เท่ากับสิ่งที่เรากำลังอ่านผ่านสิ่งที่เปรียบเทียบเพียงแค่การเปลี่ยนแปลงเล็กน้อยในการจัดแผนและการแรเงา
จนกว่าจะมีประกาศเพิ่มเติม การวางแผนเว็บกลายเป็นความเฉื่อยชาอย่างยิ่งในเรื่องเอกลักษณ์และความคิดสร้างสรรค์ นั่นเป็นเพราะเราทำให้มันค่อนข้างมีความต้องการน้อยลงหรือไม่? มีแนวโน้มมากที่สุดกับรูปลักษณ์ของโครงสร้างสำเร็จรูปที่แฟชั่นทุกคนสามารถตั้งค่าไซต์ไม้ประดับได้อย่างง่ายดายตลอดเวลาเท่าที่เป็นไปได้
ตัวอย่างเช่น ในกรณีที่เราพิจารณาการใช้ Bootstrap ในช่วงสองสามปีที่ผ่านมา มันจะมีความโดดเด่นในหมู่ผู้ใช้ส่วนใหญ่ในแง่ของการวางแผนไซต์ เช่นเดียวกับในไซต์มากกว่า 25% ที่เราเข้าชมจริงทุกวันมีการสรุปการใช้ Bootstrap
จุดประสงค์พื้นฐานของการใช้งานที่สำคัญคือ Bootstrap ให้ส่วนประกอบที่ผู้ริเริ่มต้องการโดยทันที โดยคำนึงถึงเป้าหมายสุดท้ายในการวางแผนเว็บไซต์ ในลักษณะนี้การใช้มันเรียงลำดับของการเคลื่อนไหวขั้นตอน
ไม่ว่าในกรณีใด สิ่งนี้อาจทำให้ความคิดสร้างสรรค์และเอกลักษณ์หายไปตลอดกาล ดังนั้นเราจะตรวจสอบเกี่ยวกับความจริงพื้นฐานบางประการที่จะอนุญาตให้ผู้สร้างสร้างรูปแบบใหม่ให้กับพลังสร้างสรรค์ของพวกเขา และเปลี่ยนไซต์ให้เป็นพิเศษแม้โดยใช้ส่วนประกอบที่พร้อมใช้งานทันที
คุณคิดอย่างไรเกี่ยวกับเว็บไซต์ของคุณจริงๆ เป็นเพียงสถานที่สำหรับจัดเก็บและจัดเตรียมข้อมูลที่ได้รับการปรับปรุงเกี่ยวกับความสัมพันธ์ ใบสมัคร หรือรายการของคุณใช่หรือไม่ ที่จริงแล้ว ในกรณีที่คุณมองหามุมมองของผู้เชี่ยวชาญ เว็บไซต์ควรเป็นสิ่งที่แสดงถึงเรื่องราวเกี่ยวกับภาพของคุณ และดึงดูดแขกที่มาร่วมงานด้วยทุกวิถีทางที่เป็นไปได้และทำให้พวกเขาหลงเสน่ห์
แม้ว่าเรื่องราวอาจเริ่มต้นด้วยความคิดเพียงเล็กน้อยและขีดเขียนลงบนกระดาษโดยใช้ปากกา เป็นองค์ประกอบของเว็บที่จะเติมชีวิตชีวาให้กับมัน ดังนั้นเราควรดำเนินการต่อไปด้วยวิธีที่จะทำให้คุณพร้อมสำหรับโครงร่างไซต์ที่โดดเด่น
1. ใช้จินตภาพเพื่อมีส่วนร่วม
วัตถุประสงค์สำคัญที่แฟชั่นแต่ละคนต้องจำไว้ว่าแผนที่เขา/เธอใช้จะต้องมีเสน่ห์ภายนอก ในขอบเขตที่ดึงดูดความสนใจของแขกและกระตุ้นให้บุคคลนั้นดูแบบเต็มหน้า
ภาพถ่ายที่เป็นช่วงเวลาสำคัญ การแสดงภาพเคลื่อนไหว หรือการบันทึกที่สะกดจิตซึ่งช่วยในการพิจารณาของผู้ดู และยิ่งไปกว่านั้น การแนะนำเบื้องต้นโดยมีเป้าหมายสุดท้ายที่ใช้เวลานานพอที่จะเปลี่ยนผู้ดูให้กลายเป็นลูกค้าที่มีศักยภาพ
อย่างไรก็ตาม แนวคิดหลักคือการปรากฏตัวและไม่บอกและจัดสิ่งต่าง ๆ ตามความจำเป็น
เรื่องราวควรจะเต็มไปด้วยสัญลักษณ์ ทั้งภายนอกผ่านโครงร่างและด้วยคำที่ปรากฏบนหน้าจอ ออกแบบจานสีที่เข้ากับเรื่องราวที่คุณกำลังเล่าได้อย่างยอดเยี่ยม โดยมีส่วนที่กระตุ้นให้แขกทำเป้าหมายหรือทำธุระให้เสร็จสิ้นในพิมพ์เขียว เรื่องราวที่ดีจะช่วยนำทางแขก นอกจากนี้ โครงร่างควรตรงกับภาพที่ตรวจสอบได้
2. มุ่งเน้นการพัฒนาตัวละครสำหรับเว็บไซต์ของคุณ
ในขณะที่ร่างไซต์เรามักจะพูดพล่อยๆเกี่ยวกับบุคลิกของลูกค้า ความจริงก็คือหนึ่งในองค์ประกอบสำคัญของกระบวนการก้าวหน้า ดังนั้นการนำเสนอตัวละครในเรื่องของคุณที่ลูกค้าสามารถเชื่อมโยงได้จะนำไปสู่ระดับใหม่ทั้งหมด
ตัวละครสามารถเป็นของแท้และย้ายจากจุดเริ่มต้นตลอดแผนหรือสามารถมองเห็นเป็นเสียงที่ใกล้ชิดโดยเนื้อหา
ตัวอย่างเช่น คุณอาจพิจารณาตัวละครที่รู้จักกันดีซึ่งใช้พื้นที่อีเมล Mailchimp-Freddie มาสคอตตัวการ์ตูนที่เราเห็นในแผนทั้งหมด ความก้าวหน้าของบล็อกและป๊อปอัปของโลโก้นั้นมีประโยชน์ต่อองค์กรเพียงเล็กน้อย
- ประการแรกตัวละครช่วยในการส่องสว่างชื่อองค์กร เนื่องจากมีการแอบอ้างเป็นบุคคลทั่วกระดานรวมถึงสงครามครูเสดที่มีการโฆษณาแบบปากต่อปาก มีการร้องเรียนเกี่ยวกับชื่อองค์กร "Mailchimp" กระนั้น ชิมแปนซีที่ปรากฏขึ้นข้างๆ คำว่า การเรียงลำดับของชื่อที่ถูกต้องตามกฎหมาย
- นอกจากตัวละครแล้ว ยังได้กำหนดลักษณะความสนุกสนานที่องค์กรต้องการจะพรรณนาด้วยโทนสีอ่อนและภาพพื้นฐาน
- เฟรดดี้ให้เรื่องราวแก่องค์กรเมื่อพวกเขาไม่มีประเด็นต่างๆ มากมายที่จะอภิปรายในมุมมองพิเศษ ชิมแปนซีมาได้อย่างไร? ชื่อของเขามาจากไหน? เป็นต้น ตัวละครอยู่กับเรื่องราวที่คมชัดและก้าวไปข้างหน้า
3. กระตุ้นการมีส่วนร่วมผ่านการออกแบบ
เพิ่มมูลค่าของแผนด้วยส่วนประกอบที่เข้าใจง่ายซึ่งตรงกับกิจกรรมปกติ เพิ่มสัมผัสของกิจกรรมเพื่อจับที่ลูกค้าจำเป็นต้องสังเกตหรือช่วยดึงดูดสายตาไปยังส่วนประกอบเฉพาะที่มีป้ายบอกทิศทาง เช่น สลักเกลียวหรือรูปภาพที่ "เอน" ไปทางส่วนประกอบอัจฉริยะนั้น

พิจารณาผลกระทบต่างๆ ที่สามารถดึงดูดลูกค้าให้เข้ามามีส่วนร่วมกับเรื่องราวได้ ตัวอย่างเช่น การดูพารัลแลกซ์เป็นวิธีที่น่าสนใจเป็นพิเศษเพื่อช่วยส่งเสริมการพัฒนาบนหน้าจอ นั่นเป็นเหตุผลหนึ่งที่ทำให้วิธีนี้โดดเด่น
เรื่องราวที่ดีไม่จำเป็นต้องเชื่องช้า มนุษย์ขับเคลื่อนเรื่องราวของพวกเขาด้วยการเคลื่อนไหวแบบล่องลอยพื้นฐานที่จับคู่กับภาพถ่ายหมู่เพื่อช่วยให้คุณพบปะกับผู้คนทั่วไปที่อยู่เบื้องหลังองค์กร มันตรงไปตรงมาและน่าสนใจ (โปรดสังเกตการถ่ายภาพของพนักงานด้วย ท่าทางที่สนุกสนานและรูปลักษณ์ภายนอกทำให้ตัวละครของเพื่อนร่วมงานแต่ละคนเปล่งประกายออกมาได้)
4. ดำเนินการด้วยการโต้ตอบแบบไมโครที่มีความหมาย
พิจารณาส่วนประกอบย่อยในโครงร่างที่ไคลเอ็นต์จะติดต่อด้วย ไซต์เครือข่ายสังคมออนไลน์แบบเว็บช่วยกระตุ้นการมีส่วนร่วมอย่างมากโดยเฉพาะ เนื่องจากไซต์เหล่านี้มีการเผชิญหน้าขั้นพื้นฐานด้วยการโต้ตอบแบบไมโคร
เพื่อเป็นการทบทวน การโต้ตอบแบบไมโครจะใช้เวลาเพียงไม่กี่นาทีเมื่อลูกค้าดึงแผนเข้ามา ทุกครั้งที่คุณเปลี่ยนการตั้งค่า ให้สื่อสารบางสิ่งที่เฉพาะเจาะจง ลงชื่อเข้าใช้ หรือชอบสถานะที่คุณเคยเห็นการโต้ตอบแบบไมโคร ตั้งแต่การแตะที่หัวใจของ Instagram (และดูที่เปลี่ยนเป็นสีแดง) ไปจนถึงการแตะเพื่อรีทวีต แวดวงการวิพากษ์วิจารณ์เหล่านี้คือสิ่งที่ทำให้ลูกค้ากลับมา
การโต้ตอบขนาดเล็กที่มีนัยสำคัญสร้างความสนใจให้กับโครงร่าง รวมถึงระดับความสามารถสำหรับลูกค้าที่ทำให้ประสบการณ์ทั่วไปเป็นประโยชน์
Microinteractions ยังทำให้แผนสนับสนุนหรือแสวงหา เชื่อมโยงนาทีเหล่านี้กับวัตถุประสงค์หลักของไซต์ของคุณ อาจเป็นอะไรก็ได้ตั้งแต่การอนุญาตให้ลูกค้าแบ่งปันสิ่งของที่พวกเขาเพิ่งได้รับไปจนถึงการเพิ่มบางสิ่งลงในรายการเพื่อให้ยอมรับที่จะยอมรับคำเตือน
5) ให้เรื่องราวของคุณเป็นเรื่องเล่า
แต่ละเรื่องมีจุดเริ่มต้น ศูนย์กลาง และจุดสิ้นสุด
หากสถาปัตยกรรมเว็บของคุณไม่พูดถึงสตรีมเรื่องราวนี้ ลูกค้าอาจสับสนหรือหลงทางได้ นี่คือสมการที่ซับซ้อนน้อยที่สุด:
การ เริ่มต้น : โลโก้และคุณลักษณะ บอกให้ลูกค้าทราบถึงตัวตนของคุณและทำไมพวกเขาถึงมาที่ไซต์ของคุณ
Center : เรื่องราวสนับสนุนทั้งหมดที่ทำให้คุณไม่ธรรมดา คุณจะทำอะไรได้บ้างสำหรับผู้ที่อยู่ในไซต์ของคุณ อะไรจะดีสำหรับพวกเขาที่จะคาดหวัง?
สิ้นสุด : คำแนะนำที่ปฏิเสธไม่ได้ในการดำเนินการ เช่น เฟรม ความสามารถในการซื้อหรือการเชื่อมต่อกับสิ่งอื่น
6) ยึดติดกับพื้นฐาน โครงเรื่องง่าย ๆ
นี่อาจฟังดูขัดแย้งกับประเด็นที่กล่าวข้างต้น แต่เรื่องราวควรเป็นพื้นฐาน นี่ไม่ใช่ปริมาณ 1,500 หน้า โครงเรื่องตรงไปตรงมาเป็นสิ่งที่คุณสามารถชี้แจงได้ภายใน 5 วินาทีหรือน้อยกว่า
เรื่องราวควรจะได้ลูกค้าทันที ทิ้งความประทับใจ และทำให้พวกเขาต้องกลับมา ใช่ คุณสามารถทำเช่นนี้ได้ด้วยการเริ่มต้น ศูนย์กลาง และสิ้นสุด
Upstream ทำทุกอย่างบนหน้า Landing Page – ลูกค้าสามารถมองหา "ศูนย์กลาง" ของเรื่องราวได้มากขึ้น แต่ก็มีการดูทั้งสามส่วนในหน้า Landing Page ภาพและเนื้อหาเล่าถึงความต้องการและผู้คนกับ Upstream เพื่อให้ความช่วยเหลือ มีปุ่ม "รวมอยู่" บนหน้าจอและภาพก็โดดเด่นจนคุณต้องให้ความช่วยเหลือ
เรื่องราวตรงไปตรงมาและมีประสิทธิภาพ ลูกค้าคงจะจำได้ว่ามัน … และคุณ
7) เป็นมิตรกับมือถือ
ปัจจุบันเป็นเรื่องปกติที่จะเข้าถึงไซต์จากอุปกรณ์ต่างๆ ที่มีขนาดหน้าจอต่างกัน ดังนั้นจึงจำเป็นต้องพิจารณาว่าเว็บไซต์ของคุณเหมาะกับอุปกรณ์เคลื่อนที่หรือไม่ หากเว็บไซต์ของคุณไม่เหมาะกับอุปกรณ์เคลื่อนที่ คุณสามารถแก้ไขในการออกแบบที่ตอบสนองได้ (ซึ่งหมายความว่าเว็บไซต์ของคุณจะเปลี่ยนตามความกว้างของหน้าจอต่างๆ) หรือคุณสามารถสร้างเว็บไซต์สำหรับมือถือโดยเฉพาะ (เว็บไซต์แยกต่างหากที่ได้รับการเพิ่มประสิทธิภาพโดยเฉพาะ สำหรับผู้ใช้มือถือ)
การสร้างไซต์ที่สวยงามและมีประโยชน์นั้นทำได้ยากมาก เพียงแค่จำส่วนประกอบโครงร่างเหล่านี้ คุณมีองค์ประกอบเว็บที่ต้องการการตรวจสอบหรือปรับปรุงหรือไม่? หรือในทางกลับกัน คุณกำลังจัดเตรียมไซต์และหวังว่าจะได้รับแผนในอุดมคติโดยเริ่มจากขั้นตอนแรกสุด ไม่ว่าในกรณีใด มาตรฐานของสถาปัตยกรรมเว็บไซต์ที่มีประสิทธิภาพเหล่านี้สามารถช่วยให้ไซต์ของคุณน่าดึงดูด มีคุณค่า และมีความสำคัญต่อแขกมากขึ้น
8) ปรับปรุงตัวเองด้วยเทคโนโลยีใหม่
โลกของเทคโนโลยีคอมพิวเตอร์เปลี่ยนแปลงไปแทบทุกวัน และเพื่อให้ทันกับมัน ผู้เชี่ยวชาญด้านเว็บไซต์ควรได้รับการปรับนวัตกรรมให้เข้ากับการปรับเปลี่ยนในธุรกิจ ตัดส่วนของวันทำงานหรือสัปดาห์ของคุณออกและอุทิศให้กับการปรับสิ่งใหม่ ๆ ในสาขาของคุณ ค้นพบว่ามีอะไรใหม่ อะไรเอียง และอะไรที่พังทลายลงมา ในกรณีที่คุณไม่ต้องการเห็นคู่แข่งของคุณแย่งชิงธุรกิจของคุณไปโดยมีเป้าหมายในการเป็นข้อมูลล่าสุดและสดใหม่กว่าคุณ ให้คำนึงถึงเคล็ดลับนี้
วิธีที่ดีในการคงความพิเศษไว้ได้คือการสังเกตสิ่งที่แพร่หลายในศูนย์กลางการค้าของหัวข้อหรือเลย์เอาต์ เช่น ตลาด Envato เมื่อตรวจสอบหัวข้อที่มีข้อเสนอสูงสุด คุณจะสังเกตเห็นความคลาดเคลื่อนในสิ่งที่ลูกค้ากำลังค้นหาและสิ่งที่นักวางแผนต่างๆ เสนอให้
ไปยังคุณ
การวางแผนเว็บเป็นสนามทดสอบ ความสำเร็จในสายงานนั้นต้องการความยืดหยุ่นและการยืนยันเพื่อปรับให้เข้ากับทุกสภาวะที่ปรากฏ และไม่เคยพิการไม่ว่าจุดใดก็ตาม สิ่งที่คุณต้องการโดยมีเป้าหมายเฉพาะเพื่อให้ประสบความสำเร็จในอาชีพของคุณในด้านองค์ประกอบของเว็บไซต์คือความขยันหมั่นเพียรและพฤติกรรม 'ไม่ยอมแพ้' ในตอนนี้ พวกคุณจำนวนมากควรฝึกฝนเคล็ดลับเหล่านี้ในชีวิตผู้เชี่ยวชาญของคุณเป็นอย่างดี อย่างไรก็ตาม ประเด็นของฉันคือการจัดการผู้ที่ไม่ได้สติถึงความสำเร็จเหล่านี้ คำนวณมาจนถึงตอนนี้ และเพื่อเตือนบุคคลที่รู้จักพวกเขาเป็นอย่างดี