السلام عليكم , إن شاء الله تكونو بخير دايما 🙏

دايما لما بتكون فى البدايه فى مجال ما فيه visuals و تسأل حد ازاى تتعلم و تطور مستواك , يقولك اتفرج ! على فكره , دا صح جدا , انت مش هتتعلم غير لما تتفرج , و تملى عينك اوى من اللى بتشوفه , لحد ما توصل لدرجة انك لما حد يتكلم معاك مثلا فى تفاصيل مشروع , متستعوبش الكلام ك كلام ! تستوعب الكلام نفسه ك visuals و تخيلات فى عقلك بمجرد ان الكلام يتقالك و فى لحظات بسيطه. دا وظيفة ال visual memory اللى عندك , انها بتخلى عقلك قادر على انتاج و ابداع افكار فى شكل بصرى و مش بعيد يكون شكل بصرى نهائى كمان , ودا مبيحصلش بالسرعة دى الا لما تتفرج و كتير اوى كمان.

فى الويب و تطبيقات الموبايل , الموضوع كذلك لازم تتفرج , بس الطريقة اللى هتتفرج بيها تخلى النتيجة مختلفه تماما .. ايه اللى بتركز عليه وانت بتتفرج ؟ ايه المفروض تهتم بيه و تدور عليه او ما تشوف موقع !؟ دا هيفرق كتير جدا فى انتاجك و طريقه تفكيرك كل ما تشوف اكتر.

فى اللى جاى , هعرض النقط اللى شخصيا بدور عليها لما بشوف موقع , و بالترتيب ..

١. الاسلوب و الاتجاه Style & Trend

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

نرجع للاسلوب و الاتجاه.  المفروض تركز على حجات كتير  , دى قايمه بيها :

  • Colors
  • Typography
  • Effects
  • Spacing & Grid
  • Whitespace Solutions
  • Icons & Vectors

الألوان

درجات الالوان و مدى تناسقها و اللون الاساسى و ازاى رتب او استخلص الوان مختلفه بنفس الاحساس او الاستقابل – دا اللى يهمك هنا جدا.

Typography

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

Effects

المؤثرات مهمة جدا .. المؤثرات بتفرق كتير جدا بإختلاف بسيط فى قيم مثلا الشادو الموضوع ممكن يظهر بمظهر رائع جدا او سئ جدا جدا , لما تشوف اى effect حاول دايما تعرف هو اتعمل ازاى. و حاول تفتكره دايما. , لان دا هيقلل كتير من وقت بحثك عن طرق و تأثيرات جديدة وانت شغال.

Spacing & Grid

يا سلام ! واحدة من اهم النقط – ال grid بالعرض يمكن مش هتفرق معاك قد كده , لان فى الغالب مفهومة , يفرق معاك بس المسافات البيضاء فيها.  لكن الاهم و الاكثر تعقيدا , هو محاوله فهمك لل modullar grid system اللى اتعمل عليها التصميم و مش بس كده , كمان انك تفهم المساحات البيضاء بالطول ما بين الاقسام الرئيسية , و ما بين محتوى الاقسام نفسها , او حتى المساحات بين المحتويات الفرعية من المحتوى الاساسى للاقسام. هيفرق معاك كتير جدا فهمك للنقطه دى , لإن تصميم غير منظم من ناحية المساحات البيضاء عمر المستخدم ما هيستقبله بالشكل اللى انت محتاجه ابدا و هيتلغبط جدا بين انواع المحتوى او قيمه و حجم المحتوى – العين بتفهم كويس اوى المساحات البيضاء و بتبدأ تتوقع حجم المسافه بين العناصر او انها تحدد ان المساحه الفلانيه لما بتيجى , دى نهاية قسم و بداية قسم جديد.

Whitespace Solutions

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

Icons & Vectors

الايقونات صغيره جدا , و دا السبب فى إنها معقد جدا – الايقونات مينفعش تبصلها من ناحية هل بتعبر عن المحتوى و فهمتها ولا لا , كمان لازم تفهم الجايد اللى اتعمل عليها الايقونات و مدى تناسقها مع الاشكال الخاصة بال blocks فى الموقع و كذلك الخطوط المستخدمه فيه – التجانس هنا لازم يكون موجود ..

الرسومات من الحجات اللى ممكن تغير معالم اى موقع – موقع slack مثال حى على استخدام الفيكتور فى تثبيت العلامة التجاربه , و إنه يدى روح للموقع من غير ما يكون عامل زى اللعبة !

٢. دراسة المحتوى (IA)

ترتيب المحتوى = ترتيب افكار المستخدم, دايما فى سناريو محدد من قبل كده المصمم بيمشى يعتبر اليوزر فيه, لو نفترض موقع إمكان ك مثال , عاوز ايه من ورا ترتيب المحتوى فى الهوم بالشكل دا ؟

الاول انت بتشوف رسالة قويه فى البدايه , بعدين بتتعرف على الخدمات – اللى فى الغالب لو انت عجبتك الرسالة الاولى هتكون مهتم انك تشوف تفاصيل عن اى خدمه انت محتاجها – و فى الحقيقه طريقه عرض الخدمات فى إمكان معموله بحيث نديك المنتج النهائى من غير دخول فى تفاصيل تقنيه قويه على الاقل – بعدين لو لسه مش مقتنع بتشوف العملاء , و اخر رسالة و هى  اخر محاوله لإقناعك بإنك تدخل صفحات تانيه هى مرحبا من الرياض – لان التارجت هنا يهمه جدا ان فريق العمل يكون فى الرياض – طيب ازاى اترتب المحتوى بالشكل دا ؟؟

علشان تعرف ازاى وصل المحتوى للشكل دا لازم تفكر فى شكل المحتوى الأولى ك نقط او كروت صامته غير مرتبة , و تبدأ ترتب انت الموضوع من البدايه وصولا للترتيب النهائى اللى قدامك و تفهم ايه السناريو اللى بيحاول المصمم يدخل اليوزر فيه.

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

٣. رؤية الموقع و هدفة Mission & Vission & Target

كل الكلام اللى فوق دا , كل الحجات اللى انت لاحظتها فى الموقع و اتعلمت منها , هل بتتناسب مع هدف و رؤية الموقع من الاساس ولا اى كلام و خلاص و الموضوع فنى بحت ؟  الامور الفنية البحته ممكن تنجح مقولناش حاجه , بس النسبه الأكبر انها تفشل .. لازم كل شئ يكون موجه ناحية فكره و رؤية الموقع و الهدف منه – الالوان و الخطوط و احجام الكتابة و الفيكتورز و الايقونات و كل شئ تقريبا بيبنى فى الاخر صورة معينه عندك – هل الصورة دى هى هدف الموقع او لا !؟ دا اللى لازم تجاوب عليه و تحدد لو لا .. لا ليه و لو ايوه , ليه برده !؟

٤. تخيل المستخدمين Traget Audience

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

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

 

بس , دا بالنسبه ليا , اكيد عندك حجات تانيه و تفصيلات صغيرة كتير مش عندى , تقدر تشاركنى لو فى شئ كده , و اتمنى ان دا يفيدك و يزود إدراكك لاى تصميم بتشوفه فى المستقبل.

دمتم سالمين 🙏

 

More Readings,

Participatory design (originally co-operative design, now often co-design) is an approach to design attempting to actively involve all stakeholders (e.g. employees, partners, customers, citizens, end users) in the design process to help ensure the re...

Task analysis is the analysis of how a task is accomplished, including a detailed description of both manual and mental activities, task and element durations, task frequency, task allocation, task complexity, environmental conditions, necessary clot...

 The usability of a system is improved when its status and methods of use are clearly visible. The more visible functions are, the more likely users will be able to know what to do next. Incontrast, when functions are "out of sight," it makes the...

The placement of elements such that edges line up along common rows or columns, or their bodies along a common center. Alignment The whole point of the alignment principle is that nothing in your slide design should look as if it were pla...

In the social sciences, triangulation is often used to indicate that two (or more) methods are used in a study in order to check the results of one and the same subject. "The concept of triangulation is borrowed from navigational and land surveying t...

Research to evaluate the usability and learnability of your competitors’ products This complements traditional marketing strategies and business audits by considering the social, economic, and technical context. It allows design teams to ...