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

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

سأكتب لك عن بعض النصائح والحيل التي ساعدتني في تصميم الواجهات:

أولًا، تحتاج تختار text editor بعناية:

أحب sublime text للتطوير بشكل عام

لكن brackets هو الأفضل لتصميم الواجهات (

)

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

ممكن أيضًا تستعين بخاصية Inspect في قوقل كروم ومعظم المتصفحات الأخرى.

فايدتها تحديد أي جزء من الصفحة وتشوف كود html الخاص به، مفيد لdebugging الأخطاء.

Right click -> Inspect

بالنسبة للعب مع الlayout بشكل عام، تعلمت حيلة وهي تلوين خلفية كل جزء من اللاي اوت لمعرفة كيف يظهر في الصفحة. وأيضًا هنا تخدمك خاصية Inspect ومنها يظلل لك الmargin & padding بألوان مختلفة لما تحدد التاق الخاص به من ال HTML Elements tab.

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

أتمنى أن تجد شيئًا مفيدًا من تجاربي وحظًا موفقًا!

-موقع رائع لإحتراف تصميم و تطوير الويب 100% ...

-كتابة الأكواد بدون مساعد auto-prifix (من دون مكمل أوتوماتيكي للوسوم و الكلمات)

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

• ما فهمته من css حتى الآن هو أن كل ما تريد أن تصممه هو عبارة عن مجموعة من الأكواد المكملة لبعضها البعض .. و للوصول لشكل محدد يجب عليك إيجاد تلك المعادلة.