لغة مصمم الويب: دليل لعملائك

نشرت: 2024-09-15

كل تجارة لها لغتها الخاصة. باعتبارك مصمم ويب، فأنت تتقن مجموعة أبجدية من مصطلحات مواقع الويب مثل UX وCSS وHTML. لكن عملائك؟ قد يكون أيضًا يونانيًا بالنسبة لهم.

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

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

فيما يلي 7 شروط أساسية لتصميم موقع الويب:

  • صورة البطل
  • تجربة المستخدم
  • الإطار السلكي
  • هندسة المعلومات
  • مستجيب للجوال
  • HTML، CSS، وجافا سكريبت
  • نظام إدارة المحتوى

صورة البطل

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

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

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

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


تجربة المستخدم أو تجربة المستخدم

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

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

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


الإطار السلكي

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

الإطار السلكي هو في الأساس مخطط ويوضح مكان وضع عناصر ونصوص معينة على الصفحة.

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

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

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


هندسة المعلومات (IA)

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

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

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


استجابة للجوال

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

تعني الاستجابة للجوال أن هناك بالفعل تقنية مدمجة في النظام الأساسي نفسه.

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

فكر في كيفية عمل هاتفك المحمول. إذا قمت بإدارة هاتفك أفقيًا، فسيتم ضبط محتوى الهاتف تلقائيًا.

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

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


HTML، CSS، وجافا سكريبت

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

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

يرمز HTML إلى لغة HyperText Markup Language ويسمح لفريق الويب بإخبار متصفح الويب بكيفية عرض جزء من النص. يستخدم HTML علامات مختلفة للإشارة إلى ما إذا كان النص عنوانًا أو عنوانًا فرعيًا أو فقرة. قد ترى مصممًا يسمي عنوانًا في تصميمك بـ H1. يشير هذا إلى علامة HTML التي سيتم استخدامها لإخبار المتصفح بأن كل النص الذي يحمل هذه التسمية يجب أن يكون بنفس حجم الخط.

تساعد أوراق الأنماط المتتالية (CSS) مصمم الويب والمطور على تحديد شكل ومظهر موقع الويب. HTML في حد ذاته ليس جذابًا أو مغريًا. يُحدث CSS فرقًا كبيرًا في إنشاء تصميم جميل لصفحة الويب.

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


نظام إدارة المحتوى

سنختتم بمصطلح سهل جدًا: نظام إدارة المحتوى، والمعروف أيضًا باسم CMS. ستسمع غالبًا هذا المصطلح فيما يتعلق بـ WordPress (نظام آخر لإدارة المحتوى).

في الواقع، يعد WordPress هو نظام إدارة المحتوى الأكثر شعبية في العالم. يعد نظام إدارة المحتوى أداة خلفية على موقع الويب ويسمح لك بتحرير المحتوى أو إضافته إلى الموقع بسهولة.

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

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


تحقق من المزيد من محتوى ووردبريس!

تطوير بيئة ووردبريس المحلية لماذا كبيرة

يعد WordPress نظام إدارة المحتوى الأكثر شيوعًا في العالم ويستخدمه المزيد والمزيد من المبدعين كل يوم.

تعلم المزيد عن ووردبريس هنا. لا يهم إذا كنت مبتدئًا أو تعرف WordPress عن ظهر قلب، فلدينا موارد ومقالات للجميع!

استمر في القراءة هنا.