الاقتراب من عملية تصميم موقع الويب من المتصفح

"إليكم المجانين ، غير الأسوياء ، المتمردين ، مثيري الشغب ، الأوتاد المستديرة في الثقوب المربعة ... أولئك الذين يرون الأشياء بشكل مختلف - ليسوا مغرمين بالقواعد ... يمكنك الاقتباس منها ، والاختلاف معهم ، والتمجيد أو تشويه سمعتهم ، ولكن الشيء الوحيد الذي لا يمكنك فعله هو تجاهلهم لأنهم يغيرون الأشياء ... " - حملة فكر بطريقة مختلفة من Apple ، ستيف جوبز ، 1997.

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

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

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

على الرغم من أنه ليس من الضروري أن يصبح المصمم مبرمجًا خبيرًا ، إلا أن أحد الحلول هو أن يبدأ المصممون العمل مباشرةً مع الكود الذي يقود موقع الويب. سيجد المصممون الذين يمكنهم تبديل التعليمات البرمجية باستخدام القليل من HTML و CSS أنفسهم مصدر قوة كبير لأي فريق ويتمتعون بميزة هائلة بشكل عام.

لماذا ا؟ عند المشاركة في مشروع تصميم موقع ويب سريع الاستجابة بكل تعقيداته ، لا يملك المصممون عادةً الوقت الكافي لإنشاء تصميم ثابت لمكون واحد (دعنا نقول رأسًا أو تذييلًا) عبر 10 قرارات مختلفة وإطارات عرض. حتى في حالة التصميم للأجهزة الأكثر شيوعًا فقط ، فلا يزال يتعين عليهم التفكير في 4-5 شاشات بنسب عرض إلى ارتفاع مختلفة ، وكثافة شاشة ، وأبعاد شاشة. ليست مهمة صغيرة على أقل تقدير.

حل تحديات تصميم موقع الويب باستخدام القلم والورق أولاً

دعنا نستكشف نهجًا مختلفًا لتصميم مواقع الويب وعملية التخطيط.

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

الخطوة التالية هي كتابة مخطط تفصيلي للمشروع لتأكيد فهم الملخص. هذا مفيد عند العمل في مشاريع في مكان قد لا يكون لديك فيه الكثير من الخبرة أو الخبرة. أطلق عليها اسم مواصفات وظيفية - لكن أقل تقنية.

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

التخطيط الشبكي والنماذج الأولية

النماذج الأولية هي المرحلة التالية في عملية تصميم الموقع. يعد إنشاء إطارات سلكية سريعة للتحدث عن تخطيط الصفحة والوظائف وكيف ستبدو صفحات الموقع على الأجهزة المختلفة بداية جيدة. لا يستغرق الأمر وقتًا طويلاً لإنشاء العشرات من الإطارات الشبكية للقوالب والمكونات المختلفة. يمكن إنشاء نموذج أولي بسيط لموقع الويب من هذه ، واعتمادًا على مدى تعقيد المشروع ، يمكن استخدام أدوات النماذج الأولية مثل InVision أو Adobe XD أو Balsamiq أو Moqups أو Axure.

لوحات المزاج وجرد الواجهة

تتمثل الخطوة التالية في تجميع لوحة الحالة المزاجية: مجموعة من الأشياء التي قد يحبها المصمم والعميل وأصحاب المصلحة الآخرون على مواقع الويب الأخرى - التخطيطات والشكل والمظهر والألوان أو الخطوط والأيقونات والصور وما إلى ذلك. سيساعد هذا في تحديد المظهر العام للموقع. إذا كان لدى العميل دليل نمط العلامة التجارية ، فيجب النظر فيه وإدراجه في تصميم الموقع الجديد.

بمجرد الموافقة على العديد من القطع الأثرية - إطارات سلكية ، ونماذج أولية ، ونماذج بالحجم الطبيعي ، ولوحات مزاجية ، وما إلى ذلك - من الجيد إجراء جرد للواجهة.

جرد الواجهة عبارة عن مجموعة شاملة من وحدات البت والقطع التي تشكل واجهتك.

براد فروست

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

التصميم في المتصفح

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

من خلال التركيز على نموذج HTML ، واختبار أفكار التصميم "داخل المتصفح" باستخدام CSS ، يمكن حفظ الوقت الذي يقضيه عادةً في إنشاء نماذج بالحجم الطبيعي للصفحات في أدوات التصميم الأخرى مثل Sketch. إنها فكرة جيدة للمصممين الحصول على محرر كود جيد والتوصل إلى طريقة جيدة لتحديث المتصفح حتى يتمكنوا من رؤية التغييرات في الوقت الفعلي. Sublime Text و Codekit ، على سبيل المثال ، مزيج رائع.

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

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

باستخدام إعلان CSS واحد ، يمكنك تغيير المساحة المتروكة على الأزرار للحصول على أهداف لمس أفضل ، والاختبار مباشرةً على الهاتف المحمول والكمبيوتر اللوحي وسطح المكتب. لا يتم القيام بذلك بسهولة في Photoshop أو Sketch لأن العناصر الأخرى لا تدرك بعضها البعض في التخطيط ، وعليك إعادة تنظيم الكائنات في كل مرة تقوم فيها بتغيير حجم شيء ما.

هل تريد تجربة نظام ألوان رأس مختلف؟ من خلال العمل ببضعة أسطر فقط من كود CSS ، تظهر التغييرات على جميع قوالب HTML على الفور ، على جميع الأجهزة والشاشات. لا يمكن محاكاة هذا النوع من المرونة بسهولة عندما يكون لديك 20 نموذجًا ثابتًا. من المؤكد أنه يمكنك استخدام "الرموز" في Sketch أو Adobe XD للمكونات القابلة لإعادة الاستخدام ، لكنها ليست متعددة الاستخدامات مثل CSS.

في هذه المرحلة ، سيتعين اتخاذ العديد من القرارات الفنية. الأسئلة التي ستحتاج إلى إجابة هي:

• هل ستستخدم معالج CSS المسبق؟ (مستحسن)
• ما نوع الشبكة المتجاوبة التي ستستخدمها للتخطيط؟
• هل الخطوط التي تريد استخدامها متاحة للشراء؟ هل يمتلك العميل ميزانية لخطوط الويب المتميزة ، أم ستعود إلى استخدام خطوط الويب المجانية المتاحة؟
• هل ستستخدم أيقونات متعددة الألوان أم أحادية اللون؟ هل سيتغير الحجم في جميع أنحاء الموقع؟ بعد ذلك ، هل تعتمد على أيقونات مرسومة بشكل مخصص ، أم على حزمة أيقونات موجودة بالفعل؟ ما الأحجام التي ستحتاج أيقوناتك لاستيعابها؟

مشكلة الخطوط وتصميم الويب سريع الاستجابة

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

هناك العديد من الأدوات عبر الإنترنت لاختيار الخطوط واختبارها وتجربة تركيبات المحرف. في Typetester و Typecast ، يمكن العثور على خطوط مختلفة من مختلف الخدمات والمسابك واختبارها. عند العمل مع خدمة اشتراك خطوط معينة مثل Typekit أو Fonts.com ، يمكن للمصممين إنشاء خطوط واختبار قوالب صفحاتهم مباشرةً. يعد إنشاء حزمة Typekit بخطوط جديدة أمرًا بسيطًا وسريعًا ، ويمكنك بسهولة معرفة كيف ستؤثر خطوط معينة على أداء صفحات الويب.

الرموز التي تناسب نمط العلامة التجارية

في حالة رسم رموز مخصصة ، يجب تحديد الحجم والشبكة والنمط. عند العمل في Illustrator ، ستمثل كل لوحة رسم رمزًا واحدًا ، على سبيل المثال. يمكن تصدير الرموز بسهولة من Illustrator بتنسيق SVG أو PNG ، والتي يمكن تحويلها لاحقًا إلى خط رمز مع خدمات مثل Icomoon. يوصى باستخدام الرموز المتجهة (SVG) لأن المتجهات مستقلة عن الدقة ، لذلك لا توجد مخاوف بشأن كيفية عرضها على شاشات عالية الدقة (Retina).

دليل نمط و CSS للحفاظ على عملية تصميم موقع الويب قيد الفحص

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

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

باستخدام CSS ، من أفضل الممارسات فصل أنماط المكونات إلى ملفات منفصلة. على سبيل المثال ، سيكون نمط ترقيم الصفحات في _pagination.scss ، وعناصر النموذج في _form.scss ، وسيتم تضمين كل هذه الملفات في ملف SCSS واحد مع ملفات أخرى (متغيرات ، mixin ، إلخ).

على الرغم من أن style.scss قد يتكون من عشرات "الملفات الصغيرة" ، عندما يعمل عدة أشخاص في نفس المشروع ، يكون من السهل تتبع التغييرات (سواء باستخدام التحكم بالمصدر أم لا) إذا تم تقسيم كل شيء إلى أجزاء أصغر. من المهم الاستمرار في الحفاظ على دليل النمط بعد أن يكون مشروع تصميم موقع الويب قيد الإنتاج ، حيث سيحتاج الفريق إلى تتبع كل مكون من مكونات الموقع.

استخدام أوراق الأنماط - وحدات CSS

من وجهة نظر التطوير ، هناك العديد من الطرق لكتابة CSS المعيارية. الأكثر شهرة هي SMACSS (الهندسة المعمارية القابلة للتطوير والوحدات لـ CSS) ، و BEM (الكتلة ، والعنصر ، والمعدل) ، و OOCSS (كائن المنحى CSS). هناك قدر لا بأس به لتتعلمه ، حتى لو انتهى بك الأمر إلى تطوير نهجك الخاص. في هذه المرحلة ، يجب أن يكون لديك مجموعة رائعة من مكونات واجهة المستخدم وصفحات الويب ، والتي ستمكنك من إنشاء صفحات ويب جديدة بسهولة. يمكنك نسخ العناصر ولصقها من دليل النمط ، وإعادة ترتيبها حسب الحاجة.

نظرًا لأن كل شيء معياري ، فلا داعي للقلق بشأن تناسق التصميم والتعليمات البرمجية ؛ لكن لا تنس أنه إذا قمت بضبط مكون واجهة المستخدم على مستوى النظام ، فستحتاج إلى تحديث دليل النمط بالتغييرات (أو إضافة المكون الجديد). للحفاظ على كل شيء منظمًا ، من الأفضل استخدام نوع من نهج القوالب / الأتمتة للعمل على صفحات الويب مثل Gulp أو Grunt.

ماذا بعد؟ التصميم في المتصفح

الآن لديك مستودع مركزي لمكونات واجهة المستخدم ، وكل عنصر موثق وصفحات ويب مبنية من تلك المكونات. من الآن فصاعدًا ، من المرجح ألا يحتاج المصممون بعد الآن إلى فتح أدوات التصميم المفضلة لديهم لأن معظم "التصميم" سيتم إجراؤه مباشرةً في الكود ، ومعاينته في المتصفح.

ألست متأكدًا تمامًا من كيفية تأثير تغيير معين على التصميم؟ يمكنك الآن معاينة تصميمك على أجهزة ومتصفحات مختلفة في وقت واحد لترى كيف تغير الخط على العنوان ، أو أن تغيير حجم ولون الزر سيؤثر على التصميم.

عند استخدام خطوط الويب المخصصة ، كيف ستؤثر إضافة المزيد من أوزان الخطوط على أداء تحميل الصفحة؟ يمكننا اختبار أداء صفحة الويب قيد التقدم باستخدام خدمات مثل WebPageTest ، واتخاذ قرارات مستنيرة بشأن النتائج الفعلية. بالتأكيد لا يمكننا فعل ذلك في Photoshop أو Sketch.

قد لا يكون العمل باستخدام HTML و CSS ، والعمل في المتصفح مناسبًا لكل مصمم أثناء عملية تصميم موقع الويب. ولكن إذا كان المصممون مهتمين حقًا بكيفية ظهور عملهم على مختلف الأجهزة وأحجام الشاشات ، فعليهم التأكد من أنها مثالية في كل مرة. قد يبدو الشيء الذي يبدو مذهلاً كنموذج تصميم ثابت غير مرغوب فيه عند عرضه في متصفح الويب على جهاز محمول. يجب على المصممين الأذكياء بناء واختبار تصميمات الويب في بيئة يراها الجميع… في المتصفح.

مزيد من القراءة على مدونة Toptal Design:

• تصميم سريع الاستجابة - أفضل الممارسات والاعتبارات
• كيفية تصميم صفحة مقصودة فعالة
• الدليل النهائي لتصميم مواقع التجارة الإلكترونية
• أساسيات إعادة تصميم الموقع - دراسة حالة
• القوى الدافعة للتصميم - دراسة حالة لإعادة تصميم موقع الويب