استوديو · ممارسة التصميم

كيف نصمّم apps.

كل منتج نطلقه يبدأ كملفّ Figma — والمسافة بين ذلك الملفّ وApp Store هي الحرفة كلّها. هذه هي العملية، والمبادئ، والدليل.

Principles

أربع قواعد لا نحيد عنها.

01
التصميم يجلس بجوار الهندسة

يتشارك مصمّمونا ومهندسونا اجتماعاً يومياً، لا طابور تذاكر. وكل شاشة تُرسَم في Figma يراجعها من سيبنيها — قبل أن تصبح نهائية، لا بعد ذلك.

02
محتوى حقيقي أو لا محتوى

لا نصوص حشو، ولا أسماء مثالية تصادف أنها قصيرة كلّها. نصمّم ببيانات إنتاجية: أسماء عربية طويلة، وأرصدة من تسعة أرقام، وحالات فارغة، وحالات خطأ، وحالات دون اتصال.

03
العربية أولاً، لا العربية أيضاً

يُصمَّم الاتجاه من اليمين لليسار كمرآة منذ أول مخطّط هيكلي — الطباعة والأيقونات والحركة مضبوطة للنصّين. وإن كان يعمل بالإنجليزية فقط، فهو لا يعمل.

04
حركة بقصد

الحركة تشرح التسلسل الهرمي والحالة — لا زخرفة لذاتها أبداً. لكل انتقال مهمّة؛ وما لا يستحقّ مللي ثوانيه يُحذَف.

Process

من الموجز إلى الإطلاق، في ست خطوات.

كل خطوة تنتهي بشيء يمكنك فتحه والنقر عليه والحكم عليه — لا بتحديث حالة أبداً.

  1. 01
    Understand

    الاكتشاف قبل البكسل

    ورش عمل، ومقابلات مستخدمين، وتفكيك للمنافسين في FigJam. نخرج بالمهمّة الفعلية التي يريد المستخدم إنجازها مكتوبةً — وبقائمة إلغاء للميزات التي لا تخدمها.

    You getخريطة المشكلة + مسارات محدّدة النطاق
  2. 02
    Structure

    المسارات والمخطّطات الهيكلية

    كل شاشة من كل مسار، منخفضة الدقّة، قابلة للنقر. هنا يُتجادَل حول التنقّل ويُصلَح — بثمن زهيد، بتدرّج رمادي، قبل أن يقع أحد في حبّ تدرّج لوني.

    You getنموذج أوّلي هيكلي قابل للنقر
  3. 03
    تصميم

    شاشات عالية الدقّة في Figma

    محتوى حقيقي، باللغتين، وكل حالة حدّية. فاتح وداكن. مكوّنات مبنيّة بمتغيّرات وتخطيط تلقائي كي لا يكسر تغيير في النصّ أربعين شاشة.

    You getملفّ Figma عالي الدقّة — رابط حيّ، لا PDF
  4. 04
    Systemize

    الرموز ونظام التصميم

    الألوان والخطوط والتباعدات وأنصاف الأقطار تصبح رموزاً مسمّاة تطابق قاعدة الشيفرة واحداً لواحد. ومكتبة مكوّنات Figma تعكس Storybook — الأسماء نفسها، والخصائص نفسها، والحالات نفسها.

    You getنظام التصميم + تصدير الرموز
  5. 05
    Validate

    النمذجة، الاختبار، التعديل

    النماذج الأوّلية التفاعلية تُعرَض على مستخدمين حقيقيين (Maze، وجلسات مُدارة) وعلى المستثمرين حين يكون ذلك الهدف. وتعود النتائج إلى الملفّ في الأسبوع نفسه.

    You getتقرير قابلية الاستخدام + شاشات مُحسَّنة
  6. 06
    Ship

    تسليم ليس تسليماً

    كان المهندسون في الملفّ طوال الوقت — Dev Mode، وحالات حدّية موثّقة، ومواصفات حركة بمنحنيات ومدد. ويراجع التصميم كل بناء حتى تطابق الشاشة المُطلَقة تلك المرسومة.

    You getواجهة إنتاج بتطابق البكسل
Toolchain

Figma في المركز.

ملفّ حيّ واحد من الانطلاق إلى الإطلاق — المسارات في FigJam، والشاشات والرموز في Figma، والتطابق مع Storybook في الشيفرة.

Deep dive — why Figma, and what else we considered
FigmaFigJamDev Modeرموز التصميمStorybookFramerLottieMaze

لديك شيء يحتاج designing?

سباق اكتشاف من أسبوعين: ورش عمل، ومسارات، ونموذج أوّلي قابل للنقر — يبقى لك في كلتا الحالتين.