لوحة المتصدرين

تنبيه: الاختلافات في التفاصيل. بالنسبة للعين غير المدربة، فإنّ التصاميم المسطّحة (flat designs) والتصاميم الماديّة (material designs) تبدوان متشابهة جدًّا. أرجو أن لا تشعر بالإهانة عندما أقول ذلك، فمهما كنت مشجّعًا لأحد التوجّهين على حساب الآخر، فعليك أن تتفق معي على أنّ الاختلافات بينها طفيفة جدًّا. أو يفترض بي أن أقول: طفيفة ولكنّها هامّة. ولكن لنبدأ من البداية ولننظر إلى الحقائق عن كلّ من النوعين من التصاميم. أما بالنسبة للتصاميم المسطّحة، فقد غطّينا مبادئها الرئيسيّة وتاريخها (حتى أنّنا جلبنا 10 مصممين عظماء ليدلوا بدلوهم في الموضوع وليشاركوننا آراءهم حول سيطرة التصاميم المسطّحة على ساحة تصميم المواقع). ولتذكيرك، فإن التصاميم المسطّحة نوعٌ من التصاميم التي جُرِّدَت من كل العناصر ثلاثيّة الأبعاد. إنها تُزيل أيّة أشكال تحاول أن تحاكي العالم الحقيقيّ من هذه العناصر. كلّ ما هو جزء من تصميم مسطّح يبدو كما لو كان ملقىً على سطح واحد منبسط. ومن هنا جاءت التسمية. أما الآن، فلنقارن هذا مع التصاميم الماديّة. أولًا، التصاميم الماديّة مُنتَج ذو علامة تجاريّة (بطريقة ما). ما أعنيه بهذا هو أنّها تشكّلت على أيدي Google، وكل المعايير تم وضعها من طرف Google، وكل التغييرات على المفهوم تتحكم بها أو تقبلها Google. رغم هذا، إلّا أنك ما زلت حرًّا بعمل تصاميم ماديّة دون الحاجة للإشارة إلى Google بأيّ طريقة. يمكنك إلى حدّ ما أن تعتبر التصاميم الماديّة نقطة التقاء تصاميم الوِب، حيث أنه تصميم مسطّح في برنامجك الرياضيّ الخاصّ للتقوية والتطويع. اعذرني على هذا التشبيه. وتبعًا لهذا القَول، فإن ما ذُكِرَ أعلاه مجرد نظرة عامّة على ماهيّة التصاميم المسطّحة والماديّة، لذا هيّا بنا نغوض أعمق قليلًا الآن ونحاول تحديد بعض الاختلافات البسيطة والمبادئ التي عليك أن تلتزم بها عندما تصمِّم تصاميم مسطّحة أو ماديّة، حسب الحالة لديك. ولكن لن اكون وحدي من يناقش هذا الموضوع، فقد دَعَوتُ بعض خبراء تصميم المواقع لمساعدتي، وفيما يلي السؤال الذي سألتهم إياه: ما الذي يمكنك اعتباره الاختلافات الثلاثة الأهم بين التصاميم المسطّحة والتصاميم الماديّة؟وفيما يلي ما سنقوم به. أولاً، لنلقِ نظرة على الاختلاقات التي ذكرها الخُبراء، ثم لنتحدّث عن بعضها بتفصيل أكثر. وفي النهاية نقوم بتجميع كل شيء معاً لنخرج بقائمة للمزايا والمساوئ لكلّ من نمطي التصميم. الاختلافات الثلاثة الأهمّ بين التصاميم المسطّحة والتصاميم الماديّة – الخبراء يُدلون بدلوهم التصاميم الماديّة مفهوم معرّف جيدًافي وقت مضى، قدِمَت جوجل بمقدمتها للتصاميم الماديّة، والتي هي وثيقة متعمِّقة جدًّا تناقش مبادئ وأهداف وتعليمات التصاميم الماديّة. ذاك المستند مستمرٌّ في تلقّي التحديثات. لذا يمكنك عرضه في أيّ وقت لتعلم الخصائص والطبائع للحركة بأكملها. لم قدّمت جوجل التصاميم الماديّة؟ يمكن أن تكون الأهداف كثيرة، لكن أحدها يكمن في توحيد الطريقة التي تظهر فيها الأشياء على أجهزة أندرويد المختلفة (التي تستخدم شائات عرض وأجهزة مختلفة). جعل تطبيق يظهر متشابهًا على أجهزة عِدَّة مهمّة صعبة على المطوّرين، والتصاميم الماديّة تعمل جيدًا كمجموعة من التوجيهات لتسهيل هذه المهمّة. ولهذا، فالأمر المختلف بين التصاميم المسطّحة والماديّة هو أنّ التصاميم الماديّة مفهوم محدّد جيّدًا، بينما التصاميم المسطّحة نتيجة اختباريّة لعدد من أعمال التصميم المستمرة في اتجاه البساطة المطلقة. التصاميم المسطّحة كانت ردّة فعلإضافة إلى ذلك، فقبل أن تأتي التصاميم المسطّحة إلى حيّز الوجود – أو بالأحرى القول أنها تطوّرت إلى شكلها الحاليّ - كانت محاكاة الواقع التوجّه الشائع لتصميم المواقع. ولكن الواقعية (المبالغ فيها) بدت أكثر مما يحتمل للأعمال الحديثة، خاصة عند أخذ قابلية الاستخدام على الأجهزة النقّالة وعلى أجهزة متنوعة بعين الاعتبار. ماذا كان الردّ على ذلك؟ التصاميم المسطّحةباستخدام التصاميم المسطحة، لم يعد على المصممين أن يقلقوا بشأن جعل مشاريعهم تبدو واقعيّة. بدلًا من ذلك، يمكنهم أن يركّزوا على الفعالية والأداء. تعيد التصاميم الماديّة جانبًا من تقليد الواقعرغم أنّها فعّالة، إلّا أنّ مشكلة التصاميم المسطّحة هو أنّها ليست النوع الأكثر بداهة بين أنواع التصميم، وخاصّة عندما يتعلق الأمر بالمستخدمين غير العارفين لواجهات المواقع. بالنسبة لهؤلاء الناس، فإنّ خيارات التصميم والواجهات تجعل التفاعل أكثر صعوبة، خاصة عندما تكون قريبة جدًّا إلى مظهر عدم الوجود. التصاميم المادية تضيف الفيزياءتقول Google: كلمة "ماديّة" مجاز. أحد المبادئ الرئيسيّة للتصاميم المسطّحة تقليد الطريقة التي تعمل فيها الأشياء في العالم الحقيقيّ، ولكن عمل ذلك بطريقة بسيطة للغاية. وبعبارة أخرى، عمل ذلك بطريقة تستخدم الواقعيّة كأداة فقط لجعل أدمغتنا معتادة أكثر على كيفيّة عمل الواجهة، ولكن – في نفس الوقت – عدم جعلها تبدو واقعيّة زيادة عن اللزوم لمجرد ذلك إلى درجة أن تنتحل شخصيّة المقابل الحقيقيّ للعنصر. فمثلًا، زر يبدو كهذا ما زال يظهر كزِرّ: زِر ماديّ من تصميم Mauro Marini على Behance. ليس عليه أن يذهب بعيدًا في تقليد الواقع. انظر لهذا: زر تشغيل نظيف مصمم بـ photoshop من تصميم Pixel Mustache على Behance مزايا ومساوئ التصاميم المسطّحةبأخذ كل ما سبق بعين الاعتبار، لنُسَمِّ بعض المزايا والمساوئ للتصاميم المسطّحة: المزايا:بسيطة وبالحدّ الأدنىأقل استهلاكًا للموارد، وينتج عن ذلك وقت تحميل واستهلاك سرعة أقلّ.تبدو في العدة متطابقة على كلّ الأجهزة، وهي مناسبة للأجهزة النقّالةتتخلص من كلّ العناصر التي لا تخدم غرضًا معيّنًا، مما يعني أنّ كلّ ما يتبقّى على الشاشة ذو هدف.إيجابيّة. هذا مرافق – نوعًا ما – للمفهوم نفسه. ما أعنيه أنّه عندما وجدت التصاميم المسطّحة بالأساس بألوان وأشكال عَنَتْ أن يكون إبراز العنصر مرئيًّا مرتبطًا باستخدام المصمّم لألوان بارزة تجذب انتباه المستخدم بطريقة صحيحة. ومقارنة بغيرها، نادرًا ما نرى تصاميم مسطّح ذات لون رماديّ بَحْت.المساوئ:قد تكون بسيطة زيادة عن اللازم في بعض الأوقاتمحدودة. لا يمكنك أن تفعل الكثير في ظل التعقيدات المرئيّة وهويّة العلامة التجاريّة.ليست بديهيّة. المستخدمون غير المطّلعين يجدون صعوبة في التفاعل مع التصاميم المسطّحة، وهي ليست واضحة جدًّا حتى للمستخدمين الملمّين.يصعب إيصال فكرة تتعلق بأن الموقع فريد من نوعه. إلى حدّ ما تستخدم كلّ المواقع مظاهر تصاميم مسطّحة متشابهة.مزايا ومساوئ التصاميم المادّيةأما الآن فمع مزايا ومساوئ التصاميم المادّية. المزايا:تجعل كل شيء حقيقيًّا بإضفاء بعد ثالث (Z-Axis).هي معايير واضحة يتم تحديثها باستمرار. يمكنك استخدام تلك الموارد للحصول على إجابات حول أيّ شكّ أو شأن لديك اهتمام به عند عملك على مشروع جديد.بديهيّ أكثر. أسهل في الاستخدام من التصاميم المسطّحة لكلّ من المتخدمين الجدد/غير ذوي الخبرة والمستخدمين المتمرّسين.تدعم الحركة في تصاميم الوِب. كما قلنا في المرة الماضية، فإنّ الحركة تساعد المستخدمين على فهم ما يجري على الشاشة والتعرف على العناصر الأهمّ التي عليهم أن ينتبهوا إليها.العيوب:بَنتها وتتحكم بها – إلى حدّ ما – شركة واحدة وهي Google. (ليست مشكلة يوميّة).تستغرق وقتًا أطول لتطويرها، وهذا بسبب وجود المحور الثالث (Z-axis).تدعم الحركة في التصاميم، مما يعني أنّ عليك تضمين الحركات من أجل جعل عملك تصميمًا مادّيًّا حقيقيًّا.مسطّح أم ماديّ؟السؤال الذي يبقى حاضرًا هو إذا ما كان أحد التوجهين خيارًا أفضل من الآخَر… لذا، هل عليك استخدام أحد هذين النوعين من التصميم وتجاهل النوع الآخر؟ الإجابة البديهيّة هي لا. كلاهما لهما مكان اعتمادًا على الهدف مما تبنيه. لتبسيط الأمر بأكمله، يمكننا القول أن التصميم التقليديّ المقلّد للواقع الحقيقيّ هو تقليد لما كانت عليه الأمور، وهي انطباع واقعيّ لعناصر للعالم الحقيقيّ من أجل جعل واجهات التصميم تبدو مألوفة. أما التصاميم المسطّحة فهي بيئة مبسّطة تعتمد كثيرًا على معرفة المستخدم لواجهات التصميم عمومًا، وتتخلص من كل ما لا يخدم هدفًا وظيفيًّا. أما عن التصاميم الماديّة فتحاول أن تزوج بعض أفكار التصاميم التقليديّة للتصاميم المسطّحة، ويهدف ذلك إلى تقديم واجهة محسّنة للعالم الرقمي تُذكّرنا في نفس الوقت بالعالم الحقيقي بما يكفي لجعل الواجهة بديهيّة. ما رأيك؟ هل أنت محبّ لأحد هذين التوجّهين على حساب الآخَر؟ تفضّل وشاركنا رأيك في التعليقات. ترجمة -مع شيئ من التصرف- للمقال: ?Flat Design vs. Material Design: What Makes Them Different لصاحبه: Karol K.

سنتعلم من خلال متابعة خطوات هذا الدرس، تصميم نصٍ بتأثيرٍ بلاستيكي، باستعمال أنماط الطبقات وبعض تقنيات برنامج Photoshop. وهذه نتيجة درسنا اليوم: افتح مشروع جديد على Photoshop بالإعدادات التالية: الأبعاد: 1000x1000pixels. الدّقة: Resolution 720Dpi.نمط الألوان: Color Mode RVB8bit.نضيف طبقة جديدة ثم بأداة اللون المتدرج (G) نملأها بتدرج اللون الرمادي #e6e6e6 نحو الأبيض: ثم باستعمال أداة النص (T) نكتب النص المراد كتابته باستعمال الخط "Freestyle Script" وحجم 345pt: ننسخ طبقة النص ثلاث مرات بالضغط على الاختصار Ctrl+J للحصول على أربع طبقات خاصة بالنص: في خصائص الدمج Blending Options الخاصة بالنص الأول: خصائص الدمج Blending Options الخاصة بالنص الثاني: ثم خصائص الدمج للنص الثالث: وبالنسبة للنص الأخير: نضيف نص آخر-في حالتنا نضيف Academy-وبنفس الطريقة السابقة لنحصل على: نضيف بعض الأشكال البيضوية كما في الصورة: ثم نطبق عليه نفس خصائص الدمج لنحصل على الصورة النهائية: ترجمة -وبتصرّف- للمقال: Créer un magnifique effet de texte en plastique avec Photoshop.

سنتعلم في هذا الدّرس كيفية تصميم أوراق الملاحظات ووضعهم فوق بعض، بخطوات بسيطة. هذه هي النتيجة النهائية بعدد تتبع كامل خطوات الدرس: افتح مشروعًا جديدًا على Photoshop بالإعدادات التالية: الأبعاد: 500x500pixels.الدّقة: Resolution 720Dpi.نمط الألوان: Color Mode RVB8bit.نبدأ بجلب الصورة التالية للمشروع لنستعملها كخلفية (اضغط بالزر الأيمن للفأرة لحفظ الصورة): نرسم بأداة الشكل المستطيل (U) ونرسم باللون #e0cd73 الشكل المبين في الصورة: بعد ذلك نذهب إلى القائمة: Menu > Filter > Noise > Add Noise من نافذة خصائص الدمج Blending Options نقوم بما هو موضّح في الصور التالية: ثم نجلب الصورة ونخفض في قيمة الشفافية Opacity إلى القيمة 21 وLinear Burn: ندمج الطبقتين (Ctrl+E) ثم باستخدام الاختصار Ctrl+T نميل الطبقة المحصل عليها كما في الصورة: ننسخ الطبقة ونديرها قليلاُ جهة اليمين، نعيد هذه العملية (أي النسخ + الدوران) 6 مرات حتى نحصل على الشكل التالي: ثم ندير الطبقة الأخير مرة ثانية لكن هذه المرة جهة اليسار كما في الصورة: نحدد الطبقة الأولى: نذهب إلى نافذة خصائص الدمج: لنحصل على تصميم أوراق لتدوين الملاحظات: ترجمة -وبتصرّف-للدّرس: Concevoir un bloc de feuillets Post-it.

سنطبق من خلال هذا الدرس، طبقةً من الصخور ثلاثية الأبعاد 3D على نص باستعمال برنامج Photoshop. وهذه صورة للنتيجة النهائية لما سنتحصل عليه بعد إكمال الدرس: للبدء عليك بتحميل الحزم التالية: فرش النجوم، صورة الصخور. بعد ذلك افتح مشروع جديد على Photoshop بالإعدادات التالية: 1200x17001pixels Resolution 720Dpi Color Mode RVB8bit بخلفية ذات لون رمادي قاتم #0b0b0b. أنشئ طبقة جديدة New Layer بالضغط على (Ctr+Shift+N)، وبأداة الريشة (B)، قم بتعيين الفرش Brush التي قمت بتحميلها في الحزمة أعلى الدرس - فرش النجوم- وقم برسم سحب مجرّية كما في الصورة: بعد ذلك نخفض قيمة شفافية الطبقة Opacity إلى 23%. نفعل نفس الشيء وبنفس الطريقة مع باقي الفرش المحملة من الحزمة. في طبقة أخرى نرسم بفرش النجوم بنفس الطريقة السابقة. الآن، بواسطة أداة النص (T) نضيف النص المراد عمل التأثير عليه، في حالتنا سنأخذ كلمة "Hsoub"، نوع الخط Impact. بعد ذلك، قم بجلب الصورة التالية للمشروع وضعها فوق النص – الصورة مرفقة في الحزمة. الآن نستعيد تحديد النص، ولفعل ذلك نضغط Ctrl ثم طبقة النص في آن واحد. بعد ذلك، اضغط (Ctrl+C) لنسخ الجزء المحدد ثم (Ctrl+V) لإنشاء طبقة جديدة للنص مع صورة الصخر –أي النص بشكل الصخر- ثم نزيل طبقة الصورة الصخرية التي جابنا من قبل وطبقة النص الأصلي ونحتفظ بالطبقة الجديدة (النص الصخري) لنحصل على ما يلي: نمسك أداة الممحاة E) Eraser) بشكل دائري مع قيمة 0% في خاصية Hardness ونقوم بمسح محيط الأحرف للحصول على النتيجة التالية: بعد ذلك ننسخ طبقة النص (Ctrl+J) ثم نضيف طبقة اعدادات المستوى adjustment layer levels ثم نضعه على شكل قصاصة للأحرف Clipping Mask وذلك بالذهاب إلى :> New Layer Adjustment>Levels Menu > Layer ثم Release Clipping Mask > Menu > Layer اجلب صورة الصخر في مشروع جديد، وباستعمال الأداة lasso (L) ونعمل تحديد كما في الصورة: بعد ذلك نجلب الجزء المحدد لمشروعنا عن طريق قص / لصق. نعيد نفس العملية على باقي الأحرف فنحصل على ما يلي: نضيف بعض القطع الصغير في جنبات الأحرف. بعد ذلك نقوم بتحديد جميع قطع الصخر وندمجها مع بعضها البعض (Ctrl+E)، نأخذ أداة الإضاءة (O) ونقوم بتظليم الأجزاء الخارجية للأحرف لعمل تأثير تلاثي الأبعاد 3D (مكان التظليم في العلامات بالأحمر). الآن نضيف طبقة بلون متدرج وذلك بالذهاب إلى :> New Layer Adjustment>Gradient Map Menu > Layer. ثم نغير خصائص الدمج Blending Options إلى Screen وقيمة الشفافية إلى 25%. للانتهاء نضيف طبقة بلون متدرج وذلك بالذهاب إلى :> New Layer Adjustment>Curves Menu > Layer وهذه نتيجة درسنا اليوم ترجمة -وبتصرّف- للدرس Un Effet de Roche sur Texte