توی این قسمت میخواهیم به معرفی نرم افزارها و مهارتهای مورد نیاز یک طراح وب سایت بپردازیم. قبل از هر چیز این رو باید بگم که این مقاله نظرات شخصی من هستش و با اشتیاق تمام منتظر شنیدن نظرات و پیشنهادادتون برای بهتر شدنش هستم.
الف) نرم افزاهای طراحیUI :
سلطان نرم افزارهای طراحی، یک نرم افزار فوق العاده برای کار با تصاویر و طرح های پیکسلی. با اینکه در آپدیت 2015 ابزارهایی برای طراحی UI به این نرم افزار اضافه شد اما همچنان طراحی UI باهاش سخته چون برای این کار ساخته نشده و یک نرم افزار چند منظوره است.
- به چه کاری میاد: شما برای طراحی پروتوتایپ اولیه سایت، طراحی UI و طراحی و ویرایش تصاویری که در صفحه وب استفاده میکنید میتونید از فتوشاپ کمک بگیرید.
- از کجا یادش بگیریم: بهترین منبع برای یادگیری کتاب هستش اما اگه حوصله خوندن کتاب رو ندارید میتونید از یوتوب کمک بگیرید. به لینکهای زیر هم میتونید سر بزنید. در آینده حتما آموزش طراحی UI با فتوشاپ رو بهتون آموزش میدم.
https://abanweb.net/post/22/photoshop-fundamental
https://sariasan.com/photoshop-tutorial/
یه نرم افزار عالی برای کار با وکتورها و تصاویر وکتوری از شرکت ادوبی. به نظر من فتوشاپ و ایلوستراتور مثل آچار فرانسه و انبردست هستند توی جعبه ابزار. جعبه ابزاری که این دو تا رو نداشته باشه همیشه آدم رو لنگ میزاره!
- به چه کاری میاد: امروزه تصاویر وکتور و SVG جزی از صفحات وب شدند برای همین برای طراحی یا ویرایش این تصاویر یه این نرم افزار نیاز دارید
- از کجا یادش بگیریم: مثل فتوشاپ بهترین منبع برای یادگیری این نرم افزار کتابه اما با یه جستجو در گوگل و یوتوب میتونید به منابع زیادی دسترسی داشته باشید. لینک های زیر هم بد نیست.
https://sariasan.com/illustrator/full-free-lessons-5/
https://sariasan.com/illustrator/free-illustrator-pdf-books/
https://amoozesh365.ir/section/illustrator/
http://persiangfx.com/fa/tutorials/illustrator/illustrator-video/adobe-illustrator-cc-2020-beginner/
1- جدیدترین عضو خانواده ادوبی هست که رسما از 2016 با همین اسم وارد بازار شد و داره میره که کم کم جای نرم افزار محبوب اسکچ رو بگیره.
- به چه کاری میاد: ادوبی ایکس دی نرم افزار تخصصی طراحی UI و پروتوتایپ هست. چه بخواهید طراحی فرانت اند وب سایت رو انجام بدید و چه بخواهید Ui یک اپلیکیشن موبایل رو کار کنید، این نرم افزار خیلی به کارتون میاد. زیاد پیچیده نیست و کار باهاش مثل فتوشاپ سخت نیست.
- از کجا یادش بگیریم: لینک زیر میتونه برای یاد گیری این نرم افزار کمکتون کنه.
https://www.aparat.com/v/NA7P2/آموزش_جامع_نرم_افزار_Adobe_XD_-_قسمت_اول_-
در روزگارانی برای پویا نمایی و جان دادن به صفحات وب از تصاویر متحرک (گیف) و ماکرومدیا فلش استفاده می شد اما الان اوضاع کمی فرق کرده و تصاویر متحرک با کیفیت بالا و حجم کم و تصاویر پویای ( انیمیت) تعاملی جزی از سایت ها با طراحی سطح بالا هستند. میپرسید پویای تعاملی چیه (این واژه رو خودم درست کردم)؟ به انیمیشنهایی که با فعالیت های کاربر اتفاق می افته (تصاویر زیر رو ببینید)میگن.
مثلا وقتی روی دگمه منو کلیک میکنید شکلش عوض میشه چندتا لینک زیر روببینید خودتون متوجه میشید. البته به یمن تغییرات زیادی که مرورگرها، Css و HTML داشته خیلی از این تعاملات و انیمیشن ها رو میشه مستقیما در صفحات وب و بدون هیچ نرم افزاری و فقط با HTML و Css انجام داد.
https://codepen.io/grohit/pen/jObGzdG
https://codepen.io/dbenmore/pen/ExVxeyv
https://codepen.io/cassandraPaige/pen/BayGLaY
- به چه کاری میاد: برای تولید انیمیت ها و مونشن گرافی .
- از کجا یادش بگیریم: لینک زیر منبع نسبتا خوبیه برا شروع.
https://www.limoonad.com/course/80607/فیلم-آموزش-نرم-افزار-افتر-افکت-after-effect
ب) نرم افزاهای طراحی وب سایت :
1- محیط کد نویسی : جایی که بتونید کدهای Css, HTML, Javascript رو بنویسید. برای کسی که تازه وارد حیطه‌ی برنامه نویسی شده است، یکی از مهم‌ترین تصمیم‌هایی که باید بگیرد این است که یک محیط توسعه برای خود انتخاب کند. در این مقاله میخواهیم درباره‌ی تفاوت IDE و Editor ها صحبت کنیم.
اصلا نگران نباشید اول از باید بدونید تفاوت IDE و Editor چیه؟
اما اگه بخوام خیلی خلاصه بگم شما هم به IDE و هم به یک ادیتور ساده نیاز دارید پس زیاد خودتون رو درگیر اینکه وای اینو نصب کنم یا اونو اگه اونو نصب کنم اینو چه کار کنم و ... نباشید به عنوان مخیط برنامه نویسی مجتمع Intellij WebStorm یا Dreamweaver CC رو پیشنهاد میکنم و به عنوان ویرایشگر کد هم Visual Studio Code یا Sublime البته اینها تجربه شخصی من هستش و توصیه میکنم شما هم تجارب شخصی خودتون رو داشته باشید!
مرورگر: کدوم مرورگر بهتره واسه فرانت اند کار؟ همش برای اینکه نتیجه کارتون رو توی مرورگرهای مختلف ببینید بهتره همه رو داشته باشید حتی اینترنت اکسپلورِر و خروجی کارتون رو توی همه مرورگرها ببینید.
مهارت ها:
هر صفحه وب از سه زبان مختلف تشکیل شده HTML ، Css و JavaScript (HTML وCss زبان برنامه نویسی نیستند. در اصل نوعی زبان نشانه گذاری هستند).
ساختار صفحات وب را مشخص میکند . در html همه چیز را در تگ های مشخص تعریف میکنیم html مانند دیوارهای آجری و فونداسیون در یک ساختمان است.
از کجا یاد بگیریم؟ بهترین منبع برای آموزش html وب سایت w3school است که هم یک منبع آموزش عالی با امکان تست کدها به صورت آنلاین هست و هم یک رفرنس کامل و معتبر.
ظاهر، استایل و چیدمان تگ های HTML را CSS تعیین میکند مثل پریزها، کلیدها ، کاغذ دیواری و در کل نازک کاری ساختمان.
از کجا یاد بگیریم؟ سه تا منبع خوب برای آموزش CSS هست وب سایت w3school ، وب سایت css-tricks و نمونه ایرانیش که کار آقای #مهندس_مجتبی_سیدی هست ( من خودم CSS رو از همین سایت یاد گرفتم( .سایتشون بسیار خوب و کاربردیه.
یک زبان برنامه نویسی عجیب و غریبه که فهمیدنش کمی هم مشکله. JavaScript مثل لوله های آب و سیم های برق و در کل منطق حاکم بر خانه است. مثلا وقتی که شما شیر آب در آشپزخانه را باز می کنید انتظار ندارید چراغ اتاق خواب روشن بشه.(البته اگه هم انتظارش رو دارید باز هم با جاوااسکریپت شدنیه!)
از کجا یاد بگیریم؟ وب سایت w3school اما دوتا منبع خوب دیگه هم معرقی میکنم سایت آموزش جاوا اسکریپت و وب سایت mdn متعلق به شرکت موزیلا
زبان ( انگلیسیش): زبان انگلیسی رو به چند دلیل باید در حد اینکه بتونید کارهاتون رو راه بندازید بلد باشید اول اینکه خود زبانهای کد نویسی انگلیسیه دوم اینکه بهترین مراجع هم انگلیسیه و از همه مهمتر وقتی کارتون جایی گیر میکنه بهتریم جایی که میتونید کمک بگیرید سایتهاییه که معمولا انگلیسیه. آقا برو انگلیسی رو یاد بگیر بحثم نکن!. ای بابا!
مبارزه با چالش ها : کل برنامه و اجرای طرح یک صفحه وب از اول تا آخرش چالشه و قطعا به مشکل برخورد میکنید پس باید یاد بگیرید چجوری مشکلاتت رو حل کنی بهترین روش پرسیدن سواله اونم توی انجمن های مخصوص به هر زبانه برنامه نویسیه. بهترین وب سایت تو این زمینه stack overflow هستش سوال پرسیدن و کلا کار کردن با این مدل سایتها رو یاد بگیرید.
