-->
44
لم يتم العثور على الصفحة ! معذرة، فالصفحة التي تبحث عنها في هذه المدونة ليست متوفرة. رئيسية المدونة
‏إظهار الرسائل ذات التسميات التصميم. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات التصميم. إظهار كافة الرسائل
    اختيار الوان متناسقة للتصاميم


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

    معايير اختيار ألوان التصميم 

    إليك مجموعة نصائح تساعدك على اختيار ألوان مناسبة لتصاميمك

    • افهم نظرية الألوان
    • تعرف على الدلالات النفسية للألوان
    • حدد الهدف من الألوان
    • احرص على اختيار ألوان متناسقة
    • التجربة تساعدك على اختيار الأفضل

    لنناقش كل واحدة منها بمزيد من التفصيل

    فهم نظرية الألوان

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

    تشمل المفاهيم الأساسية لنظرية الألوان ما يلي:

    1. الألوان الأساسية: هي الألوان التي لا يمكن إنشاءها عن طريق خلط الألوان الأخرى. هناك ثلاثة ألوان أساسية: الأحمر والأصفر والأزرق.
    2. الألوان الثانوية:هي الألوان التي يتم إنشاؤها عن طريق خلط لونين أساسيين. على سبيل المثال، يتم إنشاء اللون البرتقالي عن طريق خلط اللون الأحمر مع اللون الأصفر.
    3. الألوان التكميلية: هي الألوان التي تقع مقابل بعضها البعض على عجلة الألوان. على سبيل المثال، اللون الأحمر هو لون تكميلي للون الأخضر.
    4. الألوان الثلاثية:هي الألوان التي تقع على مسافة متساوية من بعضها البعض على عجلة الألوان. على سبيل المثال، اللون الأصفر والأحمر والأخضر هم ألوان ثلاثية.

    مراعاة الدلالات النفسية للألوان

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

    اختيار الألوان بحسب الهدف

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

    مراعاة تناسق الألوان

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

    التجربة أفضل مساعد

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

    نصائح إضافية لتحديد ألوان التصاميم 

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

    أمثلة على كيفية استخدام الألوان في التصميم

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


    مواقع مفيدة تساعدك على تنسيق ألوان التصاميم

    هناك العديد من المواقع المهمة التي توفر معلومات حول نظرية الألوان وكيفية استخدامها في التصميم، فإذا كنت مهتمًا بتحسين استخدام الألوان في التصميم، فإن هذه المواقع هي مورد قيم.


    1. موقع color.adobe.com/explore هو موقع ويب من أدوبي يوفر معلومات حول نظرية الألوان والتطبيقات العملية لها. يشمل الموقع مجموعة متنوعة من الموارد، بما في ذلك مقالات ومقاطع فيديو وأدوات. استخدم هذا الموقع لتعلم المزيد عن نظرية الألوان الأساسية، مثل الألوان الأساسية والثانوية والتكميلية.
    2. موقع www.interaction-design.org/literature/topics/color-theory هو موقع ويب من Google يوفر معلومات حول نظام الألوان Material Design. يشمل الموقع مجموعة متنوعة من الموارد، بما في ذلك مقالات ومقاطع فيديو وأدوات.
    3. موقع www.interaction-design.org/literature/topics/color-theory هو موقع ويب من Interaction Design Foundation يوفر معلومات حول نظرية الألوان والتطبيقات العملية لها. يشمل الموقع مجموعة متنوعة من الموارد، بما في ذلك مقالات ومقاطع فيديو وأدوات ويساعدك على تعلم المزيد عن التأثيرات النفسية للألوان مثل كيفية استخدام الألوان لإنشاء مشاعر معينة.
    4. موقع coolors.co هو موقع ويب يوفر أداة لإنشاء لوحات الألوان. يمكن استخدام هذه الأداة لإنشاء لوحات ألوان تتوافق مع نظرية الألوان أو لتوليد لوحات ألوان عشوائية.
    5. موقع material.io/design/color/the-color-system.html لتعلم المزيد عن نظام الألوان Material Design، والذي يستخدم مجموعة محدودة من الألوان لإنشاء واجهات مستخدم متسقة.


    الخلاصة

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

    ,
    مزيد من المعلومات »

      كيف أعرف ما هو الخط المستخدم في أي موقع إلكتروني؟ 




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

      قبل أن نجيب على هذا السؤال دعونا نتعرف بداية على أنواع الخطوط بشكل عام 

      أنواع الخطوط في مواقع الويب 



      هناك 4 أنواع أساسية للخطوط وهي: 

      1 خطوط Serif  

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

      ومن الأمثلة عليها 

      • Serif Times New Roman 
      • Montserrat 
      • Roboto
      • Open Sans 
      •  Georgia

      Serif


      2 خطوط  Sans Serif 

       Sans Serif


       هذا النوع من الخطوط أبسط  والحروف فيه غالبًًا ذات شكل هندسي وغير مزخرف وهو يوحي بالحداثة والعصرية 

      ومن الأمثلة على هذاالنوع من الخطوط  

      •  Arial 
      • Lato
      • Helvetica 
      •  Calibri

      كما تلاحظ في الأمثلة فوق فإن خطوط Serif كلاسيكية أكثر وتميل للأناقة والرسمية، في حين أن خطوط sans-serif بسيطة  وعصرية وأقل رسمية. لذا احرص على استخدام النوع الذي يناسب طبيعة تصميم موقعك وهويتك البصرية وطبيعة المحتوى الذي تقدمه.

      3 خطوط  Script   

      Script font


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

      لا  بفضل ان تستخدم هذه النصوص في فقرات موقعك بل اقتصر على استخدامها ضمن الاقتباسات أو العناوين القصيرة ولا تستخدمها ضمن الفقرات الطويلة لأنها صعبة القراءة.  

      من الأمثلة عليها 

      • Monarda
      • Raksana


      4- خطوط Decorative    



      ويطلق عليها كذلك خطوط  العرض Display،  وهي عبارة عن خطوط كبيرة ومزخرفة ولافتة للنظر والأحرف فيها ذات مظهر غير تقليدي ويفضل كذلك أن تستخدم فقط في العناوين الرئيسية أو الإعلانات. 

      أمثلة عليها 

      •  Lemonada
      •  Stencil
      • Vibes


      كيف أعرف ما هو الخط المستخدم في موقع ما؟ 

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

      طريقة1 معرفة نوع الخط من خلال إضافات المتصفح 

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

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


      قم بتنصيب WhatFont الأن 


      طريقة 2 فحص الكود المصدري CSS  

      يمكنك النقر بزر الماوس الأيمن على أي نص في صفحة الويب الخاصة بك واختيار الأمر فحص لعرض الكود المصدري  ضمن المستعرض كما يلي


       وفي التبويب Styles على  الجهة اليسرى، ابحث عن الواصفة font-family أو font  وسترى كافة المعلومات عن الخط المستخدم في هذا النص. 



       طريقة 3 عن طريق موقع  Stylify Me

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

      كل ما عليك هو الانتقال إلى الصفحة الرئيسية لموقع Stylify Me ولصق عنوان موقع الويب الذي تريد أن تعرف معلومات عنه وسيعرض لك الموقع جميع معلومات حول هذا الموقع بتنسيق أنيق و سهل القراءة.




       نصائح لاستخدام  الخطوط في موقع الويب الخاص بك.


      1. احرص لى ان يكون الخط  بسيط وسهل القراءة لاسيما في الفقرات والنصوص الطويلة 
      2. استخدم نوعين من الخطوط كحد أقصى واحد للعناوين وآخر للفقرات والنصوص، وإذا قمت بإضافة خط ثالث فاستخدمه في مواضع محددة مثل علامات الاقتباس. 
      3. استخدم حجم معتدل للخط وتجنب استخدام النصوص  المكتوبة بأحرف كبيرة جدَا أو صغيرة جدًا لأنها تتعب عين المستخدم. (يترواح حجم الخط الأفضل لمواقع الويب إلى 14 إلى 16 نقطة ويختلف حسب اللغة ونوع الخط بالطبع)
      4. كي تساعد القارئ على التركيز وتنظيم المعلومات اعتمد تسلسل هرمي للمعلومات واستخدم  تنسيق  H1 للعنوان الرئيسي  وتنسيق  H2 للعناوين الأساسية في النص ثم تنسيقات H3 و H4  للعناوين التالية وهكذا.. 


      الخلاصة: 

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



       

       

      تابع ليمان على فيسبوك  











      ,
      مزيد من المعلومات »


         كيفية تصمم قوالب باوربوينت احترافية وتربح منها

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

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

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

        قالب ليمان

        خطوات إنشاء قالب بوربوينت: 

        في هذه الفقرة سنتعلم طريقة إنشاء قالب بوربوينت من خلال الخطوات العملية وسننشئ قالب بوربوينت باسم مدونتنا ليمان وذلك كما يلي: 

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


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

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

        ملاحظة: 

        إذا كنت تقوم بإنشاء قالب باوربوينت قياسي (بنسبة عرض إلى ارتفاع تبلغ 4: 3) فاختر 1024 × 768 بكسل كأبعاد للخلفية وفي حال كنت تقوم بإنشاء قالب لشاشة عريضة (16: 9) اختر 1365 × 768 بكسل  كأبعاد للصورة الخلفية. 



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

        هناك عدة أشياء يمكنك تغييرها في تصميم: 

        • الألوان: انتقل إلى الألوان واختر إحدى لوحات PowerPoint المحددة مسبقًا أو أنشئ لوحة ألوان خاصة بك.


        • الخطوط: انقر فوق الخطوط ثم تخصيص الخطوط واختر أنماطًا للعناوين والنص العادي.


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

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



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

        نصائح إضافية للحصول على تصميم مثالي للعرض التقديمي:

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

        ملاحظة: 

        العنصر النائب في العرض التقديمي هو  عبارة عن حاوية منسقة مسبقًا على شريحة للمحتوى (نص أو صورة أو فيديو..) يعمل التنسيق المحدد مسبقًا على تسهيل تنسيق الشرائح بحيث يمكنك تنسيق عنصر نائب في عرض الشريحة الرئيسية، ثم استخدام هذا العنصر النائب - أي إضافة محتوى فعلي إليه - في العرض العادي للشرائح.

        تصميم الشرائح الفردية لكل تخطيط شريحة

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

        • الخلفية: فقد لا ترغب باستخدام نفس الخلفية في كافة شرائح العرض. في هذه الحالة اختر إخفاء رسومات الخلفية في أعلى قائمة الشريحة الرئيسية لإيقاف تشغيل الخلفية التي تم منحها للشريحة الفردية من قبل الشريحة الرئيسية وبعدها قم باختيار الخلفية التي تريدها.
        • التذييلات: قد لا تريد أن يظهر التذييل في بعض الشرائح. قم بتعطيل مربع الاختيار التذييلات في شريط الأوامر السريع أعلى الشاشة لجعلها تختفي.
        • العنوان: قد لا تريد أن يظهر العنوان كذلك في بعض الشرائح. (قم بتعطيل مربع الاختيار العنوان)
        • أضف الصور التي تخدم هدف التصميم: يمكنك أن تصمم صورك الخاصة بنفسك أو قد يكون تستعين بصور خالية من الحقوق من الإنترنت. ومن أهم المواقع التي يمكنك العثور فيها على صور متاحة للاستخدام بشكل مجاني (Unsplash، Pexels، FreerangeKK Pixabay، PikWizard، Creative Commons..) 
        • يمكنك إضافة الأيقونات: أحيانًا لا تحتاج إلى صور في بعض الشرائح بل تحتاج لأيقونات رمزية لعرض أجزاء من محتوى العرض التقديمي الخاص بك بشكل مثالي ومن أهم مواقع الحصول على أيقونات مجانية لعرضك (Flaticon، Freepik، Pixabay،icon-icons ، Freeicons.io)
        • أضف العناصر النائبة: انقر فوق إدراج عنصر نائب. يمكنك الاختيار من بين مجموعة متنوعة من العناصر النائبة التي تحدد مسبقًا مكان وضع عنصر معين (صورة، فيديو...) في العرض التقديمي.
        • أضف أي عناصر أخرى تريدها: لك الحرية المطلقة في نقل وإزالة وإضافة أي عنصر أو كائن آخر قد تحتاجه في أي شريحة. أطلق مخيلتك الفنية ووظف العناصر التي تريدها لخدمة تصميمك. 
        • قد تحتاج إلى وضع تخطيط آخر  (على سبيل المثال لشرائح  اتصل بنا) يمكنك بسهولة إنشاء نموذج مخصص لذلك بالنقر بزر الماوس الأيمن في المربع الرمادي على اليمين مع جميع تخطيطاتك ثم انقر فوق إدراج تخطيط. ويمكنك إعادة تسمية التخطيط من خلال النقر بزر الفأرة الأيمن على هذا التصميم الجديد واختيار إعادة تسمية التخطيط وتسميته باسم معبر عنه وبعدها ستتمكن من التعامل معه مثل باقي التخطيطات في العرض وتعديله حسب احتياجاتك.


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

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



        اقرأ أيضًا:
          كيف تقدم عرض تقديمي مبهر أمام جمهورك أو طلابك

        ماهي مواقع العمل الحر وكيف أحقق مكاسب مالية منها؟ 


        تابع ليمان على فيسبوك 

        مزيد من المعلومات »

           أفضل أدوات تخطيط المواقع الإلكتروني | أدوات مجانية لمصممي المواقع (2022)

          Best Free Wireframe Tools



          يحتاج أي مصمم واجهات (UX/UI) إلى رسم مخطط شبكي أولي  (Wire frame) لأي موقع  أو تطبيق قبل أن يبدأ بتنفيذه. فهذا التخطيط هو الأساس عند البدء بأي مشروع جديد. وهو يساعد على فهم بنية التطبيق وتوضيحه للعملاء وفي تحديد واستكشاف وجود مشاكل في تجربة المستخدم داخله قبل إطلاقه.

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


          معظم أدوات رسم التخطيط الشبكي الاحترافية الشهيرة مثل  Adobe Suite و Axure RP و  Marvel و Lucidchart لا تتوفر بشكل مجاني وهي  غالية الثمن وتركز على ميزات UX / UI ذات التفاصيل والنماذج المتقدمة.


          لكننا سنوفر لكم في هذا المقال مجموعة من أدوات  التخطيط المجانية 100 % التي يمكن للمصممين الاعتماد عليها لرسم المخططات: 

          أفضل أدوات مجانية لرسم المخططات  

          1. Draw.io
          2. Framebox
          3. Project Pencil
          4. Figma 
          5. InVision 
          6.  Miro
          7. Wireframe.CC
          8. MockFlow
          9. Jumpchart
          10. Mydraft.CC
          11. Wirefy


          1- Draw.io

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

          يمكن للمستخدمين تصدير التصميمات إلى Google Drive أو Microsoft OneDrive أو سطح المكتب أو عمليات التكامل المدعومة مباشرةً بما في ذلك Gliffy و Lucidchart والمزيد. ومن المزايا الإضافية أنه مجتمع نشط مفتوح المصدر يعمل على إصلاح أخطاء المنتج ومشكلاته وإضافة ميزات جديدة. 

          2-Framebox

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

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

          3-Figma 

          Figma هو عبارة عن نظام أساسي للتصميم متعدد الإمكانات يمكن استخدامه من قبل مصممي واجهات المستخدم UX / UI وهو يتوفر بخطة مجانية مخصصة للمبتدئين وأخرى مدفوعة . توفر لك الحزمة المجانية إمكانية إنشاء الإطارات الشبكية للمواقع والتطبيقات وميزة إنشاء 3 مشاريع نشطة إضافة لميزة التخزين السحابي غير المحدود.

          4- InVision 

          InVision عبارة عن أداة شاملة لرسم مخططات المواقع الشبكية والنماذج الأولية للمصممين وهي واحدة من أشهر العلامات التجارية في برامج التخطيط الشبكي.

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

          5-Project Pencil

          أداة Project Pencil هي عبارة عن أداة لرسم مخططات المواقع والتطبيقات وهي مفتوحة المصدر ويتم تحديثها باستمرار وهي مجانية بالكامل  وهي تتضمن عدد غير محدود من التصميمات التي يمكن لمصصمي الواجهات الاستفادة منها.


          6- Miro  

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

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

          7- Wireframe.CC

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

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

          8- MockFlow

          MockFlow هي أداة واجهة مستخدم شاملة توفر عرض مجاني يسمح برسم مخططات واجهة المستخدم لمشروع واحد نشط  ومراجعتين لكل مشروع.

          تبدأ الحزمة المدفوعة منها بسعر 14 دولارًا شهريًا لكل مستخدم وتتضمن ميزة إنشاء مشاريع ومراجعات غير محدودة وتوفر كذلك مكتبة لمكونات واجهة المستخدم الخاصة بـ MockFlow.

          9 Jumpchart

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

          أما الإصدارات المدفوعة فتبدأ من  5 دولارات شهريًا وتشمل 5 مشاريع، و 1 جيغا تخزين، و 25 صفحة شهريًا، و 5 مستخدمين لكل مشروع.

           10- Mydraft.CC

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

          11- Wirefy 

          Wirefy هو برنامج  UX/UI  مجاني مفتوح المصدر  لرسم المخططات وهو يوفر إصدار سطح مكتب قابل للتحميل. يتطلب البرنامج بعض المعرفة الأساسية بـ HTML و CSS ولكنه  قوي ويوفر مجموعة كبيرة من العناصر التي يمكن الاستفادة منها لإنشاء مخططات متقدمة بسهولة ومرونة. 


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

          هل هناك أدوات أخرى مجانية تفيدكم كمصصمين  في تصميم المواقع والتطبيقات؟  يمكنكم مشاركتنا بها في قسم التعليقات أسفل المقال؟





          مزيد من المعلومات »

            كيف احدد الألوان المناسبة للتصميم؟



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



            في هذا المقال نجيبك على هذه الأسئلة، ونجيب على السؤال الأهم الذي قد يدور ببالك

            كيف أحصل على تصاميم جميلة بألوان متناسقة ومناسبة لطبيعة العمل؟ 

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

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

            فحسب الدراسات:

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

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

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

            ويمكن أن تساعدك الأسئلة التالية على فهم علامتك التجارية بشكل أفضل: 

            • هل علامتك التجارية أنثوية أم عامة؟
            • هل علامتك التجارية مرحة أم جادة؟
            • هل علامتك التجارية شعبية أم فاخرة؟
            • هل علامتك التجارية حديثة أم كلاسيكية؟
            • هل علامتك التجارية  موجهة للشباب أم تستهدف الفئات الأكبر عمرًا؟
            • هل علامتك التجارية صاخبة أم هادئة؟

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

            وعندما تصمم موقع إلكتروني عليك أن تحدد عدة ألوان لاستخدامها. 

            1.  ما هي مجموعة الألوان التي يجب أن أستخدمها في موقع الويب الخاص بعلامتي التجارية؟

            1. اللون الأساسي
            2.  اللون الثانوي
            3.  لون الخلفية
            4.  لون النصوص

            هل تعلم أن بعض الشركات لاحظت ارتفاعًا حادًا أو انخفاضًا في النقرات على الروابط  في الموقع لمجرد تغيير ألوانها من لون بارد كالأزرق للون آخر حيوي كالأحمر!

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

            خطوات اختيار نظام الألوان الأنسب لموقع الويب ولأي تصميم بالعموم

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

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

            2-يمكنك الاستعانة بكبرى العلامات التجارية في المجال الذي تخطط للعمل فيه ومعرفة الألوان التي اختاروها والاقتباس منها في موقعك وشعارك وعلامتك التجارية.  على سبيل المثال:

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

            فيمكنك أن تكون بأمان إذا حاولت محاكاة أسلوب الشركات الكبرى في مجالك

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

            3- بعد أن تحدد اللون الأساسي عليك تحديد اللون الثانوي (أو مجموعة الألوان الثانوية). 
            يمكنك الاعتماد على الألوان المكملة للونك الأساسي، وهنا احرص على استعمال لون واحد أو لونين على الأكثر مع اللون الأساسي وإلا ستحصل على كوكتيل ألوان وستشتت العملاء بكثرة المحفزات اللونية!

            استثناء:

            يمكنك بشكل استثنائي تقوية علامتك التجارية باستخدام ألوان مختلفة لكن كن حكيمًا في هذا القرار واستخدم مجموعة من الألوان لها نفس درجة التشبع أو درجة سطوع اللون أو ما يعرف بالـ(Saturation). 

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


            ملاحظة:

            تشبع اللون أو كثافة اللون أو ما بعرف كذلك بحدة اللون يعني  درجة نقاء اللون أو بمعنى آخر نسبة دمجه مع الألوان المحايدة كالأبيض والأسود والرمادي.

            سوف يساعدك استخدام عجلة الألوان في العثور على ألوان مكملة مناسبة للونك الأساسي (Complementary Colors) وعجلة الألوان هي عبارة عن نظام للتمثيل لوني بشكل دائري حيث يتم فيها تضمين الألوان أساسية ومشتقاتها.


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



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


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


             

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

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

            على سبيل المثال لاحظ هنا شعار TechCrunch يستخدم عدة درجات سطوع لنفس اللون الأخضر ليعزز أيضًا أن اللون الأخضر مرادف لهذه العلامة التجارية.



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

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

            إليك أيضًا مجموعة مواقع أخرى مفيدة تساعدك في اختيار الألوان المناسبة لتصميمك:

            1- https://gradientbuttons.colorion.co/

            2- https://uigradients.com/#Lawrencium

            3- https://webgradients.com/

            4- https://webkul.github.io/coolhue/

            5- https://www.grabient.com/


            8-أخيرًا بعد أن حددت الألوان التي ستستخدمها احرص على استخدامها بالنسب الصحيحة. هل سمعت بقاعدة 60 30 10 في توزيع الألوان

            ما هي قاعدة 60 30 10؟

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

            60-30-10 Color Rule



            ملخص

             دعنا نلخص كل ما سبق في الخطوات التالية: 

            خطوات اختيار ألوان المواقع الإلكترونية والهويات التجارية: 

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


            أخيراً ننصح بتصفح الرابط التالي الذي يوضح مجموعة من النماذج لمواقع بألوان مميزة واحترافية يمكنك الاستفادة منها في موقعك

            https://websitesetup.org/website-color-schemes/


            اقرأ أيضًا: أسهل طريقة لتعرف ما هو الخط المستخدم في أي موقع ويب 


            تابع ليمان على فيسبوك

            ,
            مزيد من المعلومات »
            الاشتراك في: الرسائل (Atom)
            جميع الحقوق محفوضة ل Liman Tech صمم من طرف عبد الصمد اهناين مع