التطبيقات التي قد تقلل من عبء "العلم" في التصميم

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

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

الجبهة

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

هذا هو الشعار الأساسي. قررت Frontify أن "القطرات" كانت أساسية هنا ، لكن يمكنهم فعل الكثير من الأشياء الأخرى ، مع الحفاظ على تناسق الشعار. فيما يلي تغييرات اللون:

وإليك مثال على أحد أشكال الشعار الأساسي:

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

مؤلف مرئي

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

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

إذا كان هناك جانب سلبي لـ Visual Composer ، فهو أنه يترك الكثير من التعليمات البرمجية الصغيرة خلفه عندما تقوم بإلغاء التنشيط والتي يجب إزالتها قبل بدء سمة جديدة. فيما يلي مثال لتصميم تم إنشاؤه من خلال Visual Composer.

مطاردة التصميم

عندما يتوقف إلهامك للتو ، ربما تسعى إليه من خلال البحث عن مواقع ويب جديدة يمكن أن تمنحك أفكارًا رائعة. قد تكون هذه مهمة تستغرق وقتًا طويلاً ، فلماذا لا تستخدم طريقة أكثر ملاءمة؟ Design Hunt هي "غرفة مقاصة" من نوع ما ، لكنها تغير مخزونها بالكامل على أساس يومي. إنه يرسم تصميمات جديدة رائعة موجودة على Pinterest و Dribble و Designer News و DesignInspiraton والمزيد وينشرها للمصممين الذين يبحثون عن بعض الإلهام والأفكار الجديدة. الآن ، يمكنك الذهاب إلى مكان واحد كل يوم والعثور على مجموعة جديدة تمامًا.

TOOKAPIC

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

مارفيلاب

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

لمعرفة المزيد حول هذه الأداة الهائلة ، قم بزيارة الموقع الإلكتروني وشاهد العرض التوضيحي - سوف تسعد بسهولة الاستخدام. واحدة من أفضل الميزات هي القدرة على إسقاط الصورة من أي مكان (حتى Dropbox والرسم التخطيطي) ومن أي نوع صورة. يمكنك أيضًا إضافة فريق إذا كان هذا مشروعًا تعاونيًا. أكبر عيب لـ Marvel هو وجود قيود على الإصدار المجاني ، لذلك ستحتاج بالتأكيد إلى الترقية. ومع ذلك ، فإن هذا سهل الاستخدام للغاية - كل شيء بجودة Justinmind.

الرسوم المتحركة CSS

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

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

ومع ذلك ، فإن Animate CSS سهل التشغيل حقًا. يمكنك تنزيله وإرفاق CSS وكذلك jQuery وأي مكونات أخرى تريدها والبدء في الرسوم المتحركة. هناك برامج تعليمية رائعة على YouTube لتبدأ بها.

مبردات

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

مولد نظام الألوان التلقائي من أجل تحدي الألوان

CIRCULUS.SVG

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

شيء بسيط لجذب الزوار بشكل أفضل

من المحتمل أن يكون SVG الدائري أفضل من CSS لإنشاء هذا النوع من العناصر. بمجرد التنزيل ، لديك 3 خيارات: يمكنك رسم قطاعاتك في محرر رسومي ، مثل Sketch ، ثم تصديرها بتنسيق SVG ، وإضافة التفاعل وإدخالها ؛ يمكنك رسم قطاعاتك بالكود ؛ أو يمكنك استخدام مولد Circulus في التطبيق مباشرة.

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

باستخدام SVG ، يمكنك رسم أي شكل تريده ، باستخدام خطوط محددة وأوامر القوس إلى "أسافين دائرية" تريدها - وإليك مثال:

بمجرد رسم كل من الأوتاد وإدخال الرمز و / أو المحتوى الخاص بك ، يمكنك ببساطة الانضمام إليهم.

ميتافلوب

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

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

جذب الانتباه بخطوط وأنماط فريدة

FONTFLAME

هذا حقًا "طفل جديد في الساحة". يحاول Fontflame تخفيف عبء واحد فقط عن المصممين - العثور على أزواج الخطوط التي تعمل حقًا. في الوقت الحالي ، لديه 10 أزواج منشورة على موقعه ولكنه يضيف يوميًا. تتضمن أمثلة الاقتران ، باستخدام مكتبة الخطوط المجانية من Google ، "Lobster-Asap" و "Roboto-Open Sans". مكتبات إضافية ستضاف قريبا. راقب هذا الموقع - سيكون لديه الكثير لتقدمه في عمليات الاقتران قريبًا.

البث المباشر

ليس تطبيقًا أو أداة - إنه بودكاست أسبوعي للمصممين والمطورين لن ترغب في تفويته. باستضافة من Paul Jarvis ، ستتمكّن من الوصول إلى الاتجاهات والتطبيقات والأدوات الجديدة والكثير من النصائح العملية حقًا.

في الرؤية

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

عند مقارنة In-Vision مع تطبيق Marvel ، من المحتمل أن تكون الاختلافات المهمة هي:

1. يحتوي InVision على ميزات أكثر من Marvel ، ولكن هذا يجعله أيضًا أكثر تعقيدًا. على سبيل المثال ، يحتوي على المزيد من ميزات التعاون المباشر ، وأداة لقطات الشاشة للتعليقات التوضيحية ، وعناصر السجل الرائعة.
2. لدى Marvel تطبيق iOS ويعمل حاليًا على تطبيقات Android و iPad - لا يحتوي InVision على هذه التطبيقات.
3. ربما يكون InVision أفضل لفريق أكبر ، أما Marvel فهو أفضل للفرق الفردية أو الصغيرة.

ستلقي التعليقات من مستخدمي كلا التطبيقين مزيدًا من الضوء على أيهما هو الأفضل لأي غرض.

ربما لديك بعض التطبيقات المفضلة التي يحب المصممون سماعها. أخبرنا بما هم عليه ، وكيف يمنحونك المزيد من الوقت لتكون فنانًا.