مشروع التصميم الذري لموقع CMS

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

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

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

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

في هذا المنشور ، سنوضح كيف قمنا ببناء (وتصميم مستمر) نظام تصميم مستوحى من مفهوم التصميم الذري. من خلال القيام بذلك ، قمنا بتطبيقه على رسم الترميز البوهيمي .

 

ما هو التصميم الذري؟

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

 

تنفيذ التصميم الذري

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

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

 

التصميم الذري باستخدام SketchApp

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

 

ملف قالب التصميم

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

 

1 ألوان

أولاً ، على مستوى الذرة ، ألقينا نظرة شاملة على مكونات Bootstrap CSS. ثم استخدم "أنماط الطبقة" لتحديد قائمة لوحات الألوان المرتبطة من خلال ملف التصميم بأكمله. يتم حساب جميع الألوان على متغيرات أقل باستخدام أداة Hex Color Tool . وهذا يوفر لنظام التصميم المرونة لبدء أي مشروع جديد من خلال تحديد ألوان العلامة التجارية الرئيسية ، والظلال الأفتح والأغمق والألوان المميزة.

 

 

2 الطباعة

الخطوة التالية هي إنشاء إرشادات الطباعة ، بدءًا من العناوين H1-H6 والخط الأساسي أو الأساسي. هنا بدأت نموذجي باستخدام 15 بكسل بدلاً من معيار Bootstrap من 14 بكسل. هذه الأنماط لا تشمل نظام الطباعة بالكامل ؛ ومع ذلك ، فإنها بمثابة الأساس لبدء مشروع باتساق من الخطوة الأولى. مع نمو المشروع ، يمكن إضافة المزيد من الأنماط عند الطلب.

 

3 نظام الشبكة

تحديد نظام الشبكة هو عملية مباشرة تتبع إطار Bootstrap. في قالب التصميم ، تمكنت من سرد أنظمة تخطيط الشبكة الأكثر شيوعًا المستخدمة في أي مشروع ويب متكرر. ومع ذلك ، فإن إحدى المشكلات التي يجب معالجتها هنا هي أنه عند استخدام Sketch لتصميم Bootstrap ، فإننا نواجه مشكلة. يتبع Sketch مبدأ البكسل المثالي بينما يستخدم Bootstrap النسب المئوية لذلك لا يمكن الحصول على تخطيط دقيق لنصف بكسل (وبالتالي ، بالنسبة للشاشات الأكبر من 1200 بكسل ، تكون الحاوية المستخدمة 1170 بكسل من خلال أخذ 15 بكسل من كل جانب لترك مساحة لشريط التمرير. بالإضافة إلى طرح الحشوات المشتركة من كلا الجانبين ، اترك لنا حجم حاوية فعليًا يبلغ 1140 بكسل. في هذه الحالة ، يكون القسم المنطقي لنظام الشبكة هو 30 بكسل لأحد عشر مزرابًا وهو الحشو 15 بكسل لكل جانب من الأعمدة. هذا يترك باقي أعمدة بعرض 67.5. لا يعمل هذا السيناريو عند استخدام رسم تخطيطي ، حيث لا يوجد نصف بكسل في إعدادات التخطيط).

الحل ببساطة هو اتخاذ التدابير التقريبية لأننا نعمل مع تصميمات متجاوبة. أقسم عرض العمود إلى 68 بكسل و 30 للمزاريب. والنتيجة هي تخطيط دقيق لعرض الأعمدة في حين أن الميزاب سيختلف بين 29 بكسل -30 بكسل ، تاركا فرق 6 بكسل. وبالتالي ، إذا اتبعت قسم الشبكة في النموذج ، فسيتراوح الفرق بين 1-4 بكسل ، وهو ما لن يؤثر على جودة الأصل المصدر على الإطلاق. فقط كن حذرا عند تصدير @ 2x أو @ 3x لشاشات شبكية العين.

 

4 أيقونات وعناصر

هذه مجموعة بسيطة من الرموز التي يمكن استخدامها بشكل شائع في مشاريع مختلفة. نستخدم عادةً رموز Bootstrap أو Font Awesome. خلال فترة التصميم ، نقوم بتخصيصها عند الحاجة ، ولكن توفير الأساسيات المتاحة يوفر الوقت الأولي.

 

5 مكونات ... والآن نبدأ التصميم!

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

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

 

ماذا بعد؟

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

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

لا تتردد في تنزيل قالب Sketch الخاص بنا ومتابعتنا بمدونتنا حيث ستشارك المزيد حول هذا الموضوع وتغطي المزيد على نظام التصميم الذري.