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

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

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

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

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

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

ارسم تصميمك

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

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

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

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

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

النص

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

اللون

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

الصور

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

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

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

الخط

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

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

To choose a font:

 

 

في هذه الوحدةEditEdit

Document Tags and Contributors

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