طراحی قالب وب سایت در فتوشاپ

طراحی قالب وب سایت در فتوشاپ

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

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

طراحی قالب وب سایت در فتوشاپ

UI و UX در طراحی وب سایت چیست؟

در طراحی سایت دو کلمه UX و UI بسیار استفاده می شود و عنوان شغلی برخی از طراحان وب سایت UX Designer و برخی دیگر UI Designer می باشد. تفاوت این دو در کجاست که در این مقاله سعی دارم تفاوت بین این دو مورد را به طور کامل برای شما شفاف سازی نمایم.

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

UX چیست؟

User Experience – UX شامل رفتار، حالت و احساست کاربر در مورد استفاده از یک محصول و یا سیستم خاص گفته می شود. تجربه کاربر شامل جنبه های عملی، تجربی، موثر ، معنی دار و جنبه های با ارزش اثر متقابل انسان و کامپیوتر و محصول می باشد، که شامل درک کاربر از جنبه های مختلف سیستم شامل کاربرد، سادگی در استفاده و بهره وری می باشد. بر اساس تعریف ISO عنوان user experience شامل کلیه عواطف، اعتقادات، مزیت ها، پاسخ های فیزیکی و روانی، رفتارها و اجراها قبل از زمان استفاده، در زمان استفاده و بعد از آن اطلاق می گردد.

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

UI چیست؟

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

تفاوت بین UI و UX

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

UI مخفف User Interface می باشد که در صنعت نرم افزار به هر چیزی که در صفحه نمایش داده می شود گفته می شود که شامل تصاویر، متن ها، دیاگرام ها، ماژولها، جداول ، ویدئوها و همچنین رنگ ، سایر و مکان آن ها می باشد.

UX مخفف User Experience می باشد که بسیار وسیع تر از UI می باشد و به تجربه و احساس کاربر زمانی که از محصول شما استفاده می نمایند گفته می شود. به عنوان مثال زمانی که شما از سایت دارکوب محصولی را سفارش می دهید و آن بسیار سریع تحویل شما می گردد به این معناست که UX خوبی وجود داشته است.

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

در پایان

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

منبع توضیحات  UI و UX  : سایت دارکوب

جزییات ویدیو ها و سر فصلهای این تمرین.

فیلم اول : مدت زمان 40 دقیقه

  • توضیحاتی در مورد شروع کار و قواعدی که باید برای طراحی بدانیم.
  • توضیحاتی در مورد پنل Layers  و پنل ابزارها
  • ایجاد یک سند جدید در فتوشاپ با تنظیماتی برای طراحی وب
  • روش کپی گرفتن از لایه ها
  • توضیحاتی در مورد ابزار رسم Shape
  • توضیحاتی درمورد ابزار Type
  • حل مشکل صد در صد تایپ فارسی در فتوشاپ
  • توضیحاتی در مورد طراحی رسپانسیو یا واکنش گرا
  • توضیحاتی در مورد اندازه های استاندارد در طراحی وب
  • توضیحی در مورد موضوعات وب سایت ها برای قالب وب سایت
  • نکته ی مهمی درباره ی استفاده ی بهینه از فضای قابل طراحی
  • توضیحاتی در مورد پیکسل ها و نمایش وب سایت ها در انواع اندازه های مانیتور با رزولیشن های مختلف
  • مقدمه ای بر استایلِ اولیه قالب وب سایت

فیلم دوم : مدت زمان 26 دقیقه

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

فیلم سوم : مدت زمان 13 دقیقه

  • آشنایی با UI  و  UX
  • وظیفه ی یک طراح در ایجاد فایل اولیه برای طراحی وب
  • شروع طراحی
  • ایجاد سند جدید
  • تنظیمات کلیدی برای ایجاد خط های راهنما

فیلم چهارم : مدت زمان 8 دقیقه

  • ادامه ی بحث خط کشی در صفحه ی طراحی
  • توضیحات تکمیلی در رابطه با بدنه ی اصلی قالب

فیلم پنجم : مدت زمان 26 دقیقه

  • ساخت هدر سایت و صحبتی پیرامون انتخاب رنگ و استفاده از رنگ های استانداردِ متریال دیزاین گوگل
  • انتخاب آبجکت های هدر سایت
  • طراحی هدر سایت

فیلم ششم : مدت زمان 13 دقیقه

  • انتخاب لوگو و قرار دادن آن در هدر قالب
  • انتخاب محل بنر تبلیغاتی در هدر قالب

فیلم هفتم : مدت زمان 13 دقیقه

  • تعیین منو دسته بندی در زیر هدر قالب
  • طراحی آبجکت هاب منو دسته بندی و خطوط بین دسته بندی ها

فیلم هشتم : مدت زمان 25 دقیقه

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

فیلم نهم : مدت زمان 19 دقیقه

  • ادامه ی توضیحات طراحی اسلایدر

فیلم دهم : مدت زمان 31 دقیقه

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

فیلم یازدهم : مدت زمان 8 دقیقه

  • طراحی خبرنامه برای وب سایت
  • توضیحات تکمیلی در ارتباط با طراحی فوتر و استفاده ی بهینه از فضای این بخش

فیلم دوازدهم : مدت زمان 29 دقیقه

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

فیلم سیزدهم : مدت زمان 20 دقیقه

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

[divider style=”solid” top=”10″ bottom=”10″]

[toggle title=”محتویات بسته ای که دریافت می کنید به شرح زیر است” state=”open”]

  • 13 پارت ویدیو های زبان فارسی  فول اچ دی 1080
  • فایل PSD تهیه شده در تمرین
  • تصاویر استفاده شده در تمرین
  • پکِ کامل آیکونهای متریال دیزاین گوگل
  • فایل رنگهای استاندارد گوگل برای استفاده در فتوشاپ به عنوان Swatches
  • حجم کامل بسته ی تمرین ها 591 مگابایت
  • نمونه کارهای یک طراح حرفه ای ایرانی که در تمرین معرفی می شود 21 مگابایت
  • قیمت این تمرین 30000 تومان برای مدتِ محدود 18000 تومان می باشد.

[/toggle]

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

  • توجه نمایید که پس از تکمیل فرآیندِ خرید و پرداخت ممکن است در برگشت به سایت با مشکل مواجه شوید ،با توجه به این موضوع پس از خریدِ موفقیت آمیز ، لینکها به ایمیل شما ارسال میشود ، به ایمیلِ خود مراجعه فرمایید و اگر در پوشه ی Inbox  ایمیل موجود نبود به پوشه ی Spam مراجعه کنید.
  • پسورد فایل های هر آموزش پس ازخرید ، به ایمیل شما ارسال می شود.
  • برای باز کردن فایلهای فشرده حتما از نرم افزار WinRAR ver.5 or Up استفاده کنید.
  • به دلیل فرمت HD فیلمها ، برای تماشای فیلمها بدونِ مشکل ، باید کُدکهای ویدیویی K-Lite Mega Codec Pack را بر روی ویندوز خود نصب کنید.
  • برای تماشای فیلمهای HD ما نرم افزار PotPlayer را به شما پیشنهاد می کنیم.
  • جدیدترین ورژن نرم افزارهای نامبرده ی بالا را از سایتهای ایرانیِ دانلود ، می توانید دریافت کنید.
قابل توجه کاربرانی که خارج از ایران هستند و امکانِ واریز وجه از طریق درگاه های بانکی ایران را ندارند:

برای تهیه ی تمرین های پرمیوم ، از طریق صفحه ی ارتباط با ما در تماس باشید.و یا با آی دی تلگرام babakmehrban@ تماس بگیرید

[divider style=”solid” top=”10″ bottom=”10″]