أفضل 5 أدوات للتصميم المتجاوب
دعني أبدأ بالقول ، لن أقوم بتضمين أية أدوات تصميم للنقر والنقر في هذه القائمة (فكر في Adobe Edge Reflow). السبب بسيط بما فيه الكفاية ، وأعتقد أنها سيئة للجميع. المصممين ، والعملاء ، والمبرمجون ... الجميع يعاني.
انها ليست مسألة جودة إخراج رمز من قبل هذه البرامج. ليس لأنه يجعل التصميم "سهل للغاية". ذلك لأنه مهما كانت هذه البرامج جيدة ، فإنها ستحد دائمًا من الأشخاص الذين يستخدمونها.
ستكون محدودة ، ولا حتى بما يمكن أن ينجزه البرنامج ، ولكن حسب ما يعتقدون أنه يمكن تحقيقه. إذا فكروا في ذلك ، من المرجح أن يقارن المستخدم العادي بأدوات مثل PowerPoint و / أو أي عدد من برامج تصميم الطباعة ، يسقط مرة أخرى في العقليات القديمة. في وهنا تكمن المشكلة. ستحاول أدوات نشر الويب المرئية دائمًا تطبيق العمليات القديمة على التقنيات الجديدة.
إن سير العمل الموجه بالفعل على شبكة الإنترنت هو الذي يحتضن المفاهيم والتقنيات الأساسية التي بنيت عليها الويب. بالتأكيد ، يمكنك استخدام أي عدد من الأدوات المرئية لإنشاء مواقع ويب متجاوبة تقنيًا ، ولكنك ستفقد هذه النقطة.
انها ليست عن تخطيط قابل للتكيف. يتعلق الأمر بجعل المعلومات في متناول أكبر عدد ممكن من الأشخاص. هناك بعض الأشياء التي لا يستطيع برنامج مثل Edge Reflow القيام بها. باختصار ، تحتاج إلى كتابة التعليمات البرمجية.
لذلك ، فإن أفضل الأدوات التي تساعدك في التصميم سريع الاستجابة هي تلك الأدوات التي تساعدك على فهم واستخدام تقنيات الويب ، وتخطيط موقعك على الويب بشكل كامل ، وكتابة رمز أفضل بكفاءة أكبر ، واختبار / تقديم تصميماتك التفاعلية للعملاء في السياق.
لنبدأ بالواضح:
1) متصفحك
لا انا لا امزح. هذا هو حرفيا أهم أداة لديك ، لأنه يوضح لك بالضبط ما يبدو عليه موقع الويب الخاص بك في ظل ظروف محددة.
كان هناك الكثير من الجدل حول ما إذا كان التصميم في المتصفح أفضل من التصميم في محرر الصور مثل Photoshop أو GIMP. اسمح لي أن أحل هذا من أجلك ...
هل سيقوم مستخدمو موقعك على الويب بإجراء استعراضهم في Photoshop؟ يمكن لمحرري الصور إنشاء صور جميلة ، وليس محاكاة التجارب الفعلية. استخدم برامج تحرير الصور لتحرير الصور. استخدم متصفحك لتصميم مواقع الويب.
لقد حان الوقت لفطم عملائنا عن نماذج بالأحجام الطبيعية المفصلة التي اعتادوا عليها. مع تغير الويب ، وتصبح عملياتنا أكثر مرونة وتكرارية ، يجب أن نتحرك.
قم بتثبيت متصفح واحد على الأقل مع كل محرك رئيسي ، واحصل على بعض ملحقات المطورين. اعتياد على النظر إلى شفرة المصدر بالطريقة التي يراها متصفحك ، لأنك ستكون هنا لفترة من الوقت.
2) تطبيق الرسم في Google Drive
من الناحية الفنية ، يمكن لأي محرّر صور مستند إلى متجه أن يقوم بالمهمة عند وضع إطارات على مواقع الويب والتطبيقات الخاصة بك. أميل إلى تثبيت إطار سطح المكتب لإصدار سطح المكتب أولاً ، وإنشاء نسخة من الملف ، وتغيير حجم اللوحة ، والانتقال من هناك. يجعل استخدام المتجهات من السهل تغيير حجم عناصرك وإعادة ترتيبها بسرعة بينما لا تزال في مرحلة التخطيط.
أنا أفضل تطبيق الرسم على جوجل درايف لعدة أسباب:
ميزات المشاركة والتعاون: تعمل Google على تبادل المعلومات بشكل أفضل من الجميع. من خلال التعليقات داخل السياق والتحرير المتزامن ودمج Hangout ، فأنا محبوبة.
الأدلة التلقائية: في كل وثيقة رسم ، يتم إنشاء الأدلة تلقائيًا استنادًا إلى أبعاد كل كائن تضعه في المستند. وهذا يجعل من السهل تصوير العناصر ذات الأحجام المتناسقة في الوثيقة ، والتي تعتبر رائعة بالنسبة للمصممين المهووسين بالشبكة مثلي.
عندما أشارك هذه الأطر مع العملاء ، فإن هذا الاتساق ذو المظهر المهني يمثل إضافة كبيرة. ومع ذلك ، أنا لست مقيدة لتلك الأدلة. أراه كبديل جيد للتطبيقات بالحجم الطبيعي التي تحاول تقييدك بالشبكة.
أوه ، إنه مجاني. أحتاج أن أقول أكثر؟
3) النماذج النمطية
على أساس بلاط ستايل ، نماذج نمطية هي عبارة عن متصفح قابل للتنفيذ مصمم لمساعدتك على تزويد عملائك بفكرة حول كيفية ظهور ألوان موقع الويب ولونه وعناصر واجهة المستخدم. نظرًا لأنه من المفترض عرضه في المتصفح ، سيكون هناك تناقضات أقل عند إنشاء موقع الويب.
وعلاوة على ذلك ، أود أن أفترض أن النماذج النمطية يمكن أن تساعد عملائنا على فصل مفاهيم UX وجماليات عقليا. وفي الحقيقة ، فإن أي شيء يساعد عملاءنا على فهم عملية تصميم الويب بشكل أفضل لا يمكن أن يكون إلا أمرًا جيدًا.
4) المقيم
Responsinator هي أداة بسيطة تعرض موقعك على الويب بأحجام مختلفة. وهو يقلد ، بطريقة أساسية للغاية ، أحجام وسياقات مختلفة للأجهزة المختلفة. هذه الأداة ليست لصالحك. تريد أن ترى كيف يبدو موقع الويب الخاص بك في أحجام أصغر؟ تغيير حجم نافذة المتصفح الخاص بك. والأفضل من ذلك ، الحصول على بعض الأجهزة المحمولة الفعلية والقيام ببعض الاختبارات الحقيقية.
يُستخدَم أفضل تطبيق ويب هذا لعرض عملائك تقريبًا سريعًا لما سيبدو عليه موقع الويب في سياقات غير جهاز سطح المكتب أو جهاز الكمبيوتر المحمول.
مرة أخرى ، هناك العديد من الأدوات التي يمكن أن تقوم بنفس الوظيفة مثل المبعوث ، وبنفس القدر من الفعالية ، أفترض. اخترت هذا واحد لأنه يقدم العديد من الصور الظلية الجهاز الواحد تلو الآخر ، لسهولة الإطلاع عليها.
5) Adobe Edge Inspect
الآن هذا هو لك. إذا كان لديك مختبر اختبار متنقل (وكلما كان بإمكانك إنشاء مختبر ، كان ذلك أفضل) إيدج فحص سيؤدي إلى مزامنة جميع أجهزتك لعرض الصفحة نفسها في وقت واحد. قم بتحديث الصفحة على جهاز واحد ، وقم بتحديثها كلها.
على عكس الآخرين في هذه القائمة ، فهذا ليس مجانيًا. ومع ذلك ، إذا كنت تستطيع تحمل ما يكفي من أجهزة الجوال لتحتاج إلى حل مثل هذا ، فربما يستحق هذا المال.
استنتاج
كما هو الحال دائمًا ، فإن أهم أصولك هي عقلك. هذه الأدوات ، وغيرها مثلها ، لا يمكنها مساعدتك إلا في طريقك. لقد اخترت ذلك لأنها تؤدي وظائف محددة جدًا تساعدني في تصميم مواقع سريعة الاستجابة. انهم لا يحدون ما يمكنني القيام به.
أفضل الأدوات هي حقا تلك التي تبقى بعيدة عن الطريق.
هل تستخدم هذه الأدوات؟ ما هي أفضل 5 أدوات للتصميم سريع الاستجابة؟ اسمحوا لنا أن نعرف في التعليقات.