السلام عليكم ورحمة الله وبركاته

قبل قرائة هذا الموضوع أرجوا منك الإطلاع على الجزء الأول من الرابط التالي:

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

وكما قرأت في العنوان فهذا الجزء سيتحدث عن مرحلة التصميم ولن يكون هناك ذكر للكود البرمجي، وهذه المقالة ستكون

مصحوبة بمثال عملي وهو تصميم TRUST الخاص بالمحامين وممثلي القانون والمستشارين ويمكنك الإطلاع عليه من الروابط

أسفله:

لمشاهدة الصور:

http://themeforest.net/item...

لتحميل الصور:

من بين أكبر المشاكل التي تواجه المصممين نجده يتسائل عن كيف يبدأ في تصميم مشروع سواء كان عمل خاص أو لسوق ثيم فورست لهذا

سنقسم المقالة لأكثر من جزء ونوضح كل واحد على حدى وهذه هي المواضيع التي سنتحدث عنها في هذا الجزء:

1 - جمع البيانات عن التصميم

2- تحليل المحتوى

3- الإستلهام

4- الألوان

5- الصور

6- الخطوط و الشعار

7- البدء في التصميم

1 - مرحلة جمع البيانات عن التصميم:

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

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

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

ويجب أن تّأخذ بعين الإعتبار حداثة التصميم لأن المعايير تتغير باستمرار ويجب أن تكون مواكب لها.

دراسة السوق تعتبر من أهم الأسباب في نجاح التصميم الذي تقوم به لأنك ستعرف ما يباع أكثر ومالايباع وكذا ماذا يريد المشترين

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

والتحديثات في الموضة (Trend) أو فكر التصميم سيجعل تصميمك يباع؟

في حالتنا سنتكلم عن كيف تصمم موقع خاص بالمحامين لذا تابع معي لتفهم الكلام الذي قيل بالأعلى أكثر.

دخلت إلى موقع ثيم فورست وبحتث عن مواقع وتصاميم المحامين والمستشارين ويمكنك إستعمال كلمات من مثل Legal, Law, Lawyer ...

سترى الكثير من التصاميم ومطلوب منك أن تفتحها كلها وترى بماذا يمتاز كل تصميم وماهي أوجه التشابه والإختلاف بين كل

تصميم وآخر وتفكر ماذا ستقدم لتنافس به هؤلاء؟ كيف ستقدم شيء جديد مختلف عن الباقين؟

بعد أن تنتهي من تحليل محتوى التصاميم والمواقع التي كنت تشاهد عليك باختيار من 5 إلى 10 من هذه التصاميم كي تشاهدهم بين الفينة والأخرى

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

2 - مرحلة تحليل المحتوى:

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

تبيع أكثر من الأخرى سنبدأ بتحليل المحتوى وقد تسأل ماهو هذا الأخير لذا دعني أخبرك أن تحليل المحتوى هو معرفة لماذا هذا التصميم

تكون من هذه العناصر والأقسام ومالسبب أنه يحتوي على أقسام معينة مثل التعريف مثلا وليس أقسام ثانية.

عندما تصمم موقع عن وكالة محاماة أو موقع شخصي لمحامي فيجب أن تلتزم بأشياء معينة بحيث أن أجزاء التصميم يجب أن تتكون من:

تعريف عن الوكالة أو المحامي، إختصاصات العمل وأقسامه، فريق العمل الخاص بالوكالة ومهارات المحامين أو فريق العمل وكذا

أسباب إختيار الزائر العمل مع هذه الوكالة أو هذا المحامي بالظبط وهذا الجزء يحتوي على عدد القضايا التي عرضت على الوكالة

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

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

في هذا النوع من التصاميم وهو طلب إستشارة من المحامي بالمجان وقد إهتممت بهذا الجزء بحيث جعلت تصميمه واضحا جدا

لأن هذه ميزة ونقطة جذب للزائر ومن أهم الأجزاء نجد بيانات الإتصال بالوكالة وعنوانها وأرقام الهواتف إلخ... وتعتبر هذه الجزئية من أهم

الحاجات في أي عمل.

كملخص لما تطرقنا له في الأعلى فإنه لما نبني موقع لمحامين فسنهتم بالآتي:

  • بيانات عن الوكالة

  • العملاء

  • آراء العملاء

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

  • إختصاصات العمل وصفحة لشرح كل إختصاص

  • فريق العمل وشرح مبسط عن كل واحد من الفريق، شهاداته، مهاراته وخبرته.

  • المدونة والأخبار

  • أسعار الخدمات

  • طلب إستشارة مجانية

  • أسباب للعمل مع الوكالة تعرض فيها مزايا الوكالة (مهمة لشد إنتباه العميل للعمل معك)

  • بيانات التواصل مع الوكالة أو المحامي

3 - مرحلة الإستلهام:

لقد وصلنا لأصعب المراحل والتي تكون قبل البدء في التصميم وقد تتسائل عن كيف ستبدأ؟ ماهو شكل الهيدر؟ ماذا عن الفوتر؟

ماذا سأضع في النصوص الموجودة في التصميم؟ كل ماعليك هو الإلتزام بالخطوات التي إتبعنا من الأول وإن شاء الله سيكون الأمر

سهلا.

كما تعلم في مرحلة جمع البيانات وتحليل المحتوى قمنا باستخراج المكونات التي ستلزمنا لإنشاء هذا التصميم والمطلوب منك الآن

هو أن تشاهد المزيد من التصاميم كي تستطيع إنشاء شيء مميز ومختلف عن البقية وفي هذه المرحلة أحب شخصيا أن أشاهد تصاميم

من المواقع التالية:

https://dribbble.com https://www.behance.net

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

تحليل المحتوى ويمكنك أن تقوم بتحميل التصاميم التي ترى أنها ستفيدك وضعها في ملف وبعد أن تكون قد إنتهيت وحصلت على

عدد معتبر من التصاميم وضعهم مع التصاميم التصاميم التي جلبناها من ثيم فورست ونعيد مشاهدتهم مرة ثالثة ورابعة...

عندما تنتهي سنقوم بتقطيع هذه التصاميم وسيكون الأمر على الشكل التالي:

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

من التي ذكرنا في مرحلة تحليل المحتوى.

4 - الألوان:

كما ترى من المراحل السابقة فليس هناك مرحلة سهلة أثناء التصميم، بالنسبة للألوان فيجب أن نأتي بلون يعجب كل الناس وضع في

بالك أن هناك أنواع معينة من التصاميم لها ألوان معينة ولايجوز أن نستعمل غيرها مثل التصميم الذي نشتغل عليه حاليا.

وكالات المحامين يحبون الألوان التالية: (البني ودرجاته، درجات معينة من اللون الأصفر القريب من البني، الأخضر الغامق، الزيتي

والزيتوني، الكحلي والأزرق الغامق وفي بعض الأحيان البنفسجي الغامق).

نأتي الآن لكيفية إختيار الألوان المناسبة لتصميمنا، بالنسبة لي أحب الإشتغال بلون واحد أساسي وهو البني والذي سنستعمله

في التصميم الذي نشتغل عليه حاليا مع درجات من الأبيض، الأسود والرمادي.

أمر الألوان مهم جدا لأن الذي سيشتري منك ليس دائما محترف لذا يجب عليك أن تسهل عليه أمر إختيار الألوان بحيث تجعل

من تغيير اللون الأساسي هو الشيء الوحيد الذي سيقوم به وفي بعض الأحيان من الجيد أن تضع ألوان مقترحة لأن هناك بعض

الألوان التي لن تتناسب مع تصميمك ومن المحبذ كذلك أن تزوده بألوان تراها مناسبة ولا تجعل العميل يضع مايريد لأنه سيرجه

مثل الخردة. في حالتنا قمت بإضافة الألوان التالية: 

http://imgur.com/o8f0Zrb

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

من خلال الدخول لموقع

http://logopond.com

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

5 - الصور:

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

في حالات كثيرة كنت أصمم لمجال بناءا على صورة رأيتها وأعجبتني مثل MOUNT الذي أنشأته بسبب صورة الجبل الموجودة في التصميم.

خلاصة القول الصور من الممكن أن تجعل تصميمك يتكلم ويعبر عن نفسه أو تجعله فاشل حتى لو كان 10 على 10 فقط لأن الصور

التي إخترت ليست مناسبة، هناك خدعة بسيطة بإمكانك تطبيقها بحيث تقوم بإزالة كل الصور من التصميم وترى كيف يبدو، هل هو

بنفس الجودة والإتقان مع الصور أو لا إضافة إلى ذلك لاتنسى إختيار صور قريبة ومتناسقة مع الألوان التي ستستعمل.

هذه بعض الصور من تصميم Trust بالصور وبدون صور:

بالصور :

http://i.imgur.com/lNxpJfw.png

بدون صور :

http://i.imgur.com/niaY9P6.png

وقد تتسائل من أين بإمكاني الحصول على الصور؟

6 - الخطوط والشعار:

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

تعلم أن كل مجال له الخط المناسب له حيث هناك أنواع كثيرة منها الرسمي مثل:

Lora - Raleway - Roboto Slab - Droid Serief - Opensans - Lato

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

Berkshire Swash - Sail

بما أننا سنصمم لمجال رسمي فسنستعمل خطوط من المجموعة الأولى وقد إخترت:

Lora - Raleway - Opensans

وحتى لا ننسى فقط Opensans هو شرط أساسي في أي تصميم ويستخدم للوصف الكلامي ومنافسه الوحيد هو خط Lato

إلى هنا نكون قد إنتهينا من موضوع تحديد الخطوط ويمكنك إستعمال Google Font الذي يتيح لك مشاهدة الخط وتجربته

مباشرة كما يعطيك إمكانية تحميل عائلة الخط كاملة أو لوحده طبعا هناك خطوط الفوتوشوب ولكن الأشهر هو Google Fonts

الآن سننتقل للشعار ولكي تقوم بصناعة شعار ضع في بالك أنه سيكون علامة تجارية (Brand) لك حيث سيكون عامل جذب للعملاء كي يشترو منتجك

واهتم بالخط الذي ستستعمله ويفضل يكون مجاني مع أنه من الممكن إستعمال واحد مدفوع ولكن يجب أن تكتب في وصف التصميم أنك تستعمله.

الآن نأتي لكيف تقوم بصناعة شعار بسيط وسريع. أول شيء عليك القيام به هو الدخول للموقع الذي تحدثنا عنه سابقا ألا وهو Logo Pond

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

شكل (Shape) وكلام في نفس الوقت بل يمكن أن يكون واحد من الإثنين وعليك أن تحدد المناسب لك وللتصميم، ولكي تختار الخط

المناسب للتصميم إستعن ب Google Fonts أو يمكنك إستعمال موقع يعرض لك الخطوط على جهازك ويمكن أن تجرب إسم شعارك بها أونلاين

:

http://logopond.com

7 - البدء في تكوين التصميم:

عند إنهائك للخطوات السابقة قد تتسائل كيف سأجمع كل ماسبق في تصميم واحد وهنا قد يختلف الأمر من شخص لآخر ولكن

بالنسبة لي فأقوم بأخذ التصميم من أوله (الهيدر، من نحن، الفريق، بيانات عن الوكالة، الفريق، المدونة وآراء العملاء، بيانات الإتصال

وأخيرا الفوتر).

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

فهناك من يقوم بالإشتغال جزء جزء بحيث تصنع مجموعة من الهيدرات والفوترات وبعض الأشكال لمن نحن والفريق إلخ... وبعد

ذلك ينتقلوا لتكوين الرئيسيات والصفحات الداخلية.

الطريقتان مناسبتين ويبقى لك الإختيار لتحدد الأنسب لك لكن من وجهة نظري الأولى أفضل لأنك تبدأ التصميم من الأول لكي تصل لتصميم

كامل ومتكامل من البداية للنهاية.

إلى هنا أكون قد أنهيت ثاني موضوع من السلسلة وأتمنى أن يكون قد راق لكم وإن كانت لكم أي نصائح أو إقتراحات فأرجوا منكم تركها في تعليق.

رابط المنشور الأصلي: