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

 أهم الأشياء أولاً: التخطيط

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

للبدء ستحتاج للإجابة على هذه الأسئلة:

  1. عمّا هو موقعك؟ هل تحب الكلاب؟ مدينة نيويورك؟ شخصية باكمان؟
  2. ما المعلومات التي تقدمها حول الموضوع؟ اكتب عنواناً وبعض فقرات، وفكِّر بصورة تريد عرضها على صفحتك.
  3. كيف يبدو موقعك؟ ما لون الخلفية؟ ما نوع الخط المناسب: رسمي، كرتوني، غامق، رقيق؟

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

ارسم تصميمك

بعد إجابتك على الأسئلة السابقة التقط قلماً وورقة وارسم (بطريقة تقريبيّة) كيف تريد أن يبدو الموقع. لأوَّل موقع بسيط تقوم به لن يكون هناك الكثير لترسمه، ولكن يجب أن تعتاد على القيام بهذا. تلك الطريقة تساعد حقاً (لا يجب عليك أن تكون فان غوخ لتُنجِز ذلك!).

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

غالباً ما يضم فريق الويب مصمم رسوميات (UI) ومصمم لتجربة المستخدم (UX). يقوم مصمم الرسوميات بصنع رؤية للموقع. أما مصمم تجربة المستخدم فيقوم بدور معالجة كيف ستكون تجربة المستخدمين مع الموقع وكيف سيتفاعل الموقع معهم.

اختر مواد العرض

في هذه المرحلة من الجيد البدء في وضع المحتوى الموجود على الورقة في صفحة الويب.

النص

يجب أن يكون لازال لديك الفقرات والعنوان من السابق (عندما رسمتها على ورقة). ابقِ تلك الأشياء قريبة منك حالياً (سنحتاجها بعد قليل).

اللون

لاختيار لون قم بالذهاب لموقع منتقي الألوان وابحث عن اللون الذي تريده. عندما تضغط على اللون سوف ترى عبارة غريبة مكوّنة من ستة أحرف مثل 660066#. تدعى تلك العبارة بالرمز السداسي عشري (hexadecimal)، وهي تمثل لونك. قم حالياً بنسخ ذلك الرمز واحفظه في مكان ما.

الصور

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

  1. عندما تجد الصورة التي تريدها اضغط عليها.
  2. اضغط على الزر عرض الصورة (View image).
  3. في الصفحة التالية التي ستفتح اضغط على الصورة بواسطة الزر الأيمن للفأرة (استخدم  Ctrl + click على نظام ماك) واختر حفظ الصورة ك (Save Image As) واختر مكان ما على جهازك لتحفظها عليه. هناك حل بديل وهو أن تنسخ عنوان الصورة من متصفحك لاستخدامه لاحقاً.

ملاحظة: معظم الصور على الويب، بما فيها الصور الموجودة في موقع جوجل صور، تحتوي على حقوق ملكيّة. لتقلل من احتمال انتهاك حقوق الطبع والنشر قم بترشيح الصور باستخدام مُرشِّح جوجل. اضغط على أدوات البحث (Search tools) ومن ثم اختر حقوق الاستخدام (Usage rights):

الخط

لاختيار الخط:

  1. قم بالذهاب إلى موقع خطوط جوجل وحرِّك الفأرة للأسفل حتى تجد الخط الذي تريده. تستطيع أيضاً استخدام الأدوات الموجودة في الجهة اليمنى للموقع لإجراء ترشيح مُتقدِم للنتائج.
  2. اضغط على أيقونة الزائد الموجودة بجانب الخط الذي تريده.
  3. اضغط على زر "* العائلة المختارة (Family Selected)" الموجود في الشريط الموجود أسفل الموقع (الرمز "*" يتغيّر اعتماداً على عدد الخطوط التي اخترتها).
  4. قم بنسخ السطور التي ستظهر في النافذة المنبثقة إلى محرر النصوص لتحفظها لاستخدامها لاحقاً.

 

 

في هذه الوحدة أيضاًEditEdit

Document Tags and Contributors

المساهمون في هذه الصفحة: ahmadnourallah, jwhitlock
آخر مَن حدّثها: ahmadnourallah,