مشروع مفاهيمي من الاستوديوتصميم تجربة المستخدم وواجهات الاستخدام
Basalt
نظام تصميم لمواقع التسويق: متغيرات وخطوط ومكونات تصمد بلغتين وسمتين.
مشاريع عملائنا سرية بموجب اتفاقيات عدم الإفصاح. هذه الأنظمة بنيناها بأنفسنا، ونعرضها لتوضيح مستوى ما نسلّمه.
المشكلة التي يعالجها
تتآكل مواقع التسويق صفحةً بعد صفحة: كل حملة تضيف نمط زر جديدًا، ويتعطل الوضع الداكن دون أن يلحظه أحد، وتتخلف النسخة العربية لأن لا شيء صُمِّم أصلًا لينقلب.
ما الذي يقوم به النظام
- 01متغيرات تصميم للألوان والخطوط والمسافات، تُعرَّف مرة واحدة وتُربط بالسمتين الفاتحة والداكنة.
- 02مجموعة مكونات — قوائم تنقل وواجهات رئيسية وبطاقات وجداول أسعار ونماذج — مبنية من اليمين إلى اليسار أولًا، فتكون النسخة العربية هدف بناء لا ترقيعًا لاحقًا.
- 03مقياس خطوط وشبكة مضبوطان لكل لغة: خطوط لاتينية وعربية بأحجام بصرية متوافقة.
- 04سهولة الوصول مضمّنة أصلًا: التباين وحالات التركيز وسلوك تقليل الحركة مدمجة في المكونات.
- 05صفحات مرجعية تعرض كل مكوّن باللغتين وفي السمتين.
التقنيات
- Figma
- Design tokens
- Astro
- Tailwind CSS
- Storybook
البنية
المتغيرات مصدر حقيقة واحد يُصدَّر إلى خصائص CSS ومتغيرات Figma؛ والمكونات في Astro، وStorybook مرجعها الحي.
كيف نبني هذا لكم