البحث في الموقع

هل تبحث عن أيقونات مصممة وفق التصميم المادي (Material Design Icons) ذات جودة عالية لإضافتها لمشاريعك؟ أنت في المكان الصحيح! لقد جمعت لك قائمة ضخمة من أيقونات مصممة وفقًا للتصميم المادي (Material Design Icons) التي يمكنك توظيفها في تصاميمك المستقبلية. تمتلك الأيقونات دورًا مميزًا في أي تصميم إذ تضفي انطباعًا بصريًا جميلًا للعديد من الحركات، والأدوات، والمنتجات، والخدمات ...إلخ. بإمكانك توظيف أيقونات التصميم المادي هذه في مشاريع متعددة، وإضافة لذلك، فإن تصاميمها تواكب آخر الصيحات. أثِر اهتمام مستخدميك بتصاميم الأيقونات الملفتة هذه. ستكتشف العديد من الأيقونات المتجهية مصممة بتصاميم يدوية وسلسة، ومصنوعة بأيدي مصممين خبراء. تحتوي هذه المقالة على مجموعة كبيرة جدًا ويوجد ما يناسب الجميع. قم بتحميلهم بعدة صيغ، حسب حاجتك. إضافة لذلك، فإن تصاميم هذه الأيقونات تغطي الكثير من الزوايا والمواضيع المختلفة. Material Design Icons Custom Shape هذه مجموعة كبيرة تضم 431 أيقونة تصميم من الفوتوشوب. يمكن تحميل هذه التصاميم واستخدامها بالمجان. Android L Icon Pack by Icons8 لديك هنا مجموعة ضخمة تحتوي على 840 أيقونة مصممة وفق التصميم المادي (Material Design Icons) وهي متاحة بصيغة PNG. وتشمل أيقونات التواصل الاجتماعي، والأسهم، والخدمات ...إلخ. Material Design Icon Grid صمَّم هذه الأيقونات المصمم Jiangping Hsu ويمكن تحميلها بصيغة ملفات PSD. بإمكانك استخدامها في أشرطة العمل كأيقونات بدء. Google Material Icons أيقونات جوجل هذه تم صنعها خصيصًا لتطبيق Sketch. ألق نظرة على كل شيء وحدد إذا ما كانت هذه التصاميم مفيدة لمشاريعك. Material Design Powerpoint & Keynote Icons يوجد هنا مجموعة كبيرة مكونة من 425 أيقونة بإمكانك استخدامها في برنامج Powerpoint و Keynote. بإمكانك تغيير الألوان حتى تناسب ما تريد وضعها معه. Isometric Material Icons وهي مجموعة رائعة تشمل أيقونات مصممة تصمميًا جيدًا. بإمكانك تحميلها بأكثر من صيغة ملف مثل PNG، و PSD، و AI. Material Design Icons with Bounds 250 أيقونة تصميم مادي (Material Design Icons) بإمكانها أن تندمج بداخل مشاريع Sketch الخاصة بك. تفقد هذه الأيقونات وحدد إن كنت تستطيع استخدامها في تصاميمك الحالية. Material Design Icon Templates سوف تجد هنا العديد من قوالب أيقونات التصميم المادي (Material Design Icons) المختلفة والتي بإمكانك استخدماها في تصاميمك الحالية أو المستقبلية. Material Icons Pack وهي مجموعة كبيرة أخرى مكونة من 435 أيقونة مصممة وفق التصميم المادي (Material Design Icons). بإمكانك تحميل هذه العناصر في برنامج Sketch وصيغة SVG. Material Design System Icons أيقونات النظام هذه تم صُنعها بواسطة Walmyr Carvalho. ستجد في الرابط الموجود بالعنوان 20 أيقونة جميلة بإمكانك استخدامها في كل من Sketch وبصيغة PNG. Material Design Icons by Google لديك 900 أيقونة مصممة وفق التصميم المادي (Material Design Icons) بين يديك وجاهزة للاستخدام فورًا. هذه الأيقونات لديها تصاميم بسيطة ولكن مذهلة وسوف تترك انطباعًا إيجابيًا لدى مستخدميك. Mprphing Material Design SVG Icons – SVG Morpheus يوجد هنا مجموعة رائعة من أيقونات SVG المرسومة والتي يمكنك استخدامها في تصاميمك. اضغط على الرابط المرفق بالأسفل لتشاهدها. Material Design Webfont Icons هذه مجموعة مميزة وتضم أكثر من 1900 أيقونة مصممة وفق التصميم المادي (Material Design Icons). هذه المجموعة تشمل تصاميم أيقونات متعددة الاستخدام ومتوفرة بعدّة صيغ وألوان وأحجام. Material Design Icons ألق نظرة على أيقونات التصميم هذه بصيغة PSD الرائعة والتي يمكنك تحميلها واستخدامها في مشاريعك مجانًا. هذه الأيقونات لديها تصاميم ذات تفاصيل مفعمة بالألوان وسوف تبدو رائعة في مشاريعك. Material Design Icon Templates ستجد هنا مجموعة رائعة من قوالب أيقونات التصميم المفيدة والتي بإمكانك استخدامها لصنع عناصرك الخاصة. Free Set of Server – Hosting Material Design Icons تشمل هذه المجموعة 12 أيقونة جميلة مصممة وفق التصميم المادي (Material Design Icons) والتي تتعلق بالخوادم والمستضيفات. بإمكانك تحميلها بصيغة PSD أو PNG ويمكنك أيضًا استخدامها في كلا المشاريع المجانية والتجارية. Google Maps & Streetview Icons تجد هنا بعض الأيقونات المرسومة الخاصة بخرائط جوجل (Google maps) ووضع رؤية الشارع (Streetview) والتي يمكنك استخدامها في مشاريعك الحالية أو القادمة. Angular Material Icons (eps) لديك هنا مجموعة رائعة من الأيقونات الزاويّة التي يمكنك تحميلها واستخدامها بالمجان. هذه العناصر لديها تصاميم مفصّلة بألوان جميلة. Material Design +420 Free Icons (SVG, EPS, PSD, PNG Files) أيقونات التصميم هذه متواجدة بصيغة vector مما يجعلها مثالية لأي مشروع، مهما كان حجمه. بإمكانك الاختيار بين أكثر من 420 أيقونة مجانية وتأتي بصيغة SVG، و PNG، و PSD وصيغ ملفات أخرى. ترجمة -بتصرف- للمقال ‎7000+ Material Design Icons - Ultimate Icon Roundup لصاحبه Iggy

يجب أن يحتوي كل موقع ويب و صفحة هبوط على زر «دعوة إلى إجراء» (Call to action، ويختصر إلى CTA) واضح. هذا يشجع المستخدِم على النقر على الحدث وتنفيذه، سواء كان ذلك لإجراء عملية شراء، أو بدء تجربة، أو إنشاء حساب. لا توجد طريقة واحدة مفضلة لتصميم CTA ويمكنك استخدام العديد من الأنماط المختلفة، من التدرجات الكبيرة إلى الأزرار الطيفية، وكل شيء في الوسط. لكن هناك عوامل أخرى تؤثر أيضًا على سهولة الاستخدام مثل اللون والحجم والموضع. اخترنا في هذا المقال 10 تصاميم CTA ممتازة وكلها مصممة باستخدام CSS خالص. إذا كنت تبحث عن تحفيز لإنشاء تصاميم CTA، يلزمك البحث عن شيء في هذه المجموعة. 1- الزر العائم Floating Button إليك أحد أكثر الأساليب الفريدة الغير شائعة على الويب. يمكن أن يصبح هذا الزر العائم عنصرًا أساسيًا لصفحات الهبوط التي تنسجم جيدًا مع التصميم. يستخدم ظل إسقاط CSS3 مع حركات مكررة لإنشاء التأثير العائم. كل هذا يعمل عبر CSS مما يجعل نسخه ونقله لمشروعك أسهل. بالتأكيد، تأثير التحويم (hover) باهت بعض الشيء، إلا أن تصميم الزر الفعلي نفسه عوض هذا البهتان. بالإضافة إلى أنه يمكنك دائمًا توسيع تأثير التحويم ليشمل حركات CSS3 أخرى إذا كنت ترغب في التفكير خارج الصندوق. 2- زر CTA الأخضر المدوَّر ستجد الكثير من CTA مثل هذا في صفحات الهبوط التي تروج للعروض أو الكتب الإلكترونية. غالبًا ما يستخدمون تأثير الدائرة المرسومة يدويًا باللون الأحمر لكونه يُمتَزج في الصفحة ويبدو من الطبيعي النقر عليه. ما يلفت النظر في هذا الزر الأخضر CTA هو تأثير تحريك الحوَمان؛ فهو يعمل على كل من الزر والتَّعرُجات الحمراء في الخلفية، هو ليس التأثير الذي تتخيله للوهلة الأولى، ولكن للحصول على أزرار CTA سهل وحقيقي وجذب الانتباه، عليك تجربة ذلك. ونظرًا لأن الزر يستخدم CSS خالصًا، يمكنك بسهولة تغيير نظام الألوان لمطابقة أي تصميم. 3- الزر المصمم عبر التصميم الماديّ (Material Button) إذا كنت ترغب في العمل باستخدام التصميم الماديّ ل Google، فستحب مجموعة الأزرار الفريدة هذه. التصميم المادي هو تصميم مبنيٌ بنمط واحد، لكنه يوفر اثنين من التأثيرات هما: تحويم الفأرة والنقر. يستخدم الزر جزء من شيفرة SCSS / Sass لِشيفرة CSS، ولكن يمكنك تجميعه إلى CSS مباشرة من CodePen. يعمل ذلك على تسهيل نسخ و لصق الشيفرة للاستخدام الشخصي إذا لم تكن من محبي Sass. تأثيرات الحركة تحاكي دليل تصميم Google، لذلك فإن هذه المجموعة رائعة لأي مشروع ويب مصمَّم بالتصميم المادي قد تقوم بإنشائه مستقبلًا. 4- أزرار إجراء الحدث الملونة مجموعة الأزرار هذه الصغيرة والسهلة الإستخدام أُنشِأت من المطور Rohan Nair. يتم تحديد خيارات الألوان لتناسب تصميمك، فيمكنك دائمًا تغيير شِيفرة CSS. التأثير الحقيقي الجذاب هنا هو حركة النقرة التي تحرك الزر لِأسفل في الصفحة. هذا يوهم المستخدم بالعمق ويميز كل زر عن العناصر الأخرى في الصفحة. بالتأكيد هذا كله يستخدم CSS خالصًا، لذلك يسهل عليك تخصيصة ليناسب مشروعك. 5- زر التفاعل الصغير إذا كنت تحب تأثيرات الحركة للأزرار، يمكنك إلقاء نظرة على هذه الأزرار الدقيقة التي صممها Phil Hoyt. فقد استُخدم فيها Font Awesome مع حركات CSS مخصصة لأيقونات الأسهم. عند تحويم الفأرة فوق أي زر، تختفي تسمية الزر وتبرز بدلًا منها أيقونته. وفقًا لتصميم CTA الخاص بك، قد لا يكون هذا مناسبًا كما تريد، خاصةً إذا لم تتمكن من العثور على أيقونه لتمثيل سلوك الزر بوضوح. لكن إن كنت تستطيع عمل هذا في موقعك، فإن تأثير التحويم يلزم أيضًا لجذب الإنتباه. 6- الأزرار المحددة هذه الأزرار المحددة متميزة عن غيرها، هي في الأساس لا تشبه أزرار CTA لكن مع وجود نص أكبر أو حجم زر أكبر، يمكن أن تكون هذه التصميمات الرائعة في المقدمة. يستخدم كل زر دالة التحويل CSS translate مع ألوان مخصصة للخلفية لإنشاء تأثير الحدود. إنها تقنية معقدة إلى حد ما، ولكنها أفضل طريقة لتأثيرات حدود CSS على اعتبار أن حدود CSS العادية لن تعمل بنفس الشكل. إن أحببت هذه التصاميم وقمت بتجْريبها، فستجد أنها تعمل بسلاسة في جميع متصفحات الويب الحديثة. 7- أنماط التدرج لن تتفوق أزرار التدرج الكلاسيكي هذه عن غيرها أبدًا؛ إلا أنها تستخدم بشكل بارز في إطارات العمل الكبيرة مثل Bootstrap. باستخدام هذه الأزرار المتدرجة، يمكنك بسهولة تحديث التحويم والنقر على جميع الحركات مع الحفاظ على تنسيق الألوان. تستخدم أنماط التدريج LESS CSS الذي يجعل من الأسهل تغميق الألوان المتدرجة باستخدام النسب المئوية بدلاً من الشيفرات السداسية للألوان (hex codes) يفضل البعض أزرار التدرج لأنها تتحد مع التصميم. وهذه بالتأكيد ليست الأنماط التدرجية الوحيدة التي ستجدها، لذا راجع موقع CodePen gradient button إن كنت تبحث عن المزيد. 8- YouTube CTA إليك CTA فريد من نوعه يوجهك إلى فيديو YouTube. إنها شارة ثابتة في الركن السفلي الأيمن من الشاشة، ويمكنك أثناء التنقل رؤية الفيديو يظهر في أعلاها. إنه تصميم بسيط جدًا ولكنه لن يكون مفيدًا في كل صفحة ويب. يمكن استخدامه للترويج للتجارة، والإِطلاقات الجديدة، وبالطبع للتوصل لمواقع أخرى مثل YouTube. ولكن إذا كنت تبحث عن زر CTA بارز لترويسة صفحتك، فلن يساعد هذا القالب كثيرًا. هي فكرة فريدة للغاية وتستحق أن تُحفظ إذا لزمك استخدام شيء مثل هذا مستقبلًا. 9- الأزرار المطوية للأسفل من السهل إنشاء تحريكات ثلاثية الأبعاد للويب إن كنت تعرف ما تفعله. ولكن حتى لو كنت لا تفهم CSS، فمن السهل نسخ مقتطفات من الشيفرات ثلاثية الأبعاد مثل هذه الأزرار القابلة للطي التي صنعها Arnie McKinnis. هي مبنية على أساس LESS، ولكن يمكنك تحويل ذلك إلى CSS عادي داخل CodePen. تعتمد الأزرار على تحويلات CSS لإنشاء التأثير ثلاثي الأبعاد الذي يظهر فقط عند التحويم بالفأرة. إنه تصميم فريد من نوعه لأن CTA نفسها تحت الزر تقنيًا. يعرض التحويم بالفأرة فقط الرابط القابل للنَقر أسفله مما يجعل الزر الملون غلافًا رائعًا لجذب الانتباه. إن كنت تحب التأثير المتحرك ثلاثي الأبعاد، فعليك تجربة هذا على موقعك. 10- تحويم CSS الخالص بدلاً من التركيز على تصميم أو نظام ألوان فريد من نوعه، توفر أزرار CSS الخالصة هذه الحركات المخصصة. تبدو جميعها مماثلة لأزرار الطيف النمطي حيث يكون لديك لون حدود ولا يوجد لون داخلي. ولكن أثناء التحويم بالفأرة، ستلاحظ أن نمط حد كل زر يتحول إلى شيء جديد. إنه تأثير خادع يصعب الوصول إليه، وليس شيئًا يمكنك التقاطه وتخصيصه دون بذل أي جهد. إن كنت تعرف طريقك نحو CSS، يجب أن تكتشف ذلك بسرعة. 11- CTA النابض إذا كنت تتطلع إلى جذب انتباه الزوار باستمرار، فجرّب تصميم CTA النابض. يستخدم تأخير CSS لإنشاء تحريكًا نابضًا مع توهج خارجي. ولكن إذا تفحصت شيفرة CSS جيدًا، ستجد أن بإمكانك تغيير التحريك النابض ليكون أي شيء تريده. إنه متعدد الاستخدام، وبالطبع، يجب أن يمتزج بشكل جيد مع أي تصميم. وأيضًا إذا نقرت على أيقونة "X" في الزاوية، فسَتتمكن من رؤية تأثير الحركة الكامل مرة أخرى. يؤدي هذا إلى تحميل الزر في واجهة عرض النافذة، حتى أنه يحتوي على حركة رائعة لتحميل الصفحة الأولى. تستخدم معظم مواقع الويب أزرار CSS خالصة في هذه الأيام، لذا ليس من الصعب العثور على حركات تحبها وتنسخ شيفراتها للحصول على CTA. ترجمة -وبتصرف- للمقال 10 Pure CSS Call-To-Action Button Collections لصاحبه Jake Rocheleau