طراحی رابط کاربری از zero تا یه بچه hero

خب اگر با خوندن سرمقاله فک میکنی اخر مقاله یه طراح زبر دست میشی و شروع میکنی شونصدتا طرح در دقیقه میزنی که بیا برو بابا :) مگه جنگه ؟

قرار بهت یسری ابزار و سایت و مسیر معرفی کنم تا بتونی سریع یه طرح ابرومند و نه لزوما یه شاهکار هنری درست کنی بیشتر از اینکه ماهیگری یادبگیری ، یادمیگری تا با کمترین میزان ذوق هنری (قد یه ارزن حتی) و کمترین زمان ممکن و البته مجانی بتونی یه رابط کاربری درست کنی


خدایا قسمت هیچکس نکن (اموجی شیون)
خدایا قسمت هیچکس نکن (اموجی شیون)


کی طراحی کنیم کی کدشو بزنیم ؟

خب یه چاله ای هست که تقریبا بیشتر شبیه چاه نفت می مونه و اینه که میگی اوکی من تو ذهنم طرحا رو کشیدم و الان شاخ و خفن کدشو میزنم و سه سوت پروژه رو تموم میکنم ، بعد از سه ساعت اول که احساس زرنگیت افت کرد به شوکولات خوردن می افتی :) ببین برا مایی که اصن تو طراحی حرفه ای نیستیم اینکار خیلی سخته و عملا داری ذهنتو مجبور میکنی دوتا کار سنگین و هیولا رو با هم انجام بده و حالا بگو 30 تا part رو همزمان با هم بذاری دانلود شه سریع تر کُلش دانلود میشه یا اگر بذاری دونه دونه پشت سر هم دانلود شن ؟

پس بیا اول از همه طراحیت رو انجام بده و بعد برو سراغ کد زدن و پیاده سازیش

من خودم ترجیح میدم اول رو کاغذ یکم خط خطی بکنم و بعد ببرمش رو نرم افزارای طراحی چون صرفا چارتا خط رو کاغذ خیلی با تو ذهنت فرق نمی کنه




خب از کجا شروع کنیم ؟

ببین یه یاداوری میکنم که ما قرار یسری برنامه نویس باشیم که مجبور شدیم طراحی هم بکنیم ، پسسس قرار نیست که بشینیم پای illustrator و طرح خفن بزنیم

برا زمانایی که بهترین استراتژی حمله است و نباید کم بیاری
برا زمانایی که بهترین استراتژی حمله است و نباید کم بیاری

ببین اول صورت مسئله رو برا خودت مشخص کن و بعد ببین پروژه ات تو چه حوزه ایه و ببین تو دسته خاصی قرار میگیره یا نه بعد وقتشه بریم ببینیم طراح های خفن تو این حوزه یا دسته چه طرح هایی زدن واسه همین میریم سراغ این سایتا

dribbble

dribbble.com
dribbble.com


خب یکی از فوق العاده ترین سایتایی که وقتی توش چرخ میزنی زنده میشی =)) ببین داستانش اینه که یه عالمه طراح خفن میان طراحیاشون رو مجانی میذارن برا ملت که ببینن هم با لایک و کامت یجورایی اعتبار طرحشون میره بالا و هم کلی ایده خفن و جذاب هم به مای تماشا چی میدن


قرار با چرخ زدن تو این سایتا نزدیک ترین و زیبا ترین طرح به اونی که تو ذهنت داری رو پیدا کنی و ایده بگیری ازش


pinterest

www.pinterest.com
www.pinterest.com


خب pinterest هم جای باحالیه و علاوه بر طراحی رابط کاربری کللللی چیز دیگه هم توش پیدا میشه که شاخ درمیاری ( اگر ممکنه از شاخات عکس بگیر و برام بفرست :)


awwwards

www.awwwards.com
www.awwwards.com


خب اینجا میتونی سایتای شاهکار رو پیدا کنی یه چیزی تو مایه های همون جشنواره وب و موبایل خودمونه با یسری تفاوت . اینجا میتونی استانداردای خفن رو ببینی و بعد از پی بردن اختلافت باهاشون و پاک کردن اشکات می تونی کلی ایده خففففن ، خفننا ! بگیری ازشون ، پیشنهاد من اینه که صرفا سایتا رو bookmark نکن و ازشون اسکرین بگیر چون ممکنه یهو طراحیشونو عوض کنن و تو برخی از اندام هات بسوزه :))


برنده های جشنواره وب و موبایل

iwmf.ir/winners
iwmf.ir/winners


ببین این فرنگیا هرچقدرم طراحیاشون خفن و فوق العاده باشه باید حواست باشه که نشستن برا ملت خودشون با ویژگی های فرهنگی خاص خودشون طراحی کردن پس لزوما اگر اپ یا سایتت رو مثل طرح اونا طراحی کنی کاربرات باهاش حال نمی کنن پسسس حتما یه سر به اپ ها و سایتای برنده جنشواره وب و موبایل بزنن و تو فضای طراحی طراحای داخلی قرار بگیر


کپی خالی جواب نمیده !

ببین حالا گفتم که قرار نیست بری بشینی خیلی شاخ از پایه طراحی کنی ولی اگر رابط کاربریت صرفا یه کپی باشه پروژه ات شاید بازخورد خوبی نگیره و بهتر اینه که بعد از پیدا کردن ایده از اون سایت بالایی ها بیای متناسب با پروژه ات در حد توانت شخصی سازیش کنی حالا ایجا نرم افزاری که میخوای باهاش کار کنی خیلی مهم چون ما ادمای حرفه ای نیستیم و باید یه چیزی باشه که کارکردن باهاش اسون باشه ولی تا اونجا که ممکنه قدرتمند باشه

چیه خب  -_-   فوتوشاپم لایسنسش پوکیده
چیه خب -_- فوتوشاپم لایسنسش پوکیده


ببین Adobe XD واقعا یکی از بینظیر ترررین نرم افزار هایی بوده که تاحالا باهاش کار کردم خییییلی سادس کار کردن باهاش در حدی که تو یه ساعت با انگولک کردنش بدون هیچ اموزشی میشه کارکردن باهاش رو یادگرفت اما خفنیتش اینه که فوق العاده قدرتمنده . از طراحی blueprint تا ساختن پروتوتایپ ریسپانسیو میشه با نهایت کیفیت ممکن روش حساب کرد اما خب این دلیل نمیشه کارمون گیر فوتوشاپ نیافته . یه وقتایی پول نداری ایکن پولی بخری یا بدی یکی برات طراحی کنه و مجبوری اونایی که توی شونصد جاشون واترمارک هست رو دانلود کنی یا یه وقتایی نیاز به کراپ و تغییر رنگ حرفه ای داری و اینجاهاست که تنها قهرمانت فوتوشاپه ، ببین ظاهرش یه هیولای پیچیدس ولی این استفاده های ابتدایی رو خیلی سریع و اسون میشه یادگرفت و انجام داد


اوکی فوتوشاپ به حد کفایت یاد گرفتیم ، عکس از کجا بیاریم ؟

میخوام یه چی بهت معرفی کنم روح و روانت رو بیست سال جوون تر کنه


freepik

www.freepik.com
www.freepik.com



خب ببین اینجا مجانی میتونی کلی چیز دانلود کنی و به عنوان asset هات ازشون استفاده کنی خیلی محسوس کارت رو اسون میکنه و کیفیت کارت رو میبره بالا



shutterstock

www.shutterstock.co
www.shutterstock.co


یاغی این اکیپ ایشون هستن -_- یکی از عوملی که باعث شد من فوتوشاپ یادبگیرم واترمارک عکسای پولیش بود که واقعا خسته ام کرد (اموجی این خنده من از گریه غم انگیز تر است) ببین خب چون بیشترش پولیه عکساش از freepik یه سرو گردن بعضی وقتا خفن تره اما اگر بخوای ازش استفاده کنی یا باید پول بدی یا این تو و این فوتوشاپ . البته کاری که من میکنم اینه که یسری از اونایی رو که بدردم میخوره رو با واترمارک دانلود میکنم یکم تر و تمیزش میکنم تو فوتوشاپ بعد تو طراحیم میذارم ببینم کدوم بهتره اخر سر اوناییی رو که مطمئنم میخوام رو میخرم


ایکُن های زیبا و دیگر هیچ !

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

flaticon

www.flaticon.com
www.flaticon.com


در راستای ریزوندن پرهات میخوام بگم که نود و هفت هشت درصد ایکناش مجانیه و اصنم کیفیتشون پایین نیست . اگر اکانت بسازی بهت قابلیت ادیت میده قبل از دانلود و برا ضربه فنیت اینم بگم که میتونی توش pattern هم درست کنی ینی مث پس زمینه تیره خود سایتش که به شدددت فوق العاده است و البته مجانی!


یه نمونه صرفا برا اینکه خیلی کیوته
یه نمونه صرفا برا اینکه خیلی کیوته



گویا خیلی طولانی شد اما خب تموم شد :)

امیدوارم که زندگیت رو قدری اسون تر کرده باشم و همینجا از توسعه دهنده سایتا و ابزار های بالا سه هزار بار تشکر میکنم چون واقعا طراحی رو برامون به شکل وحشتناکی اسون تر کردن و کلی زمینه ذوق مرگ شدنم رو فراهم کردن (اموجی رضایت بینهایت) . همراهم باش که در ادامه قرار داستان طراحی دوتا از پروژه هامو برات بگم (اموجی ذوق مرگ) * 157



اگر با مقاله یا خودم حال کردی لایک یادت نره ها =)))))

اگر سوالی داشتی یا سایتای خفن دیگه یا راه باحال دیگه ای برای طراحی داری تو کامنت برام بگو و شادم کن ;))