Studio
معالجة RAW غير إتلافية داخل المتصفح: كان التحدي هو اللون.
- السنة
- 2026
- مدة التصميم
- 12 أسبوعًا
- التقنيات
- Next.js · React · TypeScript · Tailwind · Vercel
- تصميم المنتج
- تصميم الواجهة
- التطوير
- معالجة الصور
منتج من تطوير Kayzen Web، متاح على عنوان معاينة Vercel في انتظار نطاقه النهائي.
- سلسلة ألوان من البداية إلى النهاية
- ICC
- إتاحة الوصول في Lighthouse
- 97/100
- أفضل الممارسات في Lighthouseأدنى نتيجة لدينا في هذا المعيار: تعتمد معالجة RAW داخل المتصفح على واجهات API ينبّه إليها Lighthouse؛ نعرض النتيجة كما هي بدل حذف الميزة، والمراجعة مُدرَجة في الخطة.
- 73/100
ما كان يجب حلّه.
السياق
Studio تطبيق لمعالجة الصور الفوتوغرافية عبر الإنترنت: استيراد ملفات RAW، وتصحيحات غير متلفة، وإدارة ألوان ICC من البداية إلى النهاية، وتصدير بصيغ متعددة.
القيد
لا يغيّر المصورون أدواتهم طلبًا للراحة. ثمة عقبتان حاسمتان: دقة الألوان — فالملف الذي يخرج بانحراف في الدرجة اللونية غير صالح للاستعمال — والطابع غير المتلف، أي إمكانية التراجع عن أي ضبط بعد ستة أشهر.
الحل
عولج اللون قبل الواجهة. ملف تعريف الإدخال الخاص بالكاميرا، وفضاء عمل خطي، وملف تعريف الإخراج يُختار عند التصدير: السلسلة صريحة ومعروضة للمستخدم. تُخزَّن الضبطات قائمةً من العمليات، ولا تُطبَّق أبدًا على الملف المصدر.
النتائج المسجّلة عند التسليم.
نتائج Lighthouse للموقع في بيئة الإنتاج. ننشرها كما هي: وعندما تكون إحداها منخفضة، نكتب سببها وخطة تصحيحها أدناه بدلًا من التكتم عليها.
كل خيار، وسببه.
واجهة داكنة محايدة
رمادي محايد صارم حول الصورة، بلا أي صبغة غالبة. الواجهة الملوَّنة تشوّه إدراك توازن الأبيض: تلك هي القاعدة الأولى في برامج التعديل، وهي مقدَّمة على أي اعتبار جمالي.
مخطط التوزيع (الهيستوغرام) ظاهر دائمًا
مثبَّت أعلى لوحة الضبط، مع تنبيه عند القصّ. إنه أداة القياس لدى المصور؛ وإخفاؤه خلف تبويب أشبه بوضع ميزان الماء في صندوق العدة.
اختصارات لوحة المفاتيح المعتادة في المهنة
تتبع الاختصارات تلك المعتمدة في البرامج المرجعية. أن تفرض قواعد جديدة على مستخدم خبير يعني أن تطلب منه نسيان ما تعلّمه — فتصبح كلفة الانتقال أعلى من المكسب.
لوحة ألوان المشروع
رمادي محايد 900
#18181B
خلفية مساحة العمل
رمادي محايد 700
#3F3F46
اللوحات
بنفسجي فاتح
#A78BFA
لون مميِّز، التحديد
أحمر القصّ
#EF4444
تنبيه المناطق الساطعة
النظام الطباعي
العناوين
Inter 600
النص الأساسي
Inter 400
القيم الرقمية بعرض ثابت: المنزلق الذي يقفز عرض قيمته يبدو غير دقيق.
ما يوجد تحت الغطاء.
- Next.js
- React
- TypeScript
- Tailwind
- Vercel
فك ترميز RAW بتقنية WebAssembly
يجري فك ترميز الصيغ الاحتكارية (CR3 وNEF وARW) بتقنية WebAssembly داخل worker. يبقى الخيط الرئيسي متاحًا: تستجيب المنزلقات أثناء فك ترميز ملف بدقة 60 ميغابكسل.
تصيير على GPU عبر WebGL
تُطبَّق التصحيحات عبر shaders على بطاقة الرسوميات. أما المعالجة على CPU فكانت ستجعل المعاينة غير قابلة للاستعمال بهذه الدقة.
سجلّ عمليات لا بكسلات
كل ضبط مُدخَل في مكدّس عمليات قابل للتسلسل. التراجع، ونسخ معالجة على سلسلة صور، وتصدير إعداد مسبق: كل ذلك ينبع من هذه البنية.
كيف يصبح الموقع قابلًا للعثور عليه.
SEO لاستقطاب العملاء، لا للمنتج
التطبيق نفسه غير قابل للفهرسة، ولا داعي لأن يكون كذلك. ينصبّ تحسين محركات البحث (SEO) على صفحات التعريف وصفحات المقارنة، حيث يحدث الاكتشاف.
قابل للاستخدام من الجميع.
منذ يونيو 2025، يفرض القانون الأوروبي لإمكانية الوصول (European Accessibility Act) إتاحة الوصول الرقمي على شريحة واسعة من الخدمات الإلكترونية. نتعامل معها منذ مرحلة التصميم، لا كتدارك لاحق.
97/100 رغم واجهة موجَّهة للخبراء
كل منزلق هو حقل input أصلي بعنوان، وقيمة يُعلَن عنها، وخطوة عبر لوحة المفاتيح. تكاد واجهات التعديل كلها تستغني عن ذلك؛ ولم يكن ثمة أي سبب تقني لفعل الشيء نفسه.
ما تم تسليمه.
- التعريف
- تطبيق التعديل
- الصيغ والتوافق
- الأسعار
مراحل سير المشروع.
سلسلة الألوان
ملفات تعريف الإدخال، وفضاء العمل، وملفات تعريف الإخراج.
فك الترميز
WebAssembly، وworkers، ومعاينة سريعة.
التصيير
shaders عبر WebGL، والهيستوغرام، والقصّ.
الواجهة
اللوحات، والاختصارات، والسجل.
ما يُطرح علينا كثيرًا.
أعمال أخرى
الامتثال للائحة GDPR & SaaSKonsent by Kayzen
مورّد أشرطة موافقة يدقّق الأشرطة هو خصم وحَكَم في آن واحد: كانت الاستقلالية هي المنتج نفسه.
الأمن السيبراني الهجومي & SaaSSentinel by Kayzen
بيع منتج أمني لمهندسين: كان على كل ادعاء أن يكون قابلًا للإثبات.
البيانات & خدمة الأرصاد الجويةMétéo Climat France
358 صفحة قابلة للفهرسة، وخريطة متحركة على 72 موعدًا — دون سطر واحد من أي إطار عمل.
مستوى الإتقان نفسه، لموقعك.
تدقيق مجاني لموقعك الحالي، وعرض سعر خلال 24 ساعة، وتعليل مكتوب — مثل الذي قرأته للتو. الدفع على ثلاث دفعات دون رسوم إضافية، مع التحقق من برامج الدعم المحلية قبل التوقيع.