كيفية تحويل الرموز المملة بسرعة إلى روائع أصلية

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

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

مبادئ تصميم المواد في Google

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

1. استخدام أشكال هندسية بسيطة وألوان جريئة

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

2. إضافة عمق مع ظلال خفية

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

لاحظ أنه غالبًا ما يتم محاكاة الضوء الطبيعي على أنه قادم من الزاوية العلوية اليسرى.

3. استخدم ظلال اللون لاستبدال الظلال المسقطة

يتم استخدام كل لون في ظلال متعددة لمحاكاة العمق البصري. على سبيل المثال ، في أيقونة Gmail ، يمكنك أن ترى أنه يتم استخدام ظلال مختلفة من اللون الأحمر لشكل M ، ويتم استخدام ظل أغمق من الرمادي أسفل غطاء المغلف.

كيف يمكنك القيام بذلك أيضًا: عروض توضيحية خطوة بخطوة

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

موارد

• تحقق من مجموعة الأيقونة المجانية الكاملة من Google هنا.

هيا بنا نبدأ.

1. أيقونة الترباس

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

2. أيقونة الدردشة

في الأيقونة الأصلية ، لدينا تلميح لتأثير الظل في الفجوة بين الفقاعتين ، حيث ستنشئ ظلًا.

في الشكل السفلي ، حدد النقطة التي تشكل الزاوية اليمنى في الفجوة ، وحركها لأعلى إلى اليسار حتى تشكل الزاوية اليمنى في الزاوية العلوية اليسرى.

قم بتكرار الفقاعة العلوية وحرك النسخة لأسفل ولليمين. حدد النسخة وشكل الفقاعة السفلي ، واستخدم "Pathfinder" لإنشاء تقسيم ، واحتفظ فقط بالتقاطع مع نسختك السابقة.

الآن يمكنك تطبيق ثلاث درجات من اللون الأزرق وإعطاء الأفتح في الأعلى ، والأغمق في المنتصف ، والثاني الأغمق إلى الأسفل.

3. حدد علامة أيقونة

سنقوم بإنشاء تأثير ورق مطوي.

قم بتكرار الرمز ، وقم بإزالة النقطتين الإضافيتين في أعلى اليمين ، ثم في أقصى اليسار لإخراج قطعتين.

قم بتكرار الطية اليسرى وحركها فوق الطية اليمنى.

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

4. أيقونة العلم

ابدأ بتدوير الحواف ، ثم استخرج قاعدة العلم.

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

5. أيقونة القلب

قم بتكرار رمز القلب.

اعزل النصف الأيسر من الشكل.

تتبع خطًا قطريًا للأسفل ، قادمًا من النقطة العلوية اليمنى.

تداخل الشكل الناتج مع القلب ، ثم انقله إلى اليمين لطرح شكل الظل. ضعي ظلالك الثلاثة من اللون الوردي.

6. أيقونة الجبال

تشير الفجوة الفارغة داخل الأيقونة الأصلية إلى المكان الذي يمكننا وضع الظل فيه.

قم بإنشاء شكلي المثلث من كل اختيار.

انقل نسخة من النسخة الأصغر إلى اليمين ، واستخرج التقاطع الناتج ليكون شكل الظل.

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

7. أيقونة الناس

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

8. أيقونة مربعة عائمة

حدد الشكل السفلي ، وحرك نقطته الوسطى العلوية لأعلى حتى تبدو مثل الماسة.

قم بتكرار شكل الماس العلوي ، وانقل النسخة لأسفل بمقدار 10 أو 20 بكسل.

حدد الشكلين السفليين ، وقم بتطبيق أداة "Divide" من لوحة "Pathfinder".

من الأشكال المتقاطعة الناتجة ، احتفظ بالقطعتين السفليتين فقط ، واحذف أي نقاط إضافية.

لفيها بوضع ثلاث درجات من اللون الأحمر مع تحديد الأغمق في المنتصف.

9. أيقونة الرسالة

باستخدام "أداة التحديد المباشر (أ)" ، اختر النقطة الأعلى الثانية من شكل المغلف.

أضف نقطة على المقطع إلى اليمين باستخدام "أداة القلم".

الآن بعد أن أصبح لديك نقطة إضافية ، يمكنك إعادة تشكيل تلك المساحة السلبية لتبدو وكأنها ورقة عن طريق رفع النقطتين العلويتين وتحريكهما يمينًا ويسارًا كما هو موضح.

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

10. أيقونة الكيك

اعزل نسخة مكررة من الجزء السفلي من الكعكة.

تضييق عرضها عن طريق تحريك الحواف اليمنى واليسرى للداخل.

حرك الشكل الناتج أعلى الأيقونة الأصلية ، وقم بتمديد النقاط الأعلى لتتداخل مع شكل الجليد.

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

أكمل كعكتك بوضع لون برتقالي فاتح على الجليد والشمعة ، وظلال أغمق على القاعدة ، وبرتقالي أغمق لشكل اللهب وحافة الظل.

تحسين شكل ومظهر مجموعة الأيقونات الخاصة بك

يمكن إنشاء أيقونات بأسلوب المواد بكل بساطة. ما عليك سوى مزيج جيد من الأشكال الهندسية المدروسة وظلال الألوان الجريئة وتأثير الظل المسقط.

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

اسمحوا لنا أن نعرف ما هو رأيك! يرجى ترك أفكارك وتعليقاتك وملاحظاتك أدناه.

• • •

مزيد من القراءة على مدونة Toptal Design:

• مبادئ التصميم وأهميتها
• أفضل مجموعات مصممي UX - أمثلة ودراسات حالة ملهمة
• استكشاف مبادئ تصميم الجشطالت
• Adobe XD مقابل Sketch - ما أداة UX المناسبة لك؟
• أفضل 10 تسليمات لتجربة المستخدم يستخدمها كبار المصممين