One canvas. Many possibilities.

Start with the frame

A consistent frame helps people know where they are. Navigation, reading width, spacing, and the way links behave should feel familiar from one section to the next. This is the quiet infrastructure of a good experience.

Inside that frame, a project can have its own color, typography, and imagery. ZipZap keeps the emerald identity of its own website; the lab keeps the warm Canvas and orange of Patchwork. The relationship is visible without erasing either identity.

Let the work carry the color

Use strong color where it tells a story: a project cover, a short heading, a clear next action. Keep descriptions on calm surfaces so they remain easy to scan. A visual system becomes more distinctive when its decisions are repeated with care, rather than when everything competes for attention.

Give motion a small job

A pattern can make a page feel alive without becoming its subject. Keep its contrast low, leave the reading area quiet, and move it slowly. Opening a panel or pressing a button needs a quicker response.

Motion is optional. Pausing it should preserve every word, every link, and every useful state. The same applies to a device that asks for reduced motion: the composition still has to work as a still image.

ابدأ بالإطار

الإطار المتسق يساعد الزائر على معرفة مكانه. التنقل، وعرض النص، والمسافات، وطريقة عمل الروابط، ينبغي أن تظل مألوفة من قسم إلى آخر. هذه البنية الهادئة هي ما يجعل التجربة مريحة.

داخل هذا الإطار، يستطيع كل مشروع أن يمتلك لونه وصوره ولغته الخاصة. يحتفظ ZipZap بهويته الزمردية الموجودة في موقعه، ويحتفظ المعمل بدرجات Canvas الدافئة وبرتقالي Patchwork. العلاقة واضحة، دون أن تلغي هويةٌ الأخرى.

دع العمل يحمل اللون

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

أعطِ الحركة مهمة صغيرة

يمكن للباترن أن يمنح الصفحة حياة دون أن يصبح موضوعها. قلّل تباينه، واترك منطقة القراءة هادئة، واجعل حركته بطيئة. أما فتح لوحة أو ضغط زر فيحتاج إلى استجابة أسرع.

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