تبي تصير مصمم UI/UX 🧑🏻🎨؟
ما تدري من وين تبدأ؟
في هذي السلسلة راح أسرد كيف أنا تعلمت وصرت مصمم UI/UX.
الطريقة هذي ليست الوحيدة، لكنها الطريقة اللي اتبعتها خلال ال١٥ سنة اللي فاتت، وأقدر أقول وبكل ثقة أنها فعّالة ونتايجها إيجابية.
متحمس؟
سم بالله، وركز معي 👇🏽
ما تدري من وين تبدأ؟
في هذي السلسلة راح أسرد كيف أنا تعلمت وصرت مصمم UI/UX.
الطريقة هذي ليست الوحيدة، لكنها الطريقة اللي اتبعتها خلال ال١٥ سنة اللي فاتت، وأقدر أقول وبكل ثقة أنها فعّالة ونتايجها إيجابية.
متحمس؟
سم بالله، وركز معي 👇🏽
⚠️ تنبيهات مهمة:
١. طرق التعلم لا تعد ولا تحصى، طريقتي ليست الوحيدة.
٢. كل فرد يتعلم على هونه، ما فيه وقت محدد، أنت وما يناسبك.
٣. كل فرد يتعلم بطريقة مختلفة، فلا تتحطم لو ما ناسبتك الطريقة.
٤. الطريقة ليست سحرية ولا فورية، تحتاج جهد وعزيمة، شد حيلك والتزم، وبتصير أفضل مصمم.
١. طرق التعلم لا تعد ولا تحصى، طريقتي ليست الوحيدة.
٢. كل فرد يتعلم على هونه، ما فيه وقت محدد، أنت وما يناسبك.
٣. كل فرد يتعلم بطريقة مختلفة، فلا تتحطم لو ما ناسبتك الطريقة.
٤. الطريقة ليست سحرية ولا فورية، تحتاج جهد وعزيمة، شد حيلك والتزم، وبتصير أفضل مصمم.
للتوضيح:
مصمم UI/UX يعنى بتصميم واجهات التطبيقات والمواقع.
ليس كل مصمم (آخر) هو مصمم UI/UX، وليس كل مصمم UI/UX هو مصمم (آخر).
آخر = ثري دي، جرافيكس، موشن جرافيكس، صوتيات، شعارات، هويات، خطوط.
صحيح أن كل مصمم يمتلك مهارات متداخلة، لكنه يتخصص في مجال، المجال المحدد هنا هو UI/UX
مصمم UI/UX يعنى بتصميم واجهات التطبيقات والمواقع.
ليس كل مصمم (آخر) هو مصمم UI/UX، وليس كل مصمم UI/UX هو مصمم (آخر).
آخر = ثري دي، جرافيكس، موشن جرافيكس، صوتيات، شعارات، هويات، خطوط.
صحيح أن كل مصمم يمتلك مهارات متداخلة، لكنه يتخصص في مجال، المجال المحدد هنا هو UI/UX
طريقتي تعتمد على ٣ أجزاء، حاول تبذل نفس الجهد بالتساوي في كل جزء.
الجزء الأول: الفهم والقراءة 📖
ممكن يكون هذا الشي بديهي، لكن التصميم يعتبر عِلم، فيه الكثير من المفاهيم والمصطلحات اللي راح تريحك كثييييير لو عرفتها قبل ما تشتغل بيدك.
الحين طبعاً تتساءل، طيب وش اقرأ؟ 🤔
تابع 👇🏽
الجزء الأول: الفهم والقراءة 📖
ممكن يكون هذا الشي بديهي، لكن التصميم يعتبر عِلم، فيه الكثير من المفاهيم والمصطلحات اللي راح تريحك كثييييير لو عرفتها قبل ما تشتغل بيدك.
الحين طبعاً تتساءل، طيب وش اقرأ؟ 🤔
تابع 👇🏽
تعريفات مختصرة:
UI تعني User interface ، وهي واجهة المستخدم البصرية التي يتفاعل معها المستخدم، تُعنى بالجماليات وقابلية الاستخدام.
UX تعني User Experience، وهي سلوك وإحساس المستخدم أثناء التفاعل مع منتج أو خدمة معيّنة، وهي تتضمن واجهة المستخدم.
UI تعني User interface ، وهي واجهة المستخدم البصرية التي يتفاعل معها المستخدم، تُعنى بالجماليات وقابلية الاستخدام.
UX تعني User Experience، وهي سلوك وإحساس المستخدم أثناء التفاعل مع منتج أو خدمة معيّنة، وهي تتضمن واجهة المستخدم.
مهمتك أن تصمم حلول للمشاكل اللي يواجهها المستخدم، وحلولك هذي لازم يكون محورها حل مشكلة المستخدم، ولا شيء آخر.
اذا كان تصميمك ما يحل هالمشكلة، مهما كان جذّاب و "مزبرق"، فهو تصميم فاشل.
تذكّر، أنت تصمم حلول، الجماليات ما هي إلا أثر جانبي لإبداعك.
اذا كان تصميمك ما يحل هالمشكلة، مهما كان جذّاب و "مزبرق"، فهو تصميم فاشل.
تذكّر، أنت تصمم حلول، الجماليات ما هي إلا أثر جانبي لإبداعك.
عشان تحل مشاكل المستخدم، لازم تفهم المستخدم و"الشيء" اللي يستخدمه.
لتتعلم كيف تنظر لكل الأشياء من هذه المنظور، وتصنع حلول سهلة تتمحور حول المستخدم.
اقرأ كتاب
The Design of Everyday Things
amazon.com
لتتعلم كيف تنظر لكل الأشياء من هذه المنظور، وتصنع حلول سهلة تتمحور حول المستخدم.
اقرأ كتاب
The Design of Everyday Things
amazon.com
مو قلنا وظيفتك كمصمم هي أنك تصنع حلول، فاعلم أن التصاميم الجميلة ما هي إلا جماليات تسقط بسرعة عندما ينكشف للمستخدم سوء قابلية استخدام تلك الحلول.
شكل سيء وحل عبقري، أفضل من شكل عبقري وحل سيء.
لتتعلم كيف تصمم حلول سهلة.
اقرأ كتاب:
Don’t Make Me Think
amazon.com
شكل سيء وحل عبقري، أفضل من شكل عبقري وحل سيء.
لتتعلم كيف تصمم حلول سهلة.
اقرأ كتاب:
Don’t Make Me Think
amazon.com
الكتاب الأخير اللي بنصحك فيه:
100 Things Every Designer Should Know
غني بالنصائح العملية والأمثلة المفيدة وخلاصة أبحاث ومفاهيم لازم تعرفها.
ما بكثر عليك، ٣ كتب أساسية كفيلة بدفعك للأمام، مهمتك تبحث عن مصادر، اكتشف، مهمتك تصنع حلول، أوجد حل لنفسك.
amazon.com
100 Things Every Designer Should Know
غني بالنصائح العملية والأمثلة المفيدة وخلاصة أبحاث ومفاهيم لازم تعرفها.
ما بكثر عليك، ٣ كتب أساسية كفيلة بدفعك للأمام، مهمتك تبحث عن مصادر، اكتشف، مهمتك تصنع حلول، أوجد حل لنفسك.
amazon.com
عارف، بتقول ليه كل الكتب والمواقع إنجليزية.
للأسف المحتوى العربي في التصميم قليل (بحاول أساعد في تقليل الفراغ، دعواتك 🤲🏽).
للأسف المحتوى العربي في التصميم قليل (بحاول أساعد في تقليل الفراغ، دعواتك 🤲🏽).
بتقرأ الكتب؟ والا بس حطّيتها في القائمة؟
ضروري تقراها، لا تسحب عليها 🙏🏼.
وازن ما بين قراءة الكتب وممارسة النقطتين اللي بعدها.
يعني لا تستمر فقط في شيء واحد، وزّع وقتك.
لو ما تحب القراءة، استمع، بعض الكتب قابلة للاستماع (مثلاً من Audible).
اللي بعده 👇🏽
ضروري تقراها، لا تسحب عليها 🙏🏼.
وازن ما بين قراءة الكتب وممارسة النقطتين اللي بعدها.
يعني لا تستمر فقط في شيء واحد، وزّع وقتك.
لو ما تحب القراءة، استمع، بعض الكتب قابلة للاستماع (مثلاً من Audible).
اللي بعده 👇🏽
الجزء الثاني: التغذية الذهنية والمهارة 🧠
استلهم وغذ نفسك بصريا، مواقع المصممين كثير، سجل فيها، وحط لايكات على التصاميم اللي تعجبك.
لكن ضروري تعرف أن هذي تغذية بصرية، يعني مو كل شي تشوفه هو فعلياً حل عملي.
هي تجارب وأفكار بعضها حقيقي وبعضها خيالي، لكن لا تحكر نفسك واطّلع.
استلهم وغذ نفسك بصريا، مواقع المصممين كثير، سجل فيها، وحط لايكات على التصاميم اللي تعجبك.
لكن ضروري تعرف أن هذي تغذية بصرية، يعني مو كل شي تشوفه هو فعلياً حل عملي.
هي تجارب وأفكار بعضها حقيقي وبعضها خيالي، لكن لا تحكر نفسك واطّلع.
مصادر تغذية بصرية:
١:
Behance.com
٢:
Dribbble.com
٣:
ابحث بنفسك 😉(design inspiration)
راح تشوف في المواقع هذي تصاميم كثير جداً، جزء منها فقط تصاميم، وجزء منها منتجات حقيقية. دقق في الفروقات.
ولا تنس أن تبحث بنفسك، اكتشف المنصات التغذية البصرية.
١:
Behance.com
٢:
Dribbble.com
٣:
ابحث بنفسك 😉(design inspiration)
راح تشوف في المواقع هذي تصاميم كثير جداً، جزء منها فقط تصاميم، وجزء منها منتجات حقيقية. دقق في الفروقات.
ولا تنس أن تبحث بنفسك، اكتشف المنصات التغذية البصرية.
أيضاً كن على اطِّلاع عن جديد عالم التصميم والتقنية.
شخصياً استخدم إضافة لجوجل كروم اسمها Panda، تكون هي الشاشة الرئيسية لأي "تبويب" جديد افتحه.
أهم المصادر بالنسبة لي:
١. Designer news.
٢. Sidebar.
٣. Hacker News.
٤. Dribbble.
chrome.google.com
شخصياً استخدم إضافة لجوجل كروم اسمها Panda، تكون هي الشاشة الرئيسية لأي "تبويب" جديد افتحه.
أهم المصادر بالنسبة لي:
١. Designer news.
٢. Sidebar.
٣. Hacker News.
٤. Dribbble.
chrome.google.com
ولا تقتصر على عالم التصميم فقط!
حاول توسّع المدارك بأنك تكون مطّلع على عدة مجالات. مثلا أنا أحب التصميم والبرمجة والبزنس، وأحاول أجمع ما بين الثلاثة.
أنت وش تحب؟ التصميم والطبخ؟ التصميم والأزياء؟ التصميم والصناعة؟
حاول توسّع المدارك بأنك تكون مطّلع على عدة مجالات. مثلا أنا أحب التصميم والبرمجة والبزنس، وأحاول أجمع ما بين الثلاثة.
أنت وش تحب؟ التصميم والطبخ؟ التصميم والأزياء؟ التصميم والصناعة؟
ما انتهينا من الجزء الثاني. عشان تكون مصمم فنّان تحتاج تصقل شيئين، عقلك ومهارتك.
الهدف من التغذية البصرية هو تمرين جزء واحد فقط، وهو عقلك.
لكن تحتاج أن تصقل مهارتك، فلازم تصمم بنفسك.
كيف تصمم وانت ما تعرف؟
قلّد. انسخ. صور الشاشة لتصميم عجبك وارميه في أداة التصميم، وقلّده.
الهدف من التغذية البصرية هو تمرين جزء واحد فقط، وهو عقلك.
لكن تحتاج أن تصقل مهارتك، فلازم تصمم بنفسك.
كيف تصمم وانت ما تعرف؟
قلّد. انسخ. صور الشاشة لتصميم عجبك وارميه في أداة التصميم، وقلّده.
ممكن تتسائل... أقلّد!! بس كيف أصير مبدع وانا بس أقلّد! 😡
بقول لك هنا أول حاجة اذكر الله وهدّي نفسك. 😉
في عبارة سمعتها بس مدري من وين:
“Everything is a remix"
بقول لك هنا أول حاجة اذكر الله وهدّي نفسك. 😉
في عبارة سمعتها بس مدري من وين:
“Everything is a remix"
كل شي نسويه أو نستخدمه، ما هو إلا منظور جديد لشيء قديم، لازم تعرف كيف تسوي القديم، أو على الاقل تفهم كيف القديم اتسوى عشان تقدر تسوي الجديد. ♻️
ولازم تتذكر أن هذا جزء فقط، الجزء الثاني هو عقلك واللي جالس تغذّيه باستمرار عشان يبدع. 💡
الابداع بالعقل، والتنفيذ بالمهارة. 🧠 🎨
ولازم تتذكر أن هذا جزء فقط، الجزء الثاني هو عقلك واللي جالس تغذّيه باستمرار عشان يبدع. 💡
الابداع بالعقل، والتنفيذ بالمهارة. 🧠 🎨
صقل المهارة يخليك قادر على تنفيذ ابداعك، لا يجي يوم تجيك فكرة عبقرية بس بسبب قصور مهاراتك، تظلمها بتنفيذ سيء.
سؤال لك، لو كل يوم تشوف فيديو عزف بيانو، لمدة سنة كاملة، هل تتوقع في نهاية السنة أنك بتصير عازف؟ طيب قس على ذلك الكاراتيه؟ كرة القدم؟ ⁉️
فهمتني؟ لازم اثنين، عقل ومهارة.
سؤال لك، لو كل يوم تشوف فيديو عزف بيانو، لمدة سنة كاملة، هل تتوقع في نهاية السنة أنك بتصير عازف؟ طيب قس على ذلك الكاراتيه؟ كرة القدم؟ ⁉️
فهمتني؟ لازم اثنين، عقل ومهارة.
ممكن يطري على بالك أن توليد في الحلول سهل، لكن أحب أقولك يا صديقي أنك مخطئ. 😌
الكل قادر على أن يصبح مصمم UI/UX، لكن شتان بين من يصنع حلول عبقرية ومن يولّد جماليات فقط.
لذا، وجّه نفسك لتتفوق في المجالين: ✌🏽
١. صناعة الحلول بتمرين العقل.
٢. الجماليات بتمرين المهارة.
الكل قادر على أن يصبح مصمم UI/UX، لكن شتان بين من يصنع حلول عبقرية ومن يولّد جماليات فقط.
لذا، وجّه نفسك لتتفوق في المجالين: ✌🏽
١. صناعة الحلول بتمرين العقل.
٢. الجماليات بتمرين المهارة.
نجي للنقطة الثالثة:
عشان تطور مهارتك، لازم تحتك بالواقع، وما ينفع تصمم وتخبي شغلك عن الناس، اطلب النقد، حسّن شغلك، إذا أحد عطاك رأي سيء أو أحمق فلا تهاوشه، فقط تجاهله. 😇
شارك أعمالك على تويتر، انستجرام، دريبل بيهانس.
تفاعل مع تجمعات المصممين، مثلاً:
t.me
عشان تطور مهارتك، لازم تحتك بالواقع، وما ينفع تصمم وتخبي شغلك عن الناس، اطلب النقد، حسّن شغلك، إذا أحد عطاك رأي سيء أو أحمق فلا تهاوشه، فقط تجاهله. 😇
شارك أعمالك على تويتر، انستجرام، دريبل بيهانس.
تفاعل مع تجمعات المصممين، مثلاً:
t.me
جزء من الاحتكاك هو كون تصاميمك موجودة على مشاريع حقيقية، لأن (مصممي اللايكات) تسقط قوتهم لما يشتغلون على مشروع حقيقي. 🤭
لا تنتظر أحد يجيك، دور عن فرص، شوف مين يبحث عن مصمم سواءاً شركة أو فرد على السوشال ميديا، قدّم خدماتك ولو بسعر زهيد (لا تخدم بدون مقابل). 🚫
ضروري تتعلم.
لا تنتظر أحد يجيك، دور عن فرص، شوف مين يبحث عن مصمم سواءاً شركة أو فرد على السوشال ميديا، قدّم خدماتك ولو بسعر زهيد (لا تخدم بدون مقابل). 🚫
ضروري تتعلم.
هذا كله كان في جعبتي، مو شرط تاخذه كله أو ترفضه كله، خذ اللي يناسبك ويعجبك وكمّل عليه. 🤗
لاحظت الثيم؟ أساس الطريقة كلها هو عزيمتك وتحفيزك الذاتي، ويعلم الله أن هذا من أصعب الأمور. 🤕
لكن لك الخيار، أن تعتبر هذا تحدّي أم عائق. 💪🏽
الموضوع ما ياخذ يوم أو يومين، عط نفسك فرصة. 🔥
لاحظت الثيم؟ أساس الطريقة كلها هو عزيمتك وتحفيزك الذاتي، ويعلم الله أن هذا من أصعب الأمور. 🤕
لكن لك الخيار، أن تعتبر هذا تحدّي أم عائق. 💪🏽
الموضوع ما ياخذ يوم أو يومين، عط نفسك فرصة. 🔥
الطريقة هذه وصلتني لما أنا عليه، فلا مانع أن توصلك أنت أيضاً. 😉
أفضل فرصة لأن تبدأ في هذا المجال كانت قبل ١٠ سنوات، ثاني أفضل فرصة هي اليوم.
في الختام، لو عندك أي سؤال، اسأل وراح أجاوبك إن شاء الله على قدر معرفتي.
اذا عجبتك السلسلة، فضلا أعد التغريد ♻️.
وبالتوفيق يا بطل 💪🏽🤲🏽
أفضل فرصة لأن تبدأ في هذا المجال كانت قبل ١٠ سنوات، ثاني أفضل فرصة هي اليوم.
في الختام، لو عندك أي سؤال، اسأل وراح أجاوبك إن شاء الله على قدر معرفتي.
اذا عجبتك السلسلة، فضلا أعد التغريد ♻️.
وبالتوفيق يا بطل 💪🏽🤲🏽
أدوات التصميم والبرمجة استخدمها:
🚧 Whimsical.com للتخطيط.
📱Figma.com لتصميم الشاشات (برمجت إضافة لدعم العربي)
✏️ Codesandbox.com للتجارب البرمجية
⚛️ React لبرمجة الواجهات.
🔥 Firebase لقاعدة بيانات للتجارب.
كل خيار اخترته لسبب، أوجد أسبابك.
🚧 Whimsical.com للتخطيط.
📱Figma.com لتصميم الشاشات (برمجت إضافة لدعم العربي)
✏️ Codesandbox.com للتجارب البرمجية
⚛️ React لبرمجة الواجهات.
🔥 Firebase لقاعدة بيانات للتجارب.
كل خيار اخترته لسبب، أوجد أسبابك.
جاري تحميل الاقتراحات...