พลังของการร่างด้วยปากกาและกระดาษ

ต้องการออกแบบบางอย่าง? อาจเป็นเรื่องน่าดึงดูดใจที่จะเริ่มต้นด้วยเครื่องมือที่ใช้คอมพิวเตอร์เป็นหลัก เช่น ซอฟต์แวร์โครงลวด เช่น Balsamiq หรือเครื่องมือออกแบบ เช่น Photoshop หรือ Figma สิ่งเหล่านี้มีที่ของมัน แต่ฉันอยากจะแนะนำให้ก้าวถอยหลังและเริ่มต้นด้วยปากกาและกระดาษที่ต่ำต้อย

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

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

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

หยิบกระดาษกับปากกาแล้วเริ่มกันเลย!

ทำไมต้องเริ่มต้นด้วยกระดาษ

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

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

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

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

หากคุณไม่คุ้นเคยกับเครื่องมือออกแบบ เช่น Photoshop, Sketch หรือ Figma การเริ่มต้นใช้งานและเรียนรู้วิธีใช้งานเครื่องมืออาจเป็นเรื่องยาก แทนที่จะใช้ความคิดหลายๆ อย่าง เราจบลงด้วยการใช้เวลาไปกับการค้นหาว่าปุ่มใดทำหน้าที่แทน

และเครื่องมือสร้างโครงลวดอย่าง Balsamiq? พวกเขาสร้างแนวคิดที่ดูเหมือนภาพร่าง — เส้นหยักๆ กล่องที่ไม่สมบูรณ์ — แต่พวกเขายังคงชี้ให้เราไปยังทิศทางของการทำงานกับแนวคิดเดียวและยุ่งกับมันจนกว่าจะสมบูรณ์แบบ แทนที่จะลองแนวคิดที่แตกต่างกันหลายๆ ก่อน การเริ่มต้นอย่างรวดเร็วด้วยปากกาและกระดาษ เครื่องมือ Wireframing อาจเป็นขั้นตอนต่อไปในกระบวนการ (แทนที่จะเป็นขั้นตอนแรก)

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

ย้ำกับตัวเอง: หลวม เร็ว ไม่จำเป็นต้องสมบูรณ์แบบ

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

แต่เราจะใช้เส้นและกล่องที่เร็วมากๆ ทำให้สเก็ตช์ของเรามีขนาดเล็กและรวดเร็ว

เราสามารถใช้ภาพสเก็ตช์เล็กๆ เหล่านี้เพื่อลองใช้เลย์เอาต์ของโฮมเพจได้หลายเวอร์ชัน:

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

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

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

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

ใช้แรงบันดาลใจในการช่วยในการร่างและการสร้างไอเดีย

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

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

• Dribbble ซึ่งเหมาะอย่างยิ่งสำหรับการค้นคว้าแนวคิดการออกแบบสำหรับองค์ประกอบ เช่น แบบฟอร์มการเข้าสู่ระบบ
• SiteInspire เพื่อดูว่าแนวโน้มปัจจุบันในการออกแบบที่ทันสมัยเป็นอย่างไร
• Land-book สำหรับแรงบันดาลใจในการออกแบบหน้า Landing Page
• Commerce Cream สำหรับแรงบันดาลใจในการออกแบบเว็บไซต์อีคอมเมิร์ซ
• Pttrns สำหรับแรงบันดาลใจในการออกแบบแอพมือถือ

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

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

อย่าลืมฝึกฝน!

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

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

มาทบทวนสิ่งที่เราได้กล่าวถึง:

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

มีแหล่งแรงบันดาลใจอื่น ๆ หรือไม่? สเก็ตช์ของคุณมีหน้าตาเป็นอย่างไร? ชอบที่จะได้ยินจากคุณในความคิดเห็น!

อ่านเพิ่มเติมเกี่ยวกับ Smashing Magazine

• “วาดรูปทั้งวัน” Alma Hoffmann
• “ภาพร่างด้วยมือ: สิ่งที่คุณไม่รู้ว่า Doodle ของคุณสามารถสำเร็จได้” Laura Busche
• “วิธีสร้าง Porsche 911 ด้วยภาพสเก็ตช์” Nikola Lazarevic
• “การย้ายจาก Photoshop และ Illustrator เป็น Sketch: เคล็ดลับบางประการสำหรับนักออกแบบ UI” Lachezar Petkov
• “อักษรพู่กัน: จะดีขึ้นหลังจากฝึกฝนแล้วเท่านั้น” Alma Hoffmann
• “ภาพประกอบสมัยใหม่ในยุคกลาง: การสร้างปกหนังสือด้วย Illustrator และ InDesign” Manuela Langella
• “ร่างภาพการเดินทางของผู้เยี่ยมชมเว็บไซต์แบบสดเพื่อสร้างแผนผังเว็บไซต์กับลูกค้าของคุณ” Matt Orley
• “การย้ายจากสเก็ตช์สู่ฟิกม่า: กรณีศึกษาการย้ายระบบการออกแบบ” Buzz Usborne
• “ปลดปล่อยศักยภาพเต็มรูปแบบของสัญลักษณ์ในภาพร่าง” Javier Cuello