التصميم الذري: تفجير ما كنت تعتقد أنك تعرفه عن تصميم الويب

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

نظم التصميم

لا يقوم المصممون ببساطة بإنشاء صفحات ويب بعد الآن ؛ ينشئون أنظمة التصميم. تشمل أنظمة التصميم:

• اللون
• شبكات
• نسيج
• الطباعة
• إلخ.

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

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

ولادة التصميم الذري

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

يمضي في شرح أن الواجهات تتكون من مكونات يمكن تصنيفها إلى كتل بناء. إليك الترتيب من الأصغر إلى الأكبر:

• الذرات
• جزيئات
• الكائنات الحية
• القوالب
• الصفحات

المصدر: BradFrost.com

اللبنات الأساسية للتصميم الذري

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

1. الذرات

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

2. الجزيئات

الجزيئات أكثر تعقيدًا من الذرات ، لكنها ليست معقدة بشكل عام. عندما تجمع الذرات غير المفيدة معًا ، يكون لديك جزيئات أكثر فائدة: تسمية نموذج البحث + الإدخال + الزر (الذرات) = نموذج البحث المكتمل (الجزيء)

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

عندما تجمع الجزيئات معًا ، تحصل على كائنات أكثر تعقيدًا من سابقاتها: الشعار + التنقل + نموذج البحث + أيقونات الوسائط الاجتماعية (الجزيئات) = إعلان تسمية رئيسية مكتمل (كائن حي)

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

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

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

4. القوالب

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

المصدر: BradFrost.com

5. الصفحات

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

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

افكار اخيرة

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

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

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

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

صورة مميزة عبر ShadeDesign / shutterstock.com