تجارب و مقالات

إزاى تتفرج على مواقع اصلا !؟

   -   381

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

دايما لما بتكون فى البدايه فى مجال ما فيه 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

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

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

 

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

دمتم سالمين 🙏

 


Also published on Medium.

المناقشة و النشر