مكتبة المكوّنات وحالات الواجهة
مرجع للمصممين والمبرمجين: الألوان، الخطوط، المكوّنات القابلة لإعادة الاستخدام، وحالات كل واجهة (فارغة، تحميل، نجاح، خطأ، بانتظار المراجعة).
الألوان
مأخوذة من صفحات الكتاب الداخلية: أزرق ملكي على ورق كريمي، ولون تمييز واحد.
الأزرق الأساسي
brand · #2f5bd3
أزرق غامق
brand-dark · #1d3d99
كحلي
brand-deep · #12245c
أزرق فاتح
brand-soft · #a9c0ff
خلفية زرقاء
brand-wash · #eef2fd
الحبر
ink · #1d1f26
الورق
paper · #f7f3ea
التمييز
sun · #ffc83d
نجاح
ok · #0f9d68
خطأ
bad · #d93b41
الخطوط
خطّا الكتاب: Lalezar للعناوين والأرقام، وIBM Plex Sans Arabic للنصوص.
52 طريقة من جد
«عدسة تبيع»
نص أساسي بحجم 18: في المتجر الإلكتروني لا يلمس العميل المنتج ولا يجرّبه؛ الصورة هي البائع الوحيد.
نص ثانوي بحجم 14: 40–80 ريال للصورة · 3–5 أسابيع
الأزرار
الزر الأساسي واحد في كل شاشة. كل الأزرار لها حالة تركيز واضحة وحالة تعطيل.
الشارات والحالات
البطاقات
بطاقة الطريقة، بطاقة التجربة، وبطاقة مقدم الخدمة.
مسوّق متخصص في قوقل (خرائط، بحث، تسوّق)
دلّ الزبون على المحل
- الدخل المتوقع
- 2,500–7,000 ريال شهريًا
- رأس المال
- 200 ريال
- أول ريال خلال
- 4–6 أسابيع
1,200 ريال
خلال 5 أسابيع · التكلفة 180 ريال
صوّرت 18 منتجًا من مطبخ البيت وجاءني أول عميل
تصوير المنتجات للمتاجر الإلكترونية
«بدأت بجوالي وكرتونة بيضاء وضوء النافذة. خصصت أسبوعًا لتصوير منتجات من البيت: قهوة، عطر، إكسسوارات. فتحت حسابًا خاصًا بالأعمال وراسلت 30 متجرًا صغيرًا على إنستقرام، وعرضت تصوير ثلاثة منتجات مجانًا مقابل تقييم. ردّ عليّ أربعة، وتحوّل واحد منهم إلى باقة مدفوعة من عشرين صورة.»
استوديو ضوء
الرياض
تصوير منتجات للمتاجر الإلكترونية بخلفيات نظيفة وصور نمط حياة.
- تصوير منتج على خلفية بيضاء
- صور نمط حياة
- باقة 20 منتجًا
يبدأ من45 ريال للصورة الواحدة
تواصلالنماذج والتحقق من المدخلات
الخطأ يظهر تحت الحقل بنص يشرح المطلوب، ويُنقل التركيز لأول حقل خاطئ.
نص مساعد قصير.
اكتب بريدًا إلكترونيًا صحيحًا، مثل name@example.com
حالات الواجهة
كل قائمة ونموذج في المنصة يمرّ بهذه الحالات الخمس.
فارغة
لا توجد تجارب منشورة بعد
تشرح الحالة الفارغة ماذا سيظهر هنا، وتقترح الخطوة التالية.
تحميل
نجاح
وصلتنا تجربتك، شكرًا لك
خطأ
تعذّر قبول الملف
بانتظار المراجعة
معاينة خاصة بك: بانتظار المراجعة
الحركة والتأثيرات (مقترح)
عيّنات حيّة من نظام الحركة في app/motion.css. لم تُطبَّق على صفحات الموقع بعد. الخط الأصفر أعلى الصفحة هو مؤشر التقدّم في القراءة.
كشف عند التمرير + قلم التظليل (data-reveal · marker-draw)
52 أسبوعًا. 52 فرصة.
- 1
- 2
- 3
- 4
بطاقة مطبوعة: رفع عند المرور، حافة مضيئة، وانزياح الرسمة (lift · spotlight · art-drift)
مسوّق متخصص في قوقل (خرائط، بحث، تسوّق)
مرّر المؤشر فوق البطاقة (على سطح المكتب فقط).
زر مغناطيسي + عدّاد (data-magnetic · data-countup)
52
ختم الإنجاز (animate-stamp): علّم المهمة
ملصق يُوضَع على الصفحة (animate-land)
زجاج مصنفر للشريط العائم + حبيبات الورق (glass · grain)
السلّم الطباعي المرن (text-display · text-h1 · text-h2 · text-h3 · text-lead)
دخلك يبدأ بتجربة
ابحث عن طريقتك
«عدسة تبيع»
من أين تبدأ؟
نص تمهيدي يكبر ويصغر بسلاسة مع عرض الشاشة، بلا قفزات عند نقاط التوقف.