تصميم وتنفيذ موقع التسويق لشركتنا: رحلتي من المحتوى إلى التنفيذ

إذا كنت مستخدمًا لـ Logto، فقد تلاحظ أن موقع شركتنا قد تم تحديثه مؤخرًا. إذا لم تكن كذلك، تحقق من الموقع logto.io وحاول تخمين كم من الموارد التي بذلناها لتحقيق ذلك.

قد تظن، هل أنتم فقط تقومون بالترويج لأنفسكم بأن الأمر يتطلب جهدًا كبيرًا وتصميمًا دقيقًا لإظهار تميزكم في التنفيذ؟

لا!

على العكس تمامًا، نريد أن نعرض كيفية استخدامنا الذكي للأدوات والأساليب لتحسين جودة منتجاتنا وتقديم أفضل المنتجات والخدمات لمستخدمينا.

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

الخلفية#

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

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

بالإضافة إلى ذلك، يمكن أن يحقق أهداف عمل متعددة:

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

في وظيفتي السابقة، كنت قد شاركت في مشروع موقع إلكتروني. دعونا نرى ما يتطلبه سير عمل نموذجي:

1. أولاً، يحدد مدراء تسويق المنتجات ومدراء المنتجات المحتوى والمتطلبات.
2. يقوم مصممو المنتجات وكاتب UX بصقل المحتوى.
3. ننتقل بالعمل الجاري، وهو عادة نسخة ذات دقة منخفضة، إلى مصممي الرؤية والعلامة التجارية لإجراء اللمسات الأخيرة قبل الإنتاج.
4. ثم يبدأ المهندسون ومدراء المنتجات في التنفيذ، مع التركيز على الرسوم المتحركة وتصميم الويب المتجاوب.

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

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

هذا العمل غير فعال. أعتقد دائمًا كيف أحرر الموارد الهندسية للتركيز على عمل المنتج الأساسي بينما أتعامل مع الباقي.

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

تفكيك الاحتياجات#

لتطوير موقع تسويقي SaaS ناجح، دعونا نفكك العناصر الأساسية المطلوبة:

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

بعد إجراء بعض الأبحاث، ها هي مجموعة الأدوات التي أعتزم استخدامها لجوانب التصميم:

محتوى المنتج والتسويق#

ChatGPT 3.5 وChatGPT 4.0 وGemini Advanced وJasper أو تطبيقات الذكاء الاصطناعي المشابهة للربان المساعد.

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

1. من سيقرأ الرسالة؟
2. هل يحتاجون إلى بعض السياق الإضافي؟
3. ما هي النقطة الرئيسية التي تريد تناولها في الرسالة؟
4. ماذا تتوقع من المستخدم أن يفعل كخطوة تالية؟
5. هل هذه الرسالة تهدف إلى التوعية أو تحفيز إجراء معين؟
6. هل هناك احتمال بأن تكون مضللة أو مبالغة؟

ثم سأكتب مسودة أولية للنقاط التي أريد توصيلها.

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

التصميم#

Figma وFramer للتفاعل والتصميم البصري، بالإضافة إلى الرسوم المتحركة والنماذج الأولية

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

هذا هو تصميمنا القديم، الذي تم إنشاؤه بالكامل بواسطة Figma

تم إنشاء تصميمنا الأصلي في Figma. استخدمت المكون الإضافي الرسمي لـ Framer، 'Framer to HTML'، لنسخ ولصق التصميم الأساسي في Framer، مما وفر نقطة انطلاق جيدة.

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

التخطيط#

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

نقاط التوقف لتصميم مستجيب#

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

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

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

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

النشر السريع#

أحد متطلباتي الرئيسية هو القدرة على:

1. تصميم صفحات هبوط متعددة بسرعة لتحسين SEO وحملات التسويق. السرعة ضرورور!
2. تحديث المحتوى بشكل متكرر بنفسي. تعكس صفحة الهبوط الخاصة بمنتجك أحدث التطورات وموقع المنتج الحالي. يعني المحتوى القديم فقدان فرص السوق وعدم البقاء على اتصال باحتياجات العملاء الخاصة بك.

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

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

الهندسة#

بما أنه مستضاف بواسطة Framer، لا تحتاج إلى أي تنفيذ أو عمل تقني من جانبنا. استغرق مهندسون لدينا حوالي 10 دقائق فقط لدمجه مع بقية موقعنا على الويب.

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

كيف غيرت سير العمل الخاص بنا#

لقد غيرنا سير العمل لدينا تمامًا، مما جعل إنتاج مواقع التسويق بلا عناء تمامًا. إنه موثوق، قابل للصيانة، وعالي الكفاءة.

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

الآن، حان الوقت للتحقق من منتجنا! زورنا على logto.io.