لاشك انه فى كل تصميم جديد لنا نريد تصميمنا ان يبدو احترافى وراقى ولكن قد تظل حلقة مفقودة فى جعله كذلك لذلك فى هذه المقالة سنناقش طرق بسيطة لتحسين التصميم الخاص بنا وجعله افضل .
اجعل تصميمك افضل بهذه الطرق البسيطة
1. خاصية Transition فى CSS3
تتيح هذه الخاصية الانتقال من وضع الى اخر بشكل تدريجى وناعم فى خلال مدة معينة كالانتقال من لون نص إلى لون اخر فى فترة زمنية معينة .
Transition : .5s ease color ;
يتضح من السطر السابق ان الخاصية transition لها ثلاثة اركان :
- زمن التاثير ويكتب على الطريق 1s تعنى يحدث فى ثانية واحدة وهكذا
- شكل الانتقال ويوجد لها عدة اشكل مثل ease , ease-in,linear وغيرها وتعنى شكل منحنى السرعة .
- الخاصية المراد تغيرها مثل color , background او غيرها ويمكنك تحديد all فى حالة انك اردت تطبيق transition على كل الخاصيات مثل اللون والخلفية معًا .
إليك مكتبة من التصميمات القائمة على هذه الخاصية والتى يمكن استخدامها مباشرتًا فى تصميمك هنا .
2. خطوط الويب webfonts
اتاحت هذه الطريقة للمصممين عدم التقيد بالخطوط الاساسية وفتحت المجال امام كم هائل من الخطوط وظهرت مكتبات كثير اهما Google Webfonts تحتوي هذه المكتبة من شركة جوجل على كم هائل من الخطوط الجاهزة للاستخدام ويدعم ايضًا الخطوط العربية كل ما عليك اختيار الخط المناسب وسيعطك جوجل رابط لاستخدام الخط من السيرفرات الخاصة بهم .
المميز فى خطوط جوجل انها تدعم اللغة العربية ويوجد كم لا بأس به من الخطوط العربية .
المميز فى خطوط جوجل انها تدعم اللغة العربية ويوجد كم لا بأس به من الخطوط العربية .
3. خاصية Shadow فى CSS3
من الخواص الرائعة فى CSS3 حيث يمكنك توليد ظلال لاي عنصر عن طريقة box-shodow ويمكنك استخدام مولد لكود الظل من هنا .
ومن الخواص الاخرى الرائعة هى خاصية text-shadow للنصوص وهى اعطاء ظل حول النصوص لتحسين مظهرها وهى من الخواص الرائعة ويمكنك استخدام مولد لكودها من هنا .
4. خاصية Gradient
من الخواص الرائعة التى تتيح لك كتابة كود لعمل تدرج لونى بدون الحاجة إلى صورة لتنفيذ المهمة كما كان الامرسابقًا ويمكنك استخدام مولد Gradient من هنا .
5. Bootstrap
البوتسراب من اطر العمل المبنية على CSS وهى يوفر عليك كتابة الكثير من الكود وسهل فى تصميم موقع متجاوب ويحتوي الكثير من الاشياء المعدة مسبقًا فى CSS فى شكل جميل مثل Button Inputs وغيرها الكثير .
6. المسافات الفارغة او Whitespaces
من الامور المهمة جدًا عند تصميم موقع هى المسافات الفارغة بين الفقرات والنصوص والصور والمكونات المختلفة للموقع الخاص بك لتجنب تكديس المحتوي و لتترك بعض المجال لراحة العين فعليك الانتباه جيدًا لهذه النقطة .
7. Jquery UI
من منا لا يعرف مكتب jquery الرائعة المبنية على javasctipt والتى نتحتاجها لعمل اشياء مثل القوائم المنزلقة اوSliders او غيرها .
مكتبة Jquery UI تسهل اكثر او اكثر فيمكنك عمل الكثير من الاشياء الرائعة بسهولة بالغة امثلة لما يمكن عمله Drag&Drop , Accordion وغيرها الكثير .
ويمكنك الاطلاع على تفاصيل المكتبة من الموقع الراسمى هنا .
9. waypoint + wow
وهى اضافات Plugins مبنية على Javascript فاضافة waypoint تمكنك مع عمل تاثير معين على العنصر عن الوصول إليه عن طريق Scroll مثلاً عن الوصول الى الجزء الخاصة ب About us يقوم بفعل اي شئ مثل اظهار رسالة ترحيب مثلًا .
ويمكنك الاطلاع على كيفية اعدادها هنا على الموقع الرسمى .
فى المثال السابقة عن الوصول على إلى اي قسم من اقسام الصفحة عن طريق scroll فان العنصر يظهر بشكل جميل ويمكنك عمل هذا التاثير عن طريق الاضافة الثانية وهى wow.js مثال على التأثيرات هنا .
هذه الاضافة wow.js تتيح لك الكثير من التأثيرات الجميلة دون الحاجة لكثير من الكود .
ويمكنك الاطلاع على كل ما تقدمه هنا على الموقع الرسمى .
10. ايقونات Font Awesome
لا احد يستطيع ان ينكر دور الايقوانات فى الجذب والشكل الجمالى فى صفحات الويب ومن اشهر الايقونات التى يمكنك استخدامها بسهولة هى Font Awesome وهى مبنية على SVG وبالتالى يمكنك التحكم فيها كاي نص عن طريق حجم الخط واعطاء لون او حتى ظل فهى كاي نص .
ويمكنك تنزله من هنا على الموقع الرسمى هنا
إلى هنا نصل إلى نهاية المقالة كانت هذه طرق لجعل تصميمك رائعًا اتمنى لك التوفيق وان اعجبتك المقالة لا تنسى مشاركتها مع اصدقائك وشكرًا .
