64

سبع نصائح لتصميم بورتفليو"Portfolio " أفضل - مع أمثلة

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

و لهذا أنا هنا اليوم لأقدم لك سبع نصائح لتحسين هاته الوضعية

مرحبا بالجميع , معكم غاري سايمون

و اليوم سأقدم لكم سبع نصائح لجعل ملف إنجازاتكم أفضل

و بالأخص حول المنطقة أين تعرض مشاريعك

و في العادة ما يرتبها الناس على شكل معارض مصغرة

و لكن ما سأركز نصائحي حوله هو

محاولة جعلكم تنظمون هذا الجزء على نحو أفضل و أيضا كيف تلفتون النظر إلى مشروعكم

لكي لايبدو مملا

و هذا بإمكانه أن يزيد في فرص توظيفكم من قبل أصحاب الأعمال أو العملاء

لذا و كالعادة اشترك في القناة إن لم تكن مشتركا , و هيا بنا لنبدأ

و قبل أن نبدأ , " linode" راعي هذا الفيديو

يسهل لكم استضافة موقعكم , تطبيقكم أو خدمتكم

على أي بيئة تستعملها

و تطبيقات سهلة الاستعمال مثل ووردبريس و دروبال

تشغيلها سهل

و مع إمكانية الدخول إلى خادمك, خيارات التعديل غير محدودة

ب dns manager قابل للتعديل يسمح لك بتبديل نطاقك إلى سيرفرك الجديد

كما يمكنك تثبيت شهادات ssl بالمجان بواسطة ادوات مفتوحة المصدر

لذا سجل بواسطة اللينك الموجود في خانة الوصف و احصل على 20 دولار في حسابك الجديد

النصيحة الأولى : -أطر تصميمك-

- تأطيرتصميمك - كما نرى أمامنا , هاته ثلاثة امثلة مختلفة لملف إنجازات

مرتبين على شكل معرض مصغر

وهذا شيء لا أسميه بتصاميم مؤطرة على لإطلاق

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

لقد رأيت في عديد من المرات في البث المباشر

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

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

و في بعض الأحيان يضيف المصممون بعض التفاصيل في الخلفية نفسها

لجعلها مثيرة للاهتمام

ها هي بعض الأمثلة الواقعية لهذا التطبيق

كما ترون فقد تم وضع التصميم في خلفية متدرجة الألوان و ظل باهت

نفس الشيء هنا

و هنا أيضا في هذا المثال

النصيحة الثانية : - مجسم للجهاز-

مجسمات الأجهزة

و من أحد الطرق لإبراز تصاميمك و إعطائها معنى هو جعلها في إطار جهاز ما

إذا كنت تصمم لجهاز لوحي فاعرض تصميمك على جهاز لوحي كما في هذا المثال

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

في هذا المثال, بإمكاننا رؤية صورة مقربة عالية الدقة لمجسم هاتف

والأمر الذي لاحظته مؤخرا

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

النصيحة الثالثة : - إظهار الأنيميشين (الصور المتحركة) -

إبراز الأنميشين الخاصة بك ( رسومك المتحركة )

إذا صنعت أنميشين مثيرة للإهتمام في الUI (واجهة المستخدم) , يجب عليك قطعا وضعها في ملفك

ها هو مثال في flutter

و ها هو مثال على موقع إلكتروني

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

حسنا , عندك بعض الخيارات

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

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

الشيء الإيجابي هو أن الأنيميشن عادة ما تكون سلسة جدا ولكن

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

و يوجد خيار آخر ألا وهو تسجيل فيديو لك وأنت تستعمل في المشروع

النصيحة الرابعة: - إدماج نماذج -

إدماج نماذج في ملفك

اذا كنت تستعمل adobe xd أو figma بإمكانك إدماج نماذجك على موقعك

وهذا أمر رائع , إذ يتيح لزبائنك المحتملين أن يستخدموا أعمالك

ها هو مثال على نموذج XD مدمج في هذا الموقع

و ها هي صفحة المعلومات في موقع figma تشرح طريقة وضع تصاميمك في موقعك

النصيحة الخامسة: - العناصر العائمة-

عناصر UI عائمة

و الآن حين أقول عائمة أنا أقصد إختيار عنصر من التصميم لتمديده خارج إطار الجهاز

و هذا بإمكانه إعطاء معلومات أكثر عن العنصر

كما يجعل استعراض المشروع أكثر تشويقا

النصيحة السادسة : - معلومات اكثر -

توفير معلومات أكثر حول مشروعك

و الآن و كما رأينا في مثالنا الأول هنالك ثلاثة مشاريع مرتبة على شكل صور مصغرة

و الأمر الشائع الذي أرى الكثير من المصممين يقومون به

هو عرض التصميم بتأثير light box كهذا المثال

و بشكل مذهل, ستوفر الكثير من المعلومات حول المشروع كهذا المثال

و يوجد في هذا المثال عرض كامل للمشروع في الأعلى

و بعدها نجد معلومات أكثر حول الزبون , كما بإمكانك إضافة صور مصغرة و مظاهر مختلفة لواجهة المستخدم

النصيحة السابعة: - منظور واجهة المستخدم -

منظور واجهة المستخدم

عندما يستخدم الناس تصميمك سواء على الشاشة أو على جهاز لوحي

نادرا ما يعرض التصميم غلى زاوية قائمة بشكل مثالي

من أحد الطرق لحل هذا المشكل

هو أن تعرض تصاميمك بزوايا مختلفة

و هاهي بعض الطرق للحصول على مجسمات للأجهزة

من أحد الخيارات هو الذهاب إلى موقع dribbble و البحث عن المجسم الذي تريده

و هنا قد بحثت عن مجسمات بمنظور مختلف

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

ألقي نظرة على الذي تريده و أنظر إن كان هنالك نسخة مجانية منه

والخيارالآخر هو أن تذهب إلى Behance و تفعل الأمر ذاته

Behance و Dribbble يعتبران منافسين لبعضهما,

بإمكانك رؤية كل هذه المجسمات المتوفرة بالمجان و التي صممها الآخرون

كما توجد المجسمات المدفوعة كخيار آخر مثل تلك الموجودة في موقع prespectivemockups

كما يوجد موقع yellowimages أحد راعي القدامى و الذي يعرض مجسمات ثلاثية الأبعاد و التي بإمكانك استخدامها أيضا

و إذا أردت تعلم تصميم صور UI متحركة في برنامج مثل after effects

كل ماعليك فعله هو الذهاب إلى اليوتيوب و كتابة " تعلم تصميم UI أنيميشن باستخدام برنامج after effects"

يوجد العديد من الدورات التعليمية التي بإمكانك التعلم منها

و هنالك دورتان من تقديمي مثل " creating sleak UI animation in after effects cc 2018"

وضعتها منذ عام واحد ولكنها ما تزال مفيدة

و يوجد أيضا موقع يدعى بmockupframes

و لقد ذكرتها في الدورة أيضا حيث ذكرت كيفية استعماله

و لكن بكل بساطة , يسمح لك الموقع بتحميل نماذج لUI أنيميشن

و بعدها سيسمح لك بوضعها في في مجسم الهاتف بعدة زوايا مختلفة

هنالك العديد من الخيارات كالأندرويد, الآيفون, الحاسوب و الويب

كما يسمح لك بتحميلها بصيغ مختلفة مثل : MP4,MOV,PNG,GIF.....

وكل تلك الأمور الرائعة

حسنا , أتمنى أنكم استمتعتم بالفيديو و إن كان كذلك لاتنسوا الإشتراك في القناة كالعادة

أراكم لاحقا

إليكم طريقتي في تصميم الصور المصغرة لفيديوات اليوتيوب