الانتقال إلى المحتوى
جرانيت بولت، الرئيسية

مشروع مفاهيمي من الاستوديوتصميم تجربة المستخدم وواجهات الاستخدام

Basalt

نظام تصميم لمواقع التسويق: متغيرات وخطوط ومكونات تصمد بلغتين وسمتين.

مشاريع عملائنا سرية بموجب اتفاقيات عدم الإفصاح. هذه الأنظمة بنيناها بأنفسنا، ونعرضها لتوضيح مستوى ما نسلّمه.

مرجع نظام التصميم Basalt: متغيرات الألوان ومقياس الخطوط ونماذج المكونات في السمتين الفاتحة والداكنة.

المشكلة التي يعالجها

تتآكل مواقع التسويق صفحةً بعد صفحة: كل حملة تضيف نمط زر جديدًا، والوضع الداكن ينكسر بصمت، وتتخلف النسخة العربية لأن لا شيء صُمِّم أصلًا لينقلب.

ما الذي يقوم به النظام

  1. 01متغيرات تصميم للألوان والخطوط والمسافات، تُعرَّف مرة واحدة وتُربط بالسمتين الفاتحة والداكنة.
  2. 02مجموعة مكونات — قوائم تنقل وواجهات رئيسية وبطاقات وجداول أسعار ونماذج — مبنية من اليمين إلى اليسار أولًا، فتكون النسخة العربية هدف بناء لا ترقيعًا لاحقًا.
  3. 03مقياس خطوط وشبكة مضبوطان لكل لغة: خطوط لاتينية وعربية بأحجام بصرية متوافقة.
  4. 04إتاحة افتراضية: التباين وحالات التركيز وسلوك تقليل الحركة مدمجة في المكونات.
  5. 05صفحات مرجعية تعرض كل مكوّن باللغتين وفي السمتين.

التقنيات

  • Figma
  • Design tokens
  • Astro
  • Tailwind CSS
  • Storybook

البنية

المتغيرات مصدر حقيقة واحد يُصدَّر إلى خصائص CSS ومتغيرات Figma؛ والمكونات في Astro، وStorybook مرجعها الحي.

كيف نبني هذا لكم

تريدون نظامًا كهذا لعملياتكم؟

مكالمة مدتها 20 دقيقة. حدّثونا عن نقطة الاختناق، ونخبركم أي خدمة تناسبها، وكم تكلف، ومتى يمكن تسليمها.

أو راسلونا على [email protected]

توقيتكم وتوقيتنا

المكالمات من الأحد إلى الجمعة

  • بيروت

  • دبي

  • الرياض

  • القاهرة

  • برلين

  • لندن

  • نيويورك

يتقاطع يوم العمل في بيروت مع ساعات العمل في دبي والرياض والقاهرة وبرلين ولندن، وتلتقي فترة ما بعد الظهر عندنا مع صباح نيويورك.