مجموعة أدوات المصمم: مهام سير العمل والبرامج والمواقع الإلكترونية

نشرت: 2020-12-17

تمامًا مثل مطوري البرامج وكتاب المحتوى وأشخاص التسويق وما إلى ذلك ، يحتاج المصممون إلى مجموعة أدوات جيدة لمساعدتهم في التعامل مع العمل اليومي. ما حاولنا القيام به هنا هو تحديد مثل هذه الأدوات وسير العمل والطريقة التي يمكنك بها دمجها لتسريع عملك وتقليل فرصة الأخطاء والأخطاء.

تجميع المعلومات

عندما يأتي مشروع جديد ، فإن الساعات القليلة الأولى تتعلق في الغالب بجمع المعلومات حوله - ما هي المشاكل التي يواجهها العميل ، وما هي أهدافه ، وما الذي يعجبه ، وما إلى ذلك. خلال هذه الخطوة الحاسمة ، يجب على المصمم محاولة الحصول على قدر الإمكان من البيانات المفيدة ، والتي سيتم استخدامها لاحقًا لاتخاذ قرارات مستنيرة.

إيفرنوت

Evernote هو برنامج رائع - إنه ليس مجرد تطبيق لتدوين الملاحظات. يمكنه تخزين الملفات ، ودمجها في مجموعات ، وعلامات ، ومجموعات وما إلى ذلك. من خلال البحث القوي ، يمكنك الرجوع إلى المشاريع السابقة وما إلى ذلك. بالطبع ، الجانب الأقوى منه هو كيفية استخدامه. لديهم مبادئ توجيهية تقريبية لبعض الأساليب التنظيمية.

لقطة شاشة لصفحة Evernote الرئيسية

البريد الإلكتروني ، سلاك ، تكبير ...

التالي هو آخر واضح ، ولكن هناك سبب لإضافته - تأجيل مكالمة أو رسالة أو اجتماع فيديو قد يكون تأخيرًا كبيرًا للمشروع. في كثير من الأحيان ، تعد القدرة على مشاركة الشاشة وتصفح النماذج بالأحجام الطبيعية والإطارات السلكية والمفاهيم والتصاميم منقذًا للحياة. لا تنسى ذلك ابدا

ابحث عن الإلهام

بمجرد توفر معلومات كافية ، فإن الخطوة التالية هي جمع الإلهام - كيف يجب أن يبدو التطبيق / موقع الويب ، وما هو النمط ، وما هو الهدف ، وما إلى ذلك. هل هناك أي أفكار رائعة لاستخدام التكنولوجيا الجديدة أو أنواع مختلفة من الوسائط ؟ يبحث جميع المصممين عن الإلهام من اليسار واليمين - مواقع الويب والكتب والمجلات وأي شيء.

Dribbble و Behance والمواقع المشابهة

لهذا السبب بالذات (ولكي يتفاخر المصممون) توجد مواقع مثل Dribbble. هناك ، يمكننا ، نحن المصممين ، استعراض الأفكار والأساليب التي تحل المشكلات التي نواجهها حاليًا. في بعض الأحيان ، يكون الهدف هو إنشاء "صفحة مبيعات عامة للخدمة أ". تحتوي صفحة المبيعات هذه حرفيًا على فقرتين مع صورة مخزنة. إنه هدف غير ملهم تمامًا ، لكنه واقعي. حسنًا ، يمكن أن يكون الجمع بين الألوان والطباعة والتباعد وما إلى ذلك فريدًا إلى حد ما. ربما جرب تخطيطات مختلفة أيضًا! ويمكن أن تأتي فكرة ذلك من صفحة مقصودة عشوائية نُشرت قبل 3-4 سنوات. تعد صفحة اكتشاف 99Design أيضًا مكانًا جيدًا للبحث!

لقطة من مثال Dribbble

Awwwards

لقد وضعنا مواقع مثل Awwwards في فئة منفصلة لأنها تعرض في الواقع شيئًا تم إنشاؤه ويمكن رؤيته يعمل. والأكثر من ذلك ، أنه يركز أكثر على الطريقة الفنية ، وليس على "أي عمل تصميم". في معظم الأوقات ، تكون المواقع ثقيلة جدًا بحيث تصبح قابلة للاستخدام فقط على الأجهزة المتطورة ، ولكن لا يزال بإمكانك الحصول على الإلهام منها.

لوحة الألوان / العلامة التجارية

بالنسبة إلى تصميم جديد تمامًا ، حيث لا توجد ألوان محددة مسبقًا ، تتمثل إحدى خطوات بدء العمل في اختيار شيء يناسب الموقع الجديد. هناك طريقتان للتعامل معه - اختيار نظام ألوان موجود أو تعيين لون أساسي / ثانوي والعمل على حل النظام بأكمله بناءً عليه.

ColorHunt

توفر مواقع الويب مثل Color Hunt مجموعة من لوحات الألوان التي يصنعها المجتمع. يمكنك اختيار الألوان واستخدامها مباشرة أو اختيار الألوان الرئيسية للبدء بها. ليست جميلة المظهر ولكنها متشابهة أيضًا.

لقطة شاشة مثال مطاردة اللون

الماركة

لدى BrandColors هدف مختلف قليلاً - فهو يوفر قائمة بالعلامات التجارية الكبرى وأنظمة ألوانها. يمكنك أن تجد هناك بعض الظلال والتركيبات الرائعة التي يمكن أن تلهم تصميمك. لا تخضع الألوان لأي حقوق طبع ونشر ، ولكن نصيحتنا هي اللعب بها قليلاً بدلاً من نسخ جميع الألوان من أماكن مثل Amazon على سبيل المثال.

الأصول المميزة والمجانية

لا يوجد دائمًا وقت كافٍ للعمل على كل مكون من مكونات الموقع. في بعض الأحيان ، من الأفضل الحصول على حزمة رمز أو رسم توضيحي أو صورة مخزنة بواسطة مصمم / مصور آخر واستخدامها مباشرة.

  • Font-Awesome - مجموعة ضخمة من الرموز في أشكال الحروف الرسومية للخط
  • Envato Elements - مجموعة ضخمة من الأصول عالية الجودة بسعر جيد.
  • Unsplash - مجموعة ضخمة من الصور عالية الجودة المجانية للاستخدام
  • مولدات SVG مثل Squircley و getwaves و blobmaker
  • خطوط Adobe (المدفوعة) وخطوط Google (مجانًا)

أفضل نصيحة هنا هي العثور على عدد قليل من المواقع مثل هذه أعلاه وجعلها قريبة منك ، بحيث تقلل قدر الإمكان الوقت والجهد اللذين تبذلهما للبحث والعثور على أفضل الرسومات للوظيفة.

أدوات التصميم الرئيسية

مع انتهاء العمل الأولي ، يتعلق الأمر فعليًا ببناء التصميم. نظرًا لأن جميع البرامج التقدمية للمصممين لديها جميع الأدوات اللازمة لإنشاء تصميمات الويب / التطبيقات ، فسوف نتخطى أدوات التخطيط الشبكي.

فيجما

اختيارنا الأساسي لعمل التصميم في DevriX هو Figma. يوفر إمكانات تعاون رائعة بالإضافة إلى التطبيقات المستندة إلى المستعرض والتي يمكن لأي شخص في الفريق الوصول إليها ، سواء كان ذلك في Linux أو Mac أو Windows. استخدمنا سابقًا Adobe XD ، لكن الأعضاء الذين يعملون بنظام Linux لم يتمكنوا من استخدامه وكان Sketch مقفلاً على نظام Mac فقط.

لقطة شاشة الصفحة الرئيسية لـ Figma

المصور / مصمم التقارب

لمزيد من العمل المخصص ، يعد Illustrator أو Affinity Designer بالتأكيد بعضًا من أفضل الخيارات. في العام أو العامين الماضيين ، كانت الرسوم التوضيحية المخصصة من أكثر أجزاء مواقع الويب شيوعًا. تحكم الرسومات الكبيرة والملونة الجزء المرئي من الصفحة ، ومن المؤكد أن المزيد من الخبرة في الأدوات الصحيحة يعد أمرًا جيدًا. في هذا المكان ، يمكننا أيضًا إضافة برنامج ثلاثي الأبعاد مثل Blender لتقديم نماذج ثلاثية الأبعاد ، والتي يمكن استخدامها كأصول على صفحات الويب.

فوتوشوب / صور الانجذاب

كان Photoshop هو البرنامج الرائد لتصميم الويب. قد يبدو هذا غريبًا اليوم خاصة وأن لدينا كل هذه الأدوات الرائعة التي تركز بشكل أساسي على الويب. لكن Photoshop لا يزال أداة رائعة وغالبًا ما نستخدمها عندما تكون هناك صور تحتاج إلى بعض التحرير أو اقتصاص الأشكال / النماذج.

عرض

لكنها ليست مجرد أعمال التصميم - صورة PNG ثابتة. يركز بعض المصممين أكثر قليلاً على الرسوم المتحركة والتفاعلات. سيساعد العرض التوضيحي الجيد لكيفية تصرف العناصر عند التمرير أو التمرير أو النقر بشكل كبير على عمل مطوري الواجهة الأمامية. يمكن لكل من Figma و Adobe XD المساعدة في ذلك ، ولكن كلاهما محدود أيضًا.

برنامج ادوبي افتر ايفيكت

يعتبر After Effects أحد الخيارات الأولى للرسوم المتحركة. يوفر جميع الأدوات اللازمة لتمثيل جميع الإجراءات والرسوم المتحركة. من الجيد تذكير المصممين هنا بأن الرسوم المتحركة يجب أن تتبع قيود الويب. إضافة ضبابية الحركة ليست شيئًا يمكنك فعله. لذلك عندما تدخل في رسوم متحركة أكثر تقدمًا ، ناقش ذلك بالتأكيد مع فريق التطوير في الواجهة الأمامية أو اقرأ المزيد عن الرسوم المتحركة على الويب وما هو ممكن. الشيء نفسه ينطبق على UX و A11y.

تخزين

يركز كل من Figma و Adobe XD إلى حد كبير على السحابة ، لذلك لا داعي للقلق بشأن فقد العمل ، ولكن ليس كل شيء على هذا النحو - ملفات Photoshop و Illustrator والخطوط التي قمت بتنزيلها والصور وما إلى ذلك ، كلها موجودة على جهازك.

من الأفضل نسخها احتياطيًا وإتاحة الوصول إليها طوال الوقت ، خاصة إذا كنت تعمل على أكثر من جهاز. وعندما يتعلق الأمر بمشاركتها ، فهي سهلة للغاية.

بصندوق الإسقاط

سيكون أفضل اختيار لهذا هو Dropbox. من خلال تطبيق سطح المكتب سهل الاستخدام ، سيراقب ملفاتك ويقوم بمزامنتها مع السحابة بمجرد إجراء أي تغييرات. من هناك ، يمكنك مشاركتها مع العميل أو فريقك بنقرة واحدة.