كيفية تصميم ستايل مطابق للويب 2.0

[واسع الخيال]

السلام عليكم

اخوانى الاعزاء قبل كل شىء الموضوع منقول للفائده

اليوم ان شاء الله سوف نتكلم عن كيفية تصميم موقع بمواصفات مواقع الويب Web2.0

سوف نتكلم عن النقاط التالية ::

- البساطة
- اعمده اقل
- الهيدر منفصل
- الخلفيات والاشياء الجريئة
- القوائم العرضية
- الجراءه في الشعار (البساطة)
- نص اكبر
- مقدمات بنصوص اكبر
- قوة الالوان
- التدرجات
- ايقونات
- بالونات


-| البساطة

لما كل هذه التصاميم معقدة , ولماذا كل هذه التصاميم المحشوه بالصور ؟ . هناك استثناءات لذلك

تصميم الشبكه هو أسهل من أي وقت مضى ، وهذا شيء جيد
وهذا لا يعني ان كل المواقع يجب ان تكون ضئيلة، بل ان علينا ان نستخدم القليل من الملامح و ماهو ضروري لتحقيق ما انت بحاجة الى تحقيقه.

كيف تتم البساطة ؟
ازالة عناصر غير ضروريه ، دون التضحيه عالية.
تجريب الحلول البديله التي تحقق نفس النتيجة اكثر بساطة.

http://www.webdesignfromscratch.com/snippets/20-article/20-yaxay-detail.jpg

انظر الى عدد المواد في هذا الموقع !! انظر الى الخلفية !! الى الشعار !! ووو !
لماذا هذه الزحمه ؟

-| اعمده اقل

عندما تقوم بتصميم موقع فيه اعمده اقل يكون اقل بساطة ولو قمت بتصميم موقع بدون اعمدة لكان اكثر بساطة

http://www.webdesignfromscratch.com/snippets/20-article/20-37-signals.jpg

انظر الى هذا الموقع , يحتوي على عمود واحد : انه اكثر بساطة .

http://www.webdesignfromscratch.com/snippets/20-article/20-apple-expo.jpg

وانظر الى هذا الموقع ايضا , يحتوي على عمودين فقط ولكن لو تلاحظ ان الموقع اول يتمتع ببساطة اكثر

http://www.webdesignfromscratch.com/snippets/20-article/20-all-things-web-20.jpg

اخيرا .. انظر الى هذا الموقع .. يمكن العديد من الاعمدة فتراه غير منظم ولا يتمتع بالبساطة

ولكن !! عندما تستخدم عمود او عمودين لا يغير شي في مضمون الموقع كالوصلات والاخبار و....

-| الهيدر منفصل

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

http://www.webdesignfromscratch.com/snippets/20-article/20-mozilla-store.jpg

http://www.webdesignfromscratch.com/snippets/20-article/20-simplebits.jpg


http://www.webdesignfromscratch.com/snippets/20-article/20-medicon-media.jpg

لاحظو معي هذه المواقع .. الهيدر (العنوان مع الشعار) في صف واحد ولا يحتوي على صور او ما شابه في الصف او الخلفية ..
وفي الصف الثاني توجد القائمة وبنفس الطريقة (سوف اتكلم عن القائمة لاحقا)

-| الخلفيات والاشياء الجريئة

الخلفية ::
عندما تصمم موقعا لا تنسى الخلفية المميزه

http://www.webdesignfromscratch.com/snippets/20-article/20-jeremy-boles.jpg

http://www.webdesignfromscratch.com/snippets/20-article/20-curve2.jpg

لاحظوا معي الموقع الاول كيف قام بتصميم خلفية بسيطة مع رسومات سوداء وعند تحريك السكروول لا تتحرك الخلفية

وفي الموقع الثاني قام بتصميم خلفية بتدرجات تتوافق مع التصميم الداخلي للموقع .


ولكن عند وضعك للون الابيض في الخلفية يقلل من دقة واحترافية التصميم كالتصماميم التالية


http://www.webdesignfromscratch.com/snippets/20-article/20-apple-expo.jpg

http://www.webdesignfromscratch.com/snippets/20-article/20-etre.jpg

-| القوائم

عند التصميم الهيدر لابد من تصميم القوائم اسفله لتكون اكثر احترافية

كيفية الوصول الى الاحتراف في تصميم القوائم ؟
= ان تكون القائمة عكس جهة الشعار او اذا كان الشعار في الوسط فتكون القائمة اسفل الشعار مباشره
= تغيير لون الصف الخاص بالهيدر عن الصف الخاص بالقائمة , ليس ضروريا التغيير الكامل في اللون ولكن يمكنك استخدام الاحترافية في التدرجات .
= التفريق بين الصورة او الكتابة الخاصة بالوصلة عند تقريب الماوس (الفأره) عليها وبين الوضع العادي

http://www.webdesignfromscratch.com/snippets/20-article/20-snip-nav-tradingeye.jpg

http://www.webdesignfromscratch.com/snippets/20-article/20-snip-nav-crossconnector.gif

http://www.webdesignfromscratch.com/snippets/20-article/20-snip-nav-moz.gif

http://www.webdesignfromscratch.com/snippets/20-article/20-snip-nav-protolize.jpg

وايضا في الصف الذي فيه القائمة يمكنك وضع فيه مستطيل البحث في الموقع فهو ايضا من احد ضروريات الويب 2.0

يتبع

[واسع الخيال]

-| الجراءه في الشعار (البساطة)

لن اتكلم مطولا في هذا البند ولكن عندما يتعلق الامر بالشعار فتوجد بعض البنود يرجى اخذها في الاعتبار عند تصميمه .
= البساطة ثم البساطة ثم البساطة
= السعي الى وضع اسم الموقع باكامل سواء باللغة العربية او الانجليزية
= وضع رسم معبر وبسيط بجانب الاسم
= ان يكون مميز ليجذب الزائر
= لا يحتوي على الوان كثيره

http://www.webdesignfromscratch.com/snippets/20-article/20-logos-wall.gif

-| نص اكبر
-| مقدمات بنصوص اكب

سوف اتكلم عن نص اكبر مع مقدمات بنصوص اكبر مع بعض .

يمكنك وضع نصوص تقديمية بحجم كبير وبارز ليبين اهميته كـ
تحميل , اضف الان , التسجيل , ابدا , الان , شارك , مجانا ,

وهذه بعض الامثلة لذلك

http://www.webdesignfromscratch.com/snippets/20-article/20-aurum3.jpg

http://www.webdesignfromscratch.com/snippets/20-article/20-37-signals.jpg

http://www.webdesignfromscratch.com/snippets/20-article/20-apple-home.jpg

http://www.webdesignfromscratch.com/snippets/20-article/20-ex-blogs.gif

http://www.webdesignfromscratch.com/snippets/20-article/20-cross-connector.gif

-| قوة الالوان
-| التدرجات

قم بأستخدام الوان قوية وجريئة في التعبير عن خطوات (اذا كان في الموقع ذلك)
كمثال ::
عندما تريد عمل تصميم الى موقع استضافة مدونات , بعد انشاءك الى الهيدر والقوائم .
اسفلها مباشره فم بعمل 3 مستطيلات في صف واحد وفي الصف الاول قم بوضع رقم 1 بخط كبير و في جانبه تضع كلمة " سجل" وبعدها وفي اسفل المستطيل تستطيع كتابة بعض الاشياء كـ"يمكنك التسجيل ببساطة جدا ولا يتطلب ذلك الا بعض المعلومات عنك

وبعدها وفي المستطيل الثاني تكتب رقم 2 وبجنبه "دون" (بنفس طريقة المستطيل الاول)
وتكتب اسفله (في نفس المربع) تتمتع بأفضل المواصفات التقنية عند كتابتك التدوينات .

وفي المستطيل الاخير تكتب رقم 3 وبجنبة "انشر" (بنفس طريقة المستطيل الاول والثاني ) وتحته تكتب شارك اصدقائك ما كتبت وانشر تدويناتك في الانترنت .

نأتي الان الى المستطيلات , تستطيع عمل المستطيلات بلون واحد مع اضافة الايقونات المعبره او استخدام لون واحد بتدرجاته او استخدام عدة الوان ولكن بنفس المستوى ..

http://www.webdesignfromscratch.com/snippets/20-article/20-treo.jpg

http://www.webdesignfromscratch.com/snippets/20-article/20-colorschemer.gif

او

استخدام صورة كبيره معبره مع التدرج في الالوان (الخلفية)

http://www.webdesignfromscratch.com/snippets/20-article/20-real-meat.jpg

http://www.webdesignfromscratch.com/snippets/20-article/20-gear-for-girls.jpg

http://www.webdesignfromscratch.com/snippets/20-article/20-aurum3.jpg

-| الايقونات

يمكن ان تكون الايقونات مفيده عندما يتعلق الامر بدخول الزائر لا يجيد لغة الموقع . او لتسهيل وتسريع تنقلات الزائر

وهذه الامثلة سوف تسهل لك هذه النقطة

http://www.webdesignfromscratch.com/snippets/20-article/20-icons-7.gif

http://www.webdesignfromscratch.com/snippets/20-article/20-icons-scribble.gif

http://www.webdesignfromscratch.com/snippets/20-article/20-icons-ihc.jpg

http://www.webdesignfromscratch.com/snippets/20-article/20-icons-14.gif

-| بالونات

واخيرا سوف اتكلم عن البالونات .

وهذه النقطة لم اراها في المواقع العربية الى الان .

وهي اشبه بالبالونات تستطيع استخدامها عندما تريد
= عرض سعر سلعة
= شيء مجانا
= رقم تسلسلي او رقم اصدار
= للتحميل
= للـBeta New Update Last

http://www.webdesignfromscratch.com/snippets/20-article/20-flashes5.gif

http://www.webdesignfromscratch.com/snippets/20-article/20-flashes1.jpg

http://www.webdesignfromscratch.com/snippets/20-article/20-flashes6.gif

http://www.webdesignfromscratch.com/snippets/20-article/20-flashes8.jpg

في النهاية ..

اتمنى رؤية المواقع العربية على نظام الويب 2.0 و الاستفاده من هذا الموضوع ..



وفى النهايه بعد ان تعلمنا كيفية تصميمه اليكم بعض الادوات التى تساعدكم فى التصميم

http://www.bramjnet.com/vb3/showthread.php?t=398519

[/CENTER]

[abohelal]

أفكار حلوة ..

لمحاكاة الويب 2

[واسع الخيال]

مشكور اخى العزيز على مروك الجميل

تحياتى

[man utd]

طرق جميلة وملائمة للصفحات
مجهود طيب
جزاك الله كل خير

[واسع الخيال]

السلام عليكم

مشكور اخى اعلزيز على المشاركة

تحياتى

[egysamba]

شكرا أخى على النقل " لتعم الفائدة "ك

ومعلومات قيمة فعلا

تحياتى لك

[lavender]

شكرا لك اخي علي النصائح
و لكني اري انه لا توجد قاعدة معينة ممكن ان تتبع لعمل اي تصميم
و القاعدة الاولي و الاخيرة هي خيال المصمم و ذوقه الشخصي .... و هذا طبعا رأي الشخصي ......
بالتوفيق ان شاء الله
تحيــــــــــــــــــــــــــــــــــاتي

[aloqab]

تسلم ايدك يا اخي على المعلومات الممتازه
بالتوفيق

[واسع الخيال]

شكرا أخى على النقل " لتعم الفائدة "ك

ومعلومات قيمة فعلا

تحياتى لك

العفو اخى العزيز

شكرا لك اخي علي النصائح
و لكني اري انه لا توجد قاعدة معينة ممكن ان تتبع لعمل اي تصميم
و القاعدة الاولي و الاخيرة هي خيال المصمم و ذوقه الشخصي .... و هذا طبعا رأي الشخصي ......
بالتوفيق ان شاء الله
تحيــــــــــــــــــــــــــــــــــاتي


اوافقك الراىء اختى العزيزه ولكنى لا ارى مانع من بعض التوضيح

تسلم ايدك يا اخي على المعلومات الممتازه
بالتوفيق

العفو اخى العزيز ومشكور على المرور

تحياتتى

[خالدf15]

مجهووووووود رائــــع منك أخي العزيز


لك مني التـ ح ـيه

[واسع الخيال]

هلا بيك اخى

ومشكور على المرور

تحياتى

[abdocj]

مشكور أخي على المجهود الرائع

[Black_Tulip]

شكرا كتير على مجهودك

يعطيك الف عافية على الشرح

احتراماتي ...

[واسع الخيال]

السلام عليكم

مشكورين اخى واختى الاعزاء على المرور

تحياتى

[mezooo125]

مجهود جيد جزاك الله كل خير

[واسع الخيال]

العفو اخى العزيز

ومشكور على المرور

تحياتى

[amin24e]

thanksssssssssssssssssss

[ملك الفوتوشوب]

طرق جميلة اخى
تسلم ايدك

[واسع الخيال]

العفو اخى العزيز

وشاكر مرورك

تحياتتى