تنزيل المقال
تنزيل المقال
قد تعتقد أن تصميم موقع إلكتروني مهمة معقّدة، إلا أنك ستجد العملية ممتعة ورائعة إن عرفت أساسيات تصميم المواقع. يتعدّى الأمر كون مظهر الموقع جيدًا! سنُظهر لك في هذا المقال أساسيات تصميم المواقع وبعض الإرشادات العامة التي تساعدك على تصميم مواقع رائعة.
الخطوات
-
صمّم موقعك بنفسك. إن كنت جديدًا على عالم البرمجة والتصميم إلا أنك ترغب بتصميم موقع بنفسك، ستجد الكثير من الخيارات لفعل ذلك. يمكنك بناء موقع إلكتروني بسيط عن طريق تعليم نفسك برمجة html و CSS. كل ما عليك فعله هو الحرص على جعل التصميم احترافيًا.
-
استخدم قالبًا جاهزًا. يمكنك شراء مواقع معدّة مسبقًا على شبكة الإنترنت أو إيجادها مجّانًا. هذه المواقع عبارة عن رموز برمجية معدّة بشكل مُسبق يمكن استخدامها ببساطة وتعديلها حسب حاجتك. هناك العديد من مقدّمي القوالب ذوي السمعة الطيبة، وأحد هذه المواقع هو موقع Wix.
-
قم بتعيين مصمم مواقع. إن كنت ترغب بتصميم موقع مخصّص لاحتياجاتك ويظهر بمظهر رائع، فتعيين مصمّم مواقع فكرة رائعة لتحقيق ذلك. سيكلّفك ذلك المال بالتأكيد، إلا أنك ستجد أن الأمر ليس باهظ الثمن. يمكنك تلقّي عروض من مصمّمين ممتازين بسعر زهيد عن طريق الإعلان في جامعة أو كلية تقنية. تساعد خبرة المصمم على إنتاج موقع ناجع بمظهر احترافي.
-
نظّم صفحات الموقع. لعلّك ترغب بأن يكون كل شيء سريع وسهل الاستخدام على قدر الإمكان. قلّل عدد الخيارات التي يجب اتّخاذها، وصمّم واجهة التصفّح لتكون بسيطة وبديهية، وساعد المستخدم على الوصول إلى ما يرغب بالوصول إليه في أسرع وقت ممكن.
-
صمّم واجهة مستخدم جيّدة. ضع عناصر تصفّح الموقع الإلكتروني كالعنوان والأشرطة الجانبية والشعارات والرسوميات والنصوص في نفس الأماكن في كل صفحة من صفحات الموقع الإلكتروني لتسهيل تصفّح الموقع وجعله بديهيًا.
- حافظ على نفس الترويسة في كل الصفحات. سواءً أكان موقعك يحتوي على الكثير من العناصر أم لا، يتوجّب عليك الحفاظ على ثبات الترويسة أعلى كل صفحة.
- استخدم المنطق في تصميمك. يجب ترتيب العناصر في كل صفحة بشكل منطقي حسب أهمية موضوعها، وينبغي فعل ذلك في صفحات الموقع المختلفة.
-
أنشئ شكلًا ثابتًا. على الرغم من أنه ينبغي اتّسام الموقع الإلكتروني بتناسق هيكلي، إلا أنه يُفترض أن يمنح الشكل الموقع تناغمًا. التزم باستخدام 2-3 ألوان رئيسية فقط واحرص على إحداث تناغم في الألوان. تجنّب استخدام الكثير من الخطوط والأحجام، واحرص على استخدامها بنفس الطريقة في كل صفحة إن كنت تخطط لاستخدام أكثر من خط وحجم.
- استخدم CSS لإنتاج شكل متناسق ولتسهيل تغيير العناصر في الموقع بالكامل دون الحاجة إلى تغييرها في كل صفحة.
-
حسّن القراءة. حاول تسهيل قراءة النص وقسّمه إلى أجزاء صغيرة، واستخدم العناوين الفرعية والمسافات لفصل الأقسام عن بعضها. استخدم خطوطًا عريضة أو خطوط بأحجام مختلفة لإظهار التراتبية وأهمية المواضيع.
- انتبه للتعامل مع النصوص. لا تجعل الخط صغيرًا جدًا ووسّع المسافات بين الخطوط لتسهيل قراءة أجزاء النصوص الكبيرة. تصعب قراءة الفقرات النصية الكبيرة، لذا قسّم هذه الفقرات إلى فقرات أصغر.
-
سهّل قراءة موقعك الإلكتروني على مستوى عالمي. استخدم لغة HTML قياسية وتجنّب استخدام الوسوم والخصائص والملحقات المتاحة لأحد المتصفّحات على وجه الخصوص.
- على الرغم من أن معظم المتصفّحات وأجهزة الكمبيوتر الحديثة قادرة على التعامل مع الصور المعقدة، إلا أن كل شيء سيكون أسرع قليلًا إن حافظت على صغر حجم الصور وتعديلها للاستخدام على شبكة الإنترنت. توصّل لتوازن بين الجودة والسرعة.
-
قم باختبار موقعك. تأكد من أن كل رابط يعمل بالطريقة المتوقعة، ومن أن الصور تظهر بشكل سليم.
- يمكنك إجراء بعض اختبارات سهولة الاستخدام عن طريق طلب اختبار الموقع من قِبَل مجموعة من جمهورك المستهدف لاختبار سهولة الاستخدام وتقديم آرائهم حول الموقع الإلكتروني.
-
قم بإعداد الموقع للتصفّح على الأجهزة المحمولة. لقد زادت نسبة التصفح من الهواتف المحمولة في عصرنا الحالي، وستحتاج إلى تصميم الموقع بحيث يمكن تصفّحة بشكل جيد على الأجهزة المحمولة إن كنت ترغب بجذب عدد كبير من المستخدمين. أفضل ما يمكن فعله هو التأكد من امتلاك موقع إلكتروني منفصل لمستخدمي الأجهزة المحمولة، كما أن هناك خيارات أخرى أيضًا.
- ابحث عن أمثلة لمواقع الأجهزة المحمولة. يؤدي استخدام البادئة "m." عوضًا عن "www" في معظم المواقع الكبيرة إلى ظهور إصدار الأجهزة المحمولة من الموقع الإلكتروني، وستحتاج إلى فعل شيء مشابه لذلك.
-
حافظ على بساطة موقعك الإلكتروني. يجب أن يكون تصميم موقعك بسيطًا وسهلًا بشكل عام. لقد ولّت أيام الجداول المعقّدة والرسوميات الكبيرة، ويرغب كل المستخدمين بموقع إلكتروني يسهل استخدامه. يعني ذلك امتلاك الموقع الإلكتروني لتصميم بسيط ولعدد قليل من الأعمدة وتقليل مُدخلات النصوص المطلوبة لتصفّح الموقع.
-
استخدم التصميمات التفاعلية (responsive design). التصميم التفاعلي عبارة عن طريقة برمجة للموقع الإلكتروني ليتجاوب الموقع مع أي حجم شاشة عوضًا عن عرضة على أحجام شاشات محدّدة فقط. يسهل تنفيذ ذلك من خلال ضبط عرض الأعمدة ليكون بالنسبة المئوية عوضًا عن استخدام وحدة البيكسل، ويوجد أيضًا طرق أفضل لتنفيذ ذلك.
-
تجنّب خصائص التصميم غير المدعومة من قِبَل الأجهزة المحمولة. لا يمكن لمعظم الأجهزة المحمولة عرض أشياء مثل النوافذ المنبثقة ورسوميات Flash وJava والأُطُر. يرجع ذلك مجددًا إلى الرغبة بالحفاظ على بساطة التصميم على قدر الإمكان.
-
فكّر بتصميم تطبيق. هناك بعض الحالات التي يكون فيها تصميم تطبيق أسهل من تصميم نسخة من الموقع الإلكتروني للأجهزة المحمولة. لن تحتاج حينها إلى مهارات برمجية كبيرة لتحقيق المطلوب. كما هو الحال مع قوالب المواقع الجاهزة، هناك شركات تقوم بتصميم تطبيق بسيط ليخدم هدفك. أحد الخدمات الجيدة التي يمكن استخدامها هي خدمة Conduit Mobile.
أفكار مفيدة
- يمكنك كتابة ترجمة لمقاطع الفيديو وكتابة الملفات الصوتية وكتابة ملاحظة عن الخصائص النصية ليلائم الموقع الزوار ذوي الإعاقة البصرية. على الرغم من أن الجداول طريقة فعّالة لتنظيم المحتوى، إلا أن القراء ذوي الإعاقة البصرية قد لا يتمكّنون من سماع بيانات الجدول في شكل أعمدة.
- يمكنك دائمًا استخدام CSS لتحسين المسافات بين الفقرات.
- لا تصدم الزائر برسوميات مبهرة. لقد كانت الألوان البرّاقة ورسوميات Flash والخلفيات المزخرفة والموسيقى التي تعمل من تلقاء نفسها مثيرة في التسعينيات، إلا أن زوار العصر الحالي سينفرون من ذلك. التزم بالخلفيات البسيطة التي تتباين مع النص لتحسين إمكانية القراءة.
- على الرغم من أن بإمكانك تصميم موقعك الإلكتروني وفق تفضيلاتك أو باستلهام تصميمات المواقع التي تفضلها، الأسهل هو شراء قوالب جاهزة للموقع الإلكتروني.
- استخدم جداول CSS منفصلة لتنظيم الموقع حتى لا تُهدر حبر الزائر عند طباعة الصفحة.
- قم بإلغاء الخلفية عند الطباعة.
- استخدم نصًا باللون الأسود على خلفية بيضاء.
- أزِل شريط القائمة وأي صور لا حاجة لها.
تحذيرات
- تجنّب نسخ المحتوى والتزم بحقوق الملكية الفكرية. لا تقم بإضافة صور عشوائية من شبكة الإنترنت أو أي محتوى آخر دون موافقة صاحبه. يجب أن يكون محتوى موقعك الإلكتروني قانونيًا وأخلاقيًا.
