السلام عليكم ورحمة الله وبركاته …
اليوم ان شاء الله سوف اتكلم عن كيفية تصميم موقع بمواصفات مواقع الويب Web2.0سوف اتكلم عن النقاط التالية ::
– البساطة
– اعمده اقل
– الهيدر منفصل
– الخلفيات والاشياء الجريئة
– القوائم العرضية
– الجراءه في الشعار (البساطة)
– نص اكبر
– مقدمات بنصوص اكبر
– قوة الالوان
– التدرجات
– ايقونات
– بالونات
-| البساطة
لما كل هذه التصاميم معقدة , ولماذا كل هذه التصاميم المحشوه بالصور ؟ . هناك استثناءات لذلك
تصميم الشبكه هو أسهل من أي وقت مضى ، وهذا شيء جيد
وهذا لا يعني ان كل المواقع يجب ان تكون ضئيلة، بل ان علينا ان نستخدم القليل من الملامح و ماهو ضروري لتحقيق ما انت بحاجة الى تحقيقه.
كيف تتم البساطة ؟
ازالة عناصر غير ضروريه ، دون التضحيه عالية.
تجريب الحلول البديله التي تحقق نفس النتيجة اكثر بساطة.
انظر الى عدد المواد في هذا الموقع !! انظر الى الخلفية !! الى الشعار !! ووو !
لماذا هذه الزحمه ؟
-| اعمده اقل
عندما تقوم بتصميم موقع فيه اعمده اقل يكون اقل بساطة ولو قمت بتصميم موقع بدون اعمدة لكان اكثر بساطة
انظر الى هذا الموقع , يحتوي على عمود واحد : انه اكثر بساطة .
وانظر الى هذا الموقع ايضا , يحتوي على عمودين فقط ولكن لو تلاحظ ان الموقع اول يتمتع ببساطة اكثر
اخيرا .. انظر الى هذا الموقع .. يمكن العديد من الاعمدة فتراه غير منظم ولا يتمتع بالبساطة
ولكن !! عندما تستخدم عمود او عمودين لا يغير شي في مضمون الموقع كالوصلات والاخبار و….
-| الهيدر منفصل
عندما تقوم بتصميم موقع فحاول فصل الهيدر مع القائمة بصفوف جرئية
لاحظو معي هذه المواقع .. الهيدر (العنوان مع الشعار) في صف واحد ولا يحتوي على صور او ما شابه في الصف او الخلفية ..
وفي الصف الثاني توجد القائمة وبنفس الطريقة (سوف اتكلم عن القائمة لاحقا)
-| الخلفيات والاشياء الجريئة
الخلفية ::
عندما تصمم موقعا لا تنسى الخلفية المميزه
لاحظوا معي الموقع الاول كيف قام بتصميم خلفية بسيطة مع رسومات سوداء وعند تحريك السكروول لا تتحرك الخلفية
وفي الموقع الثاني قام بتصميم خلفية بتدرجات تتوافق مع التصميم الداخلي للموقع .
ولكن عند وضعك للون الابيض في الخلفية يقلل من دقة واحترافية التصميم كالتصماميم التالية
-| القوائم
عند التصميم الهيدر لابد من تصميم القوائم اسفله لتكون اكثر احترافية
كيفية الوصول الى الاحتراف في تصميم القوائم ؟
= ان تكون القائمة عكس جهة الشعار او اذا كان الشعار في الوسط فتكون القائمة اسفل الشعار مباشره
= تغيير لون الصف الخاص بالهيدر عن الصف الخاص بالقائمة , ليس ضروريا التغيير الكامل في اللون ولكن يمكنك استخدام الاحترافية في التدرجات .
= التفريق بين الصورة او الكتابة الخاصة بالوصلة عند تقريب الماوس (الفأره) عليها وبين الوضع العادي
وايضا في الصف الذي فيه القائمة يمكنك وضع فيه مستطيل البحث في الموقع فهو ايضا من احد ضروريات الويب 2.0
-| الجراءه في الشعار (البساطة)
لن اتكلم مطولا في هذا البند ولكن عندما يتعلق الامر بالشعار فتوجد بعض البنود يرجى اخذها في الاعتبار عند تصميمه .
= البساطة ثم البساطة ثم البساطة
= السعي الى وضع اسم الموقع باكامل سواء باللغة العربية او الانجليزية
= وضع رسم معبر وبسيط بجانب الاسم
= ان يكون مميز ليجذب الزائر
= لا يحتوي على الوان كثيره
-| نص اكبر
-| مقدمات بنصوص اكبر
سوف اتكلم عن نص اكبر مع مقدمات بنصوص اكبر مع بعض .
يمكنك وضع نصوص تقديمية بحجم كبير وبارز ليبين اهميته كـ
تحميل , اضف الان , التسجيل , ابدا , الان , شارك , مجانا ,
وهذه بعض الامثلة لذلك
-| قوة الالوان
-| التدرجات
قم بأستخدام الوان قوية وجريئة في التعبير عن خطوات (اذا كان في الموقع ذلك)
كمثال ::
عندما تريد عمل تصميم الى موقع استضافة مدونات , بعد انشاءك الى الهيدر والقوائم .
اسفلها مباشره فم بعمل 3 مستطيلات في صف واحد وفي الصف الاول قم بوضع رقم 1 بخط كبير و في جانبه تضع كلمة ” سجل” وبعدها وفي اسفل المستطيل تستطيع كتابة بعض الاشياء كـ”يمكنك التسجيل ببساطة جدا ولا يتطلب ذلك الا بعض المعلومات عنك
وبعدها وفي المستطيل الثاني تكتب رقم 2 وبجنبه “دون” (بنفس طريقة المستطيل الاول)
وتكتب اسفله (في نفس المربع) تتمتع بأفضل المواصفات التقنية عند كتابتك التدوينات .
وفي المستطيل الاخير تكتب رقم 3 وبجنبة “انشر” (بنفس طريقة المستطيل الاول والثاني ) وتحته تكتب شارك اصدقائك ما كتبت وانشر تدويناتك في الانترنت .
نأتي الان الى المستطيلات , تستطيع عمل المستطيلات بلون واحد مع اضافة الايقونات المعبره او استخدام لون واحد بتدرجاته او استخدام عدة الوان ولكن بنفس المستوى ..
او
استخدام صورة كبيره معبره مع التدرج في الالوان (الخلفية)
-| الايقونات
يمكن ان تكون الايقونات مفيده عندما يتعلق الامر بدخول الزائر لا يجيد لغة الموقع . او لتسهيل وتسريع تنقلات الزائر
وهذه الامثلة سوف تسهل لك هذه النقطة
-| بالونات
واخيرا سوف اتكلم عن البالونات .
وهذه النقطة لم اراها في المواقع العربية الى الان .
وهي اشبه بالبالونات تستطيع استخدامها عندما تريد
= عرض سعر سلعة
= شيء مجانا
= رقم تسلسلي او رقم اصدار
= للتحميل
= للـBeta New Update Last
———————–
وفي النهاية ..
اتمنى رؤية المواقع العربية على نظام الويب 2.0 و الاستفاده من هذا الموضوع ..
ارجوا عدم نقل الموضوع الا بذكر المصدر .