ตัวอย่างการออกแบบเว็บไซต์

สารบัญ:

ตัวอย่างการออกแบบเว็บไซต์
ตัวอย่างการออกแบบเว็บไซต์
Anonim

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

เอฟเฟกต์ดึงดูด

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

มาดูตัวอย่างแพลตฟอร์มการซื้อขายสองไซต์กัน:

ตัวอย่างไซต์
ตัวอย่างไซต์

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

การรับรู้สี

กฎหลักในการเลือกสีคืออย่าหักโหมจนเกินไป บางครั้งสีที่เลือกอย่างถูกต้องสองหรือสามสีก็เกินพอ ตัวอย่างที่ชัดเจนของเว็บไซต์นี้คือ fb.ru นักออกแบบเว็บไซต์จำนวนมากใช้ตารางสีที่ "ปลอดภัย" ในการออกแบบเว็บไซต์ html

ตารางสีที่ปลอดภัย
ตารางสีที่ปลอดภัย

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

สีที่เข้ากันได้

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

การผสมสีเสริม
การผสมสีเสริม

T. กล่าวคือ สีตรงข้ามภายในวงกลมถือเป็นสีที่เข้ากันได้มากที่สุด หากคุณต้องการเลือกสีที่ตรงกัน 3 สี วงล้อสีก็ใช้เช่นกัน เฉพาะเส้นการจัดเรียงสีเท่านั้นที่จะถูกเปลี่ยน

Triad - การรวมกันของ 3 สี
Triad - การรวมกันของ 3 สี

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

Tetrad - การรวมกันของสี่สี
Tetrad - การรวมกันของสี่สี

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

โครงสร้างภายใน

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

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

ความผิดพลาดครั้งใหญ่ที่สุด

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

การนำทางไซต์ไม่ดี
การนำทางไซต์ไม่ดี

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

แบบฟอร์มลงทะเบียน

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

แบบฟอร์มลงทะเบียนไม่ถูกต้อง
แบบฟอร์มลงทะเบียนไม่ถูกต้อง

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

แบบฟอร์มลงทะเบียนที่ถูกต้อง
แบบฟอร์มลงทะเบียนที่ถูกต้อง

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

เทมเพลตเว็บไซต์

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

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

  • ข้อดีข้อแรกและข้อเดียวคือความเรียบง่าย ตามกฎแล้วเฟรมไซต์นั้นสร้างแบบจำลองตามทรัพยากรดังกล่าวโดยนักออกแบบที่มีประสบการณ์แล้วการออกแบบของไซต์นั้นอยู่ภายใต้ข้อกำหนดและกฎเกณฑ์บางประการ ยังคงเป็นเพียงการเติมเนื้อหาเฉพาะเรื่องและรอผู้เยี่ยมชมคนแรก ดังนั้นความเรียบง่ายและความสะดวกสบายของบริการดังกล่าวจึงดึงดูดผู้เริ่มต้น แต่ถ้าเป็นเว็บไซต์ที่จัดตั้งขึ้นเพื่อการพัฒนาอย่างจริงจังและการแข่งขันสำหรับอันดับ 1 ในเสิร์ชเอ็นจิ้น ดีกว่าที่จะปฏิเสธบริการดังกล่าว
  • จาก minuses - เทมเพลตที่ให้มาในกรณีส่วนใหญ่ไม่สามารถแก้ไขหรือเปลี่ยนแปลงได้ คุณจะต้องใช้เทมเพลตที่ให้ไว้ตลอดเวลา ความซ้ำซากจำเจเป็นข้อเสียเปรียบหลักที่เราพูดถึงในตอนเริ่มต้น เนื่องจากแต่ละไซต์จะต้องมีลักษณะเฉพาะตัวและมีลักษณะที่แตกต่างจากไซต์อื่นๆ มีข้อจำกัดมากมายที่ไม่สามารถอธิบายได้ เนื่องจากแต่ละบริการดังกล่าวมีของตัวเอง

ตอนสุดท้าย

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