لماذا يوجد انقسام بين التصميم والتكويد. لماذا الأمور الصعبة تصبح أكثر سهولة، والأشياء البسيطة تصبح أكثر صعوبة؟

بدلا من مناقشة ما اذا كان يجب ان يتعلم المصممين التكويد أو أن يتعلم المطورين التصميم، فدعونا نري كيف تطور تصميم الويب وكيف يمكننا سد الفجوة بين التكويد والتصميم.

العصور المظلمة في تصميم مواقع الويب (1989)

كانت البداية في تصميم مواقع الويب مظلمة جدا حيث كانت الشاشات سوداء فعليا. حيث كان يتم إنشاء التصميم عن طريق الرموز والجدولة (tabulation). لذا دعونا ننتقل للأمام سريعا حيث كانت واجهة المستخدم هي الطريقة الرئيسية لتصفح الويب – عصر الجداول 🙂 .

الجداول “Tables” – البداية (1995)

كانت الخطوة الأولي في تصميم مواقع الويب هي البدأ في إنشاء المتصفحات التي يمكنها عرض الصور . حيث كان أقرب خيار متوفر لتنظيم المعلومات هو الجداول المتواجدة بالفعل في HTML. حيث كان يتم استخدام جداول داخل جداول وكان يتم دمج الخلايا “cells” مع بعضها البعض. كان للجداول ميزات رائعة مثل الإمكانية لمحاذات الأشياء عموديا، وامكانية تحديدها بالبكسل أو بالنسبة المئوية. حيث كانت الجداول الأقرب للـ Grid وقتها.

جافا سكريبت “JavaScript” عام (1995)

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

العصر الذهبي للحرية – الفلاش (1996)

لكسر القيود المفروضة علي تصميم مواقع الويب، ولدت تكنولوجيا جديدة قدمت حرية لم نشهدها من قبل. فأصبح بامكان المصمم تصميم أي أشكال ورسوم متحركة، تفاعلات واستخدام أي خط وكل ذلك في أداة واحدة – الفلاش (Flash). فالنتيجة النهائية كانت ملف واحد يتم ارساله للمتصفح ليتم عرضه. وكل ما يحتاجه أن يكون لدي المستخدم أحدث برنامج فلاش وأن ينتظر بعض الوقت ليتم تحميله، فقد كان الفلاش مثل السحر. وكان هذا هو العصر الذهبي لصفحات البداية (splash) والرسوم المتحركة وجميع أنواع التأثيرات التفاعلية. وللاسف كان سئ لمحركات البحث وكان يستهلك الكثير من قوة المعالجة.بدأ الفلاش في الاضمحلال عندما قررت ابل التخلي عنه في أول ايفون لهم في (2007).

CSS عام (1998)

في نفس وقت الفلاش، نشأ أفضل نهج لهيكلة وتنظيم التصميم –  CSS وهي اختصار لـ Cascading Style Sheets.والفكرة الأساسية هنا هو فصل المحتوي من العرض التقديمي. بحيث يتم تحديد الشكل والتنسيق في الـ CSS ، والمحتوي في الـ HTML. وكانت الاصدارت الأولي من CSS غير مرنة، ولكن كانت المشكلة الأكبر هي نسبة اعتمادها ودعمها في المتصفحات. فقد استغرق الأمر بضع سنوات قبل أن تبدأ المتصفحات بدعمها كليا. وفي هذا الوقت كان متصفح واحد لديه أحدث مزايا الـCSS بينما كانت المتصفحات الأخري تفتقر لها، وكان هذا بمثابة كابوس للمطور. لنكن واضحين فالـ CSS ليست لغة تكويد، بقدر ما هي لغة تعريفية (declarative). هل يجب أن يتعلم مصممي الويب التكويد؟ ربما. هل يجب أن يفهموا كيف يعمل الـ CSS؟ بالتأكيد!

ثورة الموبايل (2007) – Grids and frameworks

تصفح الويب علي الموبايل كان تحدي كبير في حد ذاته. فبالاضافة إلي تنوع التصميمات واحجام الأجهزة، فقد كانت توجد مشاكل في المحتوي والسرعة أيضا، وتحميل الكثير من المحتوي يحرق الكثير من الأموال علي الانترنت. وكانت الخطوة الأولي للتحسين هي فكرة الشبكات العمودية (column grids). وبعد عدة محاولات فاز نظام 960 grid  وأصبح التقسيم 12-عمود شئ يستخدمه المصممين كل يوم. والخطوة التالية كانت توحيد العناصر شائعة الاستخدام مثل النماذج، التنقل، الأزرار وتقديمهم بطريقة سهلة وقابلة لاعادة الاستخدام. حيث ظهرت مكتبات تحتوي علي العديد من العناصر البصرية تتضمن كل الأكواد فيها مثل ( Bootstrap and Foundation) .الخط الفاصل بين مواقع الويب والتطبيقات يتلاشي.

تصميم مواقع الويب المستجيبة (2010) – Responsive

قرر شاب بارع يدعي Ethan Marcotte تحدي النهج الحالي باقتراح استخدام نفس المحتوي، ولكن بتخطيطات “layouts” مختلفة للتصميم، وابتكر مصطلح تصميم المواقع المستجيبة “Responsive web design” . تقنيا فنحن لا نزل نستخدم HTML و CSS ، لذلك يعد تطور مفهومي. ومع ذلك هناك الكثير من المفاهيم الخاطئة. للمصمم، الاستجابة”responsive” تعني mocking up تخطيطات متعددة. بالنسبة للمطور فهي كيفية عرض الصور، سرعة التحميل، الدلالات “semantics” والمزيد. والميزة الرئيسية هي أن المحتوي متماثل، بمعني أن الموقع نفسه يعمل في كل مكان.

عصر الفلات (2010)  – FLAT

تصميم أكثر من تخطيط “layouts” يأخذ وقت كثير، لذلك قررنا تبسيط هذه العملية عن طريق التخلص من تأثيرات الظلال الخيالية والعودة إلي أصول التصميم بإعطاء الأولوية للمحتوي. فالتصوير الفوتوغرافي الجميل، التيبوغرافي، الرسوم الحادة “sharp illustrations” والتخطيطات المدروسة “layouts” هي الطريقة التي نصمم بها الأن. تبسيط العناصر البصرية أو ما يسمي التصميم الفلات (Flat design) يعد جزء من هذه العملية أيضا. حيث تم استبدل الأزرار اللامعة بالأيقونات والتي أتاحت لنا استخدام صور الفيكتور (vector) والأيقونات الخطية (Font Icons). خطوط الويب قدمت تيبوغرافي رائع وجميل.

المستقبل المشرق (2014)

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

تقنيا يوجد بعض المفاهيم الجديدة التي تدعم هذه الانتقال لهذا الاتجاه. وحدات جديدة في CSS مثل (viewport height and width) تتيح مرونة أكثر لوضع العناصر. Flexbox مفهوم آخر رائع والذي يعد جزء من CSS. فهو يسمح بإنشاء تخطيطات وتعديلها بخاصية واحدة بدلا من كتابة أكواد كثيرة. وأخيرا مكونات الويب تزيد وتتضخم باستمرار. فهي عبارة عن مجموعة من العناصر المجمعة معا مثل (المعرض ، نماذج التسجيل، إلخ…) تقدم طريقة عمل أسهل.

المصدر