Instagram Telegram-plane

مسار تعلم تصميم الويب الشامل

تعريف بالاختصاص

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

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

لتكون مصمم ويب شامل:

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

المرحلة الأولى: التصميم

  • مقالة
  • مدونة مستقل
  • المستوى: مبتدئ

1- دليلك العملي لتعلم تصميم مواقع الويب خطوة بخطوة
  • فيديو
  • محمد خيال
  • المستوى: مبتدئ

2- معني الـ Resolution والفرق بين الـ Raster و الـ Vector
  • فيديو
  • Kittl
  • المستوى: مبتدئ

3- Do You Really Know Graphic Design?
  • مقالة
  • Orbit Media Studios
  • المستوى: متقدم

4- Homepage Best Practices: 20 Things to Add to Your Homepage Design
  • فيديو
  • DesignSpo
  • المستوى: مبتدئ

5- How I Would Learn Web Design (If I Could Start Over)
  • مقالة
  • uxarb
  • المستوى: مبتدئ

1- الألوان في التصميم: فهم مصطلحات وخصائص الألوان
  • مقالة
  • Flux Academy
  • المستوى: مبتدئ

2- How to strategically use color in website design
  • مقالة
  • Elementor
  • المستوى: مبتدئ

3- Color Theory Fundamentals Every Web Designer Should Know
  • مقالة
  • uxarb
  • المستوى: مبتدئ

1- عناصر الطباعة (Typography)
  • فيديو
  • Flux Academy
  • المستوى: متقدم

2- The only 6 fonts web designers need (and they’re free!)
  • فيديو
  • Flux Academy
  • المستوى: مبتدئ

1- Principles of Layout
  • فيديو
  • Payton Clark Smith
  • المستوى: مبتدئ

2- 11 Section layouts to make your website ultra UNIQUE
  • فيديو
  • DesignSpo
  • المستوى: مبتدئ

3- 20 Graphic Design Hacks You Need To Know
  • فيديو
  • DesignSpo
  • المستوى: مبتدئ

4- 21 Website Layouts You Can Steal
  • فيديو
  • DesignSpo
  • المستوى: متقدم

5- PRO Vs AMATEUR Website Design (With Examples)
  • فيديو
  • أحمد سيكماني
  • المستوى: مبتدئ

1- تصميم موقع ويب بإسلوب الوكالات العالمية (دليل المبتدئين)
  • فيديو
  • أحمد سيكماني
  • المستوى: مبتدئ

2- مشروع تصميم موقع تعليمي من الصفر حتى النهاية
  • مقالة
  • Webflow
  • المستوى: متقدم

3- UX design process: a simple (but complete) guide
  • فيديو
  • Balsamiq
  • المستوى: متقدم

4- Website UX Review: Brand Impression vs. User Experience
  • فيديو
  • أحمد سيكماني
  • المستوى: مبتدئ

5- Relume أقوى أداة تستخدم الذكاء الاصطناعي لمساعدك في تصميم المواقع
  • فيديو
  • Flux Academy
  • المستوى: مبتدئ

1- Figma tutorial for Beginners: Complete Website from Start to Finish
  • فيديو
  • أحمد سيكماني
  • المستوى: مبتدئ

1- طريقة تصميم صفحة هبوط لموقع شركة نايكي عبر Adobe XD
  • فيديو
  • DesignSpo
  • المستوى: مبتدئ

2- 9 FREE Plugins For Figma Designers! (Best Figma Plugins 2024)
  • فيديو
  • أحمد سيكماني
  • المستوى: مبتدئ

2- أدوبي اكس دي 10 ميزات تجعله أفضل برنامج لتصميم التطبيقات والمواقع (2020)
  • فيديو
  • Rino de Boer
  • المستوى: مبتدئ

3- Adobe Xd Web Design Tutorial – Design your first page with me
  • فيديو
  • Flux Academy
  • المستوى: متقدم

3- Responsive Website In Figma
  • فيديو
  • Flux Academy
  • المستوى: مبتدئ

4- Auto Layout for Beginners (crash course)
  • فيديو
  • XO PIXEL
  • المستوى: مبتدئ

4- Responsive Website Design in Adobe XD
  • فيديو
  • Rino de Boer
  • المستوى: متقدم

5- Useful Adobe Xd Features: Padding & Stacking
  • فيديو
  • NewForm with Brandon Groce
  • المستوى: متقدم

6- Website Redesign Challenge | Redesigning SpaceX | Product Design Practice (UI UX)

المرحلة الثانية: التطوير بدون كود

  • فيديو
  • WP Arabic
  • المستوى: مبتدئ

1- كيفية شراء و حجز استضافة مواقع هوستنجر hostinger
  • فيديو
  • انطلق أونلاين
  • المستوى: مبتدئ

2- طريقة تنصيب ووردبريس على سيرفر محلي لإنشاء موقع ووردبريس على حاسوبك
  • فيديو
  • Hostinger Academy
  • المستوى: مبتدئ

3- WordPress Dashboard Tutorial for Beginners
  • فيديو
  • Rino de Boer
  • المستوى: مبتدئ

1- Elementor Pro WordPress Tutorial – The basics in 20 minutes
  • فيديو
  • Rino de Boer
  • المستوى: مبتدئ

2- From Figma to Elementor: A beginner friendly project
  • فيديو
  • Elementor
  • المستوى: مبتدئ

3- Elementor Responsive 101: All You Need to Know!
  • فيديو
  • Rino de Boer
  • المستوى: مبتدئ

4- The Basics of Dynamic Content in 15 Minutes
  • فيديو
  • Rino de Boer
  • المستوى: متقدم

5- Elementor Flexbox Container Tutorial – EXPLAINED
  • كتاب
  • أكاديمية حسوب
  • المستوى: مبتدئ

1- إنشاء المواقع والمتاجر الإلكترونية عبر ووردبريس مع ووكومرس
  • فيديو
  • Rino de Boer
  • المستوى: مبتدئ

2- WooCommerce Webshop Series
  • فيديو
  • Kinsta
  • المستوى: مبتدئ

1- How to Make Your WordPress Website Accessible
  • فيديو
  • Flux Academy
  • المستوى: مبتدئ

2- Accessible Web Design: What Is It & How To Do It
  • فيديو
  • Flux Academy
  • المستوى: مبتدئ

3- Is your website accessible? (Beginners Guide)
  • فيديو
  • HubSpot Marketing
  • المستوى: متقدم

4- Web Accessibility: ADA Compliance Tips to Design for All Users
  • مقالة
  • أكاديمية حسوب
  • المستوى: مبتدئ

1- كمصمم/مطور ويب مستقل، ما الخدمات الإضافية التي يمكن تقديمها لعميلك
  • فيديو
  • Megan Weeks
  • المستوى: مبتدئ

2- Website Design Process for Clients (Start to Finish)
  • فيديو
  • Elementor
  • المستوى: مبتدئ

1- Motion Effects Tutorials
  • فيديو
  • Andrea Egli
  • المستوى: متقدم

2- GSAP
  • مقالة
  • مدونة مستقل
  • المستوى: مبتدئ

1- ما هو السيو وكيف تظهر على نتائج محركات البحث الأولى؟
  • فيديو
  • Website Learners
  • المستوى: متقدم

2- Complete RankMath Tutorial | SEO Tutorial 2024
  • فيديو
  • أحمد سيكماني
  • المستوى: مبتدئ

1- كراش كورس Webflow | تعرف على المنصة في 30 دقيقة
  • فيديو
  • Payton Clark Smith
  • المستوى: مبتدئ

2- Learn the NEW Webflow | Full Beginner Tutorial
  • فيديو
  • Webflow
  • المستوى: مبتدئ

3- Intro to responsive web design — Webflow 101
  • فيديو
  • Flux Academy
  • المستوى: مبتدئ

4- Create Stunning Animations With Webflow (Crash Course)
  • فيديو
  • Flux Academy
  • المستوى: مبتدئ

5- Learn Webflow in 2024 (Beginner Crash Course)
  • فيديو
  • Kinsta
  • المستوى: مبتدئ

1- How to Make Your WordPress Website Accessible
  • فيديو
  • Flux Academy
  • المستوى: مبتدئ

2- Accessible Web Design: What Is It & How To Do It
  • فيديو
  • Flux Academy
  • المستوى: مبتدئ

3- Is your website accessible? (Beginners Guide)
  • فيديو
  • HubSpot Marketing
  • المستوى: متقدم

4- Web Accessibility: ADA Compliance Tips to Design for All Users
  • فيديو
  • Flux Academy
  • المستوى: مبتدئ

1- How to start a website layout (for complete beginners)
  • فيديو
  • Flux Academy
  • المستوى: مبتدئ

2- Professional Web Design Process Explained in 5 minutes
  • فيديو
  • Flux Academy
  • المستوى: متقدم

3- Web Design with Relume AI & Webflow – Full Course
  • فيديو
  • Sam Harrison
  • المستوى: مبتدئ

4- Webflow Pricing Explained (Hosting & Workspace plans 2024)
  • فيديو
  • Payton Clark Smith
  • المستوى: مبتدئ

5- How to price my Webflow project
  • فيديو
  • Arnau Ros
  • المستوى: مبتدئ

6- How To Price Your Webflow Projects in 2022
  • فيديو
  • Webflow
  • المستوى: مبتدئ

1- Interactions & Animations Course
  • فيديو
  • Flux Academy
  • المستوى: مبتدئ

2- Create Stunning Animations With Webflow (Crash Course)
  • فيديو
  • Timothy Ricks
  • المستوى: مبتدئ

3- Perfect Page Transitions in Webflow (2021)
  • فيديو
  • Relume
  • المستوى: متقدم

4- How to create an Animated Timeline in Webflow
  • فيديو
  • Timothy Ricks
  • المستوى: متقدم

5- GSAP & ScrollTrigger Crash Course for Webflow
  • فيديو
  • Billie Tuitt
  • المستوى: متقدم

6- Spline & Webflow Tutorial
  • فيديو
  • Flux Academy
  • المستوى: مبتدئ

1- Spline Tutorial for Beginners: 3D Website Crash Course
  • فيديو
  • Webflow
  • المستوى: مبتدئ

2- Webflow Labs introduces the Figma to Webflow plugin

قريباً 🙂

شكراً جزيلاً لـ

المصمم أنس حسناوي على إبداعه في تصميم الهوية البصرية لبيكسل بيديا

أحمد الحسين

مصمم ويب شامل، مدرب

أساعدة الشباب لاحتراف التصميم ودخول سوق العمل، تجدني على لينكدان و تلجرام :)