انسخ إذا استطعت: تحسين مهارات تصميم واجهة المستخدم الخاصة بك باستخدام النسخ

ماذا يجري هنا؟

أنا أتحدث عن النسخ. Copywork هي تقنية استخدمها الكتاب والرسامون لعدة قرون. إنها عملية إعادة إنشاء عمل موجود بأكبر قدر ممكن من أجل تحسين مهارة الفرد. في حالتنا ، هذا يعني إعادة إنشاء بكسل تصميم واجهة المستخدم (UI) للبكسل.

مزيد من القراءة على SmashingMag:

• كيف تحول إبداعك وحل المشكلات
• استخدام سكتش لتصميم الويب سريع الاستجابة
• فهم حقوق النشر والتراخيص
• الفن الفوضوي لرسم UX
  

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

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

من الواضح أن هذه التقنية ليست علم الصواريخ. في الواقع ، سيكون من الصعب التفكير في تمرين أكثر اعتدالًا. لكنها الطريقة الأكثر فاعلية التي أعرفها لتحسين مهارات تصميم واجهة المستخدم الخاصة بي.

لكننا نتقدم على أنفسنا.

الكتاب ينسخ الكتاب

سمعت لأول مرة عن النسخ على مدونة The Art of Manliness ، حيث يقدم Brett McKay تاريخًا طويلًا لأولئك الذين استخدموا النسخ لتطوير مهاراتهم في الكتابة.

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

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

لقد كتب بالفعل إلى المؤلف الأصلي في وقت لاحق من حياته ، ليخبره بمدى إفادة التمرين. انتبه لتحليله:

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

هذا ليس تمرين عن ظهر قلب. تشاندلر مدروس للغاية بشأن الاختلافات بين عمله والأصل وهو ضليع في التفاصيل الدقيقة لأسلوب العديد من المؤلفين. هل يمكنك التحدث بوضوح عن تصميم واجهة المستخدم؟ إذا لم يكن كذلك ، فهل يمكنني أن أوصي بنسخه؟

تمامًا كما يمتص الكاتب الذي ينسخ العظماء قبله دون وعي أصغر الخيارات التي قام بها هؤلاء المؤلفون - اختيار الكلمات والصياغة والإيقاع وما إلى ذلك - يمتص المصمم الذي يقوم بالنسخ أيضًا الخيارات الدقيقة في التصميمات التي يدرسها - التباعد والتخطيط والخطوط العناصر الزخرفية. وهنا تكمن قوتها.

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

رسم السادة القدامى

إذا كنت تتجول في متحف فني ، فمن المحتمل أنك شاهدت النسخ أثناء العمل. بصرف النظر عن مكتبي ، إنه المكان الوحيد الذي رأيته فيه.

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

يجب على الفنان أولاً أن يمارس يده بنسخ رسومات من يد سيد جيد.

لماذا ا؟ لأن النسخ مباشرة من المعلم يوفر بيئة محكومة لتدريب عينك.

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

بينما لا يقوم مصممو واجهة المستخدم بنمذجة أي شيء بعد مشهد طبيعي بنفس طريقة الرسامين ، فإن النسخ يوفر طريقة مفيدة للتخلص من المتغيرات والمشتتات أثناء صقل مهاراتك.

ولكن على الرغم من أنها كانت في يوم من الأيام تمرينًا تأسيسيًا لبعض أعظم فناني العالم ، إلا أن النسخ لم يعد معروفًا. في الوقت الحاضر ، يُنظر إليه على أنه عن ظهر قلب وغير إبداعي وتفوح منه رائحة السرقة الأدبية.

إذن ، لماذا يجب على مصمم واجهة المستخدم نسخه للممارسة؟

كل شيء عن (إعادة تكوين) التفاصيل

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

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

لنأخذ مثالا. من أكثر القطع التي قمت بنسخها زيادة في المفردات هي موقع Epicurrence الرائع لـ Dann Petty. لقد استوعبت ثلاثة أشياء من العنوان وحده:

• حجم خط كبير بجنون . تضمنت نسختي الأصلية الأحرف الأولى من اسم هاواي "HI" بحجم خط 365. لم أفكر مطلقًا في سنوات عملي الاحترافي في كتابة نص بهذا الحجم. ومع ذلك ، فهو يستخدمه كعنصر مرئي ، محاذاة مع عناصر الرأس الأخرى ، حتى أنه يضع صورة بين الحروف. رائع جدا.
• دهان الطلاء على أنه "ظل" لطخة ألوان مائية تمتد عبر الجزء السفلي من الختم والرأس والأناناس. إنه في المكان الذي قد يكون فيه الظل ، كما لو كان الظل مرسومًا على الصفحة. توقف - هذه ليست الطريقة المعتادة للقيام بذلك!
• الكتابة بالأحرف الكبيرة مع تباعد كبير بين الأحرف . لا شك أن هذا النص الكبير يضيف عنصرًا قويًا من المحاذاة ، كما أن زيادة تباعد الأحرف هي طريقة كتابية لإضافة بعض الأناقة للكتابة ، لكنني أجد نفسي مدركًا لذاتي حول القيام بذلك كثيرًا. كان من الرائع أن ترى أن كل النص هنا مكتوب بأحرف كبيرة ، وكله بشكل أساسي قام بتعديل تباعد الأحرف أيضًا.

الآن ، رأيت تصميم Dann Petty قبل أن أقرر نسخه. فكرت ، "واو ، هذا يبدو رائعًا." وحتى عندما كانت عيني تتألق على التصميم ، فليس الأمر كما لو أنني استوعبت على الفور كل تقنية استخدمها. فقط عندما قمت بنسخها ، بدأت في تبني هذه الأشياء بوعي في مجموعة أدوات واجهة المستخدم الخاصة بي.

إليك مثال آخر ، رمز Skedio الذي وضعه مصمم الأيقونات الرئيسي Vic Bell. (أصولها باللون الأزرق ، ونسخها باللون الأحمر.)

كان هذا تمرينًا رائعًا بالنسبة لي ، لا سيما لأن أيقونات Vic هي خطوة أو خطوتين أكثر تفصيلاً من معظم ما أقوم به للتطبيقات التي أعمل عليها. أضافت هذا التعقيد بطريقتين خفيتين:

• ثاني ، ظل أفتح من اللون الأزرق . قارن لون تعبئة رمز "الإعدادات" (الصف 2 ، الرمز 1) بلون المخطط التفصيلي. معظم الرموز التي صممتها هي لون واحد فقط.
• عرض خط ثاني أخف . يمكنك رؤيته في "نص" رمز "العلامات" (الصف 1 ، الرمز 2) وفي السهم الموجود على أيقونة "ترقيات" (الصف 1 ، الرمز 3). لقد عشت وفقًا لقاعدة أن الاتساق هو أمر بالغ الأهمية في تصميم الأيقونات ، لذا فإن رؤية استخدام Vic لخطوط تمييز 3 بكسل في مجموعة خطوط 4 بكسل بشكل أساسي كان أمرًا رائعًا.

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

لنأخذ فكرة الظل الثاني الفاتح. إنه شيء واحد أن تقرر استخدام الظل الثاني كلون لهجة. فيما يلي أربع طرق استخدم فيها Vic الظل الفاتح في مجموعة الأيقونات هذه:

• كظل . غطاء سلة المهملات لأيقونة "حذف" (الصف 2 ، الأيقونة 3) به هذا اللون الأزرق الثانوي في ظله. يمكنك رؤية ظل مشابه ولكنه أكثر رقة أسفل الميدالية في أيقونة "ترقيات" (الصف 1 ، الرمز 3).
• كمصباح من الضوء . يُستخدم الظل الفاتح كانعكاس للضوء في العدسة المكبرة لأيقونة "بحث" (الصف 3 ، الرمز 5).
• لتباين الألوان . تستخدم Vic اللونين الأبيض والأزرق الفاتح كلونين متباينين ​​في حلقة الحفاظ على الحياة لأيقونة "التعليمات والتعليقات" (الصف 1 ، الرمز 4). نفس القصة مع قلم الرصاص الموجود أسفله أيقونة "إعادة تسمية" (الصف 2 ، الرمز 4).
• لتباين الوزن البصري . كان هذا هو الأكثر رقة بالنسبة لي. لاحظ كيف أن بطاقات الخلفية - وليس البطاقة الأمامية - لأيقونة "جميع الرسومات" (الصف 1 ، الرمز 1) وأيقونة "الطبقات" (الصف 3 ، الرمز 5) باللون الأزرق الفاتح. البطاقة الأمامية في كليهما بيضاء ، مما يجعلها أكثر تباينًا مع بقية الرمز. إذا كانت بطاقات الخلفية تحتوي على تعبئة بيضاء ، فإن التباين الحاد بين حدودها وتعبئتها من شأنه أن يشتت انتباه العين - كما هو الحال ، يتم توجيه العين مباشرة إلى البطاقة الأمامية.

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

حسنًا ، دعنا نغطي مثالًا آخر هنا.

لقد رأيت تصميم تيلور بيرين Dia de los Muertos منذ وقت ليس ببعيد ، وقد فجرني بعيدًا. إنه يقوم بعمل رائع باستخدام العناصر التي أواجه صعوبة في التعامل معها ، مثل التصوير الفوتوغرافي الجميل والأنسجة الغنية والتخطيطات البانورامية.

يرجع الكثير من هذا إلى ما أقضيه في تصميم وقتي - في الغالب تطبيقات معلومات للشركات. المظهر نظيف وبسيط ، العلامة التجارية ثابتة.

أدى نسخ نموذج Taylor's Dia de los Muertos إلى توسيع تفكيري في التصميم بعدة طرق:

• سير عمل جديد . لقد كنت مؤيدًا كبيرًا لـ Sketch منذ اليوم الأول ، وقمت بتدريس دورة UI بناءً على Sketch ، ولكن هناك جوانب سلبية لبساطتها. وبالتحديد ، منذ التحول من Photoshop إلى Sketch ، اتجهت ردود أفعالي في التصميم نحو أن يكون كل شيء مستطيلات مسطحة. في هذا التمرين ، قمت بتركيب كل خلفية تقريبًا على الصفحة بأكملها ، وكان ذلك تذكيرًا رائعًا بأن التمرير في Photoshop أثناء عملية التصميم يسمح لي بمزيد من التنوع في الأسلوب أكثر من المستطيلات الملونة البسيطة.
• تألق الأصول اللائقة . كان من بين الأصول الأولى التي كان عليّ تعقبها وإعادة تصفيفها هو الرسم التوضيحي للهيكل العظمي الذي يلعب بالبوق. عندما وجدته على الإنترنت ، شعرت بالارتباك. في الواقع ، إذا كنت أصمم النموذج الأصلي بالحجم الطبيعي ووجدت هذا الرسم التوضيحي ، فربما كنت سأفقده. ومع ذلك ، فقد بدا رائعًا في نموذج Perrin بالحجم الطبيعي. كانت مقارنة الصورة الأصلية بالحجم الطبيعي درسًا في جميع أعمال التنظيف التي يمكنك القيام بها باستخدام الأصول المتواضعة ، وفي تصور استخدامها بما يتجاوز مظهرها المباشر.
• تخطيطات كاملة العرض . على الرغم من أنه أصبح من الشائع وجود تخطيطات بانورامية تمتد على عرض الصفحة بغض النظر عن مدى اتساع الشاشة ، إلا أنني فعلت القليل جدًا من هذا بنفسي. كان هذا التمرين معززًا كبيرًا للثقة لهذا النوع من التخطيط. أثناء النسخ ، كنت أحاول تخمين تفاصيل معينة (مثل حجم الخط لقطعة معينة من النسخة) وأرى ما هو الصحيح ؛ ثم راجعت وعدلت. في المرة التالية التي أقوم فيها بعمل تخطيط بعرض 1400 بكسل ، لن أشعر بالغرابة في كون العناوين 60 بكسل.

إذن ، هل أنا جيدًا مثل Dann Petty أو Vic Bell أو Taylor Perrin الآن؟ أخشى أن يستغرق ذلك بعض الوقت - فهم من بين أفضل مصممي واجهة المستخدم في اللعبة. لكنك تعتقد بشكل أفضل أنه في كل يوم أقوم بدفع مجموعتي من المهارات والتقنيات لدمج معرفتهم.

الأسئلة الشائعة

متى تقوم بعمل النسخ؟

أبدأ العديد من فترات الصباح مع 30 دقيقة من النسخ. هذا له فائدتان:

• إنه ينشطني لهذا اليوم لأنني أتعلم أشياء جديدة عندما أستيقظ.
• إنها طريقة نشاط إيقاظ منخفض الطاقة أكثر إنتاجية من التحقق من البريد الإلكتروني أو وسائل التواصل الاجتماعي. يجب القيام بشيء ما أثناء تحضير القهوة.

30 دقيقة فقط؟ ماذا لو لم تنهي قطعة؟

ثم أواصل الذهاب في اليوم التالي. وما إلى ذلك وهلم جرا.

ما الذي يجب علي نسخه؟

انسخ شيئًا يدفع بإحدى مهاراتك إلى ما وراء مستواها الحالي . انسخ شيئًا يظهر أسلوبًا لم تشحذه.

للأفكار ، أحب تصفح Dribbble. أحتفظ بدلو Dribbble من صور النسخ - أشياء وجدتها من مصممين آخرين أريد نسخها (أو لديهم بالفعل).

يمكنني أيضًا أن أوصي ببعض المصممين الذين رسموا أسلوبهم الخاص ويقدمون الكثير لأولئك الذين ما زالوا يتعلمون الأساسيات:

• يستخدم جوناثان كوينتين الألوان والتدرجات بشكل جيد حقًا. تحقق من عمله لتلوين القطع الخاصة بك.
• بريجان باول هو الرئيس في صنع تصميمات راقية وراقية لكنها ذكورية تمامًا.
• استوديو Tubik رائع في كل شيء مشرق وملون ومبهج.

على الرغم من أنني أستخدم Dribbble للنسخ (إنها طريقة رائعة لتصفح وحفظ الصور عالية الجودة بسرعة) ، إلا أن مواقع الويب الحية تعمل بشكل رائع أيضًا. على سبيل المثال ، Blu Homes هو التالي في قائمتي!

إذا كنت مصممًا محترفًا ، فإليك بعض الأفكار الأخرى:

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

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

هل يجب علي نسخ النسخة الأصلية بشكل كامل؟

أعتقد أن النسخ يخضع لتناقص العوائد - لذلك ، لا ، ليس عليك النسخ بشكل مثالي. لكن (وهذا مهم) لا يمكنك نسخه أسوأ من الأصل. عليك أن تحقق شيئًا ترى أنه مساوٍ أو أفضل ، حتى لو لم تكن التفاصيل متطابقة تمامًا.

لن تتمكن دائمًا من الوصول إلى نفس الخطوط والموارد ، لذا فإن الاختلافات الطفيفة تتساوى مع الدورة التدريبية. لقد وجدت Identifont و WhatTheFont موارد رائعة للعثور على الخطوط المستخدمة في الصور.

هل تقوم بنسخ صور متعددة في سلسلة لتحسين مهارة معينة؟

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

هل تقوم بالنسخ في Sketch أم بتنسيق HTML و CSS؟

أنا أنسخ في Sketch. أجد أن CSS هو وسيط ضعيف للتفكير البصري ، والنسخ هو تمرين بصري. عند كتابة CSS ، تعثرت في التفكير في الطريقة الصحيحة لوضع كل عنصر صغير - وهو بالضبط نوع الشيء الذي يجب أن تقلق بشأنه إذا كنت تريد أن تكون مبرمج CSS جيداً ، ولكن تشتيت انتباه رهيب إذا كنت تحاول تحسين مهارة التصميم المرئي.

هل يمكنني وضعها في محفظتي؟

لا تفعل ذلك. الحقائب هي للتباهي بعملك. Copywork هو مجرد تمرين لتحسين مهارات التصميم لديك.

ألن يدفعني هذا إلى الانتحال؟

لا ، ولكن إليك بعض النصائح الرائعة من المصمم شون مكابي حول تجنب الانتحال:

1. استوعب كل الإلهام الذي تريده.
2. نم عليه.
3. أنتج عملك الجديد من الذاكرة.

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

هناك إجماع ملحوظ بين الفنانين والمبدعين على أن الإبداع يتعلق في الأساس بخلط ما هو موجود بالفعل. لا شيء أصلي بالكامل.

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

- تي إس إليوت

أردت سماع موسيقى لم تحدث بعد ، من خلال تجميع أشياء توحي بشيء جديد لم يكن موجودًا بعد. - بريان إينو

كل ما يكتب هو في الواقع مقتطفات. سمعت مجموعة من الكلمات سمعت سمعت. ماذا بعد؟ - وليام س. بوروز

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

هل النسخ هو حقا بالنسبة لي؟

ما لم تكن معروفًا في جميع أنحاء العالم بأسلوبك الفريد ، إذن نعم ، ربما تستفيد منه.

يغطي ذلك الأسئلة الأكثر شيوعًا التي أحصل عليها حول النسخ. إنها ممارسة بسيطة لكنها تؤتي ثمارها. إذا كنت تنسخ باستمرار القطع التي تثير إعجابك أو تكون أعلى من مستواك ، فستحصل على حفنة - إن لم تكن العشرات - من الأساليب والتكتيكات التي يمكنك تطبيقها على كل ما تعمل عليه. لقد كان باقي عالم الفن يفعل ذلك لقرون ؛ حان الوقت للمصممين للحاق بالركب.

لذلك ، في المرة القادمة التي تريد فيها توسيع مفرداتك المرئية ، افتح تصميمًا رائعًا (بالنسبة للمبتدئين ، يمكنك تصفح دلو Dribbble Copywork الخاص بي للحصول على الإلهام) ، وشغل بعض الموسيقى الجيدة ، وابدأ في إخراج وحدات البكسل.