تصميم موقع ويب

 



كيفية تصميم موقع ويب [2021]


الأكاذيب: يجب أن تكون عبقريًا فنيًا أو معالجًا في البرمجة باستخدام أدوات عالية التقنية لتصميم موقع ويب يبدو وكأنه مذهل.


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


خاصة عندما تكون مسلحًا بدليل مفصل للغاية (ولكن يسهل مسحه وفهمه) مثل هذا الدليل.


ننتقل اليوم إلى أساسيات كيفية تصميم موقع ويب بدءًا من ... الآن!


ما هو تصميم الويب؟




قبل أن نتعمق في العملية ، لنبدأ بالأساسيات: تصميم الويب هو عملية إنشاء الشكل والمظهر المرئي لموقع ويب.


خاصة.


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


ومن ثم "انظر" (ما يراه الناس على موقعك) و "الشعور" (ما مدى سهولة استخدام موقعك).


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


في الأيام الخوالي ، كان على مصممي الويب ترميز مواقع الويب يدويًا من البداية - كتابة كل سطر من كود HTML و CSS لكل موقع ويب قاموا بإنشائه.


في هذه الأيام ، يمكنك أن تصبح مصممًا دون معرفة أي من هذه الأشياء بفضل منشئي مواقع الويب "ما تراه هو ما تحصل عليه" ( المفضل لدينا هو Wix ) وأنظمة إدارة المحتوى مثل WordPress (والتي يمكنك الحصول عليها باستضافة رخيصة وبنقرة واحدة التثبيت من Hostgator ).


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


ماذا يعني "المظهر"


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


الألوان




ما هو لون النص الخاص بك؟ ماذا عن الخلفية وراء هذا النص؟ قائمة رأسك؟ أزرار؟

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

الخطوط



تحدد الخطوط كيف يبدو النص على موقعك. يمكن أن تشعر نفس الكلمات بمظهر رائع (مثل Helvetica الأنيق دائمًا ) أو غير رسمي وودود (# comic sans ) استنادًا إلى الخط فقط!

الرسومات / الصور / مقاطع الفيديو


هذه أشياء مثل الصور ومقاطع الفيديو والأيقونات والرسوم التوضيحية (حيث يتم رسم "الصورة" بأكملها في برنامج مثل Adobe Illustrator - القطة اللطيفة أعلاه هي مثال!) ، أو الصور المركبة (مثل "كيفية تصميم موقع ويب" الصورة أعلى هذا المنشور).

من الواضح أن الصور سوف يلتقطها مصور.

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

ومن الناحية الفنية ، فإن "مصمم الرسومات" هو من يقوم بإنشاء أيقونات ورسوم توضيحية وصور مركبة

ولكن نظرًا لوجود الكثير من التداخل ، فإن العديد من مصممي الويب لديهم مهارات في التصميم الجرافيكي / التصوير الفوتوغرافي / التصوير بالفيديو نظرًا لوجود الكثير من التداخل.

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

محتوى مكتوب


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

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

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

ماذا يعني "الشعور"


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


تخطيط



التخطيط هو طريقة ترتيب الرسومات والنصوص والأزرار في صفحتك. 


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


التنقل


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


باستخدام هذا الموقع والصفحة كمثال (أنت هنا ، لم لا) ، وهذا يشمل أشياء مثل


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


الهدف من عناصر التنقل مثل هذه هو تسهيل عثور الأشخاص على الصفحات والمعلومات التي يريدونها وقتما يريدون.


التوافق



التوافق هو مدى جودة تحميل موقعك / صفحاتك ومظهرها على متصفحات وأنظمة تشغيل وأجهزة مختلفة.


سيتعين على موقعك أن يبدو ويعمل بشكل مختلف قليلاً بالنسبة لشاشة الهاتف مقاس 6 بوصات حيث يتعين على الأشخاص النقر على الأشياء بأصابعهم عن تلك الموجودة على شاشة الكمبيوتر المحمول مقاس 15 بوصة حيث يستخدم الأشخاص الماوس / لوحة التتبع (نصيحة احترافية: إذا كنت سوف ندخل في لعبة بناء مواقع الويب ، احصل على فأرة ؛ حتى لوحات التتبع من Apple هي أصعب بكثير في الاستخدام).


تصميم الويب مقابل تطوير الويب


عندما تتعرف على عالم إنشاء مواقع الويب ، سترى "تصميم الويب" و "تطوير الويب" يتم طرحهما بشكل متبادل إلى حد كبير.


على مستوى المبتدئين ، فإنهم في الأساس - كلاهما يتعلق بإنشاء مواقع الويب.


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


تصميم الويب ، كما وصلنا أعلاه قليلاً ، يتعلق بما يراه الناس وكيف يتفاعلون مع مواقع الويب الخاصة بك - الأزرار والألوان والخطوط والصور وتخطيطات الصفحات ، إلخ.


يتعلق تطوير الويب بالدخول في الواقع إلى الكود ، وكتابة HTML ، و CSS ، و Javascript ، و PHP ، وما إلى ذلك التي تشكل موقعًا وظيفيًا.


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


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


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


إذن ، إليك المزيد من التعمق في الاختلافات بين مصمم الويب ومطور الويب.


ما هو مصمم الويب؟




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


ولكن في عالم مواقع الويب الكبيرة مثل Amazon و Google ، وربما مواقعك ذات يوم ، يوجد في الواقع نوعان مختلفان من "مصمم الويب".


مصمم واجهة المستخدم (UI)


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


فقط "المظهر" المرئي ، الجماليات ، وليس أي من "الإحساس".


لذلك عندما يقول الكثير من الناس "مصمم الويب" فهذا عادة ما يتحدثون عنه ...


مصمم تجربة المستخدم (UX)


ولكن هناك نهاية أخرى للأشياء في عالم تصميم الويب - "شعور" موقع الويب الخاص بك.


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


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


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


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


ما هو مطور الويب؟




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


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


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


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


في تلك المرحلة ، أنت تفوز بالتأكيد.


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


مطور الواجهة الخلفية


مطورو الواجهة الخلفية هم الرجال والبنات الذين يعملون على البنية الأساسية لموقع الويب.


يستخدمون لغات مثل Java و SQL و C ++ للحصول على معلومات معينة من قواعد البيانات ، وتحميل صفحة عند النقر فوق زر ، وإرسال إدخال جديد من أحد نماذج الاتصال الخاصة بك إلى برنامج مثل MailChimp حتى تتمكن من القيام ببعض التسويق عبر البريد الإلكتروني.


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


مطور الواجهة الأمامية


يقوم مطورو الواجهة الأمامية بإنشاء HTML و CSS وجافا سكريبت التي تجعل زوار موقعك يراهاون.


تحتاج زر هنا؟ سيضيف مطور الواجهة الأمامية ذلك إلى الكود.


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


مطور كامل المكدس


الآن بعد أن عرفنا عن مطوري الواجهة الأمامية / الخلفية ، هذا سهل: مطور مكدس كامل هو مجرد شخص يمكنه المساعدة في طرفي "حزمة تطوير الويب".


الخطوة الأولى: تحديد الغرض من موقعك




نعم ، الخطوة الأولى في تصميم موقع على شبكة الإنترنت هي خطوة فلسفية إلى حد ما : ما هي أسباب إنشاء الموقع على الإطلاق ؟


هل تريد إنشاء مدونة تجذب الملايين من المعجبين والقراء؟


هل لديك فكرة عمل رائعة عبر الإنترنت للحصول على بعض الوقت اللطيف والحرية المالية التي لا يمكنك الحصول عليها في وظيفة يومية؟


هل تتعلم إنشاء مواقع حتى تتمكن من كسب المال كمنشئ مواقع ويب لأشخاص آخرين؟


مهما كان سبب رغبتك في معرفة كيفية تصميم موقع ويب ، يجب أن يبدأ كل موقع ويب تنشئه بهدف أو "سبب وجود" كما يقول الفرنسيون أو الأشخاص الذين يحاولون أن يكونوا خياليين جدًا (#guiltyascharged).


لماذا تسأل؟


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


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


يمكن أن تساعدك معرفة سبب إنشاء موقع ويب وما يجب القيام به على اتخاذ قرارات بشأن ما يحتاجه التصميم الذي تنشئه - وما هو #extra.


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


حتى نساعدك على أن تكون واضحًا تمامًا في تصميم موقع الويب الخاص بك ، لدينا ثلاثة أشياء لك: 


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


أولاً ، هؤلاء عامة ، اطلب من راهبك البوذي / أينشتاين الأسئلة:


  • لماذا تريد موقع على شبكة الانترنت؟
  • كيف يبدو موقع الويب "الناجح" بالنسبة لك؟
  • من تعتقد جمهورك / زوار موقعك؟
  • ماذا يكسبون من زيارة موقعك؟
  • ماذا تريد منهم أن يفعلوا بمجرد وصولهم إلى موقعك؟
  • كيف تقارن فكرة موقع الويب الخاص بك مع الآخرين؟
  • هل تهدف إلى كسب المال من موقعك؟


هذا الأخير يقودنا بشكل جيد إلى:


أهداف الموقع الرئيسية الثلاثة


على مستوى عالٍ ، يمكن لموقع ويب القيام بثلاثة أشياء من أجلك:


  • أسس سلطتك
  • توليد العملاء المحتملين
  • بيع المنتجات

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

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

بدون الخوض في محاضرة عمل كاملة ، نعني أساسًا "تكوين عملاء محتملين" أحد أمرين:

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

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

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

6 أنواع من المواقع

يمكن ترجمة هذه الأهداف الأساسية الثلاثة إلى عدة أنواع مختلفة من المواقع ، سيؤثر كل منها على الوظائف والجماليات التي ستحتاج إلى وضعها في الاعتبار عند تصميم موقع ويب (على الرغم من أنه يمكن إنشاء أي منها باستخدام مُنشئ مثل Wix أو مع WordPress المستضاف من قبل شركة رائعة مثل HostGator ).

فيما يلي بعض الأمثلة التي يجب مراعاتها (أدخل إيماءة شاملة وواسعة هنا):


  • مقالات

إن قلب وروح موقع التدوين (مثل هذا) هو منشور المدونة العظيم (مثل هذا!).

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

قد يكون لديك موقع تدوين يشارك أفكارك الشخصية ومغامراتك مثل خمسين قهوة .

قد يكون لديك مدونة تعلم الناس بعض المهارات التي تمتلكها (مثل هذه!).

قد يكون لديك مدونة تحقق أرباحًا ، أو ربما تكون فقط من أجل رضاك ​​الشخصي (ورضا عدد قليل من الزوار على الأقل).

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


  • ملف

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

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

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


  • كراسة

تشبه مواقع الكتيبات الإلكترونية Portfolios من حيث أنها معلوماتية إلى حد كبير ولكن قد تحتوي على بعض ميزات إنشاء قوائم العملاء المحتملين و / أو مدونة.

الفرق هو أن Portfolios هي مواقع للأفراد ، بينما الكتيبات مخصصة للشركات والمجموعات والمنظمات غير الربحية.

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

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

على الجانب الآخر…


  • خدمات احترافية

قد تشمل مواقع الخدمات المهنية مكاتب المحاماة ووكالات تصميم الويب والفنادق والوكالات العقارية ، إلخ.

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

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

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

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

  • التجارة الإلكترونية

هذا سهل لأنك تعرف بالتأكيد هذا النوع من المواقع - أمازون.

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

الهدف من هذه: الحصول على حركة المرور ، وتحقيق المبيعات.

الخطوة 2: اختر النظام الأساسي لموقع الويب الخاص بك


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


ما المقصود من ذلك؟


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


من الناحية الفنية ، هناك الكثير من الطرق للقيام بذلك.


  • بناة الموقع


أدوات إنشاء مواقع الويب هي أدوات تتيح لك الانتقال من 0 إلى موقع الويب بسرعة فائقة.


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


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


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


  • Wix


الأفضل في كل مكان


Wix هو ما نود أن نطلق عليه "منشئ موقع الويب" - إنه حقًا يضع المعيار لأي شخص آخر. 

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

ولكن إذا كنت ستغوص بالكامل في عالم إنشاء مواقع الويب ، فلن تخطئ هنا. 

تحقق من مراجعة Wix الكاملة هنا.


  • منشئ موقع التمساح

أرخص ... وهذا ليس بالأمر السيئ!

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

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

تحقق من مراجعة Gator Website Builder الكاملة هنا.

  • منشئ موقع الاتصال المستمر

أفضل موقع لبناء المواقع للأعمال الصغيرة

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

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

تحقق من مراجعة Constant Contact Website Builder هنا.


  • ووردبريس


النظام الأساسي الآخر لتصميم وبناء وتشغيل مواقع الويب هو WordPress.

إنه "نظام إدارة المحتوى" (CMS) الذي يجعل من السهل إنشاء المواقع وتخصيصها دون معرفة كيفية البرمجة.

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

WordPress نفسه مجاني للاستخدام بنسبة 100٪ ، وهو أمر رائع جدًا.


الخطوة 3: اختر القالب أو الموضوع الخاص بك


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


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


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


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


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


بضع ملاحظات قبل أن ندخل في بعض النصائح حول اختيار أفضل قالب أو سمة لموقعك:


  • تأتي بعض السمات / القوالب مع مجموعة من الصفحات المبنية مسبقًا ، لذلك بدأت بالفعل أشياء مثل صفحتك الرئيسية وصفحتك وصفحة الاتصال ؛ سيمنحك الآخرون بعض الألوان / الخطوط القياسية وأنواع تخطيطات الصفحات ، ثم سيتعين عليك إنشاء الصفحات التي تحتاجها من نقطة البداية هذه - هذا عمل أكثر قليلاً ، لكن لا يزال لديك السبق على الأشخاص تفعل كل شيء من الصفر.
  • جميع السمات والقوالب الخاصة بأفضل الأنظمة الأساسية لمواقع الويب قابلة للتخصيص ، لذا يمكنك جعل موقعك يبدو بالطريقة التي تريدها بالضبط ، ولكن قد يكون من المفيد العثور على واحد يحتوي على 70-80٪ مما تريده بالفعل - يوفر لك بعض الوقت في إضافة / إعادة ترتيب الأشياء لاحقًا.


نصائح لاختيار سمة أو قالب موقع ويب


أبقيها بسيطة


هذا هو المكان الذي من المهم حقًا معرفة الغرض من موقعك.


تأتي بعض السمات مع الكثير من الرسوم المتحركة البراقة والتخطيطات المعقدة والعديد من الميزات المضمنة التي يمكن أن تبدو رائعة حقًا عندما تراها لأول مرة.


لكن هذه الأشياء يمكن أن تشتت انتباه الزوار.


يمكنهم أن يجعلوا تخصيص موقعك أكثر تعقيدًا.


ويمكنهم إبطاء موقعك.


لذا ابدأ بالميزات والوظائف الأساسية التي ستحتاجها لتحقيق الغرض من موقع الويب الخاص بك.


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


تحقق من المنافسة


يعد هذا مكانًا مفيدًا للغاية للبدء ، خاصة مع مواقعك القليلة الأولى.


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


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


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


فقط ابحث عن بعض القطع الأساسية الجيدة / السيئة واستمر في الحركة!


انتبه للخطوط والألوان


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


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


ولكن قد يستغرق ذلك بعض العمل ، اعتمادًا على النظام الأساسي لموقع الويب ونموذج معين.


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


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


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


ضع المحمول في الاعتبار

من المحتمل أنك تقرأ هذا المنشور على هاتفك.


كيف في العالم أن نعرف ذلك؟


لأن معظم حركة الإنترنت هذه الأيام تأتي من الأجهزة المحمولة .


ولدينا بيانات Google Analytics التي تفيد بأن معظم زوارنا يطابقون هذه الفاتورة.


في رحلة تصميم الويب الخاصة بك ، ستصادف منشورات أخرى تذكرك بـ "التأكد من أن موقعك يستجيب للجوال".


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


نحن نتفق ، يجب أن يكون النموذج الخاص بك مستجيبًا للجوال.


ما نختلف عليه هو "التأكد من أن النموذج الخاص بك يستجيب للجوال".


الجميع معروف أن هذا مهم لسنوات ؛ أي قالب أو موضوع تختاره سيكون متجاوبًا.


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


ستحتوي بعض الأنظمة الأساسية على "عرض محمول" في العرض التوضيحي الخاص بها حتى تتمكن من رؤية شكل النموذج على الشاشات الأصغر.


اختراق إذا لم يكن متاحًا: ما عليك سوى تغيير حجم نافذة المتصفح إلى أصغر عرض ممكن.


فقط لأن الجميع ذكر "تحسين محركات البحث"

مرة أخرى ، مثل "استجابة الجوال" ، لا داعي للقلق كثيرًا.


كان SEO ("تحسين محرك البحث") مهمًا لفترة من الوقت ، لذا فإن أي نظام أساسي لموقع الويب أو موضوع أو نموذج تختاره سيوضع في الاعتبار تحسين محركات البحث.


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


حتى الآن ، فقط اعلم أنه لا داعي للقلق بشأن هذا ؛ مهما كان الموضوع الذي تختاره ، ستكون بخير.


الخطوة 4: اختر علامتك التجارية الأولية




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


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


"لكن انتظر ، ألا يجب أن أكتشف الخطوط والألوان قبل أن أختار قالبًا؟ ألن يغير ذلك النموذج الذي أختاره؟ "


سؤال ذكي لطرحه. ولا ، لا يجب عليك ذلك.


حسنًا ، يمكنك ذلك ولكنك لست بحاجة إلى ذلك.


لماذا؟


لأنه عندما تبدأ ، من الصعب جدًا معرفة ما يجب أن تكون عليه العلامة التجارية ؛ هناك الكثير من الخبرة والممارسة التي تدخل في فهم أفضل الألوان والخطوط والأسلوب العام الذي يجب أن يتمتع به موقع الويب ، ولماذا سيكون Helvetica أفضل من Times New Roman ، لماذا يعتبر اللون البرتقالي المحترق أفضل علامة تجارية من أحمر محرك النار.


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


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


ربما يجب عليك تغييرها ، لكن قد لا تضطر إلى ذلك.


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


ومع ذلك ، فإن الألوان والخطوط هي أجزاء مهمة في تصميم موقع الويب.


لذلك دعونا نستعرض بعض الأساسيات حول كل منهما.


مخططات ألوان الموقع




يعد اللون جزءًا كبيرًا من تحديد تصميم موقع الويب الخاص بك والعلامة التجارية بشكل عام.


هناك الكثير من علم النفس وراء معنى الألوان وما هي الألوان الأفضل لموقعك على الويب وللعمل الذي يمثله.


هناك كتب ومواقع كاملة تغطي موضوع " نظرية الألوان " ، لكننا هنا لنوفر لك الساعات التي ستستغرقها لقراءتها.


كما هو الحال مع العديد من الأشياء ، لدينا دليل مخططات ألوان موقع الويب الكبير هنا .


نسخة مختصرة…


فيما يلي أساسيات ما تعنيه الألوان فيما يتعلق بالعلامات التجارية والمواقع الإلكترونية:


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


حسنًا ، معظم العلامات التجارية لها لون واحد مهيمن ، ثم لونان أو ثلاثة ألوان ثانوية ولون خلفية.


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


بناء موقع لمطعم أنيق (مكلف أيضا)؟ الأسود والأحمر والأرجواني نقاط بداية جيدة.


بناء موقع لبيع ملابس الاطفال؟ قد يكون اللون الأزرق أو الوردي أو الأصفر هو الحركة.


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


بمجرد أن يكون لديك فكرة عامة عن اللون السائد الأفضل لجمهورك المستهدف ، فقد حان الوقت لمنح عجلة الألوان من Adobe .


إنها أداة مجانية بنسبة 100٪ تتيح لك اختيار اللون السائد ، ثم تقترح تلقائيًا ألوانًا ثانوية لك.


وسيمنحك الرموز السداسية العشرية (مثل "# 231885") وهي ما ستستخدمه لإخبار مُنشئ موقع الويب / WordPress بالضبط باللون الذي ستستخدمه في أماكن معينة (بدلاً من الاعتماد على عينيك لمحاولة المطابقة - هذا ليس مجرد خطوة للمحترفين لول).


بمجرد اكتشاف نظام الألوان الخاص بك ، كيف تستخدمه على موقعك؟


يجب استخدام اللون السائد في أهم أجزاء موقعك مثل:


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


يجب استخدام ألوانك الثانوية كلكنات في أماكن مثل:


  • العناوين الفرعية
  • خلفيات معلومات مهمة ، لكنها ليست الأكثر أهمية
  • آثار تحوم


ويجب استخدام ألوان الخلفية ، التي قد تكون بيضاء أو رمادية أو سوداء أو أحد الألوان الثانوية التي حصلت عليها من أصدقائنا في Adobe ، في ... الخلفية.


دوه. بشكل أكثر تحديدًا / مفيد:


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


أحدث أقدم