تكرير وتوحيد تصميم Divi وعملية التطوير الخاصة بك

نشرت: 2017-06-02

مرحبًا بكم في الجزء 4 من 5 من سلسلتنا تنظيم أعمال Divi Web Design والتحكم فيها. في هذه السلسلة ، نستكشف العديد من التكتيكات والأدوات والاستراتيجيات التي ستساعدك على التغلب على الصعوبات اليومية التي نواجهها جميعًا كمصممي Divi Web. من تحسين روتينك اليومي ، إلى إنشاء الأنظمة والعمليات ، إلى توفير أفضل تجربة تصميم ويب لعملائك ؛ نحن نقدم عناصر وخطوات قابلة للتنفيذ يمكنك تنفيذها على الفور بغرض مساعدتك على التحكم في أعمال Divi Web Design سواء كنت تعمل لحسابه الخاص أو وكالة صغيرة أو فريقًا عن بُعد.

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

تكرير وتوحيد تصميم Divi وعملية التطوير

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

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

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

إنشاء الصفحة وتخطيط التنقل للموافقة عليها
تم تصميم رأس وتذييل الصفحة
الصفحة الرئيسية مصممة
صفحة (صفحات) فرعية مصممة
أرسل إلى العميل للموافقة عليه
التنقيحات على الرأس والتذييل والصفحة الرئيسية والفرعية
بمجرد الموافقة ، قم ببناء الصفحات المتبقية
قم بإنشاء قوالب لأقسام موحدة من موقع الويب وصفحات متكررة مثل المعارض والمشروعات والمنتجات وما إلى ذلك
تنفيذ جميع عمليات الدمج لاشتراكات قائمة البريد ، ووسائل التواصل الاجتماعي ، والأدوات ، وما إلى ذلك
إنشاء واختبار جميع نماذج الاتصال
اضبط التصميم وحسّنه للاستخدام المتنقل والاستجابة
أدخل إعدادات SEO الضرورية
تحقق مرة أخرى من قواعد ومحتوى الموقع
عبر فحص المتصفح وإصلاح الأخطاء
أرسل للمراجعة النهائية
قم بإجراء جميع مراجعات العميل النهائية
إنشاء لوحة معلومات مخصصة للعميل وفيديو تدريب (إذا لزم الأمر)
احذف الإضافات والصور والأدوات غير الضرورية
موقع النسخ الاحتياطي وحفظه محليا
موقع الإطلاق

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

حسنًا ، الآن لديك فكرة عن كيفية تنظيم عملية التصميم / التطوير الداخلي الخاصة بي ، دعنا ندخل في مزيد من التفاصيل حول كيفية تحسين عمليات تصميم الويب Divi.

1) إنشاء عملية تصميم قياسية

أحد أفضل الأسئلة والمناقشات المتكررة التي أراها في مجموعات Divi Facebook هو شيء يتعلق بتأثير "كيف تصمم موقع Divi الخاص بك؟" هل تسخر منه في Photoshop أو Illustrator؟ هل تنشئ إطارًا سلكيًا أساسيًا ليوافق عليه العميل؟ هل تغوص فقط في ديفي وتعيش؟

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

يحتاج للعمل معك أو لفريقك
يجب أن تعمل من أجل عميلك
يحتاج لتوفير الوقت

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

إليكم السبب:

إنه يعمل بالنسبة لي - عادةً ما يبدأ تصميم الويب بعملية هيكل شبكي مكثفة عبر الورق أو برنامج مثل Adobe Illustrator لتصميم وعرض العميل للموافقة قبل حتى الدخول على الإنترنت. تعمل هذه الطريقة مع البعض ويمكن أن تكون طريقًا فعالًا للغاية خاصة إذا كنت في فريق وقمت بتحويل تصميمك إلى مطور إلى رمز. ولكن بمجرد ظهور Divi ، فقد غيرت عملي تمامًا. أنا الآن أغوص مباشرة في Divi بعد أن يكون لدي بنية أساسية ومفهوم مرئي في ذهني وعلى الورق.
إنه يعمل مع عملائي - لقد اكتشفت أن العملاء يحبون مشاهدة معاينة حية فعلية يمكنهم رؤيتها على المتصفح أكثر بكثير من مجرد نموذج مسطح. في بعض الأحيان ، يمكن أن يضيع تدفق الموقع وشعوره في محاكاة صفحة واحدة بينما عندما يرى العميل الموقع حيًا في متصفح ، فإنه غالبًا ما يؤدي إلى "عامل رائع" أكبر بكثير. يمكنهم رؤية التمرير الزائد وتأثيرات التمرير وتدفق تصميم الموقع مما يجعل الانطباع الأول رائعًا وغالبًا ما يكون أقل من عمليات التحرير والمراجعات.
إنه يوفر لي الوقت - يمكنني تغيير الأشياء بسرعة كبيرة باستخدام CSS وتخطيطاتي وإعداداتي المحفوظة في Divi بحيث سيكون من غير المنطقي بالنسبة لي إجراء تلك المراجعات في Photoshop أو Illustrator ثم تكرار نفس الشيء في إعدادات ورقة الأنماط و Divi. أقوم بتوفير قدر هائل من الوقت مع المراجعات والتصميم الأولي عن طريق القيام بالأشياء مباشرة باستخدام فحص العنصر مباشرة على موقع تطوير Divi الخاص بي. يمكنني أيضًا إجراء تغييرات ومراجعات على المواقع في كثير من الأحيان عندما أكون على الهاتف مع العملاء. يمكنك أن تبدو كمصمم ويب حقيقي لنجم موسيقى الروك عندما يطلب منك أحد العملاء تغيير بعض الأشياء وتكون قد قمت بذلك أثناء الاتصال بهاتفك أو في غضون دقائق.

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

2) الاستفادة من مكتبة Divi وعملك السابق

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

فيما يلي 3 نصائح سريعة سأقدمها عندما يتعلق الأمر بحفظ عناصر مكتبة Divi والعمل السابق:

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

3) الكشف عن موقع الويب الخاص بك للعميل

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

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

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

فيما يلي لقطة شاشة توضح كيف أعرض موقعًا جديدًا لعميل على Basecamp:

أقوم بتسجيل مقاطع الفيديو الإرشادية الخاصة بي باستخدام Screenflow لنظام التشغيل Mac. ثم أقوم بتحميل الفيديو على قناة Vimeo الخاصة بي وجعله مقطع فيديو خاصًا. من هناك ، كما ترون في اللقطة أعلاه ، أرسل رابط الفيديو هذا إلى العميل مع وصف قصير وقائمة نقطية لما يمكن توقعه بعد ذلك وعنوان URL الفعلي لموقع dev ليراه العميل على متصفحه بعد مشاهدة الفيديو.

إليك بعض مقاطع الفيديو الخاصة بالمعاينة مؤخرًا إذا كنت ترغب في معرفة كيفية تقديم المواقع الجديدة للعملاء:

معاينة موقع الفيديو 1

معاينة موقع الفيديو 2

4) التعامل مع المراجعات والتعديلات

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

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

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

في الختام

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

التالي لأعلى: كيفية إدارة عدة مشاريع تصميم ويب Divi بشكل فعال

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

تأكد من الاشتراك في النشرة الإخبارية عبر البريد الإلكتروني وقناة YouTube حتى لا يفوتك إعلان كبير أو نصيحة مفيدة أو Divi freebie!