เริ่มต้นใช้งาน UX Design ใน Sketch

ไพรเมอร์สำหรับนักออกแบบ UX และนักศึกษาด้านการออกแบบ

เราเขียนบทความเกี่ยวกับเคล็ดลับ Sketch ไว้มากมายที่ UX Power Tools ในช่วงสองปีที่ผ่านมาและฉันต้องการจัดระเบียบในลักษณะที่จะช่วยให้นักออกแบบที่เพิ่งเริ่มเข้ามาใน UX

ฉันควรพูดถึงว่าฉันจะไม่อภิปรายว่าเครื่องมือใดดีที่สุด - ฉันแค่คิดว่าคุณรู้แล้วว่า Sketch เป็นสิ่งที่ดีที่สุด (ตอนนี้) และต้องการทราบวิธีใช้เป็นนักออกแบบ UX

ฉันได้แบ่งบทความของเราออกเป็น 5 ส่วนเพื่อทำแผนที่ว่าฉันคิดว่านักออกแบบหน้าใหม่ก้าวหน้าจากมือใหม่ไปเป็นผู้เชี่ยวชาญ:

  • รับไอเดียออกมา
  • เริ่มต้นใช้งาน
  • เริ่มเร็วขึ้น
  • เริ่มฉลาดขึ้น
  • รับภาพ

รับความคิดออกมา

การออกแบบ UX เริ่มต้นก่อนที่คุณจะไปถึงเครื่องมือ - เริ่มต้นที่จุดที่เอาความคิดออกจากหัวของคุณ (... จริง ๆ แล้วเริ่มวิธีก่อนหน้านั้นกับการวิจัย แต่ให้บทความนี้ไม่เกิน 20 นาที)

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

เมื่อคุณพร้อมที่จะรับบางสิ่งบนหน้าจอมีเครื่องมือสองอย่างที่ฉันคิดว่าช่วยได้ดีจริง ๆ สิ่งแรกคือเครื่องมือ InVision ที่ชื่อว่า Freehand ซึ่งเราตรวจสอบ:

เครื่องมือที่สองที่เอื้อต่อขั้นตอนการออกแบบนี้คือชุดของห้องสมุดพรีเมี่ยมสำหรับ Sketch ที่เรียกว่า Flowkit โดย Matt D. Smith มันคุ้มค่ากับป้ายราคา $ 29

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

เริ่มต้นใช้งาน

จุดแข็งที่ยิ่งใหญ่ที่สุดของ Sketch for UX Design คือความสำคัญในการทำสิ่งที่ทำซ้ำได้และรวดเร็ว

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

แต่การออกแบบที่ยอดเยี่ยมนั้นดีพอ ๆ กับการออกแบบ เราชอบอุปมาของการทำอาหาร:

และเรายังชอบที่จะขยายแนวคิดของ Stylesheets จากรหัสไปสู่การออกแบบ (เนื่องจากเราเขียนสิ่งนี้ระบบการออกแบบได้ระเบิดไปยังที่เกิดเหตุจริงๆ แต่เทคนิคเหล่านี้ส่วนใหญ่ยังคงมีความเกี่ยวข้องในปัจจุบัน):

และสุดท้ายสำหรับบทความเกี่ยวกับวิธีเริ่มโครงการใน Sketch ซึ่งครอบคลุมทั้งหมด (ขวาไปที่โครงสร้างโฟลเดอร์):

ด้วยบทความโบนัสเกี่ยวกับวิธีตั้งค่าเลย์เอาต์ใน Sketch อย่างรับผิดชอบ:

เริ่มเร็วขึ้น

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

มีเครื่องมือและปลั๊กอินใหม่ ๆ ออกมานับล้านครั้งแล้วตั้งแต่ที่เราเขียนบทความนี้ แต่ตามความจริงแล้วสหายที่ดีที่สุดสำหรับ Sketch ยังไม่ได้เปลี่ยนแปลงในความคิดของฉัน (Nudg.it ได้รับการสนับสนุนใน Sketch, Anima ยังคงมีประโยชน์ด้วยแม้ว่าบางส่วนจะถูกนำไปใช้กับฟังก์ชั่นเลย์เอาต์ของ Sketch):

เคล็ดลับและลูกเล่น

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

เริ่มฉลาดขึ้น

คุณรู้วิธีการตั้งค่าโครงการคุณได้เรียนรู้วิธีการได้เร็วขึ้นด้วย Sketch และตอนนี้ถึงเวลาที่จะนำทุกอย่างไปใช้กับการออกแบบ UX

ดังที่ฉันได้กล่าวไว้ก่อนหน้านี้ Sketch เหมาะอย่างยิ่งสำหรับการออกแบบ UX เพราะมันทำให้การทำซ้ำความสม่ำเสมอและโมดุลที่ง่าย นี่คือตัวอย่างเล็ก ๆ น้อย ๆ ของการใช้ Sketch เพื่อสร้างองค์ประกอบ UI อย่างชาญฉลาด (และทั้งหมดมาพร้อมกับ freebies free):

การจัดการไอคอนและกราฟิกอย่างมีประสิทธิภาพ

เราจะครอบคลุมด้านการออกแบบด้านภาพของ UX ในส่วนถัดไป แต่การจัดการกับกราฟิกมักอยู่นอกวงล้อของนักออกแบบ UX แทนที่จะกังวลเกี่ยวกับการสร้างไอคอนให้ใช้วิธีการใช้งานอย่างชาญฉลาดมากขึ้น:

สัญลักษณ์ที่ซ้อนกันสามารถทำให้เป็นบิตได้โดยอัตโนมัติ:

ในที่สุดฉันจะไม่ต้องรอถ้าฉันไม่ได้ชี้ให้เห็นถึงความก้าวหน้าที่ยิ่งใหญ่ที่สุดของ Sketch ในช่วง 12 เดือนที่ผ่านมา - ห้องสมุด:

รับภาพ

ราวกับว่าทั้งหมดยังไม่เพียงพอนักออกแบบ UX ในวันนี้มีมาตรฐานที่สูงกว่ามากในการออกแบบภาพ

เมื่อฉันเริ่มต้นในการออกแบบ UX ฉันพบว่ามันยากที่จะทำความคุ้นเคยกับ "วัสดุ" ที่ฉันต้องการในการออกแบบด้วย: อัตราส่วนภาพขนาดตัวอักษรน้ำหนักความคมชัดของสี ฯลฯ

เพื่อให้ดีขึ้นฉันเริ่มต้นด้วยการคัดลอกผลิตภัณฑ์ที่มีอยู่เพื่อให้ฉันรู้สึกว่าการประกอบ UI นั้นเป็นอย่างไร

เรากล่าวถึงปีที่แล้วและให้ลิงก์ไปยังผลิตภัณฑ์ทั่วไปสองสามชิ้นที่สร้างขึ้นใหม่ใน Sketch (แม้ว่าบางส่วนจะได้รับการออกแบบใหม่)

จากนั้นคุณสามารถเริ่มใช้เทคนิคเล็ก ๆ น้อย ๆ เพื่อเพิ่มไหวพริบในการออกแบบของคุณ:

แต่อย่าลืมว่าข้อมูลตัวอย่างที่แม่นยำนั้นมีความสำคัญต่อการออกแบบภาพเหมือนกับภาพ:

* เราไม่เคยเขียนตอนที่ 2

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

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

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

เมื่อฉันไม่ได้รวบรวมบทความ Sketch ใน Medium ฉันจะทำงานกับเครื่องมือออกแบบ Sketch ที่ UX Power Tools เพื่อให้คุณเป็นนักออกแบบที่ดีและมีประสิทธิภาพยิ่งขึ้น

ติดตามเครื่องมือไฟฟ้าของ UX บน Twitter
ติดตามฉันบนทวิตเตอร์