เคล็ดลับง่ายๆในการออกแบบเว็บไซต์เพื่อผลลัพธ์ที่ดี

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

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

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

เริ่มต้นด้วยความเข้าใจที่ดีเกี่ยวกับผลิตภัณฑ์ / ไซต์

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

หากคุณต้องการออกแบบแอปทำเพลงก่อนอื่นคุณควรหาแอปที่มีอยู่สักสองสามตัวมาเล่นกับพวกเขาเพื่อทำความเข้าใจเกี่ยวกับทฤษฎีที่อยู่เบื้องหลังและการทำงานขององค์ประกอบบางอย่าง

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

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

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

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

เคล็ดลับและเทคนิคเฉพาะด้านการออกแบบ:

ตอนนี้เรามาดูเคล็ดลับ UI / UX เฉพาะที่คุณสามารถใช้ในการออกแบบครั้งต่อไปของคุณ:

1 - คอนทราสต์!

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

ที่มา

ดูว่าข้อความสว่างแค่ไหน? ปุ่มสีเขียวพร้อมข้อความสีขาวตัวอักษรสีเทาอ่อน? ลองเปรียบเทียบกับ UI ที่ตัดกันมากขึ้น:

ที่มา

แบบอักษรส่วนใหญ่เป็นสีดำ (หรือเกือบดำ) โดยมีข้อมูลที่สำคัญน้อยกว่าเป็นสีเทาเล็กน้อย สีเขียวจะเข้มขึ้นซึ่งตอนนี้อนุญาตให้มีข้อความสีขาวอยู่ด้านบน

เคล็ดลับ คือ - เมื่อคุณทำงานกับข้อความเริ่มต้นด้วยสีดำบนสีขาวหรือสีขาวบนสีดำ เมื่อคุณเพิ่มองค์ประกอบอื่น ๆ และคุณจำเป็นต้องแยกกับลำดับชั้นภาพให้ลองทำตัวหนาหรือเปลี่ยนขนาดฟอนต์ก่อน หลังจากนั้นหากใช้งานไม่ได้ก็เปลี่ยนสีไป แต่ควรมีความแตกต่างไม่เกิน 30-40% (โดยทั่วไปความทึบจะตั้งไว้ที่ 70%)

2 - พื้นที่สีขาวสม่ำเสมอ

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

ในตัวอย่างต่อไปนี้ให้ดูว่าส่วนประกอบต่างๆมีช่องว่างสีขาวต่างกันอย่างไร บ้างก็เกะกะกันบ้างเว้นระยะห่างมาก มันดูไม่สอดคล้องกันมากนัก

ในทางตรงกันข้ามนี่คือตัวอย่างที่มีเนื้อหา / ประเภทของส่วนประกอบใกล้เคียงกันมากหรือน้อย แต่มีรูปลักษณ์ที่สอดคล้องกันมากขึ้น:

ที่มา

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

3 - สี

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

ตัวอย่างต่อไปนี้เป็นไปตามคำแนะนำทั้งสามข้อ - คอนทราสต์สมดุลและการใช้สีที่ดี:

ที่มา

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

ตัวอย่างจากวงล้อสีของ Adobe:

ที่มา

สีเขียวตรงกลาง แต่ค่อนข้างยากที่จะใช้ผลลัพธ์ทางด้านซ้าย / ขวา

4 - ยึดติดกับสไตล์ทั่วทั้งไซต์

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

นั่นหมายความว่าอย่างไร? มาออกแบบปุ่มกันดีกว่า เรากำหนดขนาดตัวอักษรแบบอักษรสีพื้นหลังระยะห่าง ฯลฯ และเราได้รับสิ่งนี้:

ตอนนี้ถ้าเราจะเพิ่มรูปภาพและชื่อเรื่องเราสามารถทำได้เช่นนี้:

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

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

นี่คือการออกแบบเดียวกันจากด้านบน แต่มีลักษณะโค้งมน:

มันเหมือนกัน แต่ตอนนี้รู้สึกแตกต่างกันมาก

5 - ออกแบบด้วยส่วนประกอบ

ส่วนประกอบมีอยู่ในเครื่องมือออกแบบสมัยใหม่ทั้งหมดเช่น Figma และ Adobe XD พวกเขาอยู่ที่นั่นด้วยเหตุผลที่ดีนักพัฒนาใช้ไซต์ในลักษณะที่สามารถนำกลับมาใช้ใหม่ได้มากที่สุด

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

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

ที่มา

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

ตัวอย่างโดย DevriX

สรุป:

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