Experience Collectionمجموعة التجارب

A proposal, in eight partsعرضٌ من ثمانية أجزاء

We build digital experiencesنبني تجارب رقمية
clients remember.يتذكّرها العملاء.

Eight demonstrations, drawn from the work we deliver. Each is a complete website with its own art direction, its own typography and one interaction worth remembering. Open any of them — and keep clicking past the homepage.

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

See the workشاهد الأعمال How we workكيف نعمل
Terra Nera 01 · Terra Nera Ninefold 02 · Ninefold Valedra 03 · Valedra
8projectsمشاريع
80pages builtصفحة مبنيّة
8art directionsهويّات بصرية
0stock imagesصور جاهزة
The workالأعمال

Eight industries. No two of them look alike.

ثمانية قطاعات. ولا اثنان منها يتشابهان.

Ordered by the impression they tend to leave. Open a project to read the case study, or go straight to the live site.

مرتّبة حسب الأثر الذي تتركه عادةً. افتح المشروع لقراءة دراسة الحالة، أو انتقل مباشرةً إلى الموقع.

01

Terra Nera

تيرا نيرا

Hospitality · a resort on a volcanic island

الضيافة · منتجع على جزيرة بركانية

The palette is a clock.

لوحة الألوان ساعة.

A forty-two suite resort. The homepage is a single day: scrolling from 06:40 to 22:00 changes the colour of the entire page with the light, and the booking journey ends by showing what the light will actually be like on the dates you chose.

منتجع من اثنين وأربعين جناحًا. الصفحة الرئيسية يومٌ كامل: التمرير من الساعة ٦:٤٠ صباحًا حتى ١٠:٠٠ مساءً يغيّر لون الصفحة بأكملها مع الضوء، وتنتهي رحلة الحجز بعرض شكل الضوء فعليًا في التواريخ التي اخترتها.

Case studyدراسة الحالة Live siteالموقع المباشر
02

Ninefold

ناينفولد

Creative technology studio

استوديو تقنية إبداعية

Nine rooms, not nine sections.

تسع غرف، لا تسعة أقسام.

A studio site built as a space you move through. A camera travels a corridor between nine rooms while the typography breathes and the surface answers your cursor. Everything stays reachable in two clicks, and there is a fully designed version for anyone who prefers reduced motion.

موقع استوديو مبنيّ كفضاءٍ تتنقّل داخله. تسير الكاميرا في ممرّ بين تسع غرف، بينما تتنفّس الحروف ويستجيب السطح لمؤشّرك. كل شيء يبقى في متناول نقرتين، وثمّة نسخة مصمَّمة بالكامل لمن يفضّل تقليل الحركة.

Case studyدراسة الحالة Live siteالموقع المباشر
03

Valedra

فاليدرا

Luxury real estate · the Portuguese coast

عقارات فاخرة · الساحل البرتغالي

The site plan is the navigation.

المخطّط العام هو وسيلة التنقّل.

A coastal developer. The master plan is drawn in ink, then tilts and raises fourteen houses into a three-dimensional model you can explore: selecting a house highlights its row in the availability table, and selecting a row selects the house.

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

Case studyدراسة الحالة Live siteالموقع المباشر
04

Mareau

مارو

Performance bicycles · Annecy

درّاجات عالية الأداء · أنسي

A product you can turn in your hands.

منتج يمكنك تقليبه بين يديك.

A carbon frame builder. The homepage is a climb: the camera moves around a genuine three-dimensional bicycle as the road gains altitude. The configurator changes paint, groupset and wheels live, with the price, the weight and the delivery date following each choice.

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

Case studyدراسة الحالة Live siteالموقع المباشر
05

Halvorsen Atelier

أتيليه هالفورسن

Architecture and interiors · Oslo

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

A drawing set you scroll sideways.

مجموعة مخطّطات تتصفّحها أفقيًا.

An architecture studio working in timber and stone. Projects sit side by side on one long sheet that moves horizontally, dimension lines drawing themselves as each elevation arrives, and every case study carries a plan, a section and an elevation you can switch between.

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

Case studyدراسة الحالة Live siteالموقع المباشر
06

Northline

نورث لاين

International healthcare recruitment

استقدام الكوادر الصحية دوليًا

A route, not a form.

مسارٌ لا استمارة.

An ethical recruiter moving nurses and doctors between continents. Seven questions draw the candidate's route across a map and end in a verdict for each destination, with the reason in one sentence and an honest timeline. Conversion design that respects the person converting.

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

Case studyدراسة الحالة Live siteالموقع المباشر
07

Quayside

كيسايد

Software · container terminal operations

برمجيات · تشغيل محطّات الحاويات

The product is the homepage.

المنتج هو الصفحة الرئيسية.

Berth planning software. There are no screenshots anywhere: a working planner sits above the fold, and dragging a vessel raises real conflicts — tide windows, vessel length, draught and crane availability — each one explained in the operator's own language.

برنامج لتخطيط الأرصفة. لا توجد صور للمنتج في أي مكان: مخطِّطٌ عامل في أعلى الصفحة، وسحب سفينة يُظهر تعارضات حقيقية — نوافذ المدّ، وطول السفينة، والغاطس، وتوافر الرافعات — كلٌّ منها مشروح بلغة المشغّل نفسه.

Case studyدراسة الحالة Live siteالموقع المباشر
08

Harcourt Vane

هاركورت فين

Law · disputes and private wealth, London

محاماة · نزاعات وثروات خاصة، لندن

Proof that restraint is a skill.

برهانٌ على أنّ ضبط النفس مهارة.

A disputes firm set like a periodical: three colours, two typefaces, no hero image and almost no motion. The whole site ships four kilobytes of JavaScript, and its ledger of forty-one matters sorts, filters, and answers the keyboard.

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

Case studyدراسة الحالة Live siteالموقع المباشر
What this isما هذا

Demonstrations, not templates.

أعمال توضيحية، لا قوالب جاهزة.

Every project here was given a brief, a client and a complete art direction before a line of code was written. Nothing is reused between them: not a typeface, not a colour, not a layout system.

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

They are built the way we build production work — mobile designed as deliberately as desktop, accessible, fast, and tested at every breakpoint. They are drawn from the kinds of projects we deliver for clients, and they are here so you can judge the craft instead of reading about it.

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

  1. One clear visual idea per project, sayable in a sentence.فكرة بصرية واحدة واضحة لكل مشروع، يمكن قولها في جملة.
  2. One signature interaction each — the thing people remember.تفاعل مميّز واحد لكل مشروع — وهو ما يعلق في الذهن.
  3. Content written by a copywriter, not filled with placeholder text.محتوى بقلم كاتب محترف، لا نصوص حشو.
  4. Every image made for the brand. No stock photography anywhere.كل صورة صُنعت للعلامة. ولا صورة جاهزة في أي مكان.
  5. Mobile designed on purpose, never a desktop layout squeezed down.الهاتف مُصمَّم عن قصد، لا تخطيطًا مضغوطًا من الحاسب.
Rangeالتنوّع

The point is that they do not look like each other.

المقصد أنها لا تشبه بعضها.

ProjectالمشروعPaletteالألوانTypographyالطباعةSignature interactionالتفاعل المميّز
Terra Neraتيرا نيرا Cormorant Garamond · Hanken Grotesk The palette is a clock.لوحة الألوان ساعة.
Ninefoldناينفولد Fraunces (opsz · SOFT · WONK) · Martian Mono Nine rooms, not nine sections.تسع غرف، لا تسعة أقسام.
Valedraفاليدرا Marcellus · Instrument Sans · Geist Mono The site plan is the navigation.المخطّط العام هو وسيلة التنقّل.
Mareauمارو Big Shoulders Display · Manrope · DM Mono A product you can turn in your hands.منتج يمكنك تقليبه بين يديك.
Halvorsen Atelierأتيليه هالفورسن Archivo (width axis) · JetBrains Mono A drawing set you scroll sideways.مجموعة مخطّطات تتصفّحها أفقيًا.
Northlineنورث لاين Newsreader · Schibsted Grotesk A route, not a form.مسارٌ لا استمارة.
Quaysideكيسايد IBM Plex Sans · Condensed · Mono The product is the homepage.المنتج هو الصفحة الرئيسية.
Harcourt Vaneهاركورت فين Libre Caslon Display · Text · IBM Plex Mono Proof that restraint is a skill.برهانٌ على أنّ ضبط النفس مهارة.

Tell us what you are building.

أخبِرنا بما تبنيه.

If any of this is close to what you need, the next step is a conversation about your brand, your audience and what the site actually has to achieve.

إن كان أيٌّ من هذا قريبًا مما تحتاجه، فالخطوة التالية حوارٌ عن علامتك وجمهورك وما يجب أن يحقّقه الموقع فعلًا.

Start a projectابدأ مشروعًا