Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. General
Code

7 نصائح مهمة لتصميم وصيانة موقع كبير

by
Length:LongLanguages:

Arabic (العربية/عربي) translation by Maryam Abbas (you can also view the original English article)

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

لقد منحني التصميم وإعادة التصميم والصيانة والعمل مع فريق المطورين بعض الأفكار والنصائح المفيدة لتسهيل الحياة. وحيث أطلقنا اليوم أحدث عملية إعادة تصميم للموقع، فإنه يبدو أنه وقت مناسب لي لكتابة أهم 7 نصائح!

1. التصميم والتشفير من أجل قابلية الصيانة

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

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

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

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

2. معرفة مجموعات المستخدم والمهام الخاصة بك

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

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

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

  1. المشترون - الأشخاص الذين يستخدمون FlashDen لشراء الملفات
    بدء تصفح العناصر، وبدء البحث، والوصول إلى الصفحة الرئيسية الشخصية، وإيداع الأموال، وتعلم كيفية عمل الموقع (بالنسبة للمشترين الجدد)
  2. المؤلفون - الناس الذين يبيعون السلع على FlashDen
    الدردشة مع الأعضاء الآخرين، والحصول على المميزعلى الصفحة الرئيسية لدفع عناصرهم، ومعرفة أخبار الموقع، والوصول بسرعة إلى محفظتهم والأرباح
  3. الزوار الجدد - المشترون المحتملون / المؤلفون / الأعضاء، الذين وصلوا للتو
    تعرف على ما يفعله الموقع بسرعة كبيرة، ابدأ، اكتشف أنواع الملفات والأسعار
  4. الأعضاء - الأشخاص الذين ليسوا مشترين أو مؤلفين حقيقيين، ولكنهم يشاركون فقط في المجتمع
    الدردشة مع الأعضاء الآخرين، رؤية أخبار الموقع، تصفح الملفات
  5. المشرفون / المراجعون - موظفونا الذين يديرون عمليات اعتماد الملفات والمنتديات المعتدلة ويشتركون بشكل عام
    احصل بسرعة على ملفات الموافقات، واطلع على أحدث سلاسل المحادثات، واستمع إلى أخبار الموقع

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

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

3. فهم أهداف الموقع

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

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

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

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

4. قم بالتصميم، ثم اصقل، اصقل، اصقل ...

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

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

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

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

5. احصل على آراء الآخرين، ولكن قم بإجراء المكالمات النهائية

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

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

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

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

6. التنظيم للمستقبل

عندما يتم تشفير تصميم لموقع كبير، فمن المهم التفكير مرة أخرى في المستقبل. ستؤثر كيفية إدارة ملفاتك ومجلداتك في وقت لاحق بشكل كبير. على سبيل المثال، قرَّرنا مؤخرًا إنشاء موقع شقيق لـ FlashDen يركز على الصوت الذي يُعرف باسم AudioJungle فقط. لجعل الأمور أكثر بساطة، سيعمل الموقع على تشغيل HTML نفسه، باستخدام أوراق أنماط فقط لجعله يبدو وكأنه موقع مختلف. مثل هذا التطور يطرح جميع أنواع التحديات الجديدة لهياكل الملفات والمجلدات الخاصة بي، وأوراق الأنماط الخاصة بي و HTML الخاص بي. إليك بعض الأمور التي يجب مراعاتها:

  1. قم بتنظيم نفسك في بنية مجلد جيدة
    يجب أن تحفظ جميع البرامج النصية وصفحات الأنماط وصور الواجهة وصور المحتوى وما إلى ذلك بشكل منفصل. مع موقع صغير، قد تتمكن فقط من تفريغ الأشياء معًا، ولكن كلما زاد حجم موقعك كلما زادت أهمية العثور على ما تحتاجه.
  2. استخدم نظام تسمية متماسك وذكي لملفاتك
    لا يوجد شيء أسوأ من النظر إلى كومة من الصور بأسماء مثل "gd_l3.jpg". كيف تفعل ذلك هو مسألة شخصية إلى حد كبير، ولكن أجد التسمية باستخدام البادئات الشائعة وأسماء الملفات الوصفية يساعد كثيرا. على سبيل المثال، قد أبدأ كل صورة في العنوان مع الكلمة "header_"، كل خلفية بـ "bg_"، ثم ستُطلق على خلفية قائمة من الرأس "header_bg_menu.jpg". تحتوي البادئات على ميزة أنه عند تصنيف ملفاتك حسب الاسم، تظهر جميعها معًا.
  3. استخدام التخريب
    لقد أجبرني مطورو البرامج على ذلك، لكن الحمد لله كان كذلك! يتتبع التخريب الملفات وتغييرات الملفات ويوقفك عن الكتابة فوق عمل المصممين/ المطورين الآخرين في نفس المشروع. كما أنه من المهم أيضًا أن تساعدك في استعادة الإصدارات القديمة من الأشياء. يستغرق الأمر بعض التعود، ولكن حتى مع جميع الأسباب التي يستخدمها المطورون، فإنه من المفيد لمصممي HTML / CSS. ألا تعرف عن التخريب؟ تحقق من التخريب للمصممين
  4. كن عميق التفكير حول كيفية كتابة HTML و CSS
    من السهل جدًا إجراء فوضى بملفات HTML و CSS، ومن الصعب حقًا نسخها احتياطيًا. بعد أربع عمليات إعادة تصميم، ما زلت أستخدم العديد من ملفات CSS نفسها وهي مهمة تنظيف الطبقات التي لم يتم استخدامها بعد الآن أو العثور على تعريفات غامضة ملفوفة في الكثير من الطبقات. استخدم الكثير من التعليقات، وربما حتى أوراق الأنماط المتعددة، وتأكد من تسمية الأنماط بشكل جيد!

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

7. اجعله سهل التطوير باستخدام ورقة الأنماط الخاصة بك

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

  1. تأكد من تحديد العناصر الافتراضية للنمط مثل <دخل> و <قوي > وما إلى ذلك.
    بهذه الطريقة ستظهر الصفحة بشكل تلقائي. إذا كنت تعتمد على أشخاص يفعلون أشياء مثل،  فحينئذٍ ستنتهي بفارق التباين في الصفحات.
  2. قم بإنشاء عناصر قابلة لإعادة الاستخدام حيث يمكن للمطورين استخدامها.
    على سبيل المثال في FlashDen، لدينا فئة جدول تسمى "general_table"، مما يصنع نمطًا جيدًا للبيانات. عندما يكون لدي فرصة لتصميم صفحة، يمكنني إنشاء أنواع أكثر تحديدًا من الجداول وتسليط الضوء على البيانات، ولكن على الأقل يكون لمطوّر البرامج أن يجمع صفحة نمط جيد من جميع النواحي لاستخدامها.
  3. تأكد من أن تنسيق الصفحة يحتوي على بنية تبدو رائعة حتى عندما يكون النص فيها.
    حتمًا ستكون هناك صفحات لم تتح لك الفرصة إضافة صور إليها، والتي قد تبدو مملة بعض الشيء. باستخدام أشياء مثل أنماط العناوين، والقوائم الجانبية، وما إلى ذلك، يمكنك التأكد من أنها لا تزال تبدو لطيفة ولها بعض الأسلوب المرئي. على سبيل المثال، على FlashDen، نلف معظم كتل النص في:

    <مجموعة حقول>
    <العنوان <عنوان تفسيري> العنوان>
    محتوى
    <مجموعة حقول/> 

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

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

ما هو رأيك؟

إذاً هذه هي نصيحتى، إذا كان لديك بعض النصائح الخاصة بك من عملك على مواقع أكبر، اترك تعليقاً!  

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.