การออกแบบเลย์เอาต์ UI ของเว็บนักฆ่าด้วย Freebies - Ultimate Guide

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

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

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

ฝึกฝนกับเทมเพลตแบบเต็ม

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

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

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

แหล่งต้นฉบับ - ดาวน์โหลด

การออกแบบหน้า Landing

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

แหล่งต้นฉบับ - ดาวน์โหลด

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

เทคนิค UI ที่ยอดเยี่ยมอีกอย่างหนึ่งคือคุณสมบัติ iPhone ขนาดเล็กแสดงกลางหน้า Martin รวมถึงช็อตช็อตตัวอย่าง iPhone, ปุ่ม App Store และรายการฟีเจอร์หลักเล็ก ๆ เมื่อผู้เข้าชมกำลังมองหารายละเอียดผลิตภัณฑ์คุณจะไม่สามารถทำสิ่งต่าง ๆ ได้ง่ายไปกว่าผ่านรายการที่จัดรูปแบบ.

แม่แบบเพิ่มเติม:

นี่คือเทมเพลต PSD ฟรีสองรายการที่เราเปิดตัวในตอนนี้:

• เทมเพลต PSD เว็บไซต์ธุรกิจ "BiZ"
• เทมเพลต PSD ของไซต์ "ThinkJuice"
• เทมเพลต PSD ของเว็บไซต์ธุรกิจมืออาชีพ
• เทมเพลต PSD ของไซต์ "Polo360"

คุณอาจสนใจสิ่งต่อไปนี้:

• แม่แบบเว็บไซต์ธุรกิจ
• เทมเพลตหน้า + บทช่วยสอน "เร็ว ๆ นี้"

การนำทางเว็บไซต์หลัก

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

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

แหล่งต้นฉบับ - ดาวน์โหลด

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

แหล่งต้นฉบับ - ดาวน์โหลด

รูปแบบเมนูทางเลือก

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

ยกตัวอย่างเช่นเมนู freebie ด้านล่างที่ออกแบบโดยเว็บไซต์ Icojam.

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

แหล่งต้นฉบับ - ดาวน์โหลด

เคล็ดลับนำทาง / บทช่วยสอน:

• สคริปต์การนำทางที่อิงกับแท็บ CSS สะอาด 50+
• แนวทางปฏิบัติและตัวอย่างที่ดีที่สุดในการนำทาง
• การสร้างการนำทางมือถือด้วย jQuery
• การเข้ารหัสการนำทาง Breadcrumb ใน CSS3
• การออกแบบการนำทางด้วย LESS CSS

เว็บฟอร์มที่สะอาดกว่า

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

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

ฟิลด์เข้าสู่ระบบ

มีตัวอย่างที่ดีของแบบฟอร์มการลงชื่อเข้าใช้ PSD เพื่อตรวจสอบ เข้าสู่ระบบ freebie ผ่านทางนี้ นักวิทยาศาสตร์ WP มีองค์ประกอบมาตรฐานทั้งหมดของคุณ ช่องป้อนข้อมูลสองช่องสำหรับเข้าสู่ระบบ / รหัสผ่านปุ่มส่งและช่องทำเครื่องหมายเพื่อจัดการคุกกี้เซสชัน.

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

แหล่งต้นฉบับ - ดาวน์โหลด

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

แหล่งต้นฉบับ - ดาวน์โหลด

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

รายชื่อผู้ติดต่อ

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

freebie ด้านล่างเป็นตัวอย่างที่ยอดเยี่ยมของการใช้พื้นผิวและไอคอนที่กำหนดเอง.

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

แหล่งต้นฉบับ - ดาวน์โหลด

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

แหล่งต้นฉบับ - ดาวน์โหลด

แบบฟอร์มการติดต่อ:

• แบบฟอร์มเข้าสู่ระบบ / การลงทะเบียน: แนวคิดและตัวอย่างที่สวยงาม
• สร้างฟอร์มเข้าสู่ระบบเอฟเฟ็กต์กระดาษซ้อน
• สร้างแบบฟอร์มการติดต่อ HTML5 / CSS3 ที่ใช้ Ajax

ริบบิ้นและแบนเนอร์

เมื่อ 6 หรือ 7 ปีก่อนมุมโค้งมนเริ่มขึ้นในแนวโน้มการออกแบบที่เป็นที่นิยม ตอนนี้เรามาไกลกว่านี้ด้วยเงาวางและริบบิ้นมุม.

แหล่งต้นฉบับ - ดาวน์โหลด

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

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

แหล่งต้นฉบับ - ดาวน์โหลด

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

ห่อมุม

เอฟเฟกต์แบนเนอร์ริบบิ้นที่เฉพาะเจาะจงมากนั้นดำเนินการโดยห่อรอบมุมหน้าของคุณ สิ่งนี้จะสร้างภาพลวงตาของหน้าเว็บของคุณแบบ 3 มิติและริบบิ้นจะพันรอบส่วนบนของเว็บไซต์ของคุณ.

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

แหล่งต้นฉบับ - ดาวน์โหลด

การออกแบบด้วยปุ่ม

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

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

แหล่งต้นฉบับ - ดาวน์โหลด

วิธีการสร้างรูปแบบต่างๆ

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

แหล่งต้นฉบับ - ดาวน์โหลด

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

แหล่งต้นฉบับ - ดาวน์โหลด

พื้นผิวไม้ + กระดาษ

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

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

แหล่งต้นฉบับ - ดาวน์โหลด

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

28 พื้นผิวไม้ความละเอียดสูง

ข้อสรุป

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