اذهب إلى المحتوى

السؤال

نشر

سلام عليكم 

في رحلتي في تعلم تطوير مواقع تعلمت html css وتعلمت JavaScript بشكل عميق

مشكلتي في تطوير مواقع هي اني ما اعرف اصمم تصاميم احترافية للمواقع لكن اذا شفت تصميم figma اقدر احوله الى كود html css سبب تلك مشكلة لدي لاني انا اركز على منطق برمجي ولا اركز كثيرا ب تصاميم ف غاليا انا اعتمد على AI بتوليد كود تصميم 

كيف اصبح مصمم UI UX من اجل اكون مطور مواقع مميز

Recommended Posts

  • 0
نشر

وعليكم السلام,

أولا لنتكلم عن قسم UI وهي واجهة المستخدم:

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

ما عليك فعله لتعلم التصميم هو ان تصمم بنفسك بعض الأشياء عن طريق ادواتها المختصة فيمكنك اختيار الأداة براحتك مثل Figma , Adobephotoshop وغيره من الأدوات فجرب صمم بنفسك بعد تعلم الأساسيات  يمكنك تعلم الأساسيات من اي مكان يوجد مقالات في أكاديمية حسوب: 

 

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

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

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

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

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

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

كما انه يوجد الكثير من الدروس في الأكاديمية يمكنك الاطلاع عليها أيضا:

ابقى مطلع على الأمر واقرأ الكثير عنه ومارس ما تعلمته ولا تجعل كل شيء نظريا وطور من نفسك.

 

  • 0
نشر

وعليكم السلام ورحمة الله وبركاته.

أولا إن مجال ال UI و UX هو مختلف تماما عن البرمجة ومسار full-stack وهما أيضا وظيفتان مختلفتان لذلك الأفضل لك حاليا التركيز على مسار واحد لتستطيع أن تتمكن فيه وتجد فرصة عمل في أى منهما على الأقل.

أما بخصوص تصميم واجهات المستخدم فهو يعتمد بشكل أكبر على برامج التصميم مثل Figma و photoshop وغيرها وأيضا يعتمد بشكل أكبر على الإبداع والتخيل .

وإليك مقال عن الفرق بين ال UI و ال UX وتفاصيل أكثر حولهما :

 

والرابط التالي يحوي العديد من المقالات بخصوص هذا الأمر :

 

  • 0
نشر

تعلم تصميم UI/UX هو أمر غير إلزامي لكي تكون Full Stack Developer فمعظم الشركات الكبرى لديها فرق متخصصة من مصممي UI/UX، ودورك كمطور يكون التركيز على تحويل تصاميمهم إلى منتج يعمل بكفاءة.

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

https://academy.hsoub.com/design/user-interface/

  • 0
نشر

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

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

على الأقل تعلم ما يلي:

  • التسلسل الهرمي البصري Visual Hierarchy وهو ترتيب العناصر لتوجيه عين المستخدم إلى الأهم أولاً.
  • التباين Contrast الخاص باستخدام الألوان والأحجام والأوزان لجعل العناصر قابلة للقراءة والتمييز.
  • المساحة البيضاء White Space وNegative Space لاستخدام الفراغ لتنظيم المحتوى وتجنب ازدحام الواجهة.
  • المحاذاة Alignment لتنظيم العناصر على شبكة Grid وهمية لجعل التصميم يبدو مرتب ومنظم.
  • التكرار أي إعادة استخدام نفس الأنماط (الألوان، الخطوط، الأزرار) للحفاظ على الاتساق.
  • نظرية الألوان Color Theory لاستيعاب أساسيات تناسق الألوان وكيفية استخدامها للتأثير على شعور المستخدم.
  • Typography لاختيار الخطوط وأحجامها وأوزانها لضمان سهولة القراءة وتحسين تجربة المستخدم.

وإليك مصادر لتعلم الأساسيات:

وتعلم Figma وأساسيات الـ UI/UX من القنوات التالية:

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...