ชุดเครื่องมือของนักออกแบบ: เวิร์กโฟลว์ซอฟต์แวร์และเว็บไซต์

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

รวบรวมข้อมูล

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

Evernote

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

อีเมลหย่อนซูม ...

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

ค้นหาแรงบันดาลใจ

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

Dribbble, Behance และเว็บไซต์ที่คล้ายกัน

ด้วยเหตุนี้ (และสำหรับนักออกแบบที่จะโม้) จึงมีเว็บไซต์เช่น Dribbble ที่นั่นเรานักออกแบบสามารถเรียกดูแนวคิดและแนวทางที่แก้ปัญหาที่เรากำลังเผชิญอยู่ได้ บางครั้งเป้าหมายคือการสร้าง "หน้าขายทั่วไปสำหรับบริการ A" หน้าการขายนั้นจะมีย่อหน้าสองสามย่อหน้าพร้อมรูปถ่ายหุ้น เป็นเป้าหมายที่ไม่น่าสนใจ แต่ก็เป็นจริง การรวมกันของสีตัวอักษรระยะห่าง ฯลฯ อาจเป็นเอกลักษณ์มากขึ้น อาจลองใช้เลย์เอาต์ที่แตกต่างกันด้วย! และแนวคิดนี้มาจากหน้า Landing Page แบบสุ่มที่โพสต์เมื่อ 3-4 ปีก่อน หน้า Discovery ของ 99Design ก็เป็นจุดที่น่าค้นหาเช่นกัน!

อีกแล้ว

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

จานสี / ตราสินค้า

สำหรับงานสร้างใหม่ล่าสุดที่ไม่มีสีที่กำหนดไว้ล่วงหน้าหนึ่งในขั้นตอนในการเริ่มต้นคือการเลือกสิ่งที่เหมาะกับไซต์ใหม่ มีสองวิธีในการใช้วิธีนี้คือเลือกโทนสีที่มีอยู่หรือตั้งค่าสีหลัก / รองแล้วใช้โทนสีทั้งหมดตามนั้น

คัลเลอร์ฮันท์

เว็บไซต์เช่น Color Hunt มีชุดจานสีที่สร้างโดยชุมชน คุณสามารถเลือกและใช้สีได้โดยตรงหรือเลือกสีหลักเพื่อเริ่มต้น ไม่สวยเท่า แต่ก็คล้ายกันคือ Color Lovers

ยี่ห้อ

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

ทรัพย์สินพรีเมี่ยมและฟรี

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

• Font-Awesome - ชุดไอคอนขนาดใหญ่ในรูปแบบของอักษรร่ายมนตร์
• Envato Elements - สินทรัพย์คุณภาพพรีเมี่ยมให้เลือกมากมายในราคาที่เหมาะสม
• Unsplash - คอลเลกชันรูปภาพคุณภาพสูงที่ใช้งานได้ฟรีจำนวนมาก
• เครื่องกำเนิด SVG เช่น squircley, getwaves, blobmaker
• Adobe Fonts (ชำระเงิน) และ Google Fonts (ฟรี)

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

เครื่องมือออกแบบหลัก

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

Figma

ทางเลือกหลักของเราสำหรับงานออกแบบที่ DevriX คือ Figma มีความสามารถในการทำงานร่วมกันที่ยอดเยี่ยมรวมถึงแอปที่ใช้เบราว์เซอร์ที่ทุกคนในทีมสามารถเข้าถึงได้ไม่ว่าจะเป็น Linux, Mac หรือ Windows ก่อนหน้านี้เราใช้ Adobe XD แต่สมาชิกที่ใช้ Linux ไม่สามารถใช้งานได้และ Sketch ถูกล็อคบน Mac เท่านั้น

Illustrator / Affinity Designer

สำหรับงานที่กำหนดเองมากขึ้น Illustrator หรือ Affinity Designer เป็นตัวเลือกอันดับต้น ๆ ในปีหรือสองปีที่ผ่านมาภาพประกอบแบบกำหนดเองเป็นส่วนที่ได้รับความนิยมมากที่สุดในเว็บไซต์ กราฟิกขนาดใหญ่ที่มีสีสันเหนือครึ่งหน้าบนและประสบการณ์ที่มากขึ้นเกี่ยวกับเครื่องมือที่เหมาะสมเป็นสิ่งที่ดีอย่างแน่นอน ในที่นี้เรายังสามารถเพิ่มซอฟต์แวร์ 3 มิติเช่น Blender สำหรับการเรนเดอร์โมเดล 3 มิติซึ่งสามารถใช้เป็นเนื้อหาบนหน้าเว็บได้

Photoshop / Affinity Photo

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

การนำเสนอ

แต่ไม่ใช่แค่งานออกแบบ - PNG แบบคงที่ นักออกแบบบางคนที่ให้ความสำคัญกับกราฟิกเคลื่อนไหวและการโต้ตอบมากกว่าเล็กน้อย การสาธิตที่ดีว่าองค์ประกอบต่างๆควรทำงานอย่างไรในการวางเมาส์เลื่อนหรือคลิกจะช่วยการทำงานของนักพัฒนาส่วนหน้าได้มาก ทั้ง Figma และ Adobe XD สามารถช่วยได้ แต่ทั้งสองอย่างก็มีข้อ จำกัด เช่นกัน

Adobe After Effects

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

การจัดเก็บ

Figma และ Adobe XD ค่อนข้างเน้นระบบคลาวด์ดังนั้นคุณไม่ควรกังวลว่าจะเสียงาน แต่ไม่ใช่ทุกอย่างที่เป็นเช่นนั้น - ไฟล์ Photoshop, Illustrator, แบบอักษรที่คุณดาวน์โหลด, ภาพถ่าย ฯลฯ ทั้งหมดอยู่ในเครื่องของคุณ

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

Dropbox

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