الدليل الفائق البسيط لعلم الأيقونات

في المتوسط ​​، كم من الوقت يستغرق تصميم رمز مخصص؟

دقيقتين؟ عشر دقائق؟ طويل؟ ماذا لو أوضحنا لك كيفية إنشاء 10 أيقونات رائعة في أقل من 10 دقائق؟

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

لذلك شرعت في إنشاء دليل بسيط للغاية لمساعدتك على تعلم أساسيات الأيقونات في أقل من 10 دقائق (أعني ذلك).

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

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

الهدف من هذه المقالة هو إنشاء 10 رموز في غضون 10 ثوانٍ لكل منها ، باستخدام أشكال بسيطة فقط.

ملاحظة مهمة: سنستخدم Adobe Illustrator في هذا المنشور ، ولكن يمكنك الحصول على نفس النتائج باستخدام Sketch أو حتى Figma. في أي وقت نحتاج فيه إلى إضافة نقطة أو إزالتها على شكل ، سنستخدم "أداة القلم (P)". سيتم تحديد النقاط ونقلها باستخدام "أداة التحديد المباشر (أ)".

أيقونة العين

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

نصيحة: بدلاً من استخدام دائرة بيضاء ، ببساطة اطرح (باستخدام لوحة Pathfinder) الدائرتين من الدائرة الموجودة أسفل كل منهما. يخلق نتيجة أنظف على الخلفية.

رمز السهم

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

رمز البطارية

باستخدام مربع واحد بحد واثنين مع تعبئة. ما عليك سوى اللعب بالنسب ، مع تضمين مربع واحد مملوء في شكل الحد والحفاظ على الثاني بالخارج لتشكيل طرف البطارية.

نصيحة: العب بسمك الضربات والحشو للحفاظ على توازن بصري جيد.

رمز قائمة نقطية

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

نصيحة: استبدل المربع بدوائر لإضفاء مظهر أكثر نعومة.

أيقونة السحابة

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

نصيحة: استخدم أحجام دوائر مختلفة للحصول على سحابة ذات مظهر عضوي أكثر.

أيقونة اللعب إلى الأمام

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

نصيحة: للقيام بذلك بشكل أسرع ، ابدأ بمثلث بدلاً من مربع.

رمز القمع

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

نصيحة: ضع مربعين من الحافة إلى الحافة ، وقم ببساطة بمد الحافة العلوية أفقيًا.

رمز التشغيل / الإيقاف المؤقت

ابدأ بثلاثة مستطيلات طويلة على التوازي. إعادة تشكيل أعرض مستطيل على شكل مثلث.

نصيحة: بدلاً من ذلك ، ارسم مثلثًا واحدًا متبوعًا بمستطيلين متوازيين.

رمز السهم الموقف

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

نصيحة: في Illustrator ، يساعد الضغط على مفتاح Shift أثناء سحب النقطة في الحفاظ على التناظر مع الحفاظ على الزاوية القطرية في اليمين.

رمز دبوس الموقف

اضرب دائرة داخل دائرة أكبر (باستخدام لوحة Pathfinder). اسحب أدنى نقطة مباشرة لأسفل ، وقم بتوضيح الزاوية المشكلة - قم بالتبديل إلى "أداة القلم (P)" ، ثم أثناء الضغط على مفتاح "Shift" ، انقر فوق النقطة.

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

أيقونة الصوت

تمامًا مثل رمز القمع ولكن عند دوران 90 درجة.

نصيحة: ما عليك سوى نسخ رمز القمع ولصقه ، ثم قم بتدويره في اتجاه عقارب الساعة.

أيقونة الموجة

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

نصيحة: قم بتجميع أطراف الخطوط للحصول على مظهر أكثر سلاسة.

أيقونة Toptal

هذا هو رمز المكافأة.

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

نصيحة: انتبه إلى سمك الخطوط والمساحة البيضاء المتكونة داخل الشعار.

الأيقونة تساوي 1000 كلمة.

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

باختصار ، القواعد العشر الرئيسية للأيقونات هي:

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

العب على طول ، وشاهد ما يمكنك الخروج به في أقل من 10 ثوانٍ.

• • •

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

• تجربة مستخدم التجارة الإلكترونية - نظرة عامة على أفضل الممارسات (باستخدام مخطط المعلومات الرسومي)
• أهمية التصميم المتمحور حول الإنسان في تصميم المنتج
• أفضل مجموعات مصممي UX - أمثلة ودراسات حالة ملهمة
• مبادئ ارشادية للواجهات المتنقلة
• التصميم التوقعي: كيفية إنشاء تجارب مستخدم سحرية