آموزش طراحی گرافیک سایت در فتوشاپ UI/UX (101 ویدیو) web design in photoshop

به دوره آموزش طراحی گرافیک سایت در فتوشاپ خوش اومدید. من مهران موسوی هستم و تو این دوره به شما کمک می کنم تا بتونید به یک طراح قالب سایت تبدیل بشید.

این دوره بصورت آنلاین هست و شما با خرید آن به 101 ویدیو (بیش از 11 ساعت) آموزش فارسی دست پیدا می کنید.

سعی کردم در 19 فصل تمامی مباحث مرتبط با طراحی گرافیک سایت رو براتون به زبان ساده و قابل فهم توضیح بدم.

در همین صفحه می تونید توضیحات کامل این دوره رو بهمراه تصاویر و ویدیو های پیش نمایش مشاهده بفرمایید.

فصل 1 : معرفی دوره

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

تو این فصل بهتون میگم که طراحی گرافیک سایت یا همون قالب به چه معناست.

نرم افزار های مورد نیاز، فایل هایی که باید دانلود کنید و نحوه مشاهده ویدیو ها رو هم توضیح میدم.

ویدیو های این فصل رو همین جا بین متن ها قرار دادم ولی از تب "ویدیو ها" تو همین صفحه هم می تونید لیست درس های تمام فصل ها رو مشاهده کنید.

طراحی گرافیک سایت چیست ؟!

ممکنه براتون سوال پیش بیاد که اصلا "طراحی گرافیک سایت" یا "طراحی قالب سایت" چیه؟!

هر سایتی تو چند مرحله ساخته میشه.

اگه بخوایم خیلی کلی به ساخت یک سایت نگاه کنیم، می تونیم به 4 مرحله تقسیمش کنیم.

1- مشخص کردن موضوع سایت و نیاز های کاربر

2- طراحی گرافیک

3- کدنویسی

4- آزمایش

ما توی این دوره بطور کامل می خوایم روی مرحله 1 و 2 کار کنیم.

یعنی موضوع سایت رو مشخص کنیم و به بررسی نیاز های مشتری بپردازیم.

بعد از بررسی بیایم طراحی گرافیک رو با توجه به اطلاعاتی که داریم انجام بدیم.

خود مرحله طراحی گرافیک چند مرحله داره که توی فصل بعد توضیح میدم.

دقت کنید که در این دوره ما کدنویسی نداریم.

ما تو این دوره فقط طراحی گرافیک، استاندارد هایی که داره و نکاتی که پشتش هست رو بررسی می کنیم.

از بررسی سفارش مشتری، تا ساخت وایرفریم و طراحی گرافیک رو بهتون آموزش میدم.

برای اطلاعات بیشتر ویدیو های همین صفحه رو مشاهده کنید.

نرم افزار های مورد نیاز، پیش نیاز و نحوه مشاهده ویدیو ها

ما در این دوره تنها از نرم افزار فتوشاپ (Adobe Photoshop) استفاده می کنیم.

این دوره مناسب تمام افرادی هست که علاقه به یادگیری طراحی گرافیک سایت/قالب دارن.

سطح این دوره برای شروع "متوسط" تعیین شده.

به این معنی که برای یادگیری بهتر پیشنهاد میشه قبل از مشاهده این دوره، دوره های "آموزش مقدماتی فتوشاپ" و "آموزش فتوشاپ سطح متوسط" یوکسیم رو مشاهده کنید.

شما می تونید ویدیو های این دوره رو بصورت آنلاین تو همین صفحه بخش "ویدیو ها" مشاهده کنید یا با لینک مستقیم روی سیستم خودتون دانلود کنید.

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

وقتی خودتون هم طراحی کنید تاثیرش بیشتره و بهتر یاد می گیرید.

ممکنه به مشکلاتی بخورید که مجبور بشید برید دنبالش و جوابشو پیدا کنید.

فایل های دوره و کپی رایت

بعد از ثبت نام، فایل های دوره رو از همین صفحه دانلود کنید.

و دقت کنید که این دوره یک دوره آموزشی هست، نه فروش فایل!

فایل فتوشاپ خیلی از طرح هایی که انجام میدیم رو براتون نزاشتم تا خودتون از روی ویدیو ها طراحی کنید و یاد بگیرید.

فکر می کنم اگه فایل های فتوشاپ رو بزارم انگیزه ای برای انجام طرح ها براتون نمیمونه.

اما هر فایلی برای طراحی قالب ها نیاز داریم و هر فایلی که خودم توی ویدیو های آموزشی استفاده می کنم رو گذاشتم که راحت بتونید کنار من از روی ویدیو ها تمرین کنید.

فایل فونت های فارسی ای که استفاده میشه هم قرار نگرفته چون کپی رایت دارن و رایگان نیستند.

فصل 2 : مراحل طراحی گرافیک سایت

تو این فصل بطور خلاصه مراحل طراحی گرافیک سایت رو توضیح میدم.

هر کدوم از این مراحل رو جلوتر بیشتر کار می کنیم و توی ویدیو های مختلف درباره هر کدوم صحبت میشه.

این فصل بیشتر برای اینه که یک پیش زمینه کلی از کارهایی که انجام میدیم داشته باشید تا جلوتر درس ها براتون گمراه کننده و سخت نشه.

وقتی بدونید مراحل کار به چه صورته، توی انجام پروژه ها راحت ترید و با تسلط بیشتری پیش میرید.

مراحل طراحی گرافیک سایت به این صورته : 

1- مشخص کردن موضوع و نیاز ها

2- انتخاب سبک طراحی

3- ساخت وایرفریم و سایت مپ

4- انتخاب رنگ ها

5- شروع طراحی گرافیک

6- طراحی حالت موبایل سایت

مرحله 6 (طراحی حالت موبایل سایت) دلخواهه. کم پیش بیاد مشتری ازتون بخواد حالت موبایل سایت رو هم طراحی کنید، ولی چند صفحه رو با هم تو یکی از فصل ها جلوتر به حالت موبایل تغییر میدیم که این رو هم کامل یاد بگیرید.

توی فصل های بعد هم راهنماییتون می کنم که چطور سبک یا رنگ طراحی رو انتخاب کنید، وایرفریم طراحی کنید، خود طراحی گرافیک رو انجام بدید و...

تو این دوره چندین پروژه (طراحی گرافیک سایت) رو کار می کنیم که تصاویری از کار ها رو می تونید تو همین صفحه ببینید.

با تمرین این ویدیو ها کنار من، نکات زیادی تو طراحی گرافیک سایت رو یاد می گیرید.

فصل 3 : مباحث مهم و اولیه

تو این فصل نکاتی رو بهتون آموزش میدم که قبل از شروع طراحی گرافیک بهتره بدونید و آشنا باشید.

این فصل شامل ویدیو های زیر است :

1- اسم 10 قسمت سایت که باید بدونید

2- 10 نوع وب سایت که می تونیم طراحی کنیم

3- سبک های طراحی گرافیک برای سایت

4- 8 نوع پس زمینه برای سایت

5- انتخاب سبک مناسب

6- انتخاب رنگ مناسب

7- انتخاب فونت مناسب

8- ریسپانسیو (Responsive) چیست؟

9- تفاوت سایت Fullscreen با Wrapper/Container

10- اندازه صفحه طراحی برای کامپیوتر، لپ تاپ، تبلت و موبایل

11- برای یادگیری طراحی گرافیک سایت دانستن HTML/CSS لازمه؟

فصل 4 : سایت مپ (Sitemap)

طراحی سایت مپ (Sitemap) همیشه الزامی نیست. مبحث سختی هم نیست و راحت یاد می گیرید.

بنظرم بیشتر برای سایت های بزرگ مفیده چون صفحه ها و ارتباطات بین هر یک رو قابل درک تر می کنه و در نهایت کار طراحی وایرفریم تا جایی آسون تر میشه.

تو این فصل سایت مپ رو توضیح میدم و یک نمونه هم کار می کنیم.

فصل 5 : وایرفریم (Wireframe)

وایرفریم رو نقشه سایت فرض کنید.

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

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

تو این فصل وایرفریم رو بهمراه نمونه توضیح میدم.

همچنین روش های طراحی، سایت یا برنامه برای طراحی وایرفریم رو بهتون معرفی می کنم.

آخر این فصل هم 3 تا تمرین جالب وایرفریم داریم که حتما انجام بدید.

تو چندتا از فصل های بعد که طراحی گرافیک رو کار می کنیم، برای بعضی از سایت ها طراحی وایرفریم رو هم انجام میدیم.

فصل 6 : طراحی گرافیک سایت شخصی (Personal)

تو این فصل کار طراحی گرافیک سایت رو با طراحی یک قالب ساده شروع می کنیم.

اول از همه میایم نیاز های خودمون رو بررسی می کنیم و اطلاعاتی که برای طراحی لازم داریم رو می نویسیم.

اطلاعاتی که مشخص کردنشون تو این مرحله، کار رو برای طراحی در مراحل بعدی آسون تر میکنه.

چیز هایی مثل بخش هایی که لازم داریم، رنگ بندی، سبک کار و... .

بعد از تعیین نیاز ها یک وایرفریم خیلی ساده فقط برای مشخص کردن بخش های سایت می کشیم.

وقتی این کار رو انجام دادیم نوبت طراحی گرافیک میرسه.

طراحی گرافیک این قالب رو تو چند ویدیو بصورت جدا برای Header، Content، Sidebar و Footer انجام میدیم.

 

فصل 7 : User Interface و User Experience

ما تو این دوره و طراحی هایی که انجام میدیم بطور همزمان هم بروی UI متمرکز میشیم و هم بروی UX.

تو این فصل به زبان ساده مفهوم User Interface و User Experience رو کامل میگم تا راحت متوجه بشید.

همچنین 10 اشتباه در طراحی UX سایت رو با هم بررسی می کنیم و نکاتی رو در رابطه با انتخاب مکان عناصر سایت و اهمیت این موضوع رو توضیح میدم.

فصل 8 : طراحی گرافیک سایت تمام صفحه (Fullscreen)

تو این فصل یک قالب تمام صفحه بدون اسکرول رو کار می کنیم.

با این پروژه مثل یک سفارش واقعی برخورد می کنیم.

از روی نیاز های مطرح شده میایم بخش های مورد نیاز، رنگ بندی، سبک کار و... رو مشخص می کنیم تا در مراحل بعد طراحی گرافیک رو انجام بدیم.

بعد از مشخص شدن نیاز ها، با نرم افزار فتوشاپ وایرفریم تمام صفحاتی که لازم داریم رو طراحی می کنیم.

وقتی هم وایرفریم آماده شد، کار طراحی گرافیک هر صفحه رو شروع می کنیم.

تو این فصل از 0 تا 100 طراحی گرافیک یک قالب تو شرایط و سفارش واقعی رو تجربه می کنید.

 

فصل 9 : طراحی گرافیک سایت با ستون ها (Grids)

یک روش طراحی گرافیک سایت که کار طراحی رو براتون آسون تر می کنه، استفاده از ستون هاست.

ما می تونیم با استفاده از Guides و Grids صفحه کاری خودمون رو خط کشی و علامت گذاری کنیم.

با این کار فضای طراحی و فاصله ها بهتر مشخص میشه و راحت تر می تونیم طراحی وایرفریم یا گرافیک سایت رو انجام بدیم.

می تونیم صفحه کاری رو با توجه به فضای Wrapper/Container که مشخص می کنیم علامت گذاری کنیم.

تو این فصل یک روش آسون رو برای اینکار بهتون یاد میدم و بعد با همین روش یک قالب ساده رو هم طراحی می کنیم تا ببینید چقدر کار طراحی برامون آسون تر میشه.

 

فصل 10 : طراحی گرافیک سایت فروشگاهی (صفحه اصلی)

سایت های فروشگاهی معمولا بخش های بیشتری نسبت به سایر موضوعات دارن.

بخاطر همین طراحی یک قالب فروشگاهی چالش خوبیه تا بتونید طراحی گرافیک سایت رو بهتر یاد بگیرید.

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

اینجا طراحی گرافیک تو فتوشاپ رو یاد می گیرید.

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

قالبی که برای این فصل طراحی کردم با موضوع سایت فروشگاه لباس هست.

اما چندان فرقی نمیکنه، مثلا می تونید با تغییر تصاویر و متن ها (و بعضی از قسمت ها که مختص فروشگاه لباس هست) برای هر موضوعی در نظر بگیرید.

این قالب دارای بخش های سربرگ، اسلایدر تخفیف ها، دسترسی سریع به محصولات، 6 بنر (3 بنر گرافیکی و 3 بنر تصویری)، لیست محصولات، برند ها و پابرگ است.

فایل هایی که برای طراحی این قالب لازم داریم رو براتون در بین فایل های دوره قرار دادم تا کنار من طراحی رو از روی ویدیو ها انجام بدید.

با اینکه این دوره طراحی گرافیک سایت هست، 6 بنر موجود در این قالب رو هم از صفر طراحی می کنیم تا نحوه طراحی این بنر های ثابت رو هم یاد بگیرید.

 

فصل 11 : طراحی گرافیک سایت فروشگاهی (صفحه محصول)

تو این فصل صفحه محصول همون قالب فروشگاهی فصل قبل رو طراحی می کنیم تا با طراحی سایر صفحات یک قالب هم آشنا بشید.

اینکه چه بخش هایی رو باید نگهداری و چه بخش هایی رو حذف کنید.

و اینکه به سبک و رنگ بندی ای که برای صفحه اصلی در نظر گرفتید دقت کنید و همون سبک کار رو برای سایر صفحات داخلی در نظر بگیرید.

صفحه های یک سایت باید از لحاظ سبک و رنگ بندی مشابه هم باشند.

تا کاربر با مشاهده صفحه دیگه ای از همون سایت حس نکنه که بطور کامل در سایت دیگه ای قرار داره!

همخونی بین صفحه ها و یکنواخت بودن قالب مهمه.

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

 

فصل 12 : بازطراحی و بهبود گرافیک یک سایت

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

سعی کنید بهبودش بدید یا با رنگ بندی و سبک دیگه ای بازطراحی کنید.

بخاطر این میگم تمرین خوبی برای بهتر شدن تو طراحی گرافیکه که دیگه اینجا نیازی به مشتری، وایرفریم و ... ندارید، همه چیز آماده برای تمرین شماست.

همون چیزی که هست رو بهترش کنید یا حتی سعی کنید مشابه همون رو توی فتوشاپ طراحی کنید.

اینطوری با انجام طرح های واقعی با بخش های مختلف فتوشاپ کار می کنید.

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

این روش رو فقط برای تمرین بهتون معرفی کردم، نه انجام سفارش های واقعی.

کپی کردن طرح از سایت های دیگه برای پروژه های واقعی شما رو به جایی نمیرسونه.

سعی کنید خالق طرح های خودتون باشید.

اولش سخته ولی با تمرین هر چیزی شدنیه.

 

فصل 13 : طراحی حالت ریسپانسیو موبایل از روی دسکتاپ

تو این دوره مفهوم ریسپانسیو (Responsive) رو توضیح میدم و قالب هایی که طراحی می کنید باید قابل ریسپانسیو شدن باشن.

برای اینکه با این قضیه بهتر آشنا بشید بهتره که چند تا صفحه قالب طراحی شده رو بیایم به حالت موبایل تبدیل کنیم.

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

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

 

فصل 14 : طراحی نسخه تیره سایت (Dark)

تو این فصل آموزش میدم که چطور قالبی که طراحی کردید رو به حالت تیره یا همون Dark تغییر بدید.

بعضی از سایت ها این آپشن رو دارن که کاربر می تونه انتخاب کنه قالب روشن باشه یا تیره.

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

ممکنه مشتری از شما بخواد حالت تیره قالب روشنی که طراحی کردید رو هم آماده کنید.

تو این فصل قالب "سایت شخصی" که در فصل های قبل آماده کرده بودیم رو میاریم و به حالت تیره تبدیل می کنیم.

یک تمرین هم آخر این فصل براتون قرار دادم که حتما انجام بدید.

 

فصل 15 : صفحات خطا و 6 طرح صفحه "بزودی" و "در دست ساخت"

تو این فصل دو صفحه اررور مهم (404 و 403) که ممکنه مشتری از شما بخواد برای اون ها هم طرحی انجام بدید معرفی کنم.

در ادامه هم 6 طرح از صفحات "بزودی" و "در دست ساخت" رو کار می کنیم.

6 طرح رو آماده کردم که هر کدوم رو در ویدیو های جدا آموزش میدم چطور طراحی کنید.

این صفحات بصورت فول اسکرین و بدون اسکرول هستن.

هر صفحه می تونه شامل عنوان، متن، تصویر، تایمر، نوار پیشرفت و ... باشه که این فصل کار می کنیم.

فصل 16 : منابع دانلود فایل های رایگان برای طراحی

همیشه طراح ها تمام عناصر رو از صفر طراحی نمیکنن.

وب سایت های زیادی برای دانلود فایل های گرافیکی رایگان وجود داره که می تونید از اون ها در طراحی های خودتون استفاده کنید.

تو این فصل بهترین منابع برای دانلود فایل های رایگان رو معرفی می کنم.

2 سایت برای دانلود فونت، 5 سایت برای دانلود رنگ و طیف رنگ گرادینت، 5 سایت برای دانلود تصاویر رایگان، 5 سایت برای دانلود طرح های گرافیکی و 5 سایت برای دانلود آیکون های رایگان.

فصل 17 : راهنمایی های بیشتر

تا اینجا طرح های زیادی رو کار کردیم و مباحث مختلفی رو یاد گرفتید.

بد نیست تو این فصل یکم بیشتر راهنماییتون کنم و مباحث جدیدتری رو یاد بدم که شما رو از بقیه جلوتر بندازه!

خیلی از طراح ها به نکاتی که تو این فصل اشاره میشه توجهی نمیکنن و همین نکات ریز هستند که در کنار هم شما رو به یک طراح حرفه ای تبدیل میکنن.

این فصل مشابه فصل "مباحث مهم و اولیه" هست و مثل همون فصل تو ویدیو های کوتاه درباره موضوع های جدیدی صحبت می کنیم.

موضوعاتی مثل اهمیت انتخاب رنگ و تصویر مناسب، پنل Swatches، محتوای مناسب برای طراحی ها، سرعت سایت، حجم تصاویر و PSD، مفهوم Whitespace، حالت های Hover و Active، مرتب سازی لایه ها، طراحی گزینه های ادیتور متنی و ... .

فصل 18 : تمرین

طرح های زیادی رو با هم کار کردیم و تمرین های زیادی رو توی فصل های مختلف داشتیم.

تو اکثر این تمرین ها من خودم نحوه طراحی رو نشون دادم.

این فصل فرق داره!

اینجا تنهاتون میزارم تا با تجربه ای که تو این دوره بدست آوردید تمرین هایی که خواستم رو انجام بدید.

تو این فصل 5 تمرین رو بهتون میدم.

4 تمرین طرح های آمادست که باید از روی اون خودتون بازطراحی کنید.

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

بخش هایی که لازم دارم رو میگم و کامل برعهده شماست که چطور می خواید طراحی کنید.

یه تمرین واقعی و عالی که خودتون رو در انتهای این دوره محک بزنید.

فصل 19 : فصل پایانی

تا اینجا مباحث زیادی رو یاد گرفتید و تو فصل آخر فقط صحبت های نهایی رو می کنم.

فقط کمی درباره قدم بعدی و کار طراحی گرافیک راهنمایی می کنم که امیدوارم براتون مفید باشه.

چرا فتوشاپ (Adobe Photoshop) ؟

فتوشاپ یکی از بهترین نرم افزار ها برای طراحی گرافیکه و بسیاری از طراح ها برای طراحی گرافیک سایت/قالب از این نرم افزار استفاده می کنن.

با این نرم افزار هم طراحی وایرفریم و هم طراحی گرافیک هر نوع سایتی رو می تونید انجام بدید.

کپی رایت

تمامی طراحی هایی هم که در این دوره انجام می شود متعلق به سایت یوکسیم است.

طرح ها فقط برای تمرین و یادگیری شما هستند و شما اجازه فروش، کدنویسی و یا هرگونه استفاده دیگه از آن ها را ندارید.

همچنین از اشتراک گذاری ویدیو های آموزشی (که رایگان یا پیش نمایش نیستند) خودداری کنید.

شما فقط اجازه اشتراک گذاری ویدیو در داخل خانه خود را دارید (با افرادی که در یک خانه زندگی می کنید).

برای اطلاعات بیشتر به صفحه قوانین و شرایط استفاده مراجعه بفرمایید.