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

نشرت: 2019-11-09

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

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

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

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

  • صورة البطل
  • تجربة المستخدم
  • إطار سلكي
  • هندسة المعلومات
  • مستجيب للجوال
  • HTML و CSS و JavaScript
  • CMS


صورة البطل

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

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

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

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


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

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

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

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


إطار سلكي

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

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

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

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

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


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

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

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

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


مستجيب للجوال

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

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

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

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

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

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


HTML و CSS و JavaScript

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

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

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

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

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


CMS

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

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

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

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


تحقق من المزيد من محتوى WordPress!

محلي-وورد-بيئة-تنمية-لماذا-كبير

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

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