السلام عليكم .. إن شاء الله بخير 🙂

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

الاول .. ك UI Designer. موش معناه انك ميح UX .. لازم على الاقل يبقى عندك معرفه كويسه

"الوحدة ، التركيز ، أنظمة الشبكات ، المساحة البيضاء ، الطباعة ، نقد / اختبار ، الشكل / الرموز ، قابليتها للاستخدام ، الألوان ، حل المشكلات" .. نبدأ فى الموضوع على طول ..

حل المشكلة

1. التصميم حل لمشكلة

التصميم ، حل مشكله .. وانت بالبلدى كده “حلال مشاكل”! واجهة الاستخدام مشكله .. و لو انت موش شيف اى بروجيكت فى ايدك بالشكل دا، فى الغالب هتشتغل فيه غلط.

المشكله اللى بتواجهك ، و:

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

إن كان مجال ال UX هو مجال تفكير و و و وو و ، فبالنسبه ليا ، بشوف ال UI مجال صعب ، موش حاجه سهله ، لو عاوز تشتغل فيه صح ..

سبب الصعوبه في تصميم واجهه الاستخدام .. هو اختلاف كل مشروع عن التانى .. انت مينفعش تشتغل ١٠ مشاريع كلهم شبه بعض .. ولا حتى ٢! لازم تعامل كل من بروجيكت عندك

ان البروجيكت كده كده .. هل انت فيقلد نفسك؟ موش هتطور ابدا.

خد بالك من النقطه دى. مينفعش تقع فيها. ابدا!

سهولة الاستخدام

2. لتحميل الإستخدام

عارف انا الجماعه بتوع انا UXr مليش فيه، وانا UID مليش فيه! الجماعه دول تقريبا كده ، هما اللى كانو سيبك منهم .. و متشتغلش معاهم.

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

موش بقولك تتعرف على شخصيتك ولا تتذكر فريقك المفضل

ممكن تشوف موقع goodui.org هيديك معلومات سريعةه و سهله ..

الألوان

3. الألوان

بعشق الجزئية دى .. و فى الغالب

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

بالنسبه للبراند اللى بتكون

اما بالنسبه للبروجيكت الجديد خالص ..

ازاى بتختار الوان؟

فى كذا طريقه لاختيارك للالوان. هعرض الطريقه اللى فى الغالب

لازم تقسم الالوان الاولية بشكل عام

  1. لون رئيسيى - لون العلامة التجارية - او لون البراند ..
  2. ألون ثانوية - لون ثانوي ..
  3. الوان محايدة - مساعدة - ألوان محايدة ..

اللون الرئيسيى:

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

لايمكن أن تكون في علاقته بين اللونين دا و ..؟ ؟ لا! طيب هت مستخدم ايه؟ و لو هتستخدم لونا متوقعا .. أزاى تخلى درجته؟ اهتم بالنقط دى و اللى جايه:

  • اعرف كويس جدا المنافسين ..
  • لون خاطف للعين!؟ موش دايما مفيد ..
  • خليه لون فريد .. و لو مفيش فريد خليه أسمهان 😀 😀
  • كل لون له معنى .. روح .. شخصية!
  • لون لازم يتغير كويس على خلفية

الالوان الثانوية:

دى الوان ممكن ابقى في البراند ، او جزء منها .. ممكن ابقى على عباره عن الوان رسايل .. ممكن متبقاش موجوده .. .. كتره الالوان موش دايما بتخدم ..

الالوان المحايدة:

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

  • لون فاتح .. قريب للابيض .. و درجه غامقة منه ..
  • لون غامق. قريب للاسود. ودرجه اغمق او افتح منه ..

بشكل عام في الالوان ، علشان دى قصتها طويلة شويه .. لازم تهتم بشكل كبير جدا "هوى ، تينت ، ظل ، نغمة ، تشبع" واى خاصية لالوانك .. و اصنع بينهم تناغم .. لازم.

شكل

4. الأشكال و الرموز

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

المبادئ التوجيهية لازم ال اللى انت فرضتها على نفسك في ال UI تكون كلها متجانسة تماما .. كيرفات الخطوط .. و ال حواف بتاعتها مناسبه جدا لنظيرتها فى الرموز و ال المكونات ككل ..

أيقونات لا تكون إلا بمفردها ، و بين الأناشيد و الأناقة. ..

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

طباعة

5. التيبوغرافى الطباعة

في أي جزئيه من اللى فاتو .. و اللى جايين .. لازم دايما تعمل بنفسك. بالنسبه ليا انا بحب كل ما فيك ، وماذا عن بالنسبه الذهبيه .. كحاجه متجربه وافضل ..

في هذا المكان ، هل هذا هو المكان المناسب لكِ في البروجيكت؟

  1. عناوين رئيسيه: دى بحر اهتمام .. ممكن بتبديل الخط ، اكيد بحجمه ، ممكن اللون ، ممكن الكل مع بعض ..
  2. عناوين فرعيه: دى تقسيمات تحت عنوان الرئيسى .. برده بتميزها
  3. معلومات عن فرعيه: دى بتبقى زى التاريخ ، القسم ، الحجات دى و فى مناطق بشكل عام. بيبقى فيها معلومات يمكن أن تكون مهمة ، أو ما شابه ذلك؟ .
  4. معلومات اساسية: دى معلومات عن بتبقى اهمك في الموقع ، مثال يوضح الفكره اكتر ، موقع عرض منتجات للبيع .. مفيش عندك اهم من السعر بعد العنوان! تقدر تميزه بالخط، اللون، الحجم، الخلفيه، ايقونه معبره، حجات وطرق كتير ..
  5. المحتوى: دا المحتوى العادى اللى معاك .. او مواصفات الخط الاساسى .. لا يزال في المقابل عالى بينه وبين الباك

فى الويب .. متغفلش عن الريسبونسيف فى الخطوط. و اختصارا للوقت. تقدر تشوف المقالات دى:

و علشان انا بعشق فكره النسبه الذهبيه، و كل حاجه تبقى محسوبه بالبيكسل .. مفيش حاجه متسابه كده! ولا محطوطه استعباط .. بستخدم الويب سايت دا type-scale.com بدل ما اعمل لنفسك الحسابات دى 😀 موش فاضيين احنا سيادتك ..

نظام الشبكة

6. النظام الشبكى

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

تعالي نفهم اكتر ايه مكونات الجريد سيستم اصلا ، او المصطلحات و الحجات المشهوره فى الجزئية دى ..

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

نيجى للاستخدام .. نظام الشبكة عباره عن الأعمدة ، الصف ، المزراب .. كويس ، بس موش افضل حاجه.

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

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

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

و جرب تعمل موديلر جريد بالموقع دا .. شوف برده تتغير اللى بتحصل .. هفهم فكره الاتنين .. الموديلر، و البيز لاين ..

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

ايه الفكره من الموديلر ؟؟

نفس الفكره من ال الأعمدة .. انت دلوقتى لما بتعمل مكون موش بتيجى فى نص الاعمده و يقف .. لا اما بتعمله ١ ، ٢ ، ٣ ، ٤ ، ٥ ، ٦ ، الخ دا بشكل رأس رأس ..

لا شيء تعمله لازم تعمله اما ١ او ٢ او ٣، الخ ..

طيب ازاى ادمج كل الكلام دا علشان اطلع حاجه مظبوطه ؟؟

انت مثل عامل الوتر مابين ال عامود 30 بيكسل .. انا شخصيا اعجبني .. هتعمل نفس الوتره ما بين الموديلرز برده .. و يستحسن .. دا هيسهل الموضوع اكتر ..

كده انا وصلت لنقطه كويسه جدا .. عندى الاحجام مظله بالطول و العرض .. و عندى المساحات الفارغه اقصد انى مثلا عاوز اسيب مساحه كبيره شويه تحت العنوان .. اعمل ايه ؟؟

سيب موديلر كامل فارغ .. بالوعاء بتاعته .. امشى دايما على القانون

انا عامل لنفسى الجريد تقدر تحمله من هنا و ان شاء الله يفيدك ..

فى بلجينز تقدر تستخدمها برده زى .. guideguide.me

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

white_space

7. المساحات الفارغه او White Space

الجزئيه اللى فاتت هو وضحتلك ٩٠ ٪ من المساحات الفارغه ، "الخارجيه" .. لكن المساحات أو اللف الداخلى للكومبوننت ؟؟

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

تانى حاجه متوضحتش .. مساحة بيضاء .. هل انت مشرفة؟ هل انت متعلمة؟ من خلال انك بتخلي حواليها.

هل تريدون أن تحضروا منكم؟ - دايما بصمة لمكوناتها ، قد تكون خبيثة قدامك زيل شجره عيله .. و لما تحب تظبط ال .. مساحة بيضاء بطريقه سريعه و متقنه .. ممكن تخلى مثال الابن نص الاب. بمعنى .. لو مساحة بيضاء عندك في الاب 30 بيكسل ، يبقى في الابن ١٥ بيكسل .. و ممكن تبقى بالنسبه الذهبيه برده ، بس فى الاخر

تشديد

يا مسهل

8. التركيز او الجاذبية

في الحقيقه انا معرفه الكلمه اللى.

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

ادواتى ايه !؟

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

وحدة

9. الوحدة او الانسجام

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

خليك م الناس المعقده كده، زى حلاتى .. بتبقى بالنسبه ليه مشكله

علمنى ال Perfect Pixels ؟؟ تعالى فى الهايفه و اتصدر 😀 .. الوحدة موش مفيده فى مجرد الشكل مترتب وخلاص! لا ، ببساطه المستخدم لمايرفرف؟

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

نقد

10. قائمة النقد او قائمة النقد

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

هل أنت عامل جيد ورائع على حدٍ سواء؟ .. متوصلوش .. علشان تفضل بتدور تعمل حاجه رائعه ازاى .. دا مفيد.

من هنا تقدر تحمل مثال على قائمه النقد .. كنت شوفتها في كورس على تري هاوس من مده ..

 

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

دمتم سالمين 🙂

المزيد من القراءات ،

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

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

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

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

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

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