ความตายต่อเครื่องจักรในกระบวนการ!

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

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

“ คุณควรใช้ Sketch”
“ ระบบการออกแบบหรือ GTFO”
“ นักออกแบบที่แท้จริงออกแบบรหัส 100%”
“ โครงลวดเป็นเรื่องเสียเวลา”
“ หากคุณไม่ได้ทำต้นแบบคุณไม่ได้ทำถูกต้อง”
“ คุณต้องเริ่มต้นบนกระดาษ”

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

วิธีการเชิงเส้นแบบคลาสสิกมีลักษณะดังนี้:
การวิจัย→ร่าง→โครงร่าง→สแตติกคง→ต้นแบบ→รหัส

มันเหมือนกับเครื่องจักรผลิต Rube Goldberg ที่ใช้ทำ Doritos และ Ding-Dong วางแนวคิดลงในเครื่องประมวลผลและหลังจากได้รับการบดและปั้นเป็นรูปร่างในขณะที่ลมผ่านขั้นตอนที่ผลิตภัณฑ์สำเร็จรูปปรากฏออกด้านอื่น ๆ ! สามารถคาดเดา! ที่มีประสิทธิภาพ!

ชนิดของ

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

แฮงค์, a.k.a. “ ผู้บ่อนทำลาย”

ฉันได้ดูการค้นพบโดรี่กับลูกของฉันเมื่อเร็ว ๆ นี้และส่วนหนึ่งของวิดีโอ "การสร้าง" ยังคงกระโดดออกมาหาฉัน

ในหนังเรื่องนี้มีปลาหมึกยักษ์ชื่อ Hank:

Disney / Pixar

Septopus ในทางเทคนิค รูปแบบตัวละครของเขาเป็นงานที่หนักมากที่จะทำงานกับพวกเขาหลุดหนวดเพื่อให้เขาเคลื่อนไหวได้ ถึงกระนั้นด้วยการควบคุม 4,000 ตัวแยกกันเขาก็ท้าทายการทำงานด้วย

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

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

Disney / Pixar

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

การรักษาสำหรับกระบวนการกำหนด

ทีม Finding Dory สร้างผลิตภัณฑ์ที่ดีขึ้นเร็วขึ้นด้วยการตัดสินใจว่าความเร็วและคุณภาพที่มีความสำคัญแทนการยึดติดกับกระบวนการท่องจำ

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

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

เริ่มด้วยคำถามใหญ่ ๆ

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

เริ่มต้นจากแกนกลางของหน้าและสร้างออกไปด้านนอก
การออกแบบจุดศูนย์กลางเน้นที่สาระสำคัญที่แท้จริงของหน้า - จุดศูนย์กลาง - จากนั้นสร้างขึ้นด้านนอก ซึ่งหมายความว่าในตอนแรกคุณจะไม่สนใจสิ่งต่อไปนี้: การนำทาง / แท็บ, ส่วนท้าย, สี, แถบด้านข้าง, โลโก้ ฯลฯ คุณจะเริ่มที่จุดศูนย์กลางและออกแบบเนื้อหาที่สำคัญที่สุดก่อน
ไม่ว่าหน้านั้นจะอยู่ไม่ได้จริง ๆ คือสิ่งที่สำคัญที่สุด ตัวอย่างเช่นหากคุณกำลังออกแบบหน้าที่แสดงบล็อกโพสต์บล็อกโพสต์เองก็คือจุดศูนย์กลาง ไม่ใช่หมวดหมู่ในแถบด้านข้างไม่ใช่ส่วนหัวที่ด้านบนไม่ใช่แบบฟอร์มความคิดเห็นที่ด้านล่าง แต่เป็นหน่วยโพสต์บล็อกจริง หากไม่มีหน่วยโพสต์บล็อกหน้านี้ไม่ใช่โพสต์บล็อก
เมื่อหน่วยนั้นเสร็จสมบูรณ์คุณจะเริ่มคิดถึงองค์ประกอบที่สำคัญที่สุดที่สองในหน้า จากนั้นหลังจากองค์ประกอบที่สำคัญที่สุดที่สองคุณจะไปยังองค์ประกอบที่สามและอื่น ๆ นั่นคือการออกแบบที่สำคัญที่สุด
การออกแบบที่สำคัญที่สุดสะท้อนให้เห็นถึงโมเดล“ ให้สร้างเฟรมแล้วปล่อยเนื้อหาใน” ในขั้นตอนนั้นรูปร่างของหน้าจะถูกสร้างขึ้นจากนั้นจะรวม nav ไว้และจากนั้นทำการตลาด“ สิ่งของ”
 ถูกแทรกจากนั้นในที่สุดฟังก์ชันหลักซึ่งเป็นวัตถุประสงค์ที่แท้จริงของหน้าเว็บจะถูกแทรกลงในพื้นที่ที่เหลือ เป็นกระบวนการย้อนกลับที่ใช้สิ่งที่ควรเป็นลำดับความสำคัญสูงสุดและบันทึกไว้ในตอนท้าย

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

แต่ฉันเริ่มต้นด้วยรหัสเพื่อค้นหาว่าแนวคิดนี้ใช้ได้จริงหรือไม่ มันไม่ได้เป็น! ดังนั้นฉันจึงปรับแผนของฉันและประหยัดเวลาและพลังงานอย่างมหาศาล

แค่ถาม WMGMTCATMQITLAOT?

เมื่อคุณรู้คำถามที่ต้องการคำตอบก่อนถามตัวเอง:
“ สื่อใดให้คำตอบที่ชัดเจนที่สุดสำหรับคำถามของฉันในเวลาน้อยที่สุด?”

ในกรณีของโครงการด้านข้างของฉันคำตอบคือรหัส สำหรับหน้าบน Basecamp.com คำตอบมักเป็นข้อความหรือแบบร่าง สำหรับคุณมันอาจเป็นอย่างอื่นอย่างสิ้นเชิง

เมื่อรู้ว่าจะเปลี่ยนเกียร์

นั่นเป็นสถานที่ที่จะเริ่มต้น แต่คุณจะทราบได้อย่างไรว่าถึงเวลาที่จะเปลี่ยนไปใช้สื่ออื่น ๆ เมื่อคุณโดนโจมตี

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

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

เมื่อคุณถึงจุดนี้ให้หาชุดคำถามที่สำคัญที่สุดถัดไปและถามตัวเองอีกครั้ง:“ สื่อใดที่ให้คำตอบที่ชัดเจนที่สุดสำหรับคำถามของฉันในเวลาน้อยที่สุด?”

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

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

ใช้สื่อเพื่อประโยชน์ของคุณ

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

ยิ่งคุณเข้าใจว่าสื่อส่งผลต่องานของคุณอย่างไร - เครื่องมือชนิดนี้ทำเครื่องหมายทิ้งไว้ - ยิ่งคุณสามารถใช้มันเพื่อประโยชน์ของคุณได้มากขึ้นเท่านั้น ต้องการให้การออกแบบของคุณแสดงออก? น่าจะดีกว่าที่จะทำงานกับเครื่องมือแสดงผลเช่น Sketch, Illustrator หรือแม้แต่ * gasp * Photoshop ต้องการการออกแบบที่เบาและน้ำหนักเบาหรือไม่? ติดกับการออกแบบในรหัส

ตัวอย่างการปฏิบัติ

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

เรากำลังเปิดตัววิธีใหม่ในการทำงานกับลูกค้าใน Basecamp และงานของฉันคือการสร้างหน้าใหม่บน Basecamp.com เพื่อทำการตลาด นี่คือวิธีการเล่น:

การพิจารณาคำถามใหญ่เลือกสื่อ

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

“ สื่อใดให้คำตอบที่ชัดเจนที่สุดสำหรับคำถามของฉันในเวลาน้อยที่สุด?”

คอมพ์และร่างภาพออกมา นี่คือ slotting เป็นการออกแบบที่มีอยู่และแม่แบบที่มีอยู่ ฉันสามารถข้ามไปยังรหัสได้โดยตรง แต่มาร์กอัปเป็นเสียงรบกวนในตอนนี้ ข้อความถูกต้อง

พวงของสำเนาอ่อนหัด

การเพิ่มความจงรักภักดี

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

ทำไม?

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

ทำงานผ่านการคัดลอกการแก้ไขในรหัส

ลดความจงรักภักดีแบบคัดเลือก

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

ฉันคงอยู่ในโค้ดเป็นส่วนใหญ่ แต่ด้วย Sketch ฉันสามารถไล่ไอเดียออกมาได้เร็วกว่าที่ฉันเขียนโค้ดไว้ นอกจากนี้ยังให้ฉันเปรียบเทียบความคิดเหล่านั้นโดยตรงกับแต่ละอื่น ๆ และจะไม่ทิ้งรังของ CSS หนูจากปั่นทั้งหมด Win-win-win

Comps Sketch อันอ่อนระโหย

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

จบแล้ว

เมื่อฉันรู้สึกถึงทิศทางมันเป็นรหัสที่เหลือของวิธี ขัดข้อความคัดลอกสกรีนช๊อตและประเมินคำถามสุดท้ายที่สำคัญเสมอ:“ พร้อมส่งหรือยัง” คุณสามารถดูลูกค้าสดในหน้า Basecamp ที่นี่

นี่ไม่ใช่วิธีที่ทุกโครงการเล่นออกมา บางครั้งฉันจะวาดบางสิ่งบางอย่างใน Procreate บางครั้งฉันจะเริ่มต้นด้วยคอมพ์ภาพที่รวดเร็วและสกปรกบางครั้งฉันจะเขียนสำเนาใน Sketch บางครั้งฉันจะทำงาน 100% ในโค้ด ทุกอย่างขึ้นอยู่กับโครงการในมือ

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

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