سيدي هشام: تصميم موقع شركة أغذية في سوريا

الموقع: سورياالسنة: 2022

تصميم موقع شركة أغذية لسيدي هشام، العلامة السورية التي تضم تشكيلتها ٢٤ فئة منتجات. صمّمت كنانيا الموقع العربي وبرمجته بالتعاون مع BIGBANG IT Solutions.

سيدي هشام علامة الأغذية التابعة لشركة العقاد للصناعة والتجارة في سوريا، وتمتد تشكيلتها من الأرز والبقوليات والشاي إلى زيت الزيتون والطحينة والمعلبات. صمّمت كنانيا موقع العلامة وبرمجته بالتعاون مع BIGBANG IT Solutions.

بالتعاون مع

كتالوج مرتّب حول المطبخ

الموقع بالعربية ومبني حول التشكيلة: ٢٤ فئة منتجات، من البقوليات والأرز والشاي إلى البهارات والمربيات وزيت الزيتون، ولكل فئة صفحات منتجاتها. ويجمع قسم «المطبخ» وصفات تستخدم منتجات العلامة في سبع مجموعات، ويتابع قسم الأخبار حضور الشركة في معارض مثل معرض دمشق الدولي وغلفود في دبي.

هيدر أحمر على شكل كبسولة يُبقي الشعار في المنتصف وإلى جانبه أزرار البحث والحساب والمفضلة، وأزرار عائمة تفتح كتالوج المنتجات والمحادثة من أي صفحة. وتستقبل صفحة «شاركنا النجاح» طلبات التوظيف لوظائف المبيعات والجودة. زر موقع sedihisham.com.

التصميم نفسه على الموبايل

يمتد التصميم إلى الموبايل بشاشات لصفحة البداية والفئات وقوائم المنتجات، بالأحمر والذهبي نفسيهما.

ماذا يحتاج تصميم موقع شركة أغذية؟

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

تصميم موقع شركة أغذية بالعربية منذ الرسمة الأولى

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

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

كيف رتّبنا أربعاً وعشرين فئة في كتالوج واحد

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

ولصفحة الفئة دور في البحث أيضاً. حين يكتب أحدهم «زيت زيتون» أو «طحينة» في جوجل، تستطيع صفحة فئة لها عنوانها وقائمة منتجاتها أن تظهر في النتائج، أما الفلتر داخل صفحة واحدة فلا يُفهرَس. والكتالوج القابل للتحميل مفيد لتجّار الجملة، لكنه لا يغني عن هذه الصفحات، لأن محركات البحث لا تقرأ ملف PDF كما تقرأ الصفحات، ولأن تصفّحه على الهاتف متعب.

وإلى المنتج ثلاث طرق: حقل البحث في الهيدر، وشبكة الفئات في الصفحة الرئيسية، وزر الكتالوج العائم الذي يبقى ظاهراً في كل صفحة. يصل الناس بعادات مختلفة؛ بعضهم يكتب الاسم، وبعضهم يتصفّح، وبعضهم يضغط أول عبوة يعرفها، ولكل عادة طريق قصير. ويتبع زر المحادثة العائم القاعدة نفسها، فلا يُدفن التواصل في أسفل صفحة «اتصل بنا».

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

المطبخ والأخبار والتوظيف حول الكتالوج

يعطي قسم «المطبخ» الناسَ سبباً لزيارة الموقع بين شراء وآخر. وصفاته مجمّعة في سبع مجموعات، وكلها مبنية على منتجات العلامة، فمن جاء من أجل طبق يخرج وهو يعرف أي أرز أو أي طحينة يشتري. وحين ترتبط كل وصفة بالمنتجات التي تستعملها يصير «المطبخ» طريقاً ثانياً إلى الكتالوج.

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

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

لماذا بنينا الموقع بتقنية Next.js

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

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

ست ممارسات أساسية في تصميم موقع شركة أغذية

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

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

كيف يسير مشروع تصميم موقع شركة أغذية معنا

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

نبني صفحة المنتج قالباً واحداً لأن عدد هذه الصفحات يساوي عدد المنتجات، وأي تعديل في القالب يسري على الكتالوج كله. ويُطلق الموقع والكتالوج الحقيقي محمَّل فيه؛ فالإطلاق بمنتجات مؤقتة «تُستبدل لاحقاً» يترك صفحات ناقصة تفهرسها جوجل كما هي.

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

ما نفحصه قبل الإطلاق وبعده

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

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

تصميم موقع شركة أغذية عن بُعد، ومن يملك الموقع بعد التسليم

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

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

نطاق العمل

• تصميم الموقع بالعربية: الرئيسية و٢٤ فئة منتجات وصفحات المنتجات والمطبخ والوصفات والأخبار والفعاليات ومن نحن والتواصل والتوظيف
• تصميم شاشات الموبايل
• برمجة الموقع بتقنية Next.js
• بالتعاون مع BIGBANG IT Solutions

مشاريع وخدمات ذات صلة

• شركة تصميم مواقع في سوريا، مواقع شركات وكتالوجات منتجات بالعربية والإنكليزية
• خدمات تجربة المستخدم وتصميم المواقع، مواقع ومنصات وتطبيقات
• ماسة فودز: الموقع والسوشيال ميديا والمحتوى، علامة أغذية أخرى، بالتعاون مع BIGBANG IT Solutions
• هوى الشام: موقع علامة ألبان، موقع وفيديو ومطبوعات، بالتعاون مع BIGBANG IT Solutions
• دراسة حالة تجربة مستخدم: ثلاثة منتجات رقمية، تأجير سيارات ودفع وسوق إلكتروني

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

أسئلة شائعة عن تصميم موقع شركة أغذية