چطور یک طراح وب سایت شویم؟ (قسمت یکم)

اول از همه:تکلیفتون رو با خودتون معلوم کنید. طراح وب سایت دو شاخه اصلی دارهیک: طراح UI/Ux که بیشتر با ابزارهای گرافیکی سر و کار دارید و ماهیت کارش شبیه گرافیستاست.دو: طراح frontendسایت ( یا به قول بچه ها فرانت کار! ) که بیشتر باید کدزنی کنی و با فریم ورک های Css و جاوا اسکریپت و تگ های html کلنجار بری. ماهیت کار هم شبیه برنامه نویساست.اگه از من بپرسی کدومش بهتره میگم هر دوش!چرا؟چون طراح سایتی موفقه که خودش ایده اش رو بتونه حتی در حد یه اسکچ ساده هم که شده برای مشتری طراحی کنه. و هیچ فرانت کاری (به قول همون بچه ها) نمیتونه طرحی که توی سر شماست رو اونجور که باید تبدیل کنه به صفحه وب (به صفحات طراحی شده با Html, Css وJavaScript میگیم صفحه وب) حتی اگه با تموم جزییات اون رو به صورت گرافیکی طراحی کرده باشی.با تمام این حرفا هنوز هم هستند کسانی که به صورت تخصصی فقط توی یکی از حوزه ها کار میکنند و موفق هم هستند. دیگه به خودتون بستگی داره.دوم: مثل تمام کارهای دیگه این کار هم نیاز به ابزارهایی داره پس بهتره با ابزارهای این حرفه آشنا بشید؛ابزارهای شخصیتی: توی این مقاله به ابزارهایی که باید در شخصیت شما وجود داشته باشه صحبت میکنم و در قسمت بعدی به ابزارهای فنی. من اسم اینا رو گذاشتم ابزار شما میتونید مهارت بخونید یا ویژگی یا ... صبر: برای طراح وب شدن باید صبر داشته باشید!این کار از جنس هنره در اصل کسی که وارد این کار میشه هنرمنده پس صبر داشته باشید. توی هر کاری طول میکشه تا به کسب درآمد برسید. این صبر توی کارهای هنری کمی بیشتره. پس قبل از اینکه به بقیه لیست ابزارهای مورد نیاز نگاهی بندازی و دچار گرفتگی قلبی بشی و صفحه رو ببندی! آروم با خودت بگو "نترس چیزی نیست. با صبر همه چی درست میشه!" (نفس عمیق یادت نره) خلاقیت، ایده و الهام:خلاقیت واسه طراح وب مثل نمک واسه پفکه! پایه و اساس موفقیت یک هنرمند رابطه مستقیمی با خلاقیتش داره خلاقیت یعنی از هر چیزی الهام بگیری و اینقدر باهاش وَر بری تا بتونی یه ایده‌ی ناب از دلش در بیاری مثلا با دیدن انبردست یک منوی انبردستی طراحی کنی! (خود همین شده یه ایده خوب!) این مهارت در نهاد همه هست هر کی میگه من خلاقیت ندارم مشکل از طرز نگاه کردنشه. سعی کنید عمیق تر و بیشتر نگاه کنید. چی رو؟ الان میگم.یه مثال: " دیروز یکی رو توی خیابون دیدم که یه کاسه پر از آلو جنگلی و و لواشک انار دستش بود و با چه لذتی می خورد از قیاقه اش معلوم بود خیلی ترشه!"یه لحظه به میزان بزاقی که الان توی دهنت جمع شده توجه کن. همین الان غدد بزاقیت با تجسم چیزی که خوندی تحریک شد. خلاقیت هم همینه با بیشتر و عمیقتر دیدن تحریک میشه.در زیر چندتا وب سایت معرفی کردم که میتونید برای فعال کردن غدد خلاقیت و الهام گرفتن از اونها کمک بگیریددریبل dribble.com: محبوب ترین شبکه اجتماعی طراحاست و اکثر طراخهای دنیا در هر زمینه ای در اون فعالیت می کنند. توصیه میکنم یه صفحه واسه خودتون ایجاد کنید و از همین حالا نمونه کارهاتون رو داخلش قرار بدید.بیهنس behance.net : مشابهه دریبله که توسط شرکت ادوبی (Adobe) راه اندازی شده و با یه گشت و گذار در اون میتونی د هم با ترند های روز طراحی آشنا بشید. هم با نمونه کارهای طراحان دیگه.آواردز awwwards.com : از اسمش پیداست که توی کار مسابقه و رقابته. روش کار این سایت اینجوریه که طراحا نمونه طراحی هاشون و یا سایتهایی که طراحی کردن رو داخل اون میزارن و توسط سایر مخاطبین و در نهایت داوران خود سایت آواردز رتبه بندی میشه و بهترین سایت/طراحی روز، ماه و سال معرفی میشه. اگه بتونید یکی از عنوانهای آواردز رو بگیرین خیلی برای رزومه کاریتون خوبه.مدیوم medium.com : پلتفرم باخالیه که من بیشتر برای آموزش دیدن ازش استفاده میکنم اما با سرچ UIو UX یا مراجعه به بخش طراحی میتونید به منبع عظیمی از مطالب فوق العاده در زمینه طراحی دسترسی داشته باشید.انوانتو envato.com: فروشگاه این سایت دنیایی از انواع قالب و طراحی سایت برای فروش هستش که البته ما برای خریدن نمیریم اونجا فقط از اونا الهام میگیریم!چشم بصیرت: طراح وب باید چشم بصیر داشته باشه!به لحاظ هنری چیزی که به درستی ترکیب بندی شده باشه بهتر به چشم میشینه و هرچه بر دیده نشست "لاجرم بر دل نشیند! " دو تا تصویر زیر رو ببینید هر دو محتویاتش یه چیزه اما شما کدوم رو انتخاب میکنی؟ کدوم رو انتخاب میکنی؟احتمالا گزینه یک چون در اون از یک سری اصول خاصی استفاده شده. ترکیب بندی در طراحی ظاهر وب سایت یعنی جایگاه تک تک المانها نسبت به کل صفحه و نسبت به هم. یاد گرفتنش کار سختی نیست یک سری اصول اولیه مثل کانون طلایی، قانون یک سوم یا ترکیب طلایی وجود داره که با یه گوگل ساده میتونی در موردشون بدونی که خیلی لازمه و در ترکیب بندی بهتر کمکت میکنه. بعد از اون میتونی هر جا سایتی دیدی که به نظرت جذاب اومد به لحاظ ترکیب بندی تحلیلش کنی و ببینی از چه اصولی پیروی کرده ( در مقاله های آینده حتما در مورد انواع ترکیب بندی در صفحات وب سایت صحبت میکنم) هوش رنگی : میخواهید طراح وب بشید؟ مغزتون رو رنگ کنید!در مورد رنگها و رنگ شناسی میشه سالها صحبت کرد. علوم روانشناسی ثابت کرده که فقط یه هوش نداریم بلکه چندین هوش داریم و هر کسی در یک یا چند زمینه با هوشه مثل هوش ادبیات، هوش ریاضی و ... .هوش رنگ شناسی هم یکی از اوناست. خبر خوب اینه که میشه هر نوع هوشی از جمله هوش رنگ شناسی رو با تمرین، تقویت کرد. چطوری؟ به همون روش خوب دیدن و عمیق دیدن. ئر ادامه چندتا سایت معرفی می کنم که خیلی کمک میکنه اما قبلش دو تا مورد رو در زمینه کاربرد رنگ در طراحی سایت در نظر داشته باشید؛اول : هیچ رنگی به تنهایی قشنگ نیست ( این نظر شخصی منه! با اینکه به شخصه علاقه خاصی به رنگ زرد دارم اما هیچ وقت اون رو به تنهایی استفاده نمیکنم)دوم: ممکنه یه ترکیب رنگ در پوشاک، کارهای چاپی و غیره قشنگ باشه اما الزاما در مورد کاربردش در طراحی ظاهر سایت اینطوری نیست و برعکس.وب سایت Colourco.de : ابزاری آنلاین برای ترکیب کردن رنگهاست که در نهایت می تونید رنگ های انتخابی رو در قالب پالت رنگ یا استایل شیت بگیرید.وب سایت Color.adobe.com : ادوبی یا چیزی رو درست نمیکنه یا وقتی درست کرد حسابی درستش میکنه. توی این سایتش هم با الگوریتم خاصی رنگها رو هوشمندانه ترکیب میکنه و یه پالت رنگ زیبا بهت میده .خلاصه دست خالی بیرون نمیایی.وب سایت Kheroma.co : تلفظش میشه (خ رما) رنگاهی مورد نظرت رو انتخاب کن. خودش یه عالمه ترکیب رنگ باحال بهت میده یه قابلیت دیگه اش اینه نشونت میده هر متنی رو چه رنگی خوب میشه.وب سایت Uigradients.com : اسمش مشخصه برای گرفتن گرادینت (تدارج رنگ) خوبه.وب سایت Flatuicolors.com : با همکاری بیش از 13 طراحی از سراسر دنیا ترندها و پالتهای رنگی مورد علاقه توی هر کشور رو جمع آوری کردهوب سایتهای دیگه ای هم هستند که شاید شما سراغ داشته باشید پس توی کامنتها اونا رو با دیگران به اشتراک بذارید. پشتکار:استقامت و پشتکار یگانه راه رسید به آرزوهاست من این مقاله رو با این فرض نوشتم که شما به کار طراحی علاقه دارید. بعد از علاقه مهمترین ابزاری که باید اون رو در خودتون تقویت کنید پشتکار هستش. پشتکار نداشته باشید خیلی زود خسته میشید و در میانه را می مانید.