دليل المصمم للعمل مع أدلة النمط والبلاط النمط
خلق شيء الهوية ذات العلامات التجارية ليست مهمة سهلة. إنها تتطلب مجهودًا كبيرًا لكنها أيضًا واحدة من أكثر المهام الإبداعية مكافأة. مشاريع الويب في كثير من الأحيان مزج العلامة التجارية مع تصميم واجهة. هذا يمكن أن يكون مربكا لأن هناك الكثير مما يجب عمله في كلا المجالين. أدلة النمط و بلاط الاسلوب هي موارد كبيرة لمصممي الويب ، وعلى الرغم من أنها تبدو متشابهة ، إلا أنهم ينجزونها مهمتين مختلفتين.
في هذا المنشور ، أود الخوض في كليهما ، وتغطية الفوائد التي يمكنك الحصول عليها من هذه الأصول الإبداعية. لن يحتاج الجميع (أو ما شابه ذلك) إلى إنشاء أدلة نمط أو مربعات أنماط. لكن على كل مصمم أن يفهم على الأقل ما هي هذه الأشياء وكيف يعمل.
أدلة نمط للويب
لقد قرأت آراء متباينة حول أدلة النمط. يقول البعض إن هذه نماذج رقمية ، بينما يقول آخرون إن أدلة الأسلوب المرتكزة على الكود هي الأكثر فائدة.
وفي كلتا الحالتين ، فإن هدف دليل الأنماط هو نفسه على شبكة الإنترنت مثل أي مشروع آخر. إنها تعرف أنماط متسقة ووحدات واجهة المستخدم والتفضيلات الإبداعية المستخدمة في عملية التصميم. يمكنك الحصول على قياسات محددة بدقة ومحددة بالبكسل لعناصر معينة ، أو يمكنك البقاء فضفاضًا وتقديم إرشادات مع أمثلة مرئية.
لا توجد طريقة واحدة مناسبة للقيام بدليل للأناقة. الطريقة الخاطئة الوحيدة هي إنشاء مورد ببساطة لا يمكن فهمه من قبل الآخرين.
والهدف هو إنشاء الأصول التي سوف الوقوف أمام اختبار الزمن. يجب أن يكون مفتوح للتعديل إذا تم إنشاء موارد جديدة. يجب أن يكون أيضًا في متناول أي شخص ينضم إلى الفريق ليغوص في الدليل بسهولة.
يجب أن يكون دليل الأسلوب كما هو مفصل حسب الحاجة للمشروع. وعادة ما يشمل الأصول القابلة لإعادة الاستخدام, مثل الطباعة والأزرار ونماذج الألوان والأنسجة وعناصر الصفحة الشائعة.
غطينا مؤخرا أدوات دليل أسلوب المعيشة يمكن أن تساعدك على بناء أدلة نمط المعيشة من نقطة الصفر. هذه الأدلة الحية هي أكثر لمطوري الواجهة الأمامية ، لكنها يمكن أن تكون مفيدة للمصممين. يمكنك قراءة المزيد حول هذا الموضوع في منشور مجلة Smashing.
موردي المفضل المطلق هو StyleGuides.io. ويغطي أساسيات أدلة النمط للويب, بما فيها أمثلة حية و دراسات الحالة.
مكتبة أنماط MailChimp هي واحدة من أفضل الأمثلة التي يمكنك العثور عليها في StyleGuides.io. انها دليل على الانترنت لايف ستايل ذلك يحدد شبكة MailChimp ، والطباعة ، وعناصر الصفحة.
عندما تقوم بتصميم دليل أنماط لشركة ويب ، من الشائع وضع كل شيء على الإنترنت ، ولكن يمكنك أيضًا إنشاء أدلة داخلية, والاحتفاظ بها على إنترانت محلية أو استضافتها بشكل خاص خلف صفحة تسجيل دخول المستخدم. الطريقة التي يمكنك الوصول إليها من دليل الأنماط حقا لا يهم. إنها جميعًا تخدم نفس الغرض المتمثل في نقل ألوان وأنماط وصور مرئية معينة تطابق موضوع مشروع الويب.
لمعرفة المزيد حول هذا الموضوع ، تحقق من هذه المنشورات الأخرى في أدلة الأنماط:
- أدلة نمط الأمامية (24ways.org)
- إنشاء دليل نمط الموقع (creativebloq.com)
- كيفية جعل الكمال دليل تصميم نمط الويب (dtelepathy.com)
المتفرعة في نمط البلاط
البلاط الاسلوب هي وحش مختلف تماما. هذه البلاط هي الأصول الإبداعية المستخدمة في مرحلة التصميم المبكر عند محاولة تسمير جمالية محددة.
تم إنشاء موقع Style Tiles بواسطة Samantha Warren ، ويحتوي على كل ما قد تحتاج إلى معرفته. يوجد لا يوجد قالب محدد لتصميم بلاط الاسلوب. لكن أمثلة سامانثا تستخدم العناوين وأنواع الفقرات والروابط والأنماط, و خيارات الألوان الممكنة جنبا إلى جنب مع شعار العلامة التجارية.
عند العمل مع بلاطات الأنماط ، فإن هدفك هو في النهاية تقديم 2-3 البلاط نمط مختلف إلى العميل أو المدير الإبداعي. هذه البلاط هي أكثر تفصيلا من لوحة المزاج, بعد أقل تفصيلا بكثير من نموذج بالحجم الطبيعي الكامل.
يجب أن يكون البلاط مفصلاً بما يكفي لإعطاء إحساس الهوية والمزاج للموقع. سامانثا تشجع باستخدام الصفات لوصف كل البلاط بالتفصيل.
يمكن للعملاء ننظر من خلال البلاط المختلفة, و حدد القطع المفضلة لديهم. هذه يوفر لك الوقت عند التصميم لأن العميل قد رأى بالفعل الأصول التي يحبونها ، لذلك هناك فرصة أقل للمراجعات الضخمة.
إليك اقتباس رائع من موقع Style Tiles:
إن مقارنة البلاط المصمم مع مجموعة أدوات المصمم الداخلي هو القياس المناسب. لا ترغب في بذل جهد في نموذج بالحجم الطبيعي المثالي للبكسل فقط لجعل العميل يدرك أنه يكره معظم الألوان والخطوط.
بدلاً من ذلك ، استخدم مربعات النمط للعثور على موضوع مشترك أو لغة بصرية لاستخدامها في جميع أنحاء الموقع. هذا يمكن أن تشمل العلامات التجارية / الهوية ولكن قد تشمل أيضا ميزات واجهة المستخدم, مثل القوائم المنسدلة أو أزرار CTA.
يجب عليك استخدام هذه كما الأصول القابلة للتسليم في وقت مبكر من هذه العملية. بمجرد إكمال نموذج بالحجم الطبيعي الكامل ، لن تكون هناك حاجة إلى الرجوع إلى لوحة الأنماط بعد الآن. ومع ذلك ، في البداية ، يمكن أن تكون بلاطات الأنماط حاسمة في العملية الإبداعية توفير الوقت المصمم و iving العميل العديد من الخيارات للاختيار من بينها.
أذا أردت الخوض أكثر في البلاط النمط افحص هذه المنشورات.
- البلاط الاسلوب وكيف تعمل
- بلاط النمط: بديل لشركات التصميم الكاملة
- إنشاء نمط البلاط: طريقة سهلة لتوجيه التصميم
أدلة نمط مقابل نمط البلاط
الفرق بين أدلة النمط وبلاط النمط غامض ولكنه محدد. ا دليل الاسلوب اكثر بكثير مفصلة ويجب أن تستخدم ك دليل مرجعي مستمر للفريق الإبداعي. ا بلاط الاسلوب يمكن استخدامها ك moodboard إلى مؤامرة الأفكار بصريا لنفسك أو العميل. وغالبا ما تستخدم ل استكشاف الأفكار, وبمجرد الانتهاء من المشروع فإنها لا تخدم الكثير من الغرض.
غالبًا ما تكون بلاطات الأنماط أكثر خشونة حول الحواف ، ويتم استخدامها فقط في العملية الإبداعية في وقت مبكر. والمقصود دليل نمط لاستخدامها طوال عملية التصميم بأكملها و حتى بعد ذلك للرجوع إليها في المستقبل للمصممين الآخرين الذين قد يعملون على الموقع.
كلاهما له فوائده وعيوبه. بلاط الاسلوب هي سريع وممتع, لكن سريع الزوال في الطبيعة. أدلة النمط هي شامل و تتصرف مثل الوثائق البصرية, لكنهم ايضا تتطلب الكثير من العمل.
لذلك أي واحد يجب أن تستخدم؟ في النهاية يعتمد على المشروع.
مشاريع أصغر مثل للمواقع التجارية الصغيرة تعمل بشكل أفضل مع البلاط النمط. يتطلب إنشاء دليل أسلوب كامل لموقع الأعمال الصغيرة الكثير من العمل وساعات الفوترة. هذا ربما لا يستحق التكلفة بالنسبة لمعظم العملاء.
ومع ذلك أ مشروع كبير مثل إعادة تصميم نيويورك تايمز سوف تستفيد من كل من البلاط والأناقة أدلة النمط.
العثور على اللغة والمزاج لمشروع جديد هو دائما عملية قيمة. هذا هو ما يجعل البلاط الاسلوب مثالي لكل سيناريو تقريبًا.
يمكنك أيضا الحصول عليها دون إنشاء أي من هذه الأصول. يذهب بعض المصممين مباشرة من السلكي إلى نماذج بالحجم الطبيعي مفصلة. وبعض العملاء لا يريدون حتى دليلًا للأسلوب لأنه لن يتم استخدامه.
اعمل على أساس كل مشروع وقرر ما هو الأفضل لكل واحد.
أمثلة حية
دعنا نختتم هذا بالتغطية أمثلة كل من أدلة النمط والبلاط النمط. لقد وجدت هذه التصميمات أثناء استعراض Dribbble وأعتقد أنها تجسد الجودة التي تريدها في أدلة أنماطك الخاصة أو مربعات الأنماط.
أدلة نمط
تم إنشاء هذا دليل أسلوب Airbnb لا يصدق من قبل ديريك برادلي. انها بسيطة جدا ولكنها توضح بوضوح الأنماط الرئيسية والألوان وعناصر الصفحة يمكن العثور عليها في التصميم.
إليك دليلًا للأسلوب الرقمي أكبر بكثير تم إنشاؤه بواسطة المصمم Naoshad Alam. هذا المثال هو أكثر تنظيما بكثير مع أقسام للألوان والطباعة والنماذج وعناصر الواجهة وميزات واجهة المستخدم الأخرى.
أدلة نمط أكثر تفصيلا من شأنها أن تضع كل هذه العناصر التصميم على شبكة الإنترنت ، و تشمل مقتطفات الكود لكل واحد.
قدم المصمم Cupi Wong هذا الدليل لـ AfterShip. تتم صياغة الطباعة والأزرار وخيارات الألوان وعناصر الصفحة الشائعة بعناية ، و نظمت معا في أقسام.
يمكن نقل هذا أيضًا إلى الويب ، كما أنه تم إنشاؤه بشكل أكبر كوثائق مرجعية عبر الإنترنت.
شارك مصمم واجهة المستخدم Greg Dlubacz دليل أسلوب واجهة المستخدم الخاص به لمشروع ويب. هذا الشيء ضخم على محمل الجد. تمتد معاينة ملء الشاشة إلى 21000 بكسل!
بالتأكيد أحد أفضل الأدلة الرقمية التي رأيتها على الإطلاق. يمكن أيضًا نقل ذلك إلى صفحة وثائق عبر الإنترنت ليتم الرجوع إليها من قبل أعضاء الفريق.
بلاط ستايل
صمم مصمم UI / UX Abdus Salam هذا البلاط الأنيق لموقع ويب لمخزن الأغذية العضوي. انها أساسية جدا مع عناصر تصميم مسطحة ، بعض ميزات واجهة المستخدم البسيطة, و لوحة الألوان.
لقد صمم المصمم أدريان كانتيلمي بالتفصيل من خلال أسلوبه في تجريد البلاط. لديها الألوان والطباعة ولكن يشمل أيضا ناقلات الرسوم التوضيحية.
هذه ناقلات مساعدة ل تحديد العلامة التجارية ، والمزاج ، ونظام الألوان العام من الموقع.
حصلت على إعادة تصميم كأس العالم المستشارين البلاط نمط خاص بها مع ميزات أساسية للغاية. بعض الرموز ، بعض خيارات الألوان ، إلى جانب تصميمات أزرار زوجين. بساطة هو اسم اللعبة.
إذا كنت تستطيع أن تشعر بما قد يبدو عليه الموقع في لمحة ثم كنت تفعل ذلك بشكل صحيح.
فيما يلي مثال ممتع لبلاط أنماط مرفوض يستخدم في مشروع سفر. يوفر المصمم Brennan Gleason عينة صغيرة فقط من البلاط ، ولكن لا يزال بإمكانك ذلك التعود على أجواء الموقع.
الكلمات الأخيرة
إذا بحثت في جميع أنحاء الويب ستجد الكثير من الأمثلة والنصائح والموارد من أجل أدلة أسلوب البناء والبلاط النمط. ولكني آمل أن يكون هذا المقال بمثابة كتاب تمهيدي لكليهما وأن يجيدك فهم وفهم أصول التصميم هذه.
