6 طرق لتحسين تصميم مدونتك
يمكن غالبًا ترك المدونات في البرد عندما يتعلق الأمر بالتصميم. الكثيرون منا يستبعدون الحاجة إلى تصميم مكثف عندما يتعلق الأمر بمدوناتنا - سواء بالنسبة لشركاتنا أو لأنفسنا.
ولكن من المهم أن ندرك أن كل جانب من جوانب هويتنا على الإنترنت يجب أن يتم تصميمه بطريقة نظيفة وبديهية مع أي أسلوب تفضله. هذا الجانب المراوغ من العمل على شبكة الإنترنت هو شيء يجب أن نسعى باستمرار من أجله. ونعم ، يتضمن ذلك الوقت الذي نقضيه في العمل مع المدونات.
تضيع الكثير من مدونات الوقت في المراوغة لأننا نفكر في أنها "مقالب نصية" ضخمة عندما يتعلق الأمر بهندسة المعلومات ، وهذا بالتأكيد جانب واحد لهويتهم ، لكن لديهم إمكانات أكثر من ذلك.
إن بعض المدونات ، عند تصميمها بشكل صحيح ، تعتبر رائعة لعرض مجموعة من الأفكار بالإضافة إلى بعض المعلومات عن الحافظات ، بينما البعض الآخر رائع لعرض الأخبار والصور الفوتوغرافية.
النقطة هي أن المدونة يمكن أن تكون دبابة كبيرة للعديد من الموضوعات ، والتي يتحول عرضها إلى خيارات التصميم المحددة التي تقوم بها طوال الوقت. في السنوات الخمس الماضية ، ظهرت الكثير من الأشياء لجعل عالم التدوين أسهل بكثير مما كان عليه في السابق. على سبيل المثال ، يعد WordPress شيئًا رائعًا ، حيث تتناول الموضوعات الكثير من أعمال التصميم بالنسبة لنا ، ولكن إذا كنت ترغب في استخدامه ، فهناك بعض الأشياء التي تحتاج إلى تذكرها.
وبالمثل ، إذا كنت ترغب في تعديل الملاحة أو التنسيق الخاص بالموضوع ، فهناك أيضًا بعض الأشياء التي تريد أن تكون على دراية بها. هذا ينطبق على أي محرك تدوين ، أو عند العمل بنفسك. فيما يلي العديد من أفكاري حول ما أعتقد أن هذه البتات الهامة.
العمل مع تأثيرات نصية تستند إلى الظل
تعد تأثيرات النص من الطرق الرائعة لتقديم عناوين العناوين أو أشرطة التنقل أو مقدمات المحتوى على مدونتك بشرط أن يتم استخدامها بشكل بسيط. دعنا نتناول بعضًا من التأثيرات الأكثر شيوعًا التي نراها مفرطة الاستخدام على الويب ، وكيفية استخدامها بشكل صحيح.
نص ريترو
غالبًا ما يكون العمل مع الألم أمرًا مؤلمًا ، ولكن يبدو أنه كان يجري جولات العام الماضي ونصف العام رغم هذه الحقيقة. ومع ظهور نظام CSS3 ، أصبح من الأسهل بكثير التلاعب والبحث عن ذلك التظليل المثالي. لدي مثال هنا لمساعدتنا على فهم كيفية إنشاء هذا التأثير بشكل صحيح ، ثم سأذهب إلى متى ومتى لا تستخدمه. اسم اللعبة مع تأثيرات رجعية ليس نصف قطر ضبابي ، ويستخدم ظلال مزدوجة. لنفترض أننا نعمل باستخدام خط داكن اللون (# 707070I) ، نريد استخدام ظل نص مزدوج لتحقيق ذلك. سيبدو شيء هكذا:
text-shadow: 5px 5px 0px #eee, 7px 7px 0px #707070;
هذا يجب أن يمنحك تأثير حد مزدوج لطيف ، مع نظرة 70 جدا لذلك. بالطبع ، للحصول على هذا الشعور الحقيقي في السبعينيات ، قد تضطر إلى إضافة جميع أنواع التلاعب في الألوان ، ولكن على الأقل يكون لدينا تأثير القاعدة لأسفل. تذكر رغم ذلك ، لا تذهب إلى حد الجنون مع التلوين - وبالتأكيد لا تذهب إلى حد كبير مع إزاحة x و y لظلال النص (لأنها قد تتحول إلى غير قابل للقراءة بسرعة كبيرة). عندما يتعلق الأمر باستخدام تأثير رجعي ، يكون الاستخدام الأفضل في العناوين الرأسية. هذا ليس تأثيرًا يمكن أن يعمل بشكل جيد مع نص بحجم صغير ، أو معلومات وصفية. من الأفضل تركه على الجزء العلوي من مدونتك وتركه بمفرده.
الحروف والنص الداخلي
ميزة شائعة أخرى هي أن عرض الظل الخاص بـ CSS3 هو نوع من التصميم الداخلي ، والمعروف باسم "letterpress". هذا بالتأكيد موضوع ساخن في عالم تأثيرات النص CSS3 ، لذلك دعونا نذهب حول كيفية القيام بها بشكل صحيح. يتم تحقيق التصميم الداخلي عادة عن طريق موازنة المحور الصادي (Y-axis) بمقدار ضئيل لإعطاء انطباع بارز واضح في الخلفية الفورية للنص. في كثير من الأحيان ستشاهد أنه يتم استخدامه كمقابل للتناقض الخلفي (الضوء مقابل الظلام) بحيث يكون التأثير له تأثير أكبر على القارئ. دعونا الجري مثال على ذلك.
خلفية فاتحة ، نص داكن:
body { background-color: #888; text-shadow: 0px 2px 3px #666;}
خلفية داكنة ، نص فاتح
body {background-color: #666; text-shadow: 0px 2px 3px #888;}
سيعطي ذلك تأثيرًا رائعًا متعدد الطبقات يمكن استخدامه للعناوين أو عناوين المدونات. استخدمه بشكل مقتصد على الرغم من أنه لا يوجد شيء أسوأ من استخدام شخص ما للإفراط في التأثيرات النصية. في هذه الحالة ، سيكون من المقبول استخدام رؤوس فرعية مختلفة أو مع عناصر جانبية أو عناصر تذييل مختلفة - ولكن تأكد فقط من عدم استخدام ذلك في معلومات وصفية. مرة أخرى ، لا ينبغي استخدام أي تأثيرات نصية تستند إلى الظل لمثل هذا الشيء.
العمل مع الصور على مدونتك
دعونا نواجه الأمر ، كمصممين ويب نحب أن نعرض عملنا. نحن نحبها لدرجة أنه حتى المدونات الشخصية لدينا يمكن أن تصبح مليئة بالصور ، وتناثرت الشرح حولها. فلماذا لا ندمج هذين الاثنين؟ إن أفضل طريقة للعمل مع معلومات التسميات التوضيحية هي احتواء المعلومات ذات الصلة داخل الصورة نفسها ، وأفضل طريقة للقيام بذلك هي تنفيذ تأثير CSS3 مباشرة على الصورة.
إذا كنت تشعر بالفضول بشأن سبب اعتقادي أن هذا هو جانب مهم من العمل مع الصور ، فما عليك سوى التوجه إلى متجر Google Chrome (الإضافات). فهم قادرون على عرض آلاف الصور دون أي نص حولهم على الإطلاق ، ومع ذلك لا يزالون يقدمون لنا معلومات كافية عن الصورة المذكورة لمعرفة ما إذا كنا نريد النقر عليها أم لا. هذا رائع ، ويجب على الكثير منا تنفيذ مثل هذا الأسلوب ليس فقط لتنظيف نص التسمية التوضيحية غير الضروري ، ولكن أيضًا لإعطاء دفعة في تجربة المستخدم.
لذا دعنا نعيد إنشاء ذلك لمدونتك الشخصية ، ولكن بلمسة خاصة ، حتى يمكنك عرض معلومات العميل لصور موقع الويب التي عملت عليها:
نحتاج أولاً إلى إنشاء حاوية للصورة ، ومن ثم نحتاج إلى إنشاء حاوية أخرى للنص الذي نرغب في استخدامه. في هذه الحالة ، سنستخدم عنوانًا فرعيًا وقليلًا من النص ورابطًا. ثم داخل ذلك إنشاء حاوية للنص وارتباطات لموقع العميل على الويب التي نعرضها.
Website Title
Some descriptive text about the project
يأتي بعد ذلك نمط CSS لصناديق الصور ، وأنماط التمهيد الأساسية التي سنستخدمها قبل بدء تشغيل تأثيرات النص. هذا قياسي جدًا ، تمامًا إلى تفضيلاتك الشخصية ، لذا لن أذهب إلى ما يجب فعله باستخدام لغة "ole" العادية. فقط استخدم ما تفضله.الآن يأتي الجزء المهم ، التصميم للطريقة التي سيتم بها عرض النص داخل الصورة نفسها. هناك عدد من الطرق للقيام بذلك ، لكنني شخصياً أرغب في إبقاء الأمور بسيطة واستخدام أسلوب "سهولة الاستخدام" للعمل مع النص داخل الصور. من الرائع في بعض الحالات أن تكون مفضلاً حقًا مع انتقالات النص ، ولكن في حالات كثيرة ، من الأفضل الاحتفاظ بهذه البساطة قدر الإمكان. هناك شيء يجب مراعاته ، هو نوع المدونة التي تكتبها.
هل هي مدونة أزياء؟ أم أنها مدونة مغامرة؟ لأنه إذا كان الأمر كذلك ، فقد ترغب في تخصيص تقنية النقل التي تستخدمها إلى ما تعتقد أنه يمثل أفضل موضوع. في هذه الحالة ، (كما قلنا في وقت سابق) ، سنقوم بالعمل من وجهة نظر مصمم الويب الذي يريد أن يكون لديه بعض التحركات النصية الوصفية أو الانتقال عبر صوره في المحفظة.
لذلك دعونا نتعمق في كيفية قيامنا بهذا الانتقال ثم سنتطرق إلى ما يحدث.
.image_container img { transition: all 0.3s ease-in-out; }.image_container .text_container { background-color: (whatever you want);transform: translateX(-300px); opacity: 1; transition: all 0.4s ease-in-out; }في هذا القسم ، ما نفعله هو الحصول على الصورة الفعلية للانتقال إلى الخارج ، والاستعداد للانتقال إلى النص. نحن أيضًا نحدد أننا نريد أن تترك الصورة على طول المحور X وليس المحور Y ، وهذا يعني سيكون لدينا نوع باب جرار من التأثير.
سنقوم الآن بإعداد تأثير الماوس فوق الماوس ، ونبدأ في الانتقال إلى هذا الحدث.
.image_container:hover .text_container { transform: translateX(0px);}.image_container:hover img { transform: translateX(300px);transition-delay: 0.1s;}.image_container:hover p { opacity: 1; transition-delay: 0.4s; }كما ترون هنا ، كان ما فعلناه مشابهًا لما فعلناه أعلاه للصورة. نحن ببساطة جلبت النص بعد الصورة اليسار ، وأعطته تأخر + 0.1s للتأكد من أنها تسير بسلاسة. وهذا عن ذلك.
هناك مجموعة من الطرق الأخرى التي يمكنك تخصيصها ، وبالتأكيد الكثير من تأثيرات الانتقال الأخرى التي يمكنك استخدامها. تذكر على الرغم من ذلك ، إذا كان العمل مع التحولات الأكثر تقدما لا تستخدمها بطريقة متكررة كما تفعل مع شيء بسيط مثل هذا. يتم استخدامها بشكل أفضل لماما للتشديد على الصور الرئيسية.
العمل مع التصميمات الإبداعية
في كثير من الأحيان ، كمصممي الويب ، سنرى الاتجاهات المستخدمة بشكل مفرط والتي أساءت سنة بعد أخرى ، وتريد أن تكون صوتًا للتغيير في ما يتعلق بها. لكن الذهاب ضد الحبوب يمكن أن يكون ممارسة محفوفة بالمخاطر ، خاصة إذا كنت لا تقوم بذلك بشكل صحيح (كملاحظة - أنا لا أقول أنه يجب عليك أن تكون مبدعاً في "الطريق الصحيح" لأنه لا يوجد "طريق صحيح" كن مبدعا). لقد ذكرت ذلك لأنني أعتقد أن الإبداع هو بتعريفه ذاته ، وهو فصل أنفسنا عن القيود أو المعايير الإبداعية ، وفي الواقع ، سأشجع ذلك ، ولكني أعتقد أيضًا أننا يجب أن نكون حذرين من السبب في أن هذه المعايير متأصلة في الويب الخاص بنا مواضيع التصميم وما يمكننا القيام به لتكون مبتكرة معهم ، مع أخذ ذلك في الاعتبار.
محاذاة نصية فريدة
عند العمل باستخدام نص بطرق إبداعية أو فريدة (بمعنى أنه ليس 12pt Arial center-align) من المهم أن تتذكر أن النص الخاص بك ليس المحتوى الرئيسي على الصفحة بعد الآن. لقد هبط إلى عنصر داعم ، وإن كان هامًا.
سؤال واحد لطرحه على نفسك دائمًا عند العمل مع النص هو ، "هل هذا التوازن جيدًا مع باقي الصفحة؟" قد يكون مجاورًا لبعض أعمال المحفظة ، أو بعض الصور العشوائية ، أو ربما فقط أعمدة نصية مختلفة أخرى على جانبي الصفحة.
ولكن بغض النظر عن ما هو متاخم أو متعامد ، عليك أن تحاول موازنته بأفضل ما يمكنك. فكر في خطوط الشبكة ، ودراسة أنظمة الشبكة هناك إذا كان لديك ( 960 شبكة النظام هو ما أوصي به). ادرس حيث وضعوا تخطيط الشبكة على الصفحة ، ثم اسأل نفسك لماذا - ثم استنتج إذا كانت ملكيتك متوازنة بنفس القدر. تخيل أنك تضع المحتوى الخاص بك على طول نظام الشبكة نفسه ، وحاول أن تفكر في الشكل الذي ستبدو عليه في هذه الحالة ، ثم قم بتكرار ذلك في CSS.
التذييلات الإبداعية
يمكن للتذييلات الإبداعية أن تضيف الكثير من السمات إلى مدونة أو موقع ويب ، ويبدو نوعًا ما بديهيًا للتفكير في ذلك. سواء كنا نتحدث عن التمرير jQuery الذي يهبط بنا في تذييل جميل تحت عنوان "تحت الأرض" ، أو فقط في أسفل موقع الشركة أو مدونتها ، فهو جزء دقيق جدًا من موقع الويب ولكن جزءًا يمكن أن يكون لها تأثير قوي جدا. الآراء مقسمة إلى أي مدى هذه هي الحالة ، ولماذا قد تكون. لديّ نظريتي الخاصة: عندما نقرأ صفحة ويب نبدأ من الأعلى وننتقل إلى الأسفل ، وفي أسفل الصفحة نستخلص استنتاجاتنا حول ما قرأناه.
عند العمل مع تذييل إبداعي ، هناك بعض الأشياء التي يجب أن تضعها في اعتبارك ، وعدد قليل من أفضل الممارسات التي لاحظت استخدامها في التذييلات التي أحبها أكثر. بالنسبة لي ، فإن الجزء الأكثر أهمية من استخدام تذييل بهذه الطريقة هو استخدام نفس نظام الألوان كموقع الويب الخاص بك ، ولكن مع تباين مختلف . هذا أمر مهم للغاية ، ويمكنك بالطبع أن تضغط التباين لأعلى أو لأسفل على لون الخط مع مراعاة التباين الذي تعمل به مع المظهر العام في التذييل في المقام الأول.
الشيء المهم الذي يجب تذكره هو أنك ترغب في الحصول على نمط عميق رائع لهذا القسم. إنه يعطي إحساسًا رائعًا بالانتهاء من الموقع. عند استخدام هذه التقنية ، يمكنك جعل الذيل أطول مما تريد ، في حدود المعقول ، لأنه مع نظام الألوان المتباين ، من الواضح أن هذا هو بالفعل جزء تذييل.
بقدر ما يذهب المحتوى ، في عالم التذييل الجديد ، يمكن أن يكون من المناسب إضافة توضيحات الشعار واسم المدونة ، أو صور أو روابط شبكة التواصل الاجتماعي ، وأحدث تغريدة ، وحتى نموذج اتصال بسيط مبسط. قد يختلف هذا بالطبع بناءً على تفضيلاتك الشخصية ، لكن وجهة نظري مع عرض كل هذه الخيارات هي توضيح التطور من الماضي إلى الحاضر في ما هو مناسب للعرض في أسفل موقع الويب أو المدونة.
التمرير jQuery
هذه إحدى الطرق المفضلة للقيام بالملاحة على أحد مواقع الويب ، وأعتقد أيضًا أنها تنطبق بشكل خاص على التنقل في المشاركات على المدونة. هناك عدة طرق مختلفة للعمل مع jQuery لهذا ، لذلك سوف أذهب إلى ما هي واحدة من الطرق المفضلة (وأسهل) للقيام ببعض التمرير السلس ومن ثم الذهاب من خلال ما يحدث وكيفية تنفيذه.
هذا هو رمز التمرير العمودي ، لأن التمرير الأفقي ليس مرغوبًا.
$(function() {$('ul.nav a').bind('click',function(event){var $anchor = $(this);$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top} ، 1000)؛ event.preventDefault ()؛})؛})؛ما يحدث هنا قد يبدو معقدًا ، لكنه في الواقع بسيط جدًا. نحن نفتح وظيفة على ".class" لعنصر التنقل الذي سنقوم بالنقر عليه (نحن نطلق على هذا الحدث نقرة). لذا ، فإن الجزء الأكثر أهمية هنا هو تصنيف فئة القائمة (ul) إلى "nav". أو استبدل "nav" في الشفرة بكل ما سمّيته بهذه الفئة. وهذا إلى حد كبير بالنسبة إلى تمرير jQuery فعال ، فقط إرم ذلك في موقع الويب الخاص بك والارتباط بـ مقطوع jQuery (الأفضل) وكنت على استعداد تام للذهاب.
بقدر ما يذهب الاستخدام مع تمرير عمودي مثل هذا ، فهو غير محدود إلى حد ما. يستمتع الكثير من الأشخاص بعدم الحاجة إلى التمرير لأسفل يدويًا ، بل يستمتعون فعلًا بالصفحة التي يقومون بها ، كما أنها طريقة رائعة للانتقال من النشر إلى آخر على موقع الويب ، خاصة إذا كانت هذه المشاركات كبيرة. غالبًا ما أستخدمه للانتقال إلى الأقسام الفرعية للمحفظة المختلفة داخل مدوناتي أو من خلال الفئات على مواقع الويب. كما أنها تقنية مثالية إذا كنت تستخدم موقعك على الويب مثل عرض موضوع من يوم إلى ليلة أو مظاهر لفئاتك أو مواضيع المدونات.
آمل أن تكون بعض هذه التقنيات مفيدة لك جميعًا في محاولة تطبيق جماليات التصميم المختلفة على مدونتك. تذكر ، استخدمها بهدوء وحاول التأكد من أنك تتصرف بحكم أفضل عند استخدام تأثيرات مبهرجة. لدينا التزام بإنشاء شبكة إنترنت ليست قبيحة مثلما أصبحت جوانب معينة من العالم الخارجي. على الرغم من أنها مهمة كبيرة وساحقة ، إلا أنها مهمة يمكننا تحقيقها إذا أخذنا تصميمًا واحدًا في وقت واحد وفي يوم واحد. ابق الأمر بسيطًا ، حافظ على صدقه ، وحافظ عليه حقيقيًا ، ودائمًا ما تضع العاطفة في ما تفعله ؛ حيث ستتألق دائمًا.
ما هي أفضل النصائح لتصميم المدونة؟ ما الذي يجعل تصميم المدونة رائعًا حقًا؟ اسمحوا لنا أن نعرف في التعليقات!
