اليوم الخامس من التحدي: رسم واجهة الموقع
10
واليوم نكمل مع اليوم الخامس من تحدي سباستيان الاسترالي الذي تحدثنا من قبل عنه هنا.
الشعار Logo
كان أول شيء بدأ به سباستيان في اليوم الخامس تصميم الشعار (لوجو) لأنه حجر الزاوية لمشروعه، الأساس الذي سيقوم علي نشاطه التجاري، ولذا أعطاه كل الوقت الذي يستحقه. كنا قد ذكرنا من قبل أن سباستيان لديه لوحة تحوي صورا لكل المواقع والأشياء التي شاهدها ونالت إعجابه، ليعود إليها بحثا عن الإلهام في عمله. بعد خمس تصميمات، ظهر للوجود شعار الموقع الحالي.
الموقع Website
عليك أن تخطط للمستقبل وأنت تصمم موقعك، مثل عدد الصفحات، غرض الموقع، ما الهدف / الرسالة التي يريد الموقع نقلها لزواره (أو ما يسمونه Call to Action مثل أن تطلب من زائر موقعك شراء كتابك أو الاشتراك في الخدمات التي تبيعها) ما الكلمات المفتاحية (Tags) التي ستعتمد عليها لجلب الزوار من نتائج مواقع البحث، هل ستستعمل صيغة فلاش أو تنسيق هتمل HTML؟ كذلك، على كل صفحة من صفحات الموقع أن تركز على موضوع واحد وبالأكثر 7 عناصر (هل تذكر مقالتي عن نظرية 7 زائد/ناقص اثنين؟ أنصحك بقرائتها مجددا). إذا خالفت هذه القاعدة ربما مل الزائر و فر من موقعك بلا عودة. وأما سباستيان فكتب كل شيء يريد لموقعه أن يحتويه، ثم صنف هذه الأشياء تحت 7 أبواب، كما ترى في موقعه الحالي.
لماذا الآن؟
لماذا تأتي مرحلة تصميم الواجهة بعد مرحلة تصميم وظائف الموقع؟ لسبب بسيط، لأن الموقع يجب أن يخدم وظيفة محددة، لا أن يخدم ما توفره واجهة استخدام جميلة. هدف أي موقع هو تقديم خدمة، وعليه يجب بناء هذه الخدمة بشكل بسيط، ثم تصميم واجهة استخدام بناء على الوظائف المراد تقديمها، وليس أن تبدع واجهة استخدام جميلة ثم تبدأ تصمم وظائف يمكن أن تستفيد منها من واجهة الموقع. خلاصة هذه الفقرة هي: الوظيفة تأتي قبل الشكل الجمالي، وليس العكس.
قواعد التصميم
يجادل الفنانون بأن الفن لا يتبع قواعد، لكن الموقع الخدمي، القائم على تقديم خدمة ووظيفة، لا يتبع هذه القاعدة. حرص سباستيان على أن يتبع في موقعه القواعد التالية:
سهولة التحرك في الموقع: في الصفحات العامة (مثل صفحة البداية) يكون الهدف العام هو طلب شيء من الزائر (شراء منتج / خدمة، الاشتراك والتسجيل..) بينما في الصفحات الخاصة بالمشتركين يكون المعيار مدى قدرة المشترك على التحرك في الموقع للحصول على كل ما يريده من خدمات ومعلومات.
الخطوط (فونت): اختر واحدا أو اثنين على الأكثر – واحد للعناوين وآخر للمحتويات، لكن التزم بهذا التنسيق.
الألوان: عنصر ذو أهمية كبيرة، ويجب اختيار مجموعة من الألوان المتناسقة معا، مثل لونين أو ثلاثة أو أربعة على الأكثر.
التنسيق والمساحات البيضاء: احرص على استعمال المساحات البيضاء بشكل مريح، وأن يأتي المحتوى المهم في الجزء العلوي من الصفحة، قبل أن يضطر الزائر للتحرك لأسفل لعرض المزيد من محتوى صفحة الموقع، واحرص على أن يكون الهدف العام مكتوبا بلون مريح وظاهر ويمكن رؤيته بسهولة في أغلب برامج التصفح.
رسالة / الهدف العام من الموقع: Call to Action
أنت تصمم موقعك لأجل هدف، هذا الهدف يجب أن يكون واضحا وضوح الشمس، ويجب أن يراه زائرك خلال ثوان من هبوطه في موقعك، فإذا كنت تريد من الزائر الاتصال بك، عليك أن تصمم أيقونة ذات حجم كاف تكتب عليها بألوان واضحة وسهلة على العين: اتصل بي على رقم كذا لتحصل على عرض مبدئي. الألوان التي ستكتب بها هدفك العام ذات أهمية كبيرة، فهي تؤثر بشكل لاواعي على نفسية القارئ وشعوره تجاه موقعك. يجب على الألوان أن تكون واضحة ضمن سياق الموقع، ويجب أن تحفز القارئ وتنشطه كي ينفذ ما تطلبه منه.
القوالب الجاهزة: Templates
قبل أن تأخذه الحماسة، يبحث سباستيان في جوجل عن قوالب مواقع انترنت جاهزة ليستعملها بدلا من أن يبدأ من الصفر، ومثل هذه القوالب تساعد أحيانا على توفير الوقت والجهد. على أنه لم يجد ما يلبي ما يريده فبدأ من الصفر.
النموذج الأولي: Mock up
بدأ سباستيان رحلة تصميم موقعه على الورق، ورسم تخيلا للصورة التي يريد من موقعه أن يكون عليها، وطريقة عرض الخدمات والمعلومات، ثم أطلق برنامج فوتوشوب وبدأ يحول ما رسمه من ورقي إلى إلكتروني، ثم بدأ يحذف العناصر والمكونات التي يصعب تنفيذها بلغة التصميم هتمل HTML ثم بدأ عملية تقطيع صورة التصميم وبدأ يبرمج الموقع بيده حتى ظهر الشكل الأولي المبدئي لموقعه… وأصبح كل شيء جاهزا لربط الروابط وتوفير المعلومات.
وقت أن انتهى سباستيان من كتابة هذه التدوينة، كانت الساعة 2:41 صباحا بتوقيته، وكان وقت النوم والراحة قد حل.
مدون متخصص في سرد قصص النجاح، وكتابات التحفيز وبث التفاؤل، وتمكن من تأليف 6 كتب، نشرها بنفسه، ورقيا وإلكترونيا، ويوفرها للتنزيل المجاني. كانت بدايتي العملية في مدينة الرياض/السعودية في عام 1992
أشرف
رائع يا اخي، إني انتظر كل يوم من مشروع التحدي الذي تدونه بعزيمة بناءة
فهد
المشكله كلها في التصميم واحنا عندنا العرب ماشاء الله أسعار خياليه فيبدوا انه لابد من تعلم التصميم والبرمجه لكي نختصر الطريق على انفسنا
اكمل يا استاذ رؤوف متابعين بشغف ولو اني مافهمت الى الان الخدمه بالضبط التي يقدمها موقع سباستيان
تحياتي
عمرو النواوى
أكثر ما أثار إعجابى فى هذه الخطة عنصران .. حسن التخطيط ودقة التنفيذ ..
وهذا ما ينقصنا نحن كعرب بصفة عامة هذه الأيام .. ليس التخطيط أو التنفيذ ولكن الجمع بينهما فى قالب واحد متناسق ..
نقطة أخرى هى ضعف حسن توظيف المهارات فى هذين القطاعين ..
مثلا ..هناك من البشر من يستطيع التخطيط بكفاءة، ولكنه يمل بسرعة من رتابة وملل التنفيذ .. وهناك آخرون يكاد عقلهم ينفجر من التفكير وعجزهم عن الوصول إلى فكرة مناسبة ..
لماذا لا نجمع كلتا الشتيتين فى مفهوم جديد غريب على مجتماعتنا العربية .. مفهوم Team Work
عذراً لاستخدام اللفظ الأجنبى ولكنه يوضح مقصدى ويختصر الكثير من الوقت والشرح ..
هى فكرة الآن .. أنا واحد من الناس يجيد التخطيط ولكنه يتعثر فى التنفيذ، وأعترف بعيبى حتى استطيع معالجته، ولكنه على المدى البعيد ليس عيباً .. ربما يكبر حجم تعاملاتى يوماً ما ولا يعد لى عمل سوى التخطيط .. هههههههههههههه .. نعم، ربما .. من يدرى؟ D:
أنس عماد
تدوينة جاية في الصميم
لانها تتكلم في صلب عملي تصميم الشعار و قواعد التصميم
اول مرة اتعلم تصميم موقع علي الورق كان في اسلام اون لاين مع مديري هناك ..
تعلمت ان ذلك اكثر انتاجية و يتيح للعقل التفكير بشكل افضل ..
قرات المقالة عدة مرات و كل مرة اخرج باستفادة مختلفة لانها في صميم شغلي …
قمت بجوجلة كلمة Mock up
و عثرت علي نتائج متميزة جدا
http://www.hiser.com.au/articles/dtech_paper_mock-ups.html/section/483
http://www.soundstudio72.com/myReviews/CS3%20WP/fw-pic1-website-mockup.gif
وجت ان اغلبنا لا يفعل ذلك .. كنت لا افعل ذلك بتاتا .. و الان اصبح ذلك يوفر علي وقت كثير جدا في تضييع الوقت
خصوصا لو عرضت علي عميل اكتر من layout ليختار بينها
بل اصبحت اعطي كشكول الرسم الخاص بي -فلقد اقتنيت كشكول رسم اخيرا- ليرسم لي تصوره و ما يريده
و احفز العميل لكي يرسم و يصف لي بحرية ما يريد ..
نقطة اللوجو .. كثيرا ما تواجهني مشكلة ان العميل يطلب مني تصميم موقع لشركة بلا لوجو فماذا افعل حينها ؟
معتصم محمد
أستاذي ،،
مثلما تعلمنا عندما كنا نأخذ دروس البرمجه ( لا تبدأ من الصفر بل حدث القديم )
فأنت ستضيع وقتا طويلا في كتابه كود مدونه مثلا تريد أن تضيف لها بعض المزايا ولكنك ستختصر كثير من الوقت إذا استعملت وورد بريس وأضفت لها إضافاتك ،
كما اريد أن اتحدث عن نقطة التخطيط
فالتخطيط الجيد دائما ما يعود بعائد جيد
تحياتي
محسن
هذا اكثر قسم عجبني من المقالات عن سباستيان, يمكن لانني مبرمج !
أم ليال
الوظيفة تأتي قبل الشكل الجمالي، وليس العكس!
ربما يكون هذا أهم الدروس التي تعلمتها في هذه التدوينة، حيث أني أهتم بالشكل الجمالي لكل شيء، و كنت أحاول تطبيق ذلك على مدونتي، الأمر الذي كان يشغلني أحياناً عن الالتزام بالنشر المنتظم للتدوينات…
أما الآن، فقد تركت الأمور الجمالية و الشكل العام لأعمل عليه في وقت الفراغ، و لكن ليس على حساب الانتظام في نشر المواضيع…
جزاك الله خيراً
غير معروف
استفدت كثيرا من الندوينات الخمس لاطلاق مشروع على الشبكة سأوافيك بفكرته عند اطلاقه
شكرا لك
جابر صالح حدبون
بارك الله فيك أستاذ رؤوف… متابعين دائما
عادل
رائع جدا
لكن الموقع المنشىء يحتاج من صاحبه
المواصله على تقدمه واظهاره بصوره جيده
كل الشكر أخي الكريم
اتمنى لك مزيد من التقدم