كيفية تصميم موقع الكتروني؟

بنت القاهرة

كاتب جيد
في الوقت الحالي لا يمكن لأي صاحب عمل أو رجل أعمال أو شخص محترف في أي مجال امتلاك موقع إلكتروني احترافي يمثل وسيلة اتصال بينه وبين الجمهورلهذا السبب إذا كنت أحد هؤلاء يجب أن تعرف جيدا كيفية تصميم موقع ويب احترافي وهذا ما سأريكه في هذا الدليل المفصل والشام

-موقع-الكتروني.jpg






في الدقائق القادمة ستتعرف على:


  • الـ 5 عناصر الأساسية التي يجب أن تتوافر في أي تصميم موقع احترافي.
  • أشهر أنظمة إدارة المحتوى المتاحة في السوق وأيهم يناسبك.
  • أفضل البرامج الاحترافية لتصميم المواقع الالكترونية (Ui / Ux).
  • أفضل أدوات بناء المواقع الالكترونية على منصة ووردبريس الشهيرة.
  • نصائح هامة للغاية لتصميم موقعك.
وليس هذا كل شيء، فهناك بعض الأسئلة التي يجب أن تجيب عليها عند تصميم موقع الكتروني، مثل:

  • هل موقعك سيجتاز اختبار الـ 3 ثواني؟
  • ما هو الدليل الاجتماعي ولماذا يجب عليك أن تستخدمه؟
  • ما هو التصميم المتجاوب (Responsive Design) وما هي أهميته بالنسبة لك؟
  • كيف أن التصميم الجمالي قد يضر بموقعك؟
كل هذا وأكثر ستجده بين سطور هذا الدليل، كما ستجد أمثلة عملية على بعض المواقع الاحترافية التي عليك أن تتعلم منها، لهذا احرص على قراءة هذا الدليل كاملاً.
Untitled-1.jpg


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

كما أشرت سابقاً، لكي تصمم أي موقع الكتروني سواء كان مدونة أو متجر، وقبل أن تفكر في التكنولوجيا أو نوع الـ CMS – Content Management system الذي ستعتمد عليه – سأخبرك بأنواعها لاحقاً.
يجب عليك أولاً أن تضع عدة أمور في اعتبارك، وذلك لأنها ستحدد الكثير من الاختيارات التي ستقوم بها في تصميم موقعك الالكتروني، وهذا ما سنتحدث عنه بالتفصيل الآن.

1- رسالة موقعك

هذه واحدة من أكثر الأخطاء شيوعاً عند تصميم أي موقع الكتروني والتي يرتكبها الكثير من المبتدئين في هذا المجال، فهناك سؤال هام جداً يجب عليك أن تجيب عليه في أقل من 3 ثوان فقط.
عندما يقوم شخص ما بزيارة موقعك… يجب أن تجيبه على السؤال الذي يدور في ذهنه “ما الذي سأستفيده من هذا الموقع؟ ” في خلال 3 ثوان بحد أقصى.
يجب أن يعرف الزائر ما الذي تقدمه، من هو أنت، ما هي الأشياء التي سيتعلمها أو سيتمكن من الحصول عليها من موقعك، كل هذا خلال اللحظات الأولى التي يتصفح بها موقعك.
هذه مشكلة كبيرة تعاني منها الكثير من المواقع، خصوصاً المواقع العربية الخاصة بالشركات ومقدمي الخدمات، فربما تقضي بها عدة دقائق حتى تعرف رسالة هذا الموقع وما الذي يقدمه تحديداً لك كزائر.
رسالة الموقع يمكن أن تكون جملة توضح بها ما الذي تقدمه تحديداً، أو المشكلة الرئيسية التي تعالجها لأي شخص، أو ربما تكون بعض المنتجات الرئيسية التي تبيعها.
أهم شيء أن صفحتك الرئيسية يجب أن تقوم بايصال هذه الرسالة بوضوح، وبعد ذلك يمكنك استخدام صفحة (عن الموقع – About us) للتوضيح بشكل مفصل أكثر.
هناك العديد من الأمثلة التي سأشير إليها خلال هذا الدليل، والتي ستتمكن من خلالها من معرفة العديد من طرق توضيح هذه الرسالة بطريقة بسيطة وسريعة.

2- هيكل الموقع الخاص بك

هيكل الموقع هو الذي يحدد سهولة عملية التصفح والحصول على المعلومات، فمثلاً ستجد هنا في الرابحون في القائمة الرئيسية بالأعلى معظم المجالات الشائعة التي يهتم بها زوار الرابحون.
فيمكنك أن تتنقل بينها بسهولة لكي تجد الموضوع الذي يهمك في أي مجال، كما يمكنك أن تستخدم صندوق البحث بالأعلى لتجد أي معلومة تريد بشكل أسرع.
كما يمكنك أن تصل إلى صفحة تواصل معنا لمراسلة فريق الرابحون، وأيضاً يمكنك الاشتراك في قائمتنا البريدية بكل سهولة في أي صفحة من صفحات الموقع.
ومثال آخر على هيكل المواقع الالكترونية هو موقع Nike الشهير، والذي أنصحك أن تتابعه باستمرار إن كنت مهتم بتصميم المواقع، وذلك لأنه يتغير مع طرح منتج جديد من فترة إلى أخرى، كما أن المصممين الذين يعملون عليه هم من الأفضل في العالم في هذا المجال.
ستجد أن بناء وهيكل الموقع بسيط للغاية، على الرغم من تنوع المنتجات التي تقدمها شركة Nike العالمية، حيث يمكنك التنقل بين الأقسام المخصصة للأطفال والنساء والرجال وغيرها.
<ins class="adsbygoogle" style="display: block; height: 345px;" data-ad-client="ca-pub-4187436135811101" data-ad-slot="4924950085" data-ad-format="auto" data-full-width-responsive="true" data-adsbygoogle-status="done"><ins id="aswift_4_expand" style="display: inline-table; border: medium none; height: 345px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 714px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: medium none; height: 345px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 714px; background-color: transparent; overflow: hidden;"></ins></ins></ins>

كما يمكنك البحث أيضاً عن طريق نوع المنتج الذي تريد سواء كان حذاء مخصص للجري أو تيشرت عادي، كل هذا بعدة ضغطات بسيطة.
السر في بناء هيكل ناجح هو أن تجعل الزائر يصل إلى المعلومة أو المنتج الذي يريد خلال 3 أو 4 ضغطات بحد أقصى، حتى لا يمل.
هذا الأمر هام للغاية، فهو معروف في عالم التصميم باسم الـ User Experience Design أو اختصاراً (UX)، وهو تصميم تجربة المستخدم في المواقع الالكترونية.
بحيث يكون الانتقال بين الصفحات وإتمام عمليات الشراء أو التسجيل والحصول على المعلومات بشكل بسيط وسريع، وهذا ما يجب أن تضعه في اعتبارك عند تصميم موقعك الالكتروني.
فلنفترض مثلاً أنك تبيع الأحذية في موقعك الالكتروني:


  • هل صفحة المنتج الخاصة بك توضح المعلومات المطلوبة عن خامة المنتج؟
  • هل يمكن للزائر أن يجد بسهولة المعلومات الخاصة بالمقاسات التي تبيعها؟
  • هل عملية انتقال الزائر من صفحة المنتج إلى صفحة الدفع سهلة؟
  • هل عملية إدخال بيانات المشتري (العنوان – طريقة الدفع) بسيطة ولا يوجد بها أي تعقيد؟
هذا هو المقصود بتجربة المستخدم الذي يجب أن يوفرها موقعك أياً كان الغرض منه.
3- هوية الموقع

الموقع الالكتروني هو بيتك على الإنترنت، وكل بيت له طابع وهوية خاصة به، وهذا ما يجب أن يظهر على موقعك، هوية الموقع تظهر من خلال:

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

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

4- نسبة التحويلات

ما هو الذي تريده تحديداً من أي زائر لموقعك لكي تحقق أرباح:

  • أن يقوم بالضغط على الإعلانات؟
  • أن يشترك في قائمتك البريدية؟
  • أن يقوم بعمل اشتراك (subscribe) في قناتك على اليوتيوب؟
  • أن يقوم بالاتصال بك؟
  • أن يقوم بشراء منتج معين من موقعك؟
نجاحك في جعل أي زائر يقوم بتنفيذ ما تريده منه تحديداً هو ما يُعرف بـ Conversion Rate أو معدل التحويل، وكلما كان معدل التحويلات أعلى كلما كان موقعك ناجحاً.
دعنا نكمل على نفس المثال السابق، موقع بيع الأحذية، لنفترض أن من كل 100 زائر لموقعك هناك شخص واحد فقط هو من بشتري منك، هذا معناه أن نسبة التحويلات هي 1%.
ولنفترض أنني أمتلك أيضاً موقع يبيع نفس الأحذية التي تبيعها أنت، ولكن من كل 100 زائر يشتري مني 5 أشخاص، بمعنى أن معدل التحويلات لدي هو 5%.
ألا تعتقد أن موقعي أفضل من موقعك؟ أي موقع الكتروني يجب أن يتم تصميمه بحيث يدفع الزائر بكل الطرق الممكنة إلى تنفيذ الهدف المطلوب، مع الحفاظ على تجربة مستخدم جيدة.
دعنى أعطيك مثالاً عملياً على واحد من أفضل المواقع المهتمة بعالم السيو، والذي ربما سمعت عنه إن كنت مهتم بالحصول على ترافيك مجاني من محركات البحث.
إن قمت بزيارة موقع Backlinko الشهير في مجال السيو بنفسك… ستجد أن الموقع مصمم من أجل هدف واحد فقط، وهو أن تشترك في القائمة البريدية الخاصة بـ Brain Dean مؤسس الموقع.
ستجد صندوق الاشتراك في القائمة في كل من الأماكن التالية:


  • الصفحة الرئيسية الخاصة بالموقع.
  • على اليمين كـ Widget في أي مقال في المدونة.
  • في القائمة الرئيسية الخاصة بالموقع.
  • في أغلب المقالات الموجودة في الموقع ستجد إمكانية تحميل المقال على هيئة PDF، وذلك لترويج الاشتراك في القائمة البريدية.
الموقع نفسه لا يحتوى على أي منتج أو خدمة يمكنك أن تشتريها، ولا يوجد به إعلانات أيضاً، ولكن Brain Dean يربح المال من ترويج بعض الكورسات والخدمات للمشتركين في قائمته البريدية.
هذا ما يجب أن تضعه في اعتبارك عندما تقوم بتصميم أي موقع الكتروني، وهو كيفية تحويل الزائر إلى مشتري، كيف تجعل الـ CTA الخاص بك واضح.
وربما تبيع أكثر من منتج أو خدمة، أو ربما تعتمد على أكثر من CTA، لا مشكلة في ذلك، المهم أن تحدد الأولويات التي تريدها، فمثلاً إن كنت تملك متجرالكتروني.
هل الأولوية بالنسبة لك أن يشترك الزائر في قائمتك البريدية أم أن يقوم بشراء المنتج الخاص بك، وإن كنت تملك مدونة، هل تريد من الزائر أن يضغط على الإعلانات أو لينك الأفلييت الخاص بك.
ملحوظة: إن كانت هذه أول مرة لك في التعامل مع المواقع الالكترونية، ولا تعرف طرق الربح منها مثل (الربح من الإعلانات أو التسويق بالعمولة) فأنصحك أن تطلع على الأدلة التالية.
طرق الربح من المواقع الإلكترونية
شرح التسويق بالعمولة أو الأفلييت (مرشد شامل 2020)

5- الدليل الاجتماعي

الدليل الاجتماعي (Social Proof) هو أحد أهم عوامل نجاح المواقع الكبيرة الناجحة في أي مجال، وذلك لأنه يساعد في ارتفاع نسبة التحويلات الخاصة بها.
إن كنت بالفعل زرت موقع BackLinko الذي أشرت له سابقاً، فأعتقد أنك لاحظت في الصفحة الرئيسة وجود بعض الأدلة الاجتماعية وهي:


  • بعض المواقع الشهيرة التي ذكرت Brain Dean مثل Forbes و Huffpost.
  • مقولات (Testimonials) من المشاهير في مجال الديجيتال ماركتنج والسيو تمدح Brain Dean مؤسس الموقع.
  • دراسة حالة لموقع قام Brain Dean بمساعدته في الحصول على ترافيك كبير جداً من جوجل.
كل هذا يؤكد للزائر على أنه يتعامل مع شخص خبير في مجاله، وبالتالي تزداد الثقة لديه مما يساعد في تحويل هذا الزائر إلى مشترك في القائمة البريدية، وهذا ما يريده Brain Dean تحديداً.
ولنفس السبب ستجد في أغلب مواقع الشركات الكبيرة قصص نجاح للعملاء الذين يتعاملون معهم، ولنفس السبب أيضاً في أغلب المتاجر الالكترونية هناك تقييمات لكل منتج.
الدليل الاجتماعي يعتمد على نوعية الخدمة أو المنتج الذي تقدمه للزائر، وأيضاً يعتمد على مدى معرفة الناس بك، فمثلاً شركة كبيرة مثل Nike لا تحتاج إلى تقديم دليل اجتماعي.
هذا بعكس شركة ناشئة في نفس المجال، وترغب في اكتساب ثقة الزوار والعملاء الجدد، لهذا يجب عليك أن تفكر في وضع الأدلة الاجتماعية المناسبة في تصميم الموقع الالكتروني الخاص بك.
لقد حرصت أن أذكر هذا العامل تحديداً بشكل منفصل على الرغم أنه يعتبر جزء من عملية تصميم الموقع بهدف زيادة التحويلات نظراً لأهميته، ولأن الكثير من المواقع العربية تغفله.
الآن بعد أن تعرفت على العناصر الأساسية لتصميم الموقع الالكتروني، حان الآن موعد الحديث عن كيفية تصميم الموقع والتكنولوجيا أو الأدوات التي يمكنك أن تعتمد عليها.

اختيار أداة بناء المواقع التي تناسبك

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

أهم طرق بناء الموقع المتاحة في السوق

لكي تضع موقع على الإنترنت فأنت تحتاج إلى *** Hosting (أي استضافة مواقع) لكي تحتوى على الملفات وقواعد البيانات الخاصة بك، وأيضاً تحتاج إلى طريقة تدير بها هذا الموقع.
ولهذا فأنت تحتاج إلى برمجة الموقع الخاص بك باستخدام الأدوات المناسبة مثل (HTML – CSS – Java******) ثم وضعها على الاستضافة الخاصة بك الخاص بك.
اختيار استضافة المواقع عنصر في غاية الأهمية، لذا أوصيك بشدة بقراءة المقالين بالأسفل لاتخاذ هذا القرار على أساس صحيح:
هل تريد استضافة مواقع مضمونة؟ اليك الثمانية العمالقة
لماذا استضافة SiteGround هي الأفضل على الإطلاق
ربما تكون هذه الطريقة صعبة بعض الشيء على الكثير من أصحاب المواقع، وهذا هو السبب وراء ظهور أنظمة إدارة المحتوى المختلفة (Content Management System – CMS).
أشهر الأمثلة على هذه الأنظمة هي:


  • منصة وردبريس (WordPress) الشهيرة التي تسيطر على السوق
  • منصة بلوجر (Blogger)
  • منصة Wix
  • منصة Ghost
  • منصة Squarespace
  • منصة Clickfunnels
وغيرها من المنصات التي تجعل أي شخص يقوم بامتلاك موقع الكتروني دون الحاجة لمعرفة أي لغة برمجة، كما أن هذه المنصات توفر إمكانيات رائعة لأصحاب المواقع مثل:

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

  • كل منصة لبناء المواقع لها مميزات وعيوب يجب أن تعرفها حتى تختار المناسب لك.
  • يجب أن تضع في اعتبارك طريقة حصولك على ترافيك لموقعك، لأن هناك منصات أفضل من حيث السيو، وهناك منصات أسرع من غيرها.
  • كل منصة توفر لك إمكانيات في تصميم المواقع حتى يخرج بالشكل الذي تريد.
  • الميزانية الخاصة بك تؤثر على اختيار المنصة المناسبة.
لا تقلق سأخبرك في العنصر التالي بالمنصات التي ارشحها لك، ولاحقاً سأخبرك ببعض الأدوات التي ستساعدك على تصميم موقع الكتروني احترافي.
ليس هذا كل شيء، فيمكنك معرفة خطوات إنشاء موقع إلكتروني على أشهر منصات إدارة المحتوى وهي WordPress من خلال الرابط التالي:
خطوات إنشاء موقع ووردبريس (شرح شامل 2020)
كما يمكنك أن تتعرف على كيفية إنشاء مدونة بلوجر بالصور بشكل احترافي من خلال مقالنا السابق في الرابحون.
كما سيتم نشر إن شاء الله أدلة شاملة عن أغلب المنصات الباقية بالصور، وعرض أهم مميزاتها وعيوبها مثل Squarespace و Wix، وعمل مقارنات بينها جميعاً، فاحرص على متابعة الرابحون حتى لا تفوتك.

كيف تختار المنصة المناسبة لك

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

كيفية تصميم موقع الكتروني احترافي

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


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


  • برنامج Adobe XD
  • برنامج Figma
  • برنامج Skech
وهي برامج متخصصة في تصميم واجهات المستخدم (User Interface) وأيضاً تجربة المستخدم (UX) التي أشرت لها سابقاً.
هذه الأدوات موجهة أكثر للذين يرغبون في بناء المواقع بأنفسهم باستخدام لغات البرمجة المختلفة بشكل مباشر، أو في حالة الاستعانة بمصممين أو مبرمجين محترفين.
أما إن كنت ستعتمد على أنظمة إدارة المحتوى المختلفة وتمتلك ميزانية محدودة نوعاً ما، فإنه يمكنك تصميم مواقع رائعة للغاية بتكلفة بسيطة جداً.

أفضل أدوات تصميم المواقع على منصة ووردبريس

كما أشرت سابقاً أن أي CMS في السوق يقدم لك عدة إمكانيات لتصميم المواقع، بل أن أغلب هذه الأنظمة تقدم لك قوالب جاهزة يمكنك التعديل عليها بسهولة شديدة بحيث تمتلك موقع احترافي في دقائق معدودة.
وحيث أن منصة ووردبريس هي الأكثر انتشاراً وأيضاً لأنها تحتوي على العديد من الخيارات والإمكانيات سأعرض لك الآن أفضل أدوات تصميم المواقع عليها.
كما أنه لا حاجة لتذكرتك أنه قريباً إن شاء الله سننشر أدلة شاملة عن باقي المنصات وخصوصاً منصة بلوجر، وأيضاً سننشر أدلة شاملة عن بناء المواقع وتصميمها باستخدام HTML و CSS و Java****** وغيرها.

1- أداة Elementor

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

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


  • سهولة الاستخدام.
  • يمكنك استخدامها مجاناً لبناء أي موقع تريد.
  • وجود قوالب جاهزة يمكنك استخدامها والتعديل عليها بسهولة .
  • وجود العديد من القوالب (Themes) الأخرى و الإضافات (Plugins)، والتي تعمل مع أداة Elementor بدون أي مشكلات.
  • سرعة المواقع التي تعتمد على هذه الأداة جيدة.
2- أداة Divi

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


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

شركة Thrive Themes تقدم مجموعة من أفضل أدوات تصميم وإدارة المواقع الموجهة للمسوقين تحديداً، ولعل أشهر هذه الأدوات هي:

  • أداة Thrive Architect لتصميم وبناء المواقع.
  • أداة landing pages لبناء صفحات المبيعات المتخصصة مثل (التسجيل في الندوات الالكترونية – صفحات البيع المباشر) وغيرها.
  • أداة Clever Widgets وذلك لعرض المحتوى الجانبي (مثل الذي تراه الآن إن كنت تستخدم سطح المكتب لقراءة هذه السطور) بذكاء على حسب المحتوى نفسه والزائر.
  • أداة Thrive Optimize والتي تقوم بمساعدتك في إجراء اختبار (A/B Testing) لتحسين نسبة تحويلات مبيعاتك و حملاتك التسويقية.
كل هذا وأكثر تقدمه لك هذه الشركة، فإن كنت مسوق وتهتم ببناء صفحات الهبوط وتجميع بيانات العملاء والاعتماد على التسويق عبر البريد الالكتروني فأنصحك أن تجرب هذه الأدوات.
4- القوالب المتخصصة

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

نصائح لتصميم موقع الكتروني احترافي

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

1- جمال الموقع لا يهم مقارنة بتحقيق الهدف منه

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

2- اهتم بنسخة الموقع نفسه

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

3- تابع المواقع المؤثرة

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

4- اهتم بالمؤثرات البصرية

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



5- تجاوب التصميم الخاص بك

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


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


 
التعديل الأخير بواسطة المشرف:

bobkis

كاتب جيد جدا
مرحبا بنت القاهرة, شـكــ وبارك الله فيك ـــرا لك ... لك مني أجمل تحية ..
 

مواضيع مماثلة

أعلى