الخميس، 26 ديسمبر 2019

اشياء  بسيطة في مسار (Front-end) تميزك عن غيرك

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

⦁ بساطة التصميم.
⦁ اختيار الالوان المناسبة.
⦁ اختيار الخطوط المناسبة.
Html Validator واهميته.
سوف تجد اسفل كل موضوع المصادر التي تم جلب بعض المعلومات منها  حتي تتطلع عليها اكثر وتفيدك.

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

# اختيار الالوان المناسبة.

المصممين الذين يعانون من اختيار الالوان المناسبة  ,لابد لك ان  تعرف تاثير اللون علي الناظر عليه اولا وكذلك لابد لك ان تعرف ردة فعل الناظر حين النظر الي اللون المعين ماذا ينتج؟
كمصمم اهميتك جذب الناظر للموقع بكل النواحي وتدعه  يغوس ويقلب صفحات موقعك جزء من مسؤلية هذا الامر يقع علي مصمم الـ UI&UX واحيانا علي المطور يبقي لابد من معرفة  الالوان وتاثيرها لكي تعرف تستخدمها صح. معروف عندنا الوان باردة والوان دافئة والوان محايدة  تعالو نجي نمسك واحد واحد ونتعرف عليهم. الالوان الباردة تشمل الألوان الأخضر والأزرق والأرجواني ، وغالبًا ما تكون أقل هدوءًا. ناخد استطلاع بسيط منهم:
الأزرق هو اللون الأساسي الوحيد داخل الوان الطيف ، مما يعني أن الألوان الأخرى يتم إنشاؤها عن طريق الجمع بين اللون الأزرق واللون الدافئ (الأصفر والأخضر والأحمر للأرجواني). عشان كده، بيأخذ اللون الأخضر بعض سمات اللون الأصفر ، بينما يأخذ اللون الأرجواني بعض سمات اللون الأحمر دايما استخدم ألوانًا رائعة في تصميماتك عشان تضيف شعور بالهدوء أو الاحترافية الألوان الدافئة. ده ألوان الليل ، والمياه ، والطبيعة ، وعادة ما تكون مهدئة ، مريحة ، ومحفوظة إلى حد ما اللون الاحمر والبرتقالي والاصفر الوان دافئة تعكس الحماس والنشاط والعاطفة لا يستخدم معها الوان باردة في التصميم، ممكن أن يكون للون الأحمر تاثير قوي إذا تم استخدامه كثيرًا في التصاميم ، خاصة لمن يكون نقي يعني مثلا red تستخدمو لمن تكون عايز تمثل قوة حاجه معينة ممكن تستخدم الاحمر مع الوان تانية اقل تدرج هيكون شوية مقبول وكويس مثلا زي مع البني اللون الأخضر هو لون سمح وجميل ممكن يمثل مثلا البدايات الجديدة والنمو. كما أنه يدل على التجديد يتمتع اللون الأخضر بالعديد من نفس الخصائص المهدئة التي يتمتع بها اللون الأزرق ، ولكنه يشتمل أيضًا على بعض طاقة اللون الأصفر. في التصميم ، يمكن أن يكون للون الأخضر تأثير متوازن ومتناسق ، ومستقر للغاية هو مناسب للتصاميم المتعلقة بالثروة والاستقرار والتجديد والطبيعة. الخضر الأكثر إشراقًا ونشاط وحيوية.
من الالوان المحايدة زي الابيض والاسود:
اللون الأسود دايما استخدامه بكون كتير في النصوص ، بشكل شائع في التصميمات الأكثر حداثة ، وكذلك في التصميمات الأنيقة ممكن تكون حديثة او تقليدية او غيرها علي حسب اقتران الالوان بيهو التانية في التصميم وشفنا كمان دايما بستخدم بكثرة في الطباعة  وكمان بدل علي الاناقة في الملابس. زي البدل اللون الابيض برضو لون محايد ممكن تستخدم معاه اي لون تاني وبعكس ليك اللون ده دايما لمن تعين لحاجه بيضاء بتحس بانو الحاجه ده نضيفة ونقية وانيقة كده فده اللون الابيض بدل علي النقاء والنضافة اختيار. الالوان المناسبة بكون علي حسب هدف محتوي الموقع لمن تصمم حاول استخدم لونين او تلاتة كاساسيات او لون واحد وتدراجته تقدر تستخدم اي لون لكن لو وظفتو صح في محلو وحسب تاثيرو العايزو يحصل في الحته. ده استخدامك لالوان كتيرة بشتت الناظر وما بخليهو مركز ومن واجبك. انت كمصمم تخلي حبيبنا. المستخدم ده مركز فل. في الموقع

# المصادر




# اختيار الخطوط المناسبة

جزء الكتابة او الخطوط بصورة عامة:
اولا: نوع الخط (Font-type) حين تصمم لابد ان تعرف  نوع الموقع بناء علي نوع الموقع والمحتوي اختار الخط المناسبه مثال  موقع لمطعم نوع الخط وحجمه هيختلف من موقع لشركة تقنية.
ثانيا: حجم الخط (Font-size) الاستاندر حجم الخط في شاشات الهواتف يكون ما بين 16px -15px وفي شاشات الكمبويترات بكون بين 20px -22px
ثالثا: عرض سطر النص(line-width) الاستاندر العام لعرض سطر النص يشمل ما بين ٤٥ الي ٧٥ حرف بالمسافات او من40- 70 اكتر من هذا سوف يكون متعب للعين ان لا تستطيع اكمال قراءة  النص الطويل الذي يصل الي نهاية الشاشة مثلا  في حالة اجهزة  الكمبويتر والشخص لايكون مركز كثير فانت كمصصم هدفك ان تجعل الشخص مركز وتلفت انتباه وتركيزه. صورة لتوضيح عرض سطر النص


رابعا: ارتفاع الخط (line-height ) ارتفاع الخط المثالي بكون بين 1.3- 1.6
بالنسبة للعناوين (heading) ارتفاع الخط المثالي ليهم 1- 1.2 حجم الخط وارتفاع الخط وعرض سطر النص جميعهم اذا طبقت بالشكل الصحيح هتكون النتيجة  نص مقروء مريح للعين وهذا  يمثل بي مثلث ثلاثي الاضلاع بحيث لو زاد اي احدهم  سوف يتغير شكل المثلث مرفق صوره ادناه للتوضيح.



المصادر: betterwebtype

يمكن الكتير منا يتجاهل هذه النقطة ويختار اي خط وغيره لكن دايما اقول الاشياء الصغيرة والدقيقة هي التي تميزك كمصمم عن غيرك ولو سالت لماذا اخترت هذا الخط استناد علي ماذا  يكون لديك مرجع وفهم و ليست مختار عشوائي.

# Html Validator واهميته:
مدخل : هل هذا الكود  valid؟
<a href="#"><button>click</button></a>

ام هذا؟
<button><a href="#">click</a><button>


طيب فكر في الاجابة وكمل معاي الموضوع هل  بتعمل validtor للكود  الذي تكتبه حين التصميم ام لا؟ اذا اجابتك لا انصحك اي كود من  هذا اليوم تكتبه  حاول  ان تعمل له validtor؟ اذا اجابتك نعم هل استفدت منه ام لا؟
انا كنت اكتب كود والامور بتمش لحدي ما حاولت مرة ارفع قالب علي ثيم فورست فوجدت ان ال validator   من ضمن قواعدهم وقلت اطبقها استفدت كتير منه ووجدت ان  الكود رغم انه شغال ولكن هنالك اشياء لا تكون منطقية وما استاندر نهاي او ما اتعملت عشان تتنفذ بالصورة ده. مثال علي كده:
تاق
<h2></h2>
بتلقي ناس كتيرة كاتبة التاق ده وجواهو بلاوي مثلا
<h2><div>hi</div></h2>
لا التاق ده ما اتعمل عشان يتبهدل كده اتعمل عشان للعنوانين مجرد تخت فيهو عنوان هيكون بارز حتي في الseo لمن يكون في التاق ده ويكون مستخدم صح خورازميات البحث هتتعرف علي الصفحه الموجود فيها وببرز لكن لمن تستخدمو استخدام غلط اكيد خوارزمية البحث ما هتجيب خبرو مثال تاني:
التاق
<section></section>
اتعمل عشان يدل علي قسم معين كلنا بنستخدمو صح واي حاجه لكن تعال مش لمن تشوف اي قسم بتلقي في حاجه بارزة تدل علي انو ده قسم كده ايوا في تاق زي ده لازم نستخدم جواهو مباشرة تاق العنوان اللي هو
<h1>
علشان يدل علي انو القسم ده عنوانو كده والا ما ينفع يكون قسم كده رايح ساي م معروف هو شنو ! مثال تالت:
كلنا بنستخدم الul or ol وبنعمل بيهم trick جميلة وظريفة وكده داخلهم راعي انو ما تستخدم span بعد الli لانو ما منطقي تتخت ال html validtor هتعلمك تستخدم التاقات منطقيا وتمشي مع الاستاندر ده غير انو لو اتعمقت في موقع زي
developer-mozilla او موقع w3docs  هتستفيد اكتر وتعرف استخدام العناصر صح طيب نرجع للمدخل الفوق طبعا المثالثين الفي المدخل غلط استخدام العنصر او التاق button بالطريقة ده غلط ماصح ال button يكون هو child للعنصر a او العكس طيب والحل شنو ؟ انا عايز زر لمن يضغط عليهو المستخدم يحصل كده! طيب الموضوع ليهو كذا حل اولا الطريقة الصحيحة والاستاندر:
الـ button اتعمل عشان ينفذ event ما عشان ينقلك الي لينك فلو عاوز تستخدمو عشان ينفذ ليك حاجه ليهو attribute من ضمنها type,form,formaction,url,formmethod ..... طيب حل المدخل الفوق شنو بالطريقة الاستاندر ده
تكتب
<button onclick="window.location.href='#';">click<button>
onclick
ده ايفنت في jsdom مجرد ما يضغط هيستدعي الدالة location الموجودة ف المتصفح بتاعك وده من jsbom ويديها اللينك وتمشي عليهو طيب ممكن بطريقة تانية تعمل زر انت بالعناصر التانية تظبطو من اي ناحية وتخت اللينك بس ما جربتها وحاول تتاكد من انو صحيح ول لا طيب بس كده لا في اضافة جميلة استخدمها اسمها

html validator
هتفيدك في شغل ال validator بتشتغل اوف لاين  وكذلك اون لاين هذه بعض الاشياء التي احببت ان اوضحها وهي اشياء دقيقة وسوف تمييزك عن غيرك في مسار ال Front-end   باذن الله تابعني علي الفيس abobaker hilal موقعي beko4learn

وما توفيقي الا بالله

الكاتب : ابوبكر هلال محمد هلال
الدولة : السودان

هناك 9 تعليقات:

  1. شكرا على المقال المفيد ..

    ردحذف
  2. مقال رائع ، انا full stack web developer, ممكن نتواصل مع بعض ونستفيد من بعد ولو حبيت دي قناتي في اليوتيوب اخد فيها جولة كده قبل ما تتواصل معاي
    www.youtube.com/abdallamohmed

    ردحذف
  3. مقال رائع جداً يستحق القراءة
    نسأل الله لك التوفيق والسداد اخي

    ردحذف
  4. ماشاء الله ربنا يوفقك و مزيد من التقدم

    ردحذف
  5. جزاك الله خير مقال غني بالمعلومات

    ردحذف
  6. أجمل مقال برمجي مفيد جدآ ومنتظرين منك المزيد يا رائع لتعم الفائدة

    ردحذف
  7. شكرآ مقال مفيد و موضح كل المفاهيم

    ردحذف
  8. ما شا الله كلام في غاية الأهمية ويغفل عنه الكثير من الناس في هذا المجال و لا يعطونه اي أهمية
    جزاك الله خير

    ردحذف
  9. ما في كلام مزيد من التقدم أخونا هلال

    ردحذف

Ads link

Ads test

Labels