كيف تجعل موقعك نظيفاً | How to clean your website

4 نوفمبر 2011
11
0
0
الهند



كيف تجعل موقعك نظيفاً | How to clean your website



مانع عثمان حسين
[FONT=&quot]
[/FONT]​

من خلال تصفحنا للمواقع لابد ان نكون قد مررنا ببعض المواقع "الجميله والأنيقه" التي لفتت إنتباهنا وجعلتنا نقول بأعلى أصواتنا " يااا الله هذا الموقع جميل ونظيف وبارد أيضاَ على العين ... أووه جميل" وبالتالي يوجد الكثير منها حولنا، وقد تتسآءل في نفسك ما السر في هذه النظافه وهذا الجمال وهذا التناسق الكبير، "حسنا" هذا لم يأت بالصدفه يا أخواني وإنما جاء عن طريق ملاحظات دقيقه ودقيقه جدا في تفاصيل ومكونات التصميم ، يكفي كلاماً فلندخل في صلب الموضوع.


قبل الدخول في الموضوع دعونا نوضح أمراً واحدا وهو أن التصميم النظيف – ليس هو التصميم البسيط أو ليس ذو التفاصيل والمكونات الكثيره، يمعني أن يكون لديك تصميم موقع لا يوجد فيه زحمه من الصور والألوان والأشياء الأخري. إنما يمكن أن يكون تصميمك ذو مكونات كبيره ويحمل تفاصيل كثيره وأيضاً يكون نظيفاً وجميلاً.


ولكن هناك كلمه واحده يجب أن نستخدمها في مفهوم المواقع الجميله والنظيفه وهي (التحسين - refinement) وهنا أعني بذلك قبل الإنتهاء من تصميم موقعك وإخراجه في الصوره النهائيه لابد من تفحص كل عناصر ومكونات التصميم فحصاً دقيقا والهدف من وضع العناصر بهذا الشكل. وإجراء التحسينات الممكنه حتى لو إضطررت لإعادة تصميمها من جديد.



[FONT=&quot]أولاً:[/FONT]
[FONT=&quot]
[/FONT]​
[FONT=&quot]التفاصيل الدقيقه للبكسل |[/FONT][FONT=&quot]Pixel Perfect Details [/FONT]

[FONT=&quot]لابد للإنتباه لما تقدمه البكسل من تفاصيل لأنها تمثل التفاصيل الدقيقه للتصميم والتصميم النظيف يكمن في نظافة التفاصيل ([/FONT][FONT=&quot]Pixel[/FONT][FONT=&quot]) والمثال على الرابط التالي يوضح ويبين حقيقة التصميم النظيف[/FONT]
[FONT=&quot]
attachment.php


ولزيارة الموقع كاملاً تجده على الرابط أدناه:
[/FONT]​
[FONT=&quot]والدقه مطلوبه ومطلوبه جدا وهو ما تميز التصميم النظيف من غيره .. مثلاً أنصاف البكسل يمكن أن تحدث من غير أن ننتبه لها كما في برنامج الفوتوشوب، ولكن تصحح بإختيار "[/FONT][FONT=&quot]Snap to pixel[/FONT][FONT=&quot]" (الخيار موجود في الفوتوشوب). لاحظ الفرق بين الشكلين المرسومين بواسطة الفوتوشوب في الحواف[/FONT]


[FONT=&quot]
attachment.php
[/FONT]





[FONT=&quot]المسافات | [/FONT][FONT=&quot]Spacing[/FONT]
[FONT=&quot]
[/FONT]
[FONT=&quot]يمكن ان تلاحظ ذلك عبر المقارنه بين التصاميم ونوزيع المسافات بين عناصر التصميم ومن الضروري وضع المسافات المناسبه بين العناصر وذلك يترك للعين الراحه في التركيز على المواضع التي تريد، مثلاً (المسافات بين الأسطر وبين الكلمات وبين العناون والأيقونات والمسافات بين الصور وبين المواضيع) كلها تترك إنطباعاً مريحاً للعين في التركيز على منطقه معينه.

[/FONT]​
[FONT=&quot]يجب أن تكون لديك المعرفه بلغة ال[/FONT][FONT=&quot]CSS[/FONT][FONT=&quot] للوصول للمسافات المناسبه.

[/FONT]​
[FONT=&quot]المثال أدناه يوضح الفرق:[/FONT]​
[FONT=&quot]لاحظ المسافه بين الصوره والموضوع وعنوان الموضوع في الصورتين أدناه[/FONT]


[FONT=&quot]
attachment.php
[/FONT]


attachment.php



ثالثاً:




[FONT=&quot]الخطوط | [/FONT][FONT=&quot]typography[/FONT]
[FONT=&quot]
[/FONT]
[FONT=&quot]تستخدم الخطوط وأنواعها عادةً لجعل التركيز يسقط مباشرة على المنطقه المراده، وإذا كان ليس لديك الخلفيه عن التصميم فإن الخطوط عادة تستخدم لهذا الغرض، فالخطوط تجعل الإنطباع الجميل للعناوين ورؤوس الصفحات وما إلى ذلك من إستخدامات. لاتوجد حوجه للزركشه الكثيره ولاتوجد الحوجه لإستخدام الأحجام الكبيره لجعل الزوار يركزوا على منطقه معينه، هذا وبالإضافه للون الخط وهناك الكثير من الطرق للتعرف على مدى إندماجية لون الخط مع الوان التصميم ولكن من الأفضل أن تجعلها بسيطه بقدر الإمكان.[/FONT]
[FONT=&quot]
[/FONT]​
[FONT=&quot]رابعاً:[/FONT]
[FONT=&quot]
[/FONT]​
[FONT=&quot]الألوان |[/FONT][FONT=&quot] Colors[/FONT]

[FONT=&quot]وهو من أهم الأجزاء في مفهوم التصميم النظيف لا سيما وأن الألوان تترك إنطباعا لدى العين مباشره وبالتالي على الزوار، ويوجد في الأنحاء الكثير من الطرق والتكنيكات لإختيار الألوان ولكني انا وبالأخص أفضل ألوان شركة [/FONT][FONT=&quot]Adobe[/FONT][FONT=&quot] وهي موجوده على الرابط [/FONT][FONT=&quot]http://kuler.adobe.com.[/FONT]​
[FONT=&quot]لا يمكن القول بأن التصميم النظيف هو التصميم الذي يخلو من كثرة الألوان ولكن الألوان يجب أن تكون متقاربه ومتناسقه ومن الأفضل أن تستخدم الألوان الغير متداخله بدل الألوان المتداخله ([/FONT][FONT=&quot]Gradients[/FONT][FONT=&quot]) للتصميم البسيط.[/FONT]​
[FONT=&quot]بالنسبه للخلفيات كل من الأبيض والرمادي مناسب جدا لأن من الشهل جعل العين أن تركز على أي عنصر في التصميم (انا عادة أستخدم الرمادي بدرجاته في تصميم الخلفيات).


[/FONT]​
[FONT=&quot]*** سنواصل لاحقاً لتكملة بقية الموضوع إنشاء الله ***[/FONT]
[FONT=&quot]
هذا الموضوع نشر للمعرفه العامه يمكنك نسخه وتعديله إن أردت[/FONT]​
 

المرفقات

  • halfpixels.jpg
    halfpixels.jpg
    23.4 KB · المشاهدات: 224
  • spacing.jpg
    spacing.jpg
    72.5 KB · المشاهدات: 217
  • goodspacing2.jpg
    goodspacing2.jpg
    72 KB · المشاهدات: 215
  • studeo.jpg
    studeo.jpg
    243 KB · المشاهدات: 236
التعديل الأخير:

WebCraker

العبد الفقير إلى الله
طاقم الإدارة
9 مارس 2008
5,645
50
48
Egypt
support-ar.com
أبدعت والله ويشرفنى ان اكون اول رد لأول موضوع لك

بارك الله فيك ولا تحرمنا تواجدك المستمر وجديدك وبإنتظار بقية الموضوع إن شاء الله
 

filmegy

عضو جديد
19 أكتوبر 2011
14
0
0
مشكور جدا موضوع مميز وجميل
 
4 نوفمبر 2011
11
0
0
الهند
تسلم والله يا أخي الكريم ... وإنشاء الله ما ننقطع

ومشكور على الإيقونات .. وجاري التحميل والإستخدام ... شكرا لك كثيرا والله