เนื้อหา
เมื่อ บริษัท เครื่องสำอางแฮนด์เมด Lush ต้องการพัฒนาประสบการณ์บนมือถือเป็นครั้งแรกแบรนด์จึงหันไปหาสตูดิโอดิจิตอลระดับโลก ustwo เป้าหมายคือเพื่อผลักดันสิ่งที่สามารถทำได้บนอุปกรณ์เคลื่อนที่และสร้างประสบการณ์การช็อปปิ้งและการค้นพบที่ดีที่สุดในระดับเดียวกัน นักออกแบบ Dev Morgan แนะนำขั้นตอน ...
Lush Digital มาถึงสองคนที่ต้องการสร้างประสบการณ์บนมือถือครั้งแรกโดยมีจุดประสงค์เพื่อเพิ่มเว็บไซต์และเชื่อมช่องว่างระหว่างประสบการณ์ออนไลน์และในร้านค้า
เราได้ร่วมกันสร้างทีมที่เกี่ยวข้องกับทั้งสอง บริษัท ทำให้สามารถตัดสินใจและแบ่งปันทักษะได้อย่างรวดเร็ว บทบาทของฉันคือการคิดจัดระเบียบว่าฟีเจอร์ใดบ้างที่ใช้งานได้และสร้างอินเทอร์เฟซในการออกแบบภาพนิ่งและการเคลื่อนไหว
การเริ่มโครงการเป็นโอกาสที่ดีในการฟื้นฟูความคิดและเรียนรู้สิ่งใหม่ ๆ เรากระตือรือร้นที่จะทดลองใช้ Sketch จาก Bohemian Coding เมื่อได้ยินสิ่งดีๆเกี่ยวกับเรื่องนี้
มันมีช่วงการเรียนรู้ที่ตื้นและมีคุณสมบัติที่ดีที่สุดมากมายที่ทำให้ Adobe Creative Suite และ Creative Cloud เป็นที่นิยมอย่างมากในช่วงหลายปีที่ผ่านมามันเหมือนกับการผสมผสานระหว่าง Photoshop, Illustrator และ InDesign ในบทสรุปนี้ฉันจะอธิบายขั้นตอนการทำงานประจำวันของเราเกี่ยวกับโครงการรวมถึงการส่งออกเนื้อหาและการส่งมอบให้กับนักพัฒนาของเรา
01. ตั้งผ้าใบ
การเปิดใช้ Sketch ก่อนที่คุณจะเริ่มทำงานคุณต้องตั้งค่าอาร์ตบอร์ดให้ตรงกับขนาดของ iPhone 6 - 750 x 1334 พิกเซลและวางอาร์ตเวิร์กพื้นหลังบางส่วนไว้เป็นที่ยึด ในตัวอย่างนี้ฉันจะทำตะกร้าสินค้าที่เหมือนกับเว็บไซต์ Lush
02. ใช้สัญลักษณ์
สามารถสร้างไอคอนและปุ่มที่ใช้กันทั่วไปแล้วจัดเก็บเป็นสัญลักษณ์ การสร้างสัญลักษณ์หมายความว่าการเปลี่ยนแปลงภายในอินสแตนซ์เดียวจะสะท้อนให้เห็นทุกที่ที่มีการนำกลับมาใช้ใหม่ - สะดวกหากคุณมีองค์ประกอบเดียวกันที่เกิดขึ้นในหลาย ๆ อาร์ทบอร์ด
03. เว้นระยะห่างให้ถูกต้อง
เพื่อความสอดคล้องฉันกำลังตรวจสอบการจัดแนวแนวนอนและแนวตั้งกับเส้นตารางซึ่งฉันได้ตั้งค่าไว้ใน Sketch ในกรณีนี้ฉันใช้หน่วยฐาน 30 พิกเซลเป็นตัวเว้นระยะ Sketch ช่วยให้คุณกำหนดรูปแบบและขนาดของประเภทไว้ล่วงหน้าและนำมาใช้ซ้ำในโปรเจ็กต์ซึ่งเป็นสิ่งที่ฉันกำลังทำอยู่ที่นี่
หน้าถัดไป: สามขั้นตอนถัดไป
