الكتالوج / ٠٢

تصميم الويب والموبايل

عمل قاده التصميم — أنظمة العلامة وتصميم الواجهات عبر الويب والموبايل، تجمعها لغةٌ بصريةٌ واحدة. نبني هويّاتٍ تبدو واثقة على أيقونةٍ بحجم ١٦ بكسل وعلى شاشة هاتف على حدٍّ سواء.

ويب · موبايل · علامة
السطح
Figma · Code Connect
الأدوات
01

نظرة عامة

التصميم هو الطبقة التي تحدّد إن كان منتجك يبدو مدروسًا أم مرتجلًا. نعمل بالعلامة أوّلًا — العلامة اللفظية، اللوحة اللونية، نظام الخطوط، لغة الحركة — ثمّ نُترجمها إلى واجهاتٍ للويب والموبايل معًا، ومكتبة مكوّناتٍ يستعملها فريق البناء حرفيًا. المُخرَج هويّةٌ قابلةٌ للتوسّع: نفس الحمض النووي على الموقع، والتطبيق، وواجهة الوكيل، والعرض، والمطبوع. ثنائيّة اللغة افتراضيًا — العربية واللاتينية مواطنتان من الدرجة الأولى.

السطح
ويب · موبايل · علامة
arrow_outward
الأدوات
Figma · Code Connect
arrow_outward
02

لمن هذه الخدمة

brushتبدأ من مجرّد اسمٍ وتحتاج هويّةً كاملة — شعار، لوحة ألوان، خطوط، صوت
auto_fix_highتحمل علامةً لم تعد تُطابق طموح العمل
devicesتبني موقعًا وتطبيقًا معًا وتريدهما يبدوان منتجًا واحدًا، لا منتجَين
translateتُطلق ثنائي اللغة وتريد أن تُعامَل العربية كلغةٍ أصلية، لا ترجمة
03

ما نُسلّمه

كلّ ما يصل حين نُصمّم علامتك، على الويب والموبايل.

قيد العرض
00/ 06
مؤكَّد
01check
paletteوحدة 01
أساس العلامة — العلامة اللفظية، الألوان، الخطوط، الصوت، إرشادات الحركة
02check
translateوحدة 02
نظام خطوط ثنائي اللغة (عربي + لاتيني) مُعَايَر للشاشة والطباعة
03check
widgetsوحدة 03
تصميم الواجهة — شاشاتٌ كاملة وحالات للويب والموبايل الأصلي، بنماذج تفاعلية في Figma
04check
view_moduleوحدة 04
مكتبة مكوّنات بـ tokens (Figma + موصولة بالكود)
05check
menu_bookوحدة 05
توثيق نظام التصميم — الاستخدام، افعل/لا تفعل، ملاحظات إمكانية الوصول
06check
rocket_launchوحدة 06
أصول الإطلاق — تواصل اجتماعي، عرض، توقيع، أيقونات تطبيقات
04

كيف نعمل

01 · 04
٠١

الموقعة

تدقيق، جمهور، مراجع. نتّفق على ما يجب أن *تشعر* به العلامة قبل فتح Figma.

٠٢

الأساس

الشعار، اللون، الخط، الحركة. نظامٌ صغير صامدٌ عبر كلّ سطح.

٠٣

التطبيق

الواجهة، الشاشات، الحالات، النماذج — العلامة تنبض حيّةً عبر الويب والموبايل.

٠٤

النظام

tokens، مكوّنات، توثيق. نُسلّم شيئًا يستطيع فريق التطوير أن يمضي به.

05

النطاق والتسعير

rocket_launch01

العلامة

الأساس — نظام علامةٍ يصمد عبر كلّ سطح.

  • checkعلامة لفظية، ألوان، خطوط، صوت
  • checkنظام خطوط ثنائي اللغة (عربي + لاتيني)
  • checkإرشادات حركة واستخدام
المدة١–٢ أسبوع
trending_up02موصى به

الواجهة

العلامة، تنبض حيّةً عبر الويب والموبايل.

  • checkشاشات كاملة وحالات ونماذج تفاعلية — ويب وموبايل
  • checkمصمَّمة في Figma وجاهزة للبناء
  • checkقرارات UX مبنيّة على بحثٍ حقيقي
المدة٢–٤ أسبوع
workspace_premium03

النظام

مكتبة مكوّناتٍ يستطيع فريق التطوير أن يمضي بها عبر المنصّات.

  • checktokens، مكوّنات، توثيق
  • checkموصولة بالكود في Figma
  • checkأصول إطلاق — تواصل اجتماعي، عرض، أيقونات
المدة٣–٥ أسبوع

كل مشروع يحصل على سعر ثابت مكتوب، يُؤكَّد خلال ٤٨ ساعة من مكالمة تحديد النطاق.

ابدأ محادثة
06

الإمكانات

boltأنظمة هويّة العلامةarrow_outward
verifiedتصميم واجهات الويب والموبايلarrow_outward
tuneأنظمة مكوّنات وتصميمarrow_outward
٠٣ · تصميم الويب والموبايل

تحتاج علامةً تتوسّع؟

سواء كنت تبدأ من علامةٍ لفظية أو تُصمّم نظامًا كاملًا من الويب إلى الموبايل، سنحدّد نطاق العمل في مكالمةٍ واحدة.

ابدأ محادثة
07

الأسئلة الشائعة

كلاهما — نفس نظام العلامة يمتدّ إلى شاشات iOS و Android. غالبًا ما نُصمّم تجربة التطبيق والويب معًا لتُقرأ كمنتجٍ واحد.

smartphoneswap_horiz
يتكامل مع

صمّم التطبيق، ثمّ دعنا نبنيه — iOS و Android أصليّان، جاهزان للإطلاق.

تطوير تطبيقات الموبايل
إشارة / النشرة

ملاحظات من قلب التنفيذ.

مقالات عملية عن الخدمات أعلاه: قرارات البنية، والمفاضلات، وكلفتها الحقيقية.

رسالة واحدة شهريًا. يمكنك إلغاء الاشتراك بنقرة.