يمكن أن تساعدك أنظمة التصميم الجيدة في إنشاء منتجات رقمية بكفاءة واتساق. لكن أنظمة التصميم الرائعة ستدعم وتقوي إبداع فريقك في نفس الوقت.
نظرًا لكونه مفهومًا جديدًا نسبيًا ، لا توجد طريقة حقيقية واحدة لتنفيذ أنظمة التصميم حتى الآن ، ولكن بدأت العديد من الشركات الكبرى في إنشاء أنظمة لفرقها وتحصد الفوائد بالفعل.
تعلم كل ما تحتاجه للاستعداد والتشغيل مع أنظمة التصميم في دورتنا المجانية!
جدول المحتويات
ما هو نظام التصميم؟
نظام التصميم هو أداة. يمكننا التفكير في الأمر على أنه مجموعة من المكونات القابلة لإعادة الاستخدام التي تسترشد بمجموعة من المعايير. يمكنك بعد ذلك استخدام هذه المجموعة لإنشاء أي عدد من التطبيقات.
الآن ، نظرًا لأن هذه المجموعة تسترشد بالمعايير ، فسيكون للمصممين والمطورين وقتًا أسهل في بناء منتجاتك.
لا يتعين على المصممين التخمين في كل مرة يحتاجون فيها إلى تصميم مكون جديد أو صفحة جديدة ، يمكنهم ببساطة الرجوع إلى هذا النظام. لا يتعين على المطورين إنشاء مكونات من نقطة الصفر في كل مرة. يمكن لجميع المشاركين في المشروع الرجوع إلى خريطة مركزية للمكونات والأفكار والإرشادات. يضمن نظام التصميم أن أي منتجات جديدة تقوم بتطويرها تتماشى مع هوية علامتك التجارية.
دليل النمط مقابل نظام التصميم
هل نظام التصميم مساوٍ لمكتبة الأنماط ، أم ملف تخطيطي ، أم دليل نمط؟ الجواب لا.
نظام التصميم هو كل هؤلاء وأكثر. كما يوضح Emmet Connolly ، مدير تصميم المنتجات في Intercom:… معظم أنظمة التصميم هي في الحقيقة مجرد مكتبات أنماط ، وهي عبارة عن صندوق كبير من قطع Lego لواجهة المستخدم التي يمكن تجميعها بطرق شبه لا نهائية. قد تكون جميع القطع متسقة ولكن هذا لا يعني أن النتائج المجمعة ستكون كذلك. منتجك هو أكثر من مجرد كومة من عناصر واجهة المستخدم القابلة لإعادة الاستخدام. لها هيكل ومعنى. إنها ليست صفحة ويب عامة ، إنها تجسيد لنظام المفاهيم.
نظام التصميم هو مجموعة من الأصول ومجموعة من المعايير والوثائق المصاحبة لتلك المجموعة.
مكتبة الأنماط عبارة عن مجموعة من المكونات والإرشادات لاستخدامها. دليل الأنماط عبارة عن مجموعة من الإرشادات الخاصة بأنماط الرسوم والمحارف والألوان والصور وما إلى ذلك.
في نظام التصميم ، ستجد أمثلة على كيفية استخدام كل مكون أو نمط رسومي جنبًا إلى جنب مع معلومات إمكانية الوصول وأفضل الممارسات والإرشادات. هذا هو الفرق بين دليل النمط أو مكتبة الأنماط ونظام التصميم الكامل.
دورة مجانية: مقدمة في نظم التصميم
في هذه الدورة التدريبية القصيرة المجانية ، ستحصل على مقدمة حول ماهية أنظمة التصميم ، وتتعرف على الفوائد ، وترى بعض الأمثلة ، وتتعلم أيضًا الخطوات الأولى لإنشاء واحدة. في النهاية ، سيكون لديك كل المعلومات التي تحتاجها لإنشاء نظام تصميم لنفسك أو لفريقك.
أنظمة التصميم المعبّر
في أنظمة التصميم التعبيري ، توضح لك Yesenia Perez-Cruz كيفية بناء أنظمة مفيدة يمكن الاعتماد عليها لا تحافظ على الانسجام عبر منتجاتك فحسب ، بل إنها مرنة أيضًا لاستيعاب الإلهام والتجريب. تعلم كيفية توصيل علامتك التجارية ، والتعاون عبر الفرق – والقيام بأكثر من ذلك بكثير من توحيد المكونات.
تصميم لووردبريس
في هذه الدورة التدريبية ، ستتعلم أساسيات تصميم سمة WordPress ، ولكن مع لمسة. سوف نتعامل مع العملية من منظور “نظام التصميم”.
بدلاً من تصميم صفحة الموضوع بصفحة وزرًا تلو الآخر ، سنبدأ بتحديد بعض المعلمات الأساسية: الألوان ، والطباعة ، والتباعد ، والتحجيم. بناءً على ذلك ، سنصمم أنماطًا أساسية ومتقدمة ونوثقها على طول الطريق.
كدليل على كيفية استخدام نظام التصميم ، سنقوم بعد ذلك بتصميم صفحة كاملة: الفهرس. باتباع هذه العملية ، ستتمكن بعد ذلك من تصميم صفحاتك الخاصة بطريقة متسقة وفعالة!
التصميم الذري
Atomic Design هو كتاب من تأليف Brad Frost يشرح بالتفصيل كل ما يدخل في إنشاء وصيانة أنظمة تصميم قوية ، مما يسمح لك بطرح واجهات مستخدم بجودة أعلى وأكثر اتساقًا بشكل أسرع من أي وقت مضى.
يقدم هذا الكتاب منهجية للتفكير في واجهات المستخدم الخاصة بنا كتسلسلات هرمية مدروسة ، ويناقش صفات مكتبات الأنماط الفعالة ، ويعرض تقنيات لتحويل تصميم فريقك وسير عمل التطوير.
أمثلة على نظام التصميم
تقوم العديد من الشركات الكبيرة بإنشاء أنظمة تصميم للسماح لفرقها بالتعاون وإنشاء التطبيقات والتجارب بكفاءة. دعنا نتحقق من بعض أمثلة نظام التصميم!
بولاريس Shopify
و تصميم نظام بولاريس تم إنشاؤه من قبل Shopify لمساعدتهم على العمل معا لبناء تجربة رائعة لجميع التجار Shopify ل.
كما ترى ، فإن نظام تصميم Shopify ليس مجرد مكتبات أنماط وأدلة للأسلوب ، بل يشمل أيضًا معلومات حول المحتوى ، مثل الصوت والنبرة والتسمية والمفردات. وستجد لكل مكون أمثلة على كيفية استخدامه ومعلومات إمكانية الوصول وأفضل الممارسات والإرشادات.
المواد من جوجل
Material هو نظام تصميم أنشأته Google لمساعدة الفرق على بناء تجارب رقمية عالية الجودة. إنه مدعوم برمز مفتوح المصدر ، وقد تم إنشاؤه كطريقة لتوحيد خط إنتاجهم عبر الأنظمة الأساسية.
لقد ابتكروا لغة بصرية تربط كل شيء معًا. لقد قاموا بتضمين دليل نمط ومكونات وأيقونات وإرشادات إمكانية الوصول وحتى برامج تعليمية مصممة لمساعدة المطورين على تنفيذ المواد. يدخلون في تفاصيل واسعة حول كل مكون. كيف تستخدمه؟ ما هي أفضل الممارسات؟
حكومة المملكة المتحدة
يعد موقع GOV.UK أحد أفضل الأمثلة على التصميم المتسق والفعال. و تصميم نظام GOV.UK هو الأساس والسبب الرئيسي لنجاحها.
يوضح مثال نظام التصميم هذا لأي شخص يعمل على خدمة GOV.UK كيفية جعلها متوافقة مع GOV.UK. تم إنشاؤه لمساعدة المصممين والمطورين على تجنب تكرار العمل والبناء على البحث الذي أجرته فرق أخرى.
إنه أيضًا مثال ممتاز على كيفية استخدام الأنماط وتجاوز إنشاء دليل نمط أو مكتبة مكونة. و أنماط GOV.UK مكتبة يغطي كل شيء من طلب المستخدمين لعناوين، حتى متى وكيف نطلب من المستخدمين حول الجنس أو التفاصيل، بما في ذلك الجنس على كيفية تجنب استخدام الضمائر ولماذا يجب عدم استخدام عناوين لتخمين بين الجنسين.
