نکات مهم در ساخت Portfolio | اصول ساخت پورتفولیو

Portfolio چیست؟

پورتفولیو (Portfolio) به زبان ساده یک رزومه عملی و تصویری است! منظور من چیست؟ معمولا زمانی که کلمه رزومه را می شنویم به چند تکه کاغذ فکر می کنیم که کارشان توصیف شما است؛ اینکه که هستید و کارتان چیست و چه سابقه ای دارید. این در حالی است که پورتفولیو مجموعه ای از پروژه های عملی و اسناد واقعی کار شما است. ما می توانیم پورتفولیو را زیرمجموعه ای از رزومه در نظر بگیریم (بخش «تجربه» در رزومه). البته معمولا زمانی که صحبت از پورتفولیو برای توسعه دهندگان وب می شود منظورمان یک وب سایت شخصی است که در آن پروژه های شما و سوابق شما به نمایش گذاشته شده است. آقای kethmar salumets حدود ۴۰ پورتفولیو را از طراحان مختلف بررسی کرده است و جمعا چند نکته برای ارتقاء سطح کاریشان در نظر گرفته است. این چند نکته به سه دسته «طراحی و UX» و «محتوا» و «سرعت» تقسیم می شوند و می توانند کیفیت پورتفولیو شما را بالا ببرند.

هدف Portfolio

در قدم اول باید هدف پورتفولیو خود را مشخص کنید. هر پورتفولیو هدفی دارد و این هدف است که مشخص کننده مخاطبین شما است. آیا این پورتفولیو برای کسانی است که می خواهند شما را استخدام کنند؟ آیا برای دیگر توسعه دهندگان است؟ آیا یک پروژه شخصی و تمرینی برای خودتان است؟

در صورتی که پورتفولیوی شما برای دیگر توسعه دهندگان طراحی شده است استفاده از افکت ها و انیمیشن های جذاب کار پسندیده ای است چرا که توسعه دهندگان دیگر با کدنویسی آشنا هستند و از نظرشان چنین عناصری یک صفحه را جذاب می کند اما اگر به دنبال استخدام هستید انجام چنین کار هایی معمولا اضافه کاری است چرا که فردی که به دنبال استخدام شما است هدف اصلی اش UX و ساختار وب سایت شما است. یادتان باشد که هر محصولی باید به مخاطب خود فروخته شود بنابراین استخدام کننده ها به دنبال افرادی هستند که بتوانند تجربه کاربری (UX) خوبی را به وجود بیاورند.

به طور مثال یک نکته عالی در این زمینه استفاده از ضمیر های اول شخص است. بسیاری از پورتفولیو ها از ضمیر سوم شخص برای توصیف خودشان استفاده می کنند. مثلا «امیر ۳ سال است که به صورت حرفه ای کدنویسی جاوا اسکریپت انجام می دهد» جمله خوبی نیست و بهتر است بگویید «من ۳ سال است که به صورت حرفه ای کدنویسی جاوا اسکریپت انجام می دهم». چرا؟ به دلیل اینکه وب سایت پورتفولیوی شما شخصی است بنابراین باید «شخصی» برخورد کنید و مستقیما مخاطب خود را درگیر کنید. استفاده از ضمیر سوم شخص این حس را القا می کند که فرد دیگری کار ها را انجام داده است در حالی که استفاده از ضمیر اول شخص نشان دهنده مسئولیت پذیری شما است. این مسئله UX را نیز بالا می برد چرا که کاربران با شما ارتباط برقرار می کنند.

اولین کار: نمایش مهارت

معمولا زمانی که کسی از وب سایت پورتفولیو شما بازدید می کند، قصد بررسی سوابق کاری شما را دارد و می خواهد مهارت شما را بسنجد. بسیاری از وب سایت های پورتفولیو به این نکته توجه نمی کنند بنابراین زمانی که از آن ها بازدید می کنید، معمولا اطلاعاتی غیر از «سوابق کار» و «مهارت ها» مرکز تمرکز هستند. به طور مثال در این دسته از وب سایت ها، فرد تصویر خود و اطلاعات کم اهمیت خود را در وسط صفحه قرار می دهد در حالی که برای مشاهده پروژه های انجام شده توسط او باید چندین صفحه اسکرول کنیم یا بدتر روی لینک های کوچک کلیک نماییم.

این مسئله علاوه بر اینکه نشان می دهد شما مبانی UX را درک نکرده اید، حالتی ایجاد می کند که انگار از پروژه های خودتان راضی نیستید و آن ها را نقطه قوت خود در نظر نمی گیرید. من پیشنهاد می کنم وب سایت خود را طوری طراحی کنید که پروژه ها و سوابق کاری شما یا در همان ابتدای صفحه باشد یا تمرکز صفحه را به خود اختصاص بدهد.

طراحی مینیمال و نوآورانه

همانطور که قبلا هم توضیح دادم UX مبحث بسیار مهمی در وب سایت های پورتفولیو است. توسعه دهندگان تازه کار برای اینکه خود را ثابت کنند معمولا بیش از حد طراحی می کنند! تصور کنید می خواهید یک پیتزا درست کنید. ما می توانیم خمیر پیتزای خوشمزه ای را تهیه کنیم و آن را با کمی سبزیحات و سوسیس تزئین کنیم. این پیتزا قطعا مورد پسند اکثر افراد خواهد بود اما اگر علاوه بر سبزیجات و سوسیس بخواهیم از روغن های عجیب و غریب، نان، تربچه، بیسکوئیت و امثال آن ها را نیز در این پیتزا داشته باشیم هیچکس به آن نگاه هم نمی کند. نکته اینجاست که همیشه نباید با دنده پنج رانندگی کنید. طراحی مینیمال و در عین حال نوآورانه از نظر UX بهتر است چرا که چشم کاربر را آزار نمی دهد و او را در شلوغی صفحه رها نمی کند. اگر به وب سایت های پر طرفدار مانند توییتر نگاهی بیندازید طراحی ساده و در عین حال کاربردی آن ها را خواهید دید. چند قانون ساده در این زمینه عبارت اند از:

استفاده از یک یا حداکثر دو فونت برای کل پروژه: استفاده از فونت های مختلف به جز شلوغ کردن صفحه و حذف یکپارچگی آن،‌ کار دیگری برایتان انجام نمی دهد.
استفاده از یک خانواده رنگی: معمولا پیشنهاد می شود که وب سایت شما از یک خانواده رنگی استفاده کند یعنی رنگ ها در تضاد شدید با هم نباشند. از نظر UX گفته می شود که نباید بیشتر از ۳ رنگ اصلی داشته باشید تا ذهن کاربر را آشفته نکنید.
ساختار دهی به محتوا: محتوایی که ساختاری ساده داشته باشد، به راحتی قابل دسترسی است و محتوایی که در دسترس باشد شانس بیشتری برای دیده شدن دارد. از طفره رفتن پرهیز کنید و اطلاعات را با ساختاری مناسب و مستقیم به مخاطب نشان بدهید.

به قولی «کم همیشه زیاد است» بنابراین این اصل را در طراحی خود نیز حفظ کنید. به طور مثال شاید تصور کنید که داشتن انواع و اقسام انیمیشن ها در یک صفحه باعث جذاب شدن آن شود اما در اصل اضافه کردن انیمیشن های چند ثانیه ای و پیچیده فقط باعث بالا بردن زمان انتظار کاربران و کلافه شدن آن ها خواهد شد.

شکل گیری نظر مخاطب

معمولا حدود یک ثانیه طول می کشد تا یک فرد نظرش را درباره وب سایت شما مجسم کند و تصمیم بگیرد که آیا از وب سایت شما خوشش می آید یا بدش می آید. به همین خاطر بسیار مهم است که تمرکز اولیه کار روی چه چیزی باشد. به طور مثال اگر طراحی وب سایت شما قدیمی باشد اولین نظیری که در ذهن کاربر شکل می گیرد این است که شما با تکنولوژی های جدید آشنا نیستید و نتیجتا کار شما با کیفیت نیست. این نظر با اولین نگاه (کمتر از یک ثانیه) به طراحی وب سایت شما شکل می گیرد بنابراین وقت کافی برای ثابت کردن خود را نخواهید داشت.

بر اساس این معیار باید با خودتان بگویید که مهم ترین بخش کار من چیست؟ نام من؟ مهارت من؟ موقعیت کاری من؟ چه چیزی در رابطه با شما باید سریعا به مخاطب منتقل شود؟ توجه داشته باشید که این بخش از بحث نمایش سوابق کاری و پروژه ها جدا خواهد بود. امکان ندارد که بدون معرفی کردن خود بتوانید مجموعه ای از سوابق مختلف را به سمت کاربر پرتاب کنید! همچنین بخش سوابق نیاز به مطالعه دارد و طبیعتا بیشتر از چند ثانیه طول می کشد. هدف ما در این قسمت ارائه یک جمله کوتاه یا نهایتا چند جمله است که هویت شما را در چند ثانیه به کاربر برساند و این کار باید در همان چشم اندازه اولیه وب سایت انجام شود (چشم انداز اولیه، ). معمولا پیشنهاد می شود که در این قسمت نام خود را به همراه تخصص خودتان ذکر کنید.

آمار بی معنی

یکی از رایج ترین روش ها در طراحی صفحات پورتفولیو استفاده از آمار و گراف های بی معنی است. اگر به این دسته از وب سایت ها سر بزنید به احتمال زیاد استفاده های عجیب و غریب از progress bar یا گراف هایی برای نمایش درصد مهارت را مشاهده خواهید کرد. این دسته از آمار های بی معنی هیچ کمکی به شما نمی کنند. معمولا وجود چنین عناصری در صفحه به این دلیل است که توسعه دهنده تصور می کند نمایش گراف و جداول مختلف آماری باعث حرفه ای شدن ظاهر صفحه می شود. این مسئله صحیح است اما زمانی که آماری برای ارائه وجود داشته باشد. شما نباید یک گراف درصدی را برای نمایش سطح مهارت خود در جاوا اسکریپت در صفحه پورتفولیو قرار بدهید. مثلا زمانی که می گویید سطح مهارت شما در جاوا اسکریپت ۸۰ درصد است، منظورتان چیست؟ ۸۰ درصد از چه؟ ۱۰۰ درصد مهارت در جاوا اسکریپت به چه معنا است؟ اگر بگویید ۱۰۰ درصد در جاوا اسکریپت مهارت دارید آیا یعنی شما بهترین توسعه دهنده جاوا اسکریپت در دنیا هستید؟ این اعداد و ارقام سلیقه ای کسی را گول نمی زند بلکه برعکس باعث ایجاد حسی منفی در مخاطب خواهد شد.

بنابراین اگر می خواهید در پورتفولیوی خود از آمار استفاده کنید، از آمار معنی دار استفاده کنید؛ به طور مثال تعداد سال هایی که روی زبان برنامه نویسی خاصی تمرکز کرده اید یا تعداد سال هایی که در شرکت های مختلف استخدام بوده اید (سابقه) یا تعداد پروژه هایی که تکمیل کرده اید و الی آخر. این دسته از آمار ها معمولا کمک بیشتری به مخاطب می کنند.

طراحی جنگلی!

یکی از قوانین بسیار ساده اما بسیار مهم در UX این است که باید تعداد کلیک ها را کاهش دهید. شما به عنوان یک طراح وب باید ساختار وب سایت را طوری طراحی کنید که تعداد کلیک های لازم برای انجام کاری خاص را به حداقل برسانید. عنوان این بخش (طراحی جنگلی) به طراحی هایی اشاره دارد که مانند جنگلی انبوه و تو در تو هستند. اگر بخواهیم در این جنگل ها راه برویم باید چاقویی به دست داشته باشیم تا شاخ و برگ های روبروی خودمان را دائما قطع کرده و راه را باز کنیم. در هنگام طراحی وب سایت تعداد کلیک ها را مانند همین چاقو تصور کنید. وب سایت هایی که طراحی جنگلی دارند وب سایت هایی هستند در آن ها باید از انبوهی از داده و گزینه های مختلف عبور کنیم تا به یک متن ساده برسیم یا کار ساده ای را انجام بدهیم.

هر کلیک در وب سایت شما باید معنی خاصی داشته باشد. به طور مثال اگر من روی قسمت «درباره من» کلیک کنم باید مستقیما به صفحه ای منتقل شوم که اطلاعاتی را درباره شما در اختیار من بگذارد نه اینکه وارد بخش دیگری از برنامه شوم که گزینه های مختلفی دارد. مثلا نمایش سوابق کاری شما در سال های مختلف و به صورت تفکیک شده روش خوبی برای نمایش سوابق است اما نباید نیازمند کلیک های اضافه باشد. در حالت صحیح تمام سوابق به صورت تفکیک شده و پس از مطالب اصلی ذکر می شوند اما در حالت غلط، تک تک سال ها در قسمت هایی جداگانه آورده شده اند و من باید برای مشاهده هر سال به صورت جداگانه روی آن قسمت کلیک کنم.

راه های ارتباطی مناسب

طراحی پورتفولیوی شما نباید آنقدر روی ارائه سوابق و معرفی شما متمرکز باشد که راه های ارتباطی با شما را نادیده بگیرد. بسیاری از کسانی که به صفحه پورتفولیوی شما می آیند، می خواهند با شما ارتباط برقرار کنند بنابراین با استفاده از ایمیل یا لینک شبکه های اجتماعی یا شماره تماس راهی را به کاربر بدهید تا با شما ارتباط داشته باشد. پیشنهاد می شود که راه های ارتباطی خود را هم در header سایت و هم در footer آن قرار بدهید. البته یکی از روش های مورد علاقه من قرار دادن لینک ها به صورت ثابت در کنار صفحه است.