[مقالة] التصميم علم وفير وهذا مالا يعرفه الكثير
بسم الله الرحمن الرحيمأولاً الموضُوع لَيس دَرساً عادياً مِثل باقي الدُروس المَوجودة وإنّمـا هو عِلمي بَحت، ولم أرد طرحه فِي مدونتي وفضّلت طرحه هُنـا لأني أرى ترايدنت بمثابة مِنبر للحديث لأصحاب المواقِع العرب عامة والمُطورين والمصممين خاصةً.
كنتُ قد كتبت في توقِيعي من فترة عَن درس تصميم واجهة موقع فيديو ..
والآن تجِد في توقيعي الجملة الشَهيرة
“If you want to teach the best,(first) You have to learn from the best”
فعلاً ، إذا أردتَ أن تُدرِس الأفضَل فعلَيكَ أولاً أن تتعلَم مِن الأفضَل.
وكَـانت هذه هي البداية !
ولكِن قَبل أن أدرِك أهميّة هذه الجُملة ، كُنت قد بدأتُ فِعلاً في إنشاء هذا الدَرس،ولكنّي بَعد أن سجّلت لمُدّة ما يقرُب من نِصف ساعة( وكَـان هذا هو الجُزء الأول من الدرس لتصميم الهيدر فقَط ) وجدتُ أنّي لم أُضِف جَديداً !
فكَم مِن درسٍ لتصميم واجهة قدّمهُ مَن هو أمهُر وأحرُف منّي في المعهَد أو غيره،وتقريبـاً كُلهُم متشابهِين فِي الفِكرة والإختلافُ فقَط فِي الشَكل النِهـائي أو ترتِيب الخطَوات.
فقُمت بحَذف هذا الدَرس بِكُل بَسَاطة !
وبدأتُ أفكّر مِن جَديد فِي الجُملة السَـابِقة ..
وبالفِعل بدأتُ بِالتطبيقْ ..
وقرأتُ الكَثير عَن التَصميم ، لا أقصُد دروسـاً فيه ، ولكِن عَن عناصِر التَصميم وكيفية الإرتقاء بِهْ !
طَبعاً كُل ما قرأت مِن المواقِع الأجنبية وخاصة مَوقِعPSDtuts لأن المواقِع العربية لا تهتَم بِمثل هذه المجالات (إلا من رَحِم ربّي
).
وواللهِ كَرهت أن أنفَرِد بِهذا "العِلم" وَحدِي وأحببتُ أن أشاطركم إياه ..
آسف على الإطالة فِي المقدّمة ولكنّي لا أضيع وقت سيادتكُم فهي والله مقدّمة مُهِمّة في نَظري.
الآن قُم بعمَل كوب شاي وركّز معي جيداً
سنُحدّد بإذن الله العَناصِر التِي سنتحدث فيها وتتلخصُ فِي الآتي :
- نبذة بسيطة عن الويب2.
- أهميّة متابعة الأفكار الجديدة والدُروس.
- الخطوات المُتّبعة مِن الإبتداء للإحتراف.
- أهميّة التحضير للعَمَل.
- البُعد عَن المألوف.
- تناسق الألوان.
طَبعاً الحَديث سيكُون بإيجاز شَديد والغَرض مِن الموضُوع هو أخذ فِكرة عَن كُل عنصر ذكرتُه لأننا لو أفردنا الحديث لعُنصر وأوفيناه حقّه لاحتجنا لموضوع منفَصِل لكُل نُقطة،ولَكِن سيطُول الموضُوع قليلاً ولَكِن بإذن الله لَن يأخُذ معَك مِن الوَقت كَثيراً وستستفادُ بِه.
- كيفية التحكّم في جذب إنتباه الزائر لعناصِر دون الأخرى.( Areas of Attractions)
أولاً : نبذة بسيطة عن الويب2 :
طَبعاً الويب2 لَم يُحدَد له تعريف صَريح عِند نشأته،ولكِن مِما قرأتُ فالخُلاصة أن الويب2 هُو مُحاولة خِدمة زائر الموقِع بِشكل أفضَل وإعطائه أكبَر قَدر مِن الصَلاحيات والخيارات التِي تؤهلة للإستفادة مِن الموقِع بالشَكل الأفضَلْ.
بِمعنى أن الزائر يستطيع حذف مالايفيده في موقِعَك أو إخفاءه فمثلاً في المنتديات بإمكان الزائر إذا لم تستهويه أقسام التصميم أن يقُوم بإخفائها عَن طَريق الضغط على هذا السَهمْ
أذكُر هُنـا شخص من أهم الأشخاص الذين تعلمت منهم عن التصميم اسمه Collis وأنقل لكُم كلامه حَرفياً عَن أشهر المواقع المصممه بالويب2:
“Unlike with Photoshop effects, Web design can't really be taught in a set of easily repeatable steps. If you look at most great Web designs, they are not difficult to reproduce technically. You could probably screenshot a design, put it into Photoshop and then replicate the same design layer by layer. The trick, however, is coming up with that design in the first place.”
ويقول أن تصميم الويب لا يمكن حقيقة أن يدرّس عن طريق الخطوات المتكررة,لأنك لو نظرت لأكبر وأهم المواقع المصمَمَة ستجد أن تصميمهم ليس صعباً جِداً ولا يحتاج لمهارة فائِقة,إنّك حتى تستطيع أن تنتج عمل مثله تماماً !ولكِن الخدعة هي أن تأتي بالفِكرة الجديدة في المقام الأوّل مهما كانت بسيطة.
وأمّا الـ CSS إختصاراً لـ Cascading Style Sheets أو ما يسمّى بصفحات الأنماط الإنسيابية فسأكتفِي بذكر عملها وهو فَصل التنسيق عن التصميم ، بمعنى أن عند تصميم أي صفحة مثلاً يجِب وضع لون الخط وحجم الخط المُنـاسِبَيْن ، فماذا لو قُلنا أننا نُصمّم 20 صَفحة بِنَفس اللون والحجم ونوع الخَط وبعدما إنتهيت من التصميم فاجئك العَميل بأنّه لديه مشكلة خطيرة في التصميم ! ألا وهي حجم الخَط !! وأنّه يريد تعديل حجم الخَط مِن 11pt إلى 12pt !! فهَل ستفتح كُل صفحة من العِشرين وتُعدّل قيمة حجم الخَط إلى الحجم الجديد !
هُنـا يأتي دور الـ CSS في تسهيل هذا الأمر فلو كنت قد إستخدمت الـ CSS في التصميم لعدّلت مرة واحِدة فقَط في القيمة من 11 إلى 12 وستقوم الـ CSS بدورها بتعديل حجم الخَط في العِشرين صَفحة.
ولَن أطيل النفَس في هذه النُقطة كما ذكرتُ سابِقاً.
ثانياً : أهمية متابعة الأفكار الجديدة :
بِكُل بَساطة فإن لَم تُتابِع أفكار المصممين الجديدة وتصاميمهم فأنت كالإنسان البِدائي الذي لتوّه قد عَرِف النار وإلى الآن لم يستخدِم الكهرباء !
فالمُتابعة وعدَم الإنقطاع تُبقيكَ على إتصال دائم بِما يحدُث حولَك مِن تغييرات.
ثالثاً: الخطوات المتّبعة مِن الإبتداء للإحتراف :
أذكُرها بإختصارِ شَديد دون تأصيل وتفصِيل ،
قيّم نفسَك فِي أي مرحلة أنت من هذه المراحل الـ14 وأكمِل حتى تَصِل إلى المرحلة الأخيرة بإذن الله.
- فتح الفوتوشوب ومحاولة التعرّف على أدواته وتجربتِها وحدَك بدون دروس.
- البِدء بُمشاهدة دروس المبتدئين وعدَم الإستعجال في التعلّم.
- اعلم يقيناً بأن الذي يعلّمك كان من فترة ليست بالطويلة يتعلّم من غيره.
- مُحاولة تجريب أشياء جديدة وتنفيذ الأفكار التي تطرأ في عقلِك وعرضها في معرض تصاميم وإبداع الأعضاء أو أي معرض آخر لتأخُذ نَقد المُصممين ولا تأخُذ رأي من لا فِكرة لديه عن التصميم حتى لا يحبطك !
- حاوِل مرة والثانية والثالثة وستتحسَن في كُل مرة عَن السابقة وستتعلم أشياء جديدة.
- تابِع دروس المُبتدئين حتى تَمِل وتشعُر أنّك لم تعُد تستفيد منها.
- حاوِل تقليد تصاميم غيرِك ولا أقول سرقة الحُقوق لكِن حاول تقليد التصميم وسأشرح هذه النُقطة ببعضٍ من التفصيل.(يجِب أن يكون للمصمم عَيناً تجريدية !
بِمعنى أن يرى مالايراه الآخرون ..
فالشخص العادي يرى هذا مُجرّد زِر(حِلو) !
لكِن المُصمّم يرى أن هذا زِر نَعَم ولِكن في شَكل بيضاوي قَليلاً وبِه إنعكاس زُجاجي وفي يسار الزِر يوجَد جُزء مِن دائرة خضراء والكِتابة الموجودة على الزِر ليسَت عادية ولكنها كِتابة محفورة ,, إلخ.
كُل هذا يراهُ المصمم بـ"العين التجريدية"فلكِي يقلّد هذا الزِر عليه من تجريد كل شكل فيه وإرجاعه إلى أصلِه حتى يتمكن من تصميم نفس الزِر !)- شاهِد دُروس المُحترفِين وطبّقها ولا تكتفي بالمُشاهدة فالتطبيق أهم شيء.
- أثناء تطبيق الدُروس تابِع التصاميم في
- حاوِل ألا تكتفي بِمشاهدة تصاميم العرب فقَط بل شاهد تصاميم أجنبية لكي ينمو ذوقك وإليك بعض من معارض التصميم الأجنبية :
- إذا وجدت أنّك وصلت للإحتراف وشعرت بتحسّن مِن أول عمَل صممته إلى الآن فعليكَ بِتقدِيم الدروس فلاخير فِي كاتِم العِلم !
- عَليكَ بِنقد تصاميم غيرِك من المُبتدئين والمُحترفِين وإعطاء وجهة نظرك.
- وأخيراً عِندما تصِل إلى الإحتراف بإذن الله فكُن متواضعاً ولا تنسَ أنك كُنت في يومٍ مِن الأيام مبتدىء فمَن تواضع لله رفعه.
- ولا تنسَ أن تُتابِع الدروس والأفكار الجديدة ولو حتى بالقِراءة العابِرة.
طَبعاً هذا الخطوات مِن كتابتي وليس قرآنـاً !
رابعاً : أهمية التحضير للعمل :
هذه النُقطة مهمة جِداً جداً جداً !
فإن لم تحضّر لتصميمك كأنك ذهب لإلقاء خُطبة أمام جمع مِن الناس بدون إعداد مُسبق لهذه الخُطبة (خطبة إرتجالية).
حتّي هذا الموضُوع الذي تقرأه قد قُمت بتحضِيره وتلخيص نقاطِه في ورقة قَبل البدء بكتابته.
وتنقَسِم الإستفادة مِن هذه النُقطة في موطنين ,
وهُنـاك طُرق كَثيرة للتحضير للتصميم وأنا أرى أفضلهُم هي الرسم على الورَق !
- تدوين الأفكار التي تطرأ على عقلك.
- تنظيم التصميم والإعداد له قبل تنفيذه.
نعَم فما أسهلها وما أفيدها والله من طريقة،التحضير على الوَرق يكون مِثل هذه الرَسمة
طبعاً ها الرَسمة مُحدد فيها فقَط الشَكل العام للتصميم وليس التفاصيل.
خامساً : البعد عن المألوف :
بِالطَبع أساس التصميم فِكرة !
وإن لم تكُن الفِكرة جديدة فلا أهمية للتصميم ، بمعنى أنّك إذا اكتفيت بتقليد تصميم فلان أو علان أو أخذ جزء من تصميم هذا على ذاك والإدعاء بأنّك ابتكرت فأنت واهِم !
يجِب أن تبتعِد كُل الإبتعاد عَن المألوف ! فكلّما ابعتدت عن المألوف أخرجت فِكرة أجمَل وأنقى وأجدد.
سادساً : تناسُق الألوان :
تناسُق الألوان هو أحَد أهَم العناصِر في التصميم الجيّد.
وأكتفي بذِكر نقتطين في غاية الأهميّة:
- إدخال أكثَر مِن لون في التصميم والبُعد عَن اللون الواحِد ( فقَد تجِد شخصاً صمم واجهة كاملة باللون الرُمادي وتدرجاته من الأبيض للأسود ولم يُدخِل فيها لوناً آخَر وهذا يسبب الفتُور وعدَم جَذب الإنتباه).
- قَد يشكُو البَعض من أنّه لا يملُك الحِس الذي يختار به مجموعة من الألوان المُتناسقة والجوابُ هو أن هذا الحِس أو الذوق ينمو مَعَ متابعتَك للكثير من التصاميم لذلك تجدني أركّر على نقطة المتابعة وأكررها مراراً وتكراراً.
سابعاً : كيفية التحكّم في الزائِر وجذب انتباهه لعناصِر دون الآخرى Areas of Attractions :
في الحَقيقة هذه النُقطة في غاية الأهميّة والمُشكِلة أن الكَثير من المُصممين العرب لا يعرفون عنها شيئاً !
وأنا أيضاً لم أكُن أعرِف عنها شيئاً حتى قرأتُ مقالة لِـCollis يتحدثُ في ثناياها عَن هذا الموضُوعْ.
ألَم تُلاحِظ يوماً في أحَد المُنتديات أو المواقِع أن وجدت كلمة التسجيل باللون الأحمَر ؟
ألم تسأل نفسَك لِماذا ؟ بالطبع ليتجه عين الزائِر عليها في المقام الأول !
وأهمية هذه النقطة تتلخص في أن يتحكم المُصمم في الأشياء التي يراها الزائِر عند رؤيته للتصميم بالترتيب ، كأن يقول المصمم مثلاً "أريد أن يرى الزئر أول شيء شعار الموقع , بعد كذا الأزرار , ثم محتوى الموقِع , إلخ .."
وهذا التحكّم يعتَمِد على بعض النِقاط :
- أثبتت بحوث علميّة أن الإنسان إذا نظَر لصفحة فسيبدأ بالنظر إلى يسار الجُزء العِلوي ثُم إلى يمينه ثُم إلى يسار الجزء السفلي ثم إلى يمينه ، وأبحاث أخرى قالت بأن الانسان ينظُر ليمين الجُزء العلوي ثُم إلى يمين الجُزء السُفلي ويصعد مرة أخرى إلى يسار الجُزء العلوي ثم إلى يسار الجُزء السُفلِيْ.
- الدّقة والوضوح والإهتمام بالتفاصيل تظهَر في العديد مِن الأشياء نَذكُر منها الخطوط والصوَر ، فالدّقة في الخُطوط هي في إستخدام خطوط البكسِل في المقام الأوّل فهي أكثر الخطوط دقة ثُم إستخدام باقي الخُطوط بخاصية Sharp فستلاحِظ أنّك إذا استخدمت خاصية None في إعدادات الخَط تنعدِم الدقّة تقريباً
، لاحِظ هُنـا الفَرق واضِح بين يمين الزِر ويسارُه
نُقطة أخرى وهي تنظيم العَناصِر بوضع خطوط بينية لاحِظ هُنـاوهُنـا نكون قد وصلنا لنهاية الموضوع، أعلم وربّي أني قد أطلتُ عَليكُم لكِن والله ما بغيت غير إفادتكُم بما أعرِف ، وبِالطبع هذا كله كما ذكرت آنفاً كان مجرّد تلخيص لنقاط عديدة أحببت طرحها هُنا بالمعهَد لكُم ويأتي التفصيل في مواضيع قادِمة بإذن الله ، هذا وإن كان مِن توفيقٍ فَمِن الله وحده وإن كان من خطأٍ أو سهو فمنّي ومِن الشَيطان.
- وطَبعاً مِن أهَم النِقاط حَجم ولون العنصُر ، فلَو فرضنا أن ألوان التصميم كُلها باللون الرمادي وتدرجاته والشِعار باللون الأحمَر مثلاُ وحجمه أكبر نسبياً من باقي العناصِر ، فستتجه عين الزائر إليه بدون تفكير !
- ونقطة أخيرة وهي إدراج عناصِر جاهزة في التصميم كأيقونات جاهزة للرئيسية على شكل منزِل أو أيكونة الـ RSS وسكرابز وهذه العناصِر تُعطي التصميم بعضاً من الحيوية والنَشاط وجذب الإنتباه.
أخيراً , كتبتُ هذا الموضوع بالمعهَد هُنـا وكلّي أمل في إستفادتكُم فمن لم يستفِد بالموضوع فلا يضَع الـ "مشكور" وبإنتظار استفسارتكم.
يُسمَح بِنقل الموضوع لكِن بدون تغيير حَرف فِيه ويعلمُ الله كَم تَعِبت عليه.
كُتِب أصلاً بواسطة
أستودعكُم الله الذي لا تَضيع ودائعُه ,
السَلامُ عليكُم ,
المشاركة الأصلية كتبت بواسطة Ahmed_SF 
