เนื้อหา
- สัญญาณของความเกียจคร้าน
- ทำอย่างไรให้ถูกต้อง
- หลักการตั้งชื่อ
- ใส่รหัสสีให้กับเลเยอร์ของคุณ
- โครงสร้างและองค์กร
- แบบนี้? อ่านสิ่งเหล่านี้!
ในฐานะนักพัฒนาครีเอทีฟฉันมักจะถูกถามว่าฉันชอบรับงานสร้างสรรค์จากนักออกแบบของฉันอย่างไร โดยส่วนตัวแล้วฉันชอบที่จะรับไฟล์แบบเป็นเลเยอร์ที่มีการจำลองแทนที่จะเป็นภาพที่หั่นไว้ล่วงหน้า นี่เป็นทางเลือกส่วนตัวและฉันเข้าใจว่าไม่ใช่รูปแบบที่ต้องการสำหรับทุกคน ในความเป็นจริงดูเหมือนว่าจะมีการถกเถียงกันมากในอุตสาหกรรมเกี่ยวกับวิธีการที่ดีที่สุดในการรับโฆษณา
แม้ว่าคุณจะเลือกตัวเลือกใด แต่ฉันเชื่อว่าจำเป็นสำหรับนักออกแบบในการสร้างและส่งมอบไฟล์ที่สะอาด หลายครั้งเกินไปที่ฉันได้รับไฟล์ที่มีลักษณะคล้ายกับไฟล์ด้านล่างนี้
ใช้เวลาสักครู่ในการสังเกตว่าไฟล์นี้สร้างขึ้นมาไม่ดีและไม่เป็นระเบียบ หลักการตั้งชื่อและการจัดกลุ่มไม่มีอยู่จริง
สัญญาณของความเกียจคร้าน
เหมือนกับว่านักออกแบบของฉันมีความสัมพันธ์ใกล้ชิดกับคีย์การคัดลอกและวางของเขา การใช้ชื่อเริ่มต้นเช่นสำเนากลุ่ม 1 กลุ่ม 2 และรูปร่าง 5 เป็นสิ่งที่ยอมรับไม่ได้ นอกจากนี้การปล่อยให้องค์ประกอบที่ไม่จำเป็นอีกต่อไปเช่นกลุ่มว่างเปล่าเป็นสัญญาณของความขี้เกียจ
แน่นอนว่าเราสามารถทำงานภายใต้เงื่อนไขเหล่านี้ได้ แต่ทำไมคุณถึงต้องการ? ด้วยการปรับเปลี่ยนง่ายๆเพียงไม่กี่อย่างนักออกแบบสามารถเปลี่ยนไฟล์ที่ยุ่งเหยิงให้กลายเป็นสิ่งที่ทุกคนสามารถนำทางได้อย่างง่ายดาย
แม้ว่าคุณจะไม่มีความตั้งใจที่จะแบ่งปันงานของคุณกับผู้อื่น แต่คุณต้องกลับมาที่ไฟล์ใดไฟล์หนึ่งในภายหลัง ลองนึกดูว่าคุณจะสามารถหลีกเลี่ยงความสับสนได้มากเพียงใดโดยปฏิบัติตามกฎพื้นฐานสองสามข้อ
ทำอย่างไรให้ถูกต้อง
เริ่มต้นด้วยการจัดกลุ่ม หากการออกแบบของคุณมีส่วนหัวและส่วนท้ายพื้นฐานพร้อมกับเนื้อหาและส่วนการนำทางบางส่วนกลุ่มของคุณ (และชื่อ) ควรตรงกัน
ลองดูตัวอย่างด้านล่าง คุณจะเห็นได้ว่านักออกแบบของเราทำลายสิ่งต่าง ๆ ตามการออกแบบโดยรวม เขาตั้งชื่อที่มีความหมายให้แต่ละกลุ่มและเขาก็รวบรวมสิ่งต่างๆไว้ด้วยกัน
ด้วยการทำเช่นนี้เขาจะสร้างไฟล์ที่มีโครงสร้างและเป็นระเบียบซึ่งช่วยในการระบุส่วนประกอบหลักของแต่ละส่วนหรือกลุ่ม ใช้เวลาเพียงครู่เดียว แต่มีศักยภาพในการประหยัดเวลาได้มากมาย
หลักการตั้งชื่อ
อีกประการหนึ่งที่มักถูกมองข้าม แต่มีประสิทธิภาพของการสร้างเลเยอร์คือหลักการตั้งชื่อ
หลักการตั้งชื่อสามารถไปได้ไกล เวลาเพียงไม่กี่นาทีช่วยในการสร้างไฟล์ที่ใช้งานง่ายอย่างไม่น่าเชื่อ เพียงจำไว้ว่าเมื่อมากับชื่อที่เรียบง่ายมักจะดีกว่า
ตั้งชื่อเลเยอร์ของคุณอย่างสอดคล้องและกระชับ หากคุณเพิ่มเลเยอร์ที่เกี่ยวข้องกับการยกระดับของคุณให้ตั้งชื่อแบบนั้น หากคุณมีองค์ประกอบที่ใช้สำหรับแพลตฟอร์มแท็บด้านล่างทำไมไม่เรียกมันว่าเช่นนั้น ง่าย ๆ เข้าไว้!
ใส่รหัสสีให้กับเลเยอร์ของคุณ
ประเด็นสุดท้ายที่ฉันอยากจะพูดถึงคือตัวเลือกในการเข้ารหัสสีของเลเยอร์ของคุณ แม้ว่าสิ่งนี้อาจดูเหมือนไม่ใช่ข้อได้เปรียบอย่างมาก - และเป็นที่ยอมรับว่าบางโครงการไม่ต้องการองค์กรระดับนี้ แต่การเข้ารหัสสีสามารถมีบทบาทที่เป็นประโยชน์ได้
ในตัวอย่างด้านล่างนักออกแบบของฉันได้ใช้สี่สีที่แตกต่างกันเพื่อช่วยระบุองค์ประกอบต่างๆภายในไฟล์นี้
เมื่อฉันแบ่งส่วนนี้สำหรับโครงการของเราฉันสามารถเห็นการเชื่อมต่อระหว่างกลุ่มและเนื้อหาได้อย่างรวดเร็วด้วยการเข้ารหัสสี
ด้วยโครงการเฉพาะนี้สีเองก็มีความหมายและเกี่ยวข้องโดยตรงกับการออกแบบ บางครั้งอาจไม่เป็นเช่นนั้นเสมอไป แต่ไม่ว่าจะด้วยวิธีใดการเข้ารหัสสีก็เป็นวิธีที่ยอดเยี่ยมในการทำให้วัตถุสำคัญโดดเด่น
โครงสร้างและองค์กร
อย่างที่คุณเห็นมีหลายสิ่งที่คุณสามารถทำได้เพื่อให้นักพัฒนาและนักออกแบบคนอื่น ๆ สามารถอ่านไฟล์ของคุณได้มากขึ้น
พิจารณาระยะเวลาที่คุณใช้ในการพัฒนาการออกแบบของคุณ ลองพิจารณาใช้เวลาสักครู่ในการจัดโครงสร้างและจัดระเบียบเลเยอร์ของคุณ
นักพัฒนาของคุณ (และนักออกแบบคนอื่น ๆ ในทีมของคุณ) จะรักคุณ และมาเผชิญหน้ากับมันลึกลงไปเราทุกคนต่างก็อยากได้รับความรัก ...
คำพูด: Tammy Coron
แทมมี่โครอน เป็นนักพัฒนา iOS นักพัฒนาแบ็กเอนด์นักพัฒนาเว็บนักเขียนและนักวาดภาพประกอบ เธอเขียนบล็อกที่ Just Write Code
แบบนี้? อ่านสิ่งเหล่านี้!
- 101 เคล็ดลับเทคนิคและการแก้ไข Photoshop ให้ลองใช้วันนี้
- แบบอักษรบนเว็บฟรีที่ดีที่สุดสำหรับนักออกแบบ
- ตัวอย่างที่น่าทึ่งของการออกแบบการทดลอง
คุณมีข้อสงสัยเกี่ยวกับวิธีการจัดระเบียบงานของเพื่อนร่วมงานหรือไม่? แบ่งปันความคิดของคุณกับชุมชนในความคิดเห็นด้านล่าง!
