لقد قمنا مؤخرًا بتجديد موقع الشركة. يوضح هذا المنشور الأدوات والأساليب التي استخدمناها لتحسين موقعنا الإلكتروني.
إذا كنت مستخدمًا لـ Logto، فقد تلاحظ أن موقع شركتنا قد تم تحديثه مؤخرًا. إذا لم تكن كذلك، تحقق من الموقع logto.io وحاول تخمين كم من الموارد التي بذلناها لتحقيق ذلك.
قد تظن، هل أنتم فقط تقومون بالترويج لأنفسكم بأن الأمر يتطلب جهدًا كبيرًا وتصميمًا دقيقًا لإظهار تميزكم في التنفيذ؟
لا!
على العكس تمامًا، نريد أن نعرض كيفية استخدامنا الذكي للأدوات والأساليب لتحسين جودة منتجاتنا وتقديم أفضل المنتجات والخدمات لمستخدمينا.
تلقينا بعض الملاحظات الإيجابية من مجتمعنا ونتساءل كيف فعلنا ذلك. هذا التحديث مختلف لأنه أعدنا اختراع سير عمل جديد تمامًا في بيئة سريعة الحركة. نود أن نقدم أفضل ممارساتنا ونلقي نظرة فاحصة على ثقافة فريق العمل والتعاون لدينا.
نحن فريق تقني يركز على توفير خدمات تطوير للبنية التحتية ومتعلق بهوية العملاء. الضغوط لتقديم العمل كبيرة. وفي الوقت نفسه، نحن بحاجة لدعم مهام سرد القصص وتشغيل العمليات المتنوعة، مثل بناء مواقع تسويقية ذات علامة تجارية، كتابة المدونات، الترويج لمشاريعنا، والتفاعل مع المستخدمين.
يعد الموقع المذهل نقطة هبوط حاسمة، حيث يشكل عادة الانطباع الأول الذي يحصل عليه الجمهور عن منتجك، مساعدتهم في فهم المشاكل التي يسعى منتجك لحلها، بما في ذلك الأسعار وأي عملاء بارزين كدليل اجتماعي.
بالإضافة إلى ذلك، يمكن أن يحقق أهداف عمل متعددة:
في وظيفتي السابقة، كنت قد شاركت في مشروع موقع إلكتروني. دعونا نرى ما يتطلبه سير عمل نموذجي:
هذا العملية مرهقة وتشمل العديد من الأشخاص وأصحاب المصلحة، مما يجعلها غير مناسبة لبيئة سريعة الحركة.
حتى لو كان لدينا في البداية شخصان فقط للحفاظ على هذا — مصمم منتج ومهندس — لاتزال المهام تتطلب الكثير من التواصل ذهابًا وإيابًا مثل إدارة أداء الويب، تحميل الصور، ضمان التصميم المتجاوب، معالجة صيغ الصور، وتحديث المحتوى.
هذا العمل غير فعال. أعتقد دائمًا كيف أحرر الموارد الهندسية للتركيز على عمل المنتج الأساسي بينما أتعامل مع الباقي.
استخدام الأدوات لتعزيز الإنتاجية هو فلسفة رئيسية لفريقنا. لذلك، بدأت في البحث عن الأدوات التي يمكن أن تساعد في تبسيط هذه العمليات.
لتطوير موقع تسويقي SaaS ناجح، دعونا نفكك العناصر الأساسية المطلوبة:
بعد إجراء بعض الأبحاث، ها هي مجموعة الأدوات التي أعتزم استخدامها لجوانب التصميم:
ChatGPT 3.5 وChatGPT 4.0 وGemini Advanced وJasper أو تطبيقات الذكاء الاصطناعي المشابهة للربان المساعد.
هذا لتحسين محتوى التسويق والرسائل الخاصة بي. من المهم أن أكون واضحًا بشأن الهدف والنية وراءهم. الذكاء الاصطناعي هو مجرد قائد مساعد، وليس صانع قرارات. قبل أن أكتب أي رسالة تسويقية، أطرح على نفسي بعض الأسئلة:
ثم سأكتب مسودة أولية للنقاط التي أريد توصيلها.
أحيانًا يمكن للذكاء الاصطناعي إدخال كلمات تبدو مملة أو تلوي نيتك الأصلية لجعلها تبدو صحيحة منطقيًا. ومع ذلك، يجب عليك التأكيد على نيتك والتمسك بأهدافك. يجب عليك وضع معايير لضمان أن تكون الكلمات الموجهة للجمهور واضحة ومباشرة ومختصرة وشفافة. هذا مهم بشكل خاص في مجال منتجاتنا، الذي يخدم العديد من الشركات والمطورين.
Figma وFramer للتفاعل والتصميم البصري، بالإضافة إلى الرسوم المتحركة والنماذج الأولية
لدي خلفية في التصميم، ركزت أساسًا على تصميم المنتجات، والذي يعني صياغة واجهة المستخدم وتجربة المستخدم. رغم أن تصميم واجهات المستخدم المتطورة ليس تحديًا بالنسبة لي، فإن عملي ليس ناعمًا كعمل محترف. ومع ذلك، باستخدام بعض المهارات الأساسية في التصميم البصري والرسوم التوضيحية، وباختيار الأدوات الصحيحة، يمكنك تحسين جودة عملك. أستخدم Framer وFigma في هذه العملية الإبداعية.
هذا هو تصميمنا القديم، الذي تم إنشاؤه بالكامل بواسطة Figma
تم إنشاء تصميمنا الأصلي في Figma. استخدمت المكون الإضافي الرسمي لـ Framer، 'Framer to HTML'، لنسخ ولصق التصميم الأساسي في Framer، مما وفر نقطة انطلاق جيدة.
الخطوة التالية هي التصميم. إذا كنت قد استخدمت Figma من قبل، فإن الانتقال إلى Framer هو عملية سلسة حيث أن تجربة المستخدم العامة متشابهة جدًا. سأبرز بعض التفاعلات المثيرة التي تعزز الإنتاجية بشكل كبير.
يقدر مستخدمو Figma التخطيط التلقائي لأنه يوفر الكثير من الوقت في ترتيب ووضع العناصر. ومع ذلك، وظائف التخطيط في Framer أذكى، وتتماشى بشكل أكبر مع العقلة الأمامية. في Framer، يمكنك اختيار استخدام شبكة أو وضع تكديس للعناصر، تعريف الأعمدة، تعيين عرض أقصى، وستقوم بالالتفاف تلقائيًا إلى صف آخر إذا لزم الأمر. يعزز هذا الوظيفة من خلال محاكاة كيفية تصرف العناصر في بيئة الويب الحية.
من خلال الاعتماد الذكي على إعداد نقاط التوقف وإعدادات العرض (مثل التعبئة، الثابتة، النسبية، والتناسب مع المحتوى) وتعريف اللوحات المختلفة، يمكنك بسهولة ودقة تحقيق تصاميم مستجيبة متنوعة. هذا النهج يسمح لك بتكييف التخطيط مع أحجام الشاشات والأجهزة المختلفة بكفاءة.
يقدم Framer مجموعة متنوعة من الرسوم المتحركة المعدة مسبقًا، بما في ذلك الرسوم المتحركة ticker التي نستخدمها بشكل واسع على موقعنا لإظهار عملنا. يمكنك إعداد المكون والدمج داخل هذا الأداة المصغرة. يتيح لك تحديد إعدادات متنوعة مثل السرعة، الاتجاه، النطاق، والمزيد، مما يوفر لك المرونة والتحكم في كيفية تصرف الرسوم المتحركة على موقعك.
ميزة مفيدة أخرى في Framer هي القدرة على تخصيص الرسوم المتحركة الخاصة بالتمرير. على سبيل المثال، يمكنك تحديد كيفية ظهور العناصر أثناء التمرير. تتيح لك إعداد رسوم متحركة التمرير التحكم في توقيت وأسلوب كيفية عرض العناصر، مما يعزز تجربة المستخدم والانخراط مع المحتوى الخاص بك.
أحد متطلباتي الرئيسية هو القدرة على:
في سير العمل السابق، في أي وقت كنت بحاجة إلى تحديث المحتوى، كنت مضطرًا إما لطلب من مهندس القيام بذلك أو تقديم طلب سحب بنفسي. يتبع فريقنا الهندسي عملية صارمة لضمان جودة التعليمات البرمجية، مما قد يستغرق وقتًا ويقيد قدرتي على إجراء التغييرات السريعة.
حل Framer هذه المشكلة بالنسبة لي. الآن، كلما أجريت تغييرًا وانقر على نشر، يتم عرضه فورًا حيًا في الإنتاج. هذه القدرة قد سهلت العملية بشكل كبير، مما يسمح بتحديثات سريعة وزيادة الاستقلالية في إدارة المحتوى.
بما أنه مستضاف بواسطة Framer، لا تحتاج إلى أي تنفيذ أو عمل تقني من جانبنا. استغرق مهندسون لدينا حوالي 10 دقائق فقط لدمجه مع بقية موقعنا على الويب.
يتكون موقعنا الحالي من 20-30 صفحة؛ بعضها تم تطويرها باستخدام Framer، بينما تم إنشاء الأخرى باستخدام طرق تطوير البرمجيات التقليدية. نحن في عملية اختيار أفضل الأدوات للحفاظ على صفحاتنا. على سبيل المثال، لتوثيق المطورين، الذي يعد تحديًا في إدارته باستخدام Framer، يعد استخدام إطار عمل توثيق صديق للمطورين لاستضافة المحتوى هو الخيار الأمثل. في المستقبل، سنقيم احتياجاتنا ونقرر ما إذا كنا سنستمر في الاستضافة بأنفسنا أو الانتقال بالكامل إلى Framer.
لقد غيرنا سير العمل لدينا تمامًا، مما جعل إنتاج مواقع التسويق بلا عناء تمامًا. إنه موثوق، قابل للصيانة، وعالي الكفاءة.
لقد كتبت هذه المدونة لمشاركة أفضل الممارسات. إذا كان لديك تجارب مع Framer وتصميم مواقع ويب جميلة، أرغب في سماعها. دعونا نتحدث ونتعلم من بعضنا البعض.
الآن، حان الوقت للتحقق من منتجنا! زورنا على logto.io.