تصميم UI/UX والهوية التجارية في قبرص
نصمّم الواجهات التي يعمل عليها المنتج والهوية التي تُعرَف بها العلامة، تصميم UI/UX مبنيّ على البحث وأنظمة هوية مبنيّة لهذا السوق. القواعد والصرامة نفسها، مبنيّة من أجلك.
نبني تصميم UI/UX والهوية التجارية كتخصص واحد في قبرص: البحث وأنظمة الواجهة للمنتجات، والعلامات والألوان وقواعد الطباعة التي تحمل العلامة التجارية عبر كل ما تلمسه. فريق واحد يحمل الاثنين، بحيث تُقرَأ واجهة المنتج وهوية العلامة بالصوت نفسه.
البرهان هو النظام وراء الصفحة أمامك. لوحة ألوان واحدة مُستخدَمة بانضباط، ومقياس طباعي يمتدّ عبر كل عنوان وفقرة، ولغة مكوّنات مبنيّة لهذه العلامة لا مأخوذة من مجموعة جاهزة. الصرامة نفسها تدخل في كل واجهة وهوية نصمّمها لعميل.
Specimen sheet for this page's own design system: a Sora type scale at 54, 40 and 16 pixels; the accent colour 52A1D1 shown as accent text on a dark chip and the body colour shown as body text on a canvas chip; and a spacing ruler at 4, 8, 12, 16 and 24 pixels. Annotated "same system, every page".
من أين يأتي دين التصميم
تفقد معظم العلامات والمنتجات تصميمها قليلاً في كل مرة، بقرارات صغيرة يُتَّخذ كل منها بمفرده: زرّ يُبنى بثلاث طرق مختلفة لأن الأول دُفِن في الملفات، وشعار يوضع على خلفية تتعارض معه، وأزرق ينجرف إلى خمسة أزرقات مختلفة قليلاً عبر عام من لقطات الشاشة وشرائح العروض. كل خيار صغير بمفرده. لكنها تتراكم معاً.
تظهر التكلفة لاحقاً: تستغرق الصفحات الجديدة وقتاً أطول لتُطلَق لأن كل يد جديدة تضطر لإعادة اكتشاف ما تقرّر بالفعل، ويلاحظ العملاء عدم الاتساق قبل أن يستطيعوا تفسير السبب. نبدأ بتدوين القواعد التي تملكها العلامة أو المنتج بالفعل جزئياً، ثم نبني الأجزاء التي لا تزال ناقصة.
الواجهات والهوية والأنظمة التي تجمع بينهما
ثلاثة تخصصات مترابطة، تعمل معاً غالباً.
تصميم المنتج وUI/UX
واجهات لمنتجات الويب والجوال: بحث، ومسارات مستخدم، وشاشات مصمَّمة ومختبَرة قبل أن يعتمد عليها أي سطر من شيفرة الإنتاج.
الهوية التجارية وتصميم الشعار
العلامة، ومعالجة الاسم، واختيارات الألوان والطباعة التي تجعل العلامة التجارية مميّزة، مبنيّة كنظام يستطيع فريق صغير تطبيقه باتساق.
أنظمة التصميم
القواعد الموثّقة وراء الاثنين: المكوّنات، والمسافات، والألوان، والطباعة، بحيث يُتَّخذ القرار مرة واحدة ويُعاد استخدامه في كل شاشة جديدة بعدها.
من البحث إلى الشاشات المختبَرة
الشكل نفسه يسير في مشروع شعار وفي إعادة تصميم منتج، بحسب حجم الموجز.
- 01
البحث
ننظر إلى المستخدمين، والعلامة كما هي اليوم، والمجال الذي تتنافس فيه، قبل رسم أي شيء. تُدوَّن الافتراضات وتُفحَص مقابل الجمهور الحقيقي.
- 02
المسارات
تُرسَم الشاشات والرحلات كمخطّطات سلكية أولاً، بحيث يُتَّفق على بنية المنتج أو منطق نظام الهوية قبل أن يكون لها لون أو خط واحد.
- 03
النظام
تصبح الهوية أو الواجهة نظاماً: طباعة، وألوان، ومكوّنات، والقواعد التي تحافظ على اتساقها مع نمو العلامة أو المنتج.
- 04
الاختبار والتسليم
شاشات أو تطبيقات حقيقية تُختبَر بالاستخدام الفعلي، ثم تُسلَّم الملفات المصدرية والخطوط والتوثيق، لتصبح ملكك تشغّلها.
ما يحمله نظام العلامة أو الواجهة فعلياً
العلامة المرئية هي أصغر جزء. القواعد وراءها هي ما يبقي العلامة أو المنتج يبدو كنفسه بعد عام.
العلامة
شعار مبنيّ ليعمل بحجم بطاقة العمل وعلى شاشة استاد، بلون واحد وبالألوان الكاملة، مع تحديد المساحة الخالية والحجم الأدنى.
الطباعة
زوج من الخطوط ومقياس، بحيث تبقى العلاقة بين العنوان والتسمية التوضيحية ثابتة دوماً، في كل صفحة يبنيها أي شخص لاحقاً.
الألوان
لوحة ألوان بدور مُحدَّد لكل لون، أساسي وثانوي ومحايد، تُطبَّق بالطريقة نفسها عبر كل سطح.
الصوت والحركة
كيف تبدو العلامة في جملة وكيف تتحرّك الواجهة، محدَّدان بحيث يبقيان متّسقين عبر كل عضو فريق يلمسهما.
النظام وراء هذه الصفحة هو الدليل
انظر إلى الصفحة التي تقرؤها. لوحة ألوان واحدة تُحمَل بانضباط عبر الأسطح الداكنة والفاتحة، ومقياس طباعي يصمد من عنوان رئيسي إلى تسمية توضيحية، ولغة مكوّنات رُسِمت لهذه العلامة من صفحة فارغة. صمّمناها بأنفسنا، بالطريقة نفسها التي نصمّم بها لعميل.
يظهر ذلك في أماكن أصغر أيضاً: الشخصيات التوضيحية الخمس وراء أسماء كتّابنا في المدونة تشترك في أسلوب واحد للتناسب واللون وسُمك الخط، نظام هوية صغير قائم بذاته، مبنيّ بالطريقة نفسها التي بُنِيَت بها العلامة الأكبر حوله.
Cassini
Apollo
Voyager
Juno
HuygensFive bylines for our Insights blog, one shared style of proportion, colour and line weight.
أسئلة، مُجابة ببساطة
ماذا يتضمّن ارتباط تصميم UI/UX أو الهوية التجارية؟
يسير عبر البحث، ثم المسارات، ثم النظام، ثم الشاشات المختبَرة: نتعرّف على المستخدمين والعلامة، ونرسم البنية، ونبني نظام الطباعة والألوان والمكوّنات، ثم نختبره ونسلّمه موثَّقاً لتشغّله.
كم عدد جولات المراجعة المتضمَّنة؟
نحدّد جولات المراجعة في الموجز قبل بدء العمل، بحيث تكون متّفقاً عليها لا مفتوحة. تسير معظم المشاريع بجولتَي مراجعة منظّمتين: واحدة على النظام، وأخرى على الشاشات أو الأصول المُطبَّقة.
هل نملك الملفات المصدرية؟
نعم. ملفات Figma، والخطوط (أو ترخيص استخدامها)، وتوثيق نظام التصميم تصبح ملكك عند التسليم، بحيث يستطيع فريقك فتحها وتعديلها وتوسيعها من اليوم الأول.
كم يستغرق مشروع الهوية التجارية أو UI/UX؟
الشعار ونظام الهوية عادةً أسابيع. أما نظام UI/UX الكامل للمنتج فيستغرق وقتاً أطول، بحسب عدد الشاشات والمسارات ضمن النطاق. نقدّم جدولاً زمنياً حقيقياً بمجرّد تحديد نطاق الموجز.
ما الذي يتضمّنه حزمة العلامة التجارية؟
العلامة بجميع صيغها، ونظام ألوان وطباعة، وقواعد الاستخدام، والقوالب التي يحتاجها فريق صغير يومياً، لا ملف شعار وحده.
هل تعملون مع علامة تجارية نملكها بالفعل، أم تبنون علامات جديدة فقط؟
كلاهما. تحديث العلامة القائمة أو تحويلها إلى نظام عمل شائع لدينا: نجد ما يعمل بالفعل، ونُدوّنه كقواعد، ونصلح الأجزاء التي انحرفت.
هل هذا مختلف عن خدمة تطوير الويب لديكم؟
إنه تخصص قائم بذاته، والاثنان يسيران معاً غالباً في مشروع واحد. تغطّي هذه الصفحة عمل التصميم نفسه: البحث، والواجهات، وأنظمة العلامة. أما بناء وإطلاق الموقع أو المنتج الذي يعمل عليها فهو تطوير الويب، حيث تصميم الواجهة جزء بالفعل من كل بناء.
أخبرنا بما يحتاج إلى نظام. أحضِر إلينا منتجاً يحتاج إلى واجهة، أو علامة تحتاج إلى شعار، أو هوية انحرفت منذ العرض التقديمي الذي بدأت فيه. سنريك الخطة قبل أن تلتزم. .
احجز مكالمة أو أرسِل الموجز، أيهما يناسبك. نردّ خلال يوم عمل واحد.
