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

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

تسمى التصميم الذري .

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

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

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

الصفحة الرئيسية

تتكون الصفحة الرئيسية لـ Route 93 Pizza من جميع عناصرنا كموقع إلكتروني موحد وعملي. الآن ، إذا وضعنا الموقع تحت المجهر ، يمكننا أن نرى مكوناته الحبيبية:

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

ذرات

الجزيئات: الجزيئات هي المكان الذي يتم وضع الذرات فيه - حيث يبدأ تصميم الموقع المكتمل بالشعور الملموس. في الجزيئات الخاصة بـ Route 93 ، يمكنك رؤية لوحة الألوان والخطوط والرموز المصورة معاً في حقول النموذج وتراكبات الصور والأزرار. فهم ، كما يقول فروست ، أداة "لفعل شيء واحد وفعله جيدًا".

جزيئات

الكائنات الحية: بحلول الوقت الذي نصل فيه إلى الكائنات الحية ، يمكننا إنشاء ذيل كامل للطريق 93. وهو يجمع كل المكونات المذكورة إلى موقع عملي وجمالي.

الكائنات الحية

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

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

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

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

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

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

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

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

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

استنتاج

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