البحث في الموقع

إن كنت مصممًا، فلا شك بأنك تعاملت عدة مرات من قبل مع صفحات تنسيق CSS، وربما قد سمعت زملاءك يتحدثون عن مدى أهميتها في تنسيق المواقع، أو تقليل وقت تحميل الصفحة، أو توفير الوقت على المطورين. (فهي بالتأكيد أقل تعقيدًا من تنسيق كل صفحة على حدى في شيفرة HTML). بإمكان CSS أن تنقذك عندما تريد إعادة تصنيف موقعك الإلكتروني بالكامل، حيث أن تحديث صفحات النسق الخاصة بالموقع سوف يطبّق التغييرات على المنصة ككل. وبإمكان CSS أن تكون ذات أهمية عالية جدًا لكل من المصممين والمطورين عندما يعملون سويًا لصنع مواقع جميلة وحيوية. ولكن إن كنت لا تزال تتساءل: "كيف بإمكان معرفتي بـ CSS أن تفيدني في العمل الخاص بي؟" أو أنك ببساطة غير متأكد من كيفية استخدامها. إذًا استمر بالقراءة خطوة بخطوة عبر الدليل الإرشادي حول CSS، وكيفية ابقاء صفحات التنسيق الخاصة بك منظمة ومرتبة لتستفيد في تصاميمك ولتفيد العملاء أيضًا. 1. واكب الصيحة- استخدم إطارات العمل (Frameworks) تمامًا كما توضح رموز الموضة انطباعًا عن ما سيتوفر من صيحات هذا الموسم، فإن الصيحات التقنية تؤثر على تنسيق آلاف المواقع. كيف ذلك؟ ينشئ وينشر مطورو الويب "إطارات العمل"، وهي مجموعة من القوانين للعناصر المشتركة في الموقع. فإن هذا يعطي المطورين نقطة انطلاق لتصميم الموقع. بإمكان إطارات العمل"Frameworks" أن تساعد على الحصول على موقع بشكل لائق مستعد للعمل بسرعة. تخيل مثلًا أن تكون واثقًا من أنك ستبدو رائعًا بارتدائك لأي شيء على الرف في متجر للملابس الأنيقة، لذلك لا ترغب لموقعك بأن يكون غريبًا كارتدائك لقميصٍ أخضر فاقع مع حذاء أرجواني. إطار العمل هو قاعدة جديرة بالثقة، ولكن لا يزال عليك الاختبار. قم بتعديل الألوان قليلًا، والخطوط...إلخ. ما يدريك؟ ربما ستصبح صفحات النسق الخاصة بك الإطار الأكثر شهرة. وفي النهاية، من كان يظن بأن سراويل الجينز قد تعود مجددًا؟ أو أن تصبح صيحة؟ أليس كذلك؟ 2. اسعَ في سبيل البساطة ستجد بأنه كلما كبر الموقع، سوف تحتاج لتطوير قائمة طويلة جدًا من العناصر المختلفة وقواعد CSS. وبعض هذه القواعد قد تتداخل أو تتقاطع في بعض الأحيان (في هذه الحالة، سوف تتفوق القاعدة الأكثر تفصيلًا). وقد تضطر لعمل شيفرة أكثر مما كنت تتوقع، خصوصًا باعتبار التغيرات المتعددة التي تحتاجها لقاعدةٍ ما لمتصفحات وأحجام شاشة مختلفة. سرعان ما ستشعر كأنك تسبح في برك من شيفرات CSS، وتصارع من أجل إيجاد القاعدة المطلوبة للقسم المطلوب الذي تريد تعديله. من الجيد أن تتأكد قبل إضافتك لقاعدة تنسيق جديدة، فقد تُغنيك قاعدةٌ موجودة مسبقًا ولا تحتاج لأي إضافة. 3. قم ببناء حياتك هنالك عدّة طرق بإمكانك استخدامها لإعادة تحليل شيفرة CSS الخاصة بك لتسهيل استخدام الموقع والانتقال فيه. بعض أسهل الطرق تعد أكثرها فاعلية ولديها الفائدة الأكبر. ها هي بعض أسرع الطرق: حافظ على المسافات: حفاظك على التباعد بين القواعد بداخل البيانات في ملفك يجعلها أسهل في القراءة. استخدم الدلالات أو أسماء المعرفات أو الأصناف (class/id names) المألوفة: بدلًا من استخدام اسم صنف مثل "bottom_menu"، حاول أن تستخدم أسماء الوسوم الدلالية مثل "footer". أما عندما يكون لديك صورة في قسم الاتصال "contact"، تأكد من استخدامك للصنف في الصورة، مثل "contact_image". طبِّق مبدأ DRY (ابتعد عن التكرار): أنت ترغب عادةً في تكرار الشيفرة الخاصة بك ولو قليلًا. هل ترى بأن التنسيق "background-color: #000" متكررًا في ملف CSS الخاص بك؟ فكر بكتابة هذا التنسيق مرة واحدة بدلًا من التكرار، واستخدم عدة محددات (selectors) على التنسيق الواحد. اختر ترتيبك باستخدام هذه الأدوات: شغل ملف CSS الخاص بك من خلال CSS Lint أو W3C، سوف يساعدك هذا في تحليل ملف CSS الخاص بك بشكل صحيح وتحديد مناطق الخطأ. وتعتبر أدوات المطور (developer tools) الموجودة في متصفح الويب مفيدة جدًا في تحديد عناصر معينة في موقعك الإلكتروني واستخدام المنطقة كحقل تجارب لاختبار تنسيقات وأوضاع مختلفة. 4. تخطى مرحلة الأساسيات إن كنت تملك بعض مهارات البرمجة، فبإمكانك استخدام خيارات CSS متقدمة أكثر مثل (SASS) أو (LESS). مع هذه الخيارات التي تسبق المعالجات (pre-processors)، بإمكانك الاستفادة من خيارات برمجة أكثر تعقيدًا كالمتغيرات (variables)، والتشعبات (nesting)، والمخاليط (mixins) والدوال (functions) لتنظيف ملف CSS الخاص بك بشكل إضافي وتجنب التكرار. تعدُّ CSS أداةً مهمة جدًا لتطوير طريقة عرض موقعك الإلكتروني. هذه المرئيات هي ما تصنع شعارك الخاص وهويتك، وهي ما يؤثر في تجربة المستخدم UX الخاصة بموقعك. ولكن، كلما زادت القوة، زادت المسؤولية. تذكر بأن تبقي ملف CSS الخاص بك منظمًا، بالضبط كإبقاء الخزانة مرتبة مهمٌ جدًا لتستطيع إيجاد قميصك المفضل بسهولة، فإن إبقاء ملف CSS منظمًا سوف يساعد على تنفيذ أفكار التصميم الفورية بدون أي تأخير. ترجمة -بتصرف- للمقال How to avoid chaos in your style sheets لصاحبه Eric An

اصنع نموذج تصميم موقع تعليمي متكامل بدءًا ببناء التخطيط الأولي، ومن ثم الانتقال لتصميم العناصر الفردية للصفحة. والنتيجة هي نسق صفحةٍ إلكترونيةٍ عصرية وجذابة وناضرة وجاهزة للبرمجة. وبأخذ العبرة من العديد من التصاميم العصرية للمواقع الإلكترونية، سوف ننتج هذا التصميم الجذاب والناضر. تشمل المميزات الأساسية على الأشرطة الأفقية التي تقسّم المحتوى لمناطق محددة مثل أن تكون منطقة رأس الصفحة مفعمة بالألوان وتعرّف عن الموقع، أو أن يكون هنالك رسالة ترحيبية بها أمثلة عن الأعمال الخاصة بالموقع، أو حتى نسق رئيسي ذو عمودين وذيل صفحةٍ مليء بالمصادر. البداية الأمثل لأي تصميم هي الرسم التخطيطي على ورقة، إذ أن التملك والتحكم بالقلم يساعد على تجسيد النسق الصعب بسهولة. إيجاد تخطيط شبكي (Wireframe) يساعد على تطوير شكلٍ هرمي، بالإضافة إلى إعطاء رؤية عن أفضل الأماكن للعناصر الأساسية في التصميم. أنشئ ملفًا جديدًا في فوتوشوب. بالنسبة لي، فأنا أميل لجعل حجم العمل الفني مشابهًا للحجم المتداول للشاشات الكبيرة، حيث أن هذا يعطي توضيحًا أفضل للشكل الكلي للموقع. ضع خطوطًا إرشادية بعرض "960 بيكسل " في منتصف صفحة الويب. واصنع شبكةً بسيطة لتساعدك على وضع عناصر الصفحة عليها. إبدأ بصناعة شريط رأس الصفحة، وارسم تحديدًا (Selection) يحيط بعرض الصفحة كلها ومن ثم املأها (Fill) باللون الأبيض. إضغط بشكلٍ مزدوج على الطبقة (Layer) لعرض تنسيقات الطبقة وقم بإضافة تغطية بالتدرج اللوني (Gradient Overlay) من اللون الأبيض للون الرمادي متدرج بشكل عمودي. فيما بعد، ارسم منطقة الرأس الأساسية حيث سيتم وضع المحتوى المميز فيها، وفي طبقة جديدة، ارسم تحديدًا (selection) ومن ثم أضف تدرجًا لونيًا باستخدامك للونين فاقعين، وقم أيضًا بإضافة ظل داخلي رقيق لإضفاء العمق على التصميم. اللمسات الرقيقة لنسيج التصميم بإمكانها أن تضيف الحياة للتصميم. وبينما يتم تحديد منطقة الرأس بواسطة قناع (Mask)، قم بالضغط على كل من أزرار CMD+SHIFT+C للقيام بنسخها بشكل مندمج وموحد، ومن ثم قم بإلصاقها على طبقة جديدة. ثم بالذهاب لقائمة "Filter>‏ Noise>‏ Add Noise" لخلق نسيج بسيط، ثم قم بضبط وضع المزج (Blending Mode) على الاختيار (Multiply) وقم بتقليل التعتيم حتى يصل للدرجة المناسبة. ألصق شعار الشركة، ومن ثم قم بتحريكه على الشاشة حسب الشبكة التي سبق أن أنشأتها. أضف بعض اللمسات من خلال خيارات نسق الطبقة (Layer Style Options) وأضف تدرجًا لونيًا ليتناسب مع ألوان قائمة الرأس المميزة، ومن ثم اصنع ظلًا داخليًا ناعمًا جدًا. استخدم أداة الكتابة (Type Tool) لانشاء نص على شريط التنقل الرئيسي للموقع، اجعل الخط بلون رمادي متوسط، بينما تقوم باستخدام درجة أغمق للرابط النشط. يعد رأس الصفحة البارز أو المميز منطقةً رائعة للتعريف عن الموقع، ومع ألوانٍ فاقعة في الخلف، فإنه يجذب التركيز الأكثر من المستخدمين. استخدم هذه المساحة لكتابة عنوان تقديمي مفاجئ وغير متوقع بخط معدل يتناسب مع العلامة التجارية للشركة. استمر بتجسيد المحتوى التقديمي، ولكن هذه المرة استخدم خط (Arial) أو (Helvetica) حتى تتمكن من وضع النص بتنسيق "html" التقليدي وبدون أساليب استبدال الصور. ضع صورة حاسوب محمول في المنطقة المميزة (وهنا مجموعة من الأمثلة)، وهذا يتناسب بشكل تام مع طبيعة الشركة التخيلية، وتوفر منطقة مركزية ممتازة لعرض أمثلة على الأعمال على شاشة الجهاز المحمول. قم بلفت الانتباه والتأكيد على هذه المنطقة المركزية بوضعك لتدرج لوني دائري منبعث من خلف الحاسوب المحمول. فإن هذا يضيف تفصيلًا صغيرًا يبرز العنصر عن باقي الصفحة. أما أسفل المنطقة الرئيسية في الرأس، فقم بعمل تحديد جديد واملأه بتدرج لوني بين الأبيض والرمادي. قم بتجزئة القسم الأوسط من الصفحة لعمودين باستخدام خطوط الإرشاد حسب الشبكة التي قمت بعملها، بحيث يكون المحتوى الرئيسي في العمود الأيسر، بينما يحتوي العمود الأيمن على شريط جانبي أقل سماكة. وباستخدام أداة الكتابة، قم بإضافة محتوى وهمي. ثم قم بتغيير الحجم والاتجاه لتعطي قطعة من النص سهلة في القراءة والفهم. أسفل منطقة النص الرئيسي، بإمكانك صنع منطقة لعرض آخر منشورات المدونة. قسِّم العمود لعمودين آخرين وثم أنشئ تحديدًا لمثال عن واجهة المنشور. ويجب أن تكون روابط العنوان واضحة للمستخدم حتى يضغط عليها، لذلك غيّر ألوانها لجذب الانتباه. استخدم أداة المستطيل المدور (Rounded Rectangle Tool) لرسم صندوق في الشريط الجانبي. ولا يهم اللون الأساسي، إذ سنغيّره في المرحلة التالية. اضغط ضغطة مزدوجة على الطبقة وأضف مجموعة من تنسيقات الطبقة، بما فيها التدرج بين الأبيض والرمادي، والحد الخارجي (Stroke) وظل داخلي ناعم. استخدم هذا الشريط الجانبي لصنع قسم خاص للإعلان عن آخر المشاريع المميزة على الموقع. بإمكان العناصر أن تكون عبارة عن قصاصات صور صغيرة ونصوص. ارسم مستطيلًا دائريًا آخر ليتم استخدامه كزر، ثم قم بإضافة القليل من تنسيقات الطبقة مثل التدرج اللوني والحد الخارجي (stroke) لإعطاء تنسيق للزر يتناسب مع الشكل الكلي للصفحة ذو اللون الرمادي الجذاب. اصنع علامةً وصفية وقصيرة للزر الذي يدعوا المستخدم للاستمرار في تصفح الموقع ورؤية المشاريع والأعمال التالية. قم بالإشارة لنهاية المحتوى بواسطة رسم منطقة ذيل للصفحة، ثم قم بتعبئة المنطقة بلون رمادي باهت لتمييزها عن منطقة المحتوى الرئيسي. ارسم ستارًا دائريًا ومن ثم عبّئه بتدرج لوني دائري بين الأسود والشفاف. قم بالضغط على CMD+T لتستطيع التحكم بالتحديد، ثم قم بضغط أو تمديد التدرج اللوني للحصول على رسم شبيه بالظل. حرِّك الظل لمنتصف الشاشة، ثم احذف المنطقة الزائدة فوق ذيل الصفحة. سوف تحصل على ظل رقيق يبرز الصفحة الرئيسية ويضيف بعض التفصيل للتصميم. تعد منطقة ذيل الصفحة منطقةً مناسبة لعرض العناصر الثانوية للصفحة، على سبيل المثال: بإمكانك وضع بيانات تسجيل الدخول الخاصة بالعميل. قم بتجسيد التصميم باستخدام أداة الكتابة، ثم ارسم صندوقي إدخال صغيرين، وقم بتنسيق الصندوقين بظل داخلي خفيف. استخدم المنطقة الوسطى لذيل الصفحة لكي تعرض رسالة معينة عن الشركة. اضبط النص باستخدام نفس خطوط رأس وحاشية الصفحة. وفي النهاية، أضف بياناتٍ للتواصل في يمين المنطقة السفلية. هذه التفاصيل سوف تصبح مفيدة للمستخدم عند استخدامه للموقع. قم بإبراز أهم الجوانب من خلال الحجم أو اللون. يشمل التصميم النهائي على كل العناصر المطلوبة بعناية بداخل الصفحة من خلال إبقاء كل شيء حسب الشبكة التي أنشأناها في البداية. والنتيجة هي تنسيق منظم وجذاب مع الكثير من اللون الرمادي الرقيق لإضفاء العمق للموقع، وعندها يتم استخدام الألوان لتحديد المناطق المميزة والمحتوى المهم. ترجمة -بتصرف- للمقال ‎Create a Clean Modern Website Design in Photoshop