Portfolio

تصميم واجهة مستخدم وتجربة مستخدم (UI/UX Design) لمعرض أعمال شخصي. يركز العمل على إبراز الهوية المهنية وبناء الثقة من خلال رسالة مباشرة وواضحة، مع تصميم مبسط (Minimalist) يبتعد عن التشتيت البصري.

​ميزات التصميم

​التباين اللوني (Color Palette): الاعتماد على اللون الأسود الداكن كخلفية أساسية لتعزيز الشعور بالعمق والفخامة، مع استخدام اللون الذهبي أو النحاسي الهادئ في الشعار (MZ)، مما يخلق نقطة تركيز بصرية (Focal Point) تلفت انتباه الزائر فوراً.

​الطباعة (Typography): توظيف خطوط تزيينية أنيقة (Serif) لإضفاء طابع من الجدية، والأصالة، والموثوقية. في المقابل، تم استخدام خطوط بسيطة وحديثة (Sans-serif) للنصوص الوصفية الدقيقة والقوائم العلوية والسفلية لضمان سهولة القراءة.

​التخطيط (Layout): استخدام تخطيط مركزي (Center-aligned) يوجه عين المستخدم مباشرة نحو منتصف الشاشة حيث تتواجد الرسالة الأساسية والوصف المهني. التوظيف الممتاز للمساحات الفارغة (Negative Space) يمنح التصميم متنفساً ويجعله يبدو أكثر رقياً.

شريط التنقل والروابط (Navigation): شريط تنقل علوي شامل وموزع بشكل متوازن، يتضمن أقساماً مهنية (مثل Expertise, Timeline) وينتهي بزر دعوة لاتخاذ إجراء (CTA) محدد بإطار أنيق "INITIATE CONTACT". كما يتضمن الجزء السفلي روابط مباشرة للتواصل المهني السريع (GitHub, LinkedIn, Email, Download CV).

​طريقة التنفيذ

​التخطيط والهيكلة (Wireframing): بناء التسلسل الهرمي للمعلومات (Information Architecture) لضمان وقوع عين الزائر على العنوان الرئيسي أولاً، ثم قراءة الوصف المهني، وصولاً إلى روابط التواصل في الأسفل.

التصميم المرئي (UI Design): التركيز الشديد على ضبط المسافات (Typography & Spacing) واختيار درجات الألوان بدقة لضمان وضوح النصوص (Contrast Ratio) على الخلفية السوداء.

التطوير البرمجي (Frontend Development): تكويد التصميم باستخدام HTML5 و CSS3، مع الاعتماد على تقنيات مثل CSS Flexbox و Grid لضمان التوسيط المثالي للعناصر والمحاذاة الدقيقة في مختلف أحجام الشاشات (Responsive Design). ​اللمسات التفاعلية (Interactivity): إضافة تأثيرات حركية خفيفة (Micro-interactions) باستخدام CSS و JavaScript، مثل تغير لون الروابط أو إضاءة الزر عند تمرير الماوس (Hover Effects)، وتأثير الظهور التدريجي للنصوص (Fade-in) عند تحميل الصفحة لإعطاء طابع سينمائي سلس.