اليوم الخامس من التحدي: رسم واجهة الموقع
الناقل :
elmasry
| الكاتب الأصلى :
شبابيك
| المصدر :
www.shabayek.com
واليوم نكمل مع
اليوم الخامس
من تحدي سباستيان الاسترالي الذي تحدثنا
من قبل عنه هنا
.
الشعار
Logo
كان أول شيء بدأ به سباستيان في اليوم الخامس تصميم الشعار (لوجو) لأنه حجر الزاوية لمشروعه، الأساس الذي سيقوم علي نشاطه التجاري، ولذا أعطاه كل الوقت الذي يستحقه. كنا قد ذكرنا من قبل أن سباستيان لديه لوحة تحوي صورا لكل المواقع والأشياء التي شاهدها ونالت إعجابه، ليعود إليها بحثا عن الإلهام في عمله. بعد خمس تصميمات، ظهر للوجود شعار الموقع الحالي.
الموقع
Website
عليك أن تخطط للمستقبل وأنت تصمم موقعك، مثل عدد الصفحات، غرض الموقع، ما الهدف / الرسالة التي يريد الموقع نقلها لزواره (أو ما يسمونه Call to Action مثل أن تطلب من زائر موقعك شراء كتابك أو الاشتراك في الخدمات التي تبيعها) ما الكلمات المفتاحية (Tags) التي ستعتمد عليها لجلب الزوار من نتائج مواقع البحث، هل ستستعمل صيغة فلاش أو تنسيق هتمل HTML؟ كذلك، على كل صفحة من صفحات الموقع أن تركز على موضوع واحد وبالأكثر 7 عناصر (هل تذكر مقالتي عن نظرية 7 زائد/ناقص اثنين؟
أنصحك بقرائتها مجددا
). إذا خالفت هذه القاعدة ربما مل الزائر و فر من موقعك بلا عودة. وأما سباستيان فكتب كل شيء يريد لموقعه أن يحتويه، ثم صنف هذه الأشياء تحت 7 أبواب، كما ترى في موقعه الحالي.
لماذا الآن؟
لماذا تأتي مرحلة تصميم الواجهة بعد مرحلة تصميم وظائف الموقع؟ لسبب بسيط، لأن الموقع يجب أن يخدم وظيفة محددة، لا أن يخدم ما توفره واجهة استخدام جميلة. هدف أي موقع هو تقديم خدمة، وعليه يجب بناء هذه الخدمة بشكل بسيط، ثم تصميم واجهة استخدام بناء على الوظائف المراد تقديمها، وليس أن تبدع واجهة استخدام جميلة ثم تبدأ تصمم وظائف يمكن أن تستفيد منها من واجهة الموقع. خلاصة هذه الفقرة هي: الوظيفة تأتي قبل الشكل الجمالي، وليس العكس.
قواعد التصميم
يجادل الفنانون بأن الفن لا يتبع قواعد، لكن الموقع الخدمي، القائم على تقديم خدمة ووظيفة، لا يتبع هذه القاعدة. حرص سباستيان على أن يتبع في موقعه القواعد التالية:
سهولة التحرك في الموقع:
في الصفحات العامة (مثل صفحة البداية) يكون الهدف العام هو طلب شيء من الزائر (شراء منتج / خدمة، الاشتراك والتسجيل..) بينما في الصفحات الخاصة بالمشتركين يكون المعيار مدى قدرة المشترك على التحرك في الموقع للحصول على كل ما يريده من خدمات ومعلومات.
الخطوط (فونت):
اختر واحدا أو اثنين على الأكثر – واحد للعناوين وآخر للمحتويات، لكن التزم بهذا التنسيق.
الألوان:
عنصر ذو أهمية كبيرة، ويجب اختيار مجموعة من الألوان المتناسقة معا، مثل لونين أو ثلاثة أو أربعة على الأكثر.
التنسيق والمساحات البيضاء:
احرص على استعمال المساحات البيضاء بشكل مريح، وأن يأتي المحتوى المهم في الجزء العلوي من الصفحة، قبل أن يضطر الزائر للتحرك لأسفل لعرض المزيد من محتوى صفحة الموقع، واحرص على أن يكون الهدف العام مكتوبا بلون مريح وظاهر ويمكن رؤيته بسهولة في أغلب برامج التصفح.
رسالة / الهدف العام من الموقع:
Call to Action
أنت تصمم موقعك لأجل هدف، هذا الهدف يجب أن يكون واضحا وضوح الشمس، ويجب أن يراه زائرك خلال ثوان من هبوطه في موقعك، فإذا كنت تريد من الزائر الاتصال بك، عليك أن تصمم أيقونة ذات حجم كاف تكتب عليها بألوان واضحة وسهلة على العين: اتصل بي على رقم كذا لتحصل على عرض مبدئي. الألوان التي ستكتب بها هدفك العام ذات أهمية كبيرة، فهي تؤثر بشكل لاواعي على نفسية القارئ وشعوره تجاه موقعك. يجب على الألوان أن تكون واضحة ضمن سياق الموقع، ويجب أن تحفز القارئ وتنشطه كي ينفذ ما تطلبه منه.
القوالب الجاهزة:
Templates
قبل أن تأخذه الحماسة، يبحث سباستيان في جوجل عن قوالب مواقع انترنت جاهزة ليستعملها بدلا من أن يبدأ من الصفر، ومثل هذه القوالب تساعد أحيانا على توفير الوقت والجهد. على أنه لم يجد ما يلبي ما يريده فبدأ من الصفر.
النموذج الأولي:
Mock up
بدأ سباستيان رحلة تصميم موقعه على الورق، ورسم تخيلا للصورة التي يريد من موقعه أن يكون عليها، وطريقة عرض الخدمات والمعلومات، ثم أطلق برنامج فوتوشوب وبدأ يحول ما رسمه من ورقي إلى إلكتروني، ثم بدأ يحذف العناصر والمكونات التي يصعب تنفيذها بلغة التصميم هتمل HTML ثم بدأ عملية تقطيع صورة التصميم وبدأ يبرمج الموقع بيده حتى ظهر الشكل الأولي المبدئي لموقعه… وأصبح كل شيء جاهزا لربط الروابط وتوفير المعلومات.
وقت أن انتهى سباستيان من كتابة هذه التدوينة، كانت الساعة 2:41 صباحا بتوقيته، وكان وقت النوم والراحة قد حل.