[mohammad a]

یک دید کلی نسبت به روند کلی طراحی یک سایت داشته باشید :

طراحی ظاهر وبسایت توسط یک نرم افزار طراحی گرافیک مانند فتوشاپ
اجرای طرح گرافیکی ایجاد شده توسط کدنویسی HTML و CSS بصورت یک صفحه وب

این دو مرحله در آموزش های بعدی ارائه می شود و فعلاً به بررسی ساختار کلی یک وبسایت اکتفا میکنیم.
اجزاء یک صفحه وب
در شکل زیر طرح کلی یک صفحه وب رو برای شما آوردم.البته حتما میدونید که طراحی چیز منحصر بفردی نیست،یعنی شما هر طرحی رو که بخواهید میتونید اجرا کنید ولی برای شروع بهتره با یک طرح استاندارد ساده شروع کنیم.
غالب سایت های موجود از ۵ قسمت اصلی تشکیل شده اند.من برای این قسمتها نامهایی قرار دادم.این نامها مرسوم ترین نامها هستند که معمولا طراحان استفاده میکنن و باز مثل خود طرح منحصر بفرد نیستند.
سربرگ (Header) :
قسمت بالای وبسایت رو تشکیل میده و از مهمترین قسمتهای و.بسایت هست،چون معمولا اولین نگاه کاربران به این قسمت میافته.
در این قسمت معمولا نام سایت به همراه لوگوی سایت قرار میگیره و گاهاً از یک طرح گرافیکی خاص (بنر) تشکیل شده که در نگاه اول هدف و کاربری وبسایت رو مشخص میکنه.
منوی سایت (Navigation) :
معنای navigation میشه ناوبری یا هدایت کردن. معمولا در این قسمت منویی قرار میگیره که کاربران رو به قسمتهای مختلف سایت هدایت میکنه.
ستون کناری (Sidebar) :
یکی از اجزاء جدایی ناپذیر وبسایتها همین ستون کناری اونهاست که در بعضی بیش از یکی قرار داده میشه. معمولا محتواهای جانبی وبسایت مثلاً پیوندها ، فرمهای ورود ، فرم جستجو ، شبکه های اجتماعی ، لیست آخرین و محبوب ترین مطالب و کلاً هر چیزی غیر از محتوای اصلی در ستون های کناری قرار میگیره.
محتوای اصلی (Main) :
محتوای اصلی سایت یا وبلاگ معمولاً شامل تعداد معینی از جدیدترین مطالب می باشد.(مثلاً در وبلاگها چند پست آخر در این قسمت قرار میگیره.)
پانوشت (Footer) :
مهمترین چیزی که معمولاً در این قسمت قرار میگیره جمله ای کوتاه درباره حق بازنشر محتوای سایت هست که به کپی رایت معروفه.(copy left هم داریم که بعداً دربارش توضیحی خواهم داد. )
نکته : این ساختار معمولا به نام ساختار دو ستونه شناخته میشه.علاوه بر این ساختار دو ساختار دیگه هم در تصویر بالا نشون داده شده که کاملاً شبیه طراحی قبلی است فقط تعداد و مکان سایدبارها تغییر کرده که با نام ساختار سه ستونه شناخته میشه.
حال که اجزاء کلی یک وبسایت رو شناختیم میتونیم یک طرح در ذهنمون پرورش بدیم تا جلسه آینده یاد بگیریم چطور یک ایده رو میشه تبدیل به یک فایل گرافیکی کرد.
برای هفته آینده به فتوشاپ نیاز داریم،ترجیحاً آخرین ورژنش (cs5)رو نصب کنید.

جلسه اول به پایان رسید.

[mohammad a]

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

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

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

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

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

برای شروع به شما پیشنهاد میدم این سه مرحله رو حتماً همراه با من انجام بدین.
اول ) پرورش ایده
ایده ای که من در ذهنم دارم یک طرح ساده و شکیل برای استفاده در یک وبلاگ هستش.میخواهم عرض سایتم رو نسبتاً کم بگیرم و توش از رنگهایی استفاده کنم که تو مایه های رنگ کاغذ های قدیمی باشه(تو مایه های قهوه ای).
ارتفاع سربرگ (header) رو کم در نظر میگیرم و از یک رنگ نسبتاً بسته تر برای اون استفاده میکنم. و تنها چیزی که توش قرار میدم نام سایت بهمراه یک توضیح کوچک زیر اون هستش.
میخوام سایتم دو ستونه (۲ column layout) باشه و ستون کناری (sidebar) سمت راست قرار بگیره و عرضش نسبت به عرض محتوای اصلی سایتم (main) خیلی کمتر باشه.دوست دارم پس زمینه قسمت محتوای اصلی رو بصورتی طراحی کنم که شبیه خطهای دفترچه یادداشت باشه.
یک پانوشت (footer) هم قرار میدم و توش کپی رایت کارم رو قرار خواهم داد.راستی یه منوی سربرگ (navigation) شیک هم باید زیر سربرگ بزارم.
نکته : کلماتی که در این قسمت بصورت پررنگ نشان دادم از مهمترین چیزهایی هست که توی پرورش ایده باید به اونها توجه بشه.
دوم ) آورد ایده روی کاغذ (sketch)
من طرح مورد نظرم رو خیلی ساده روی یک کاغذ آوردم تا راحت تر بتونم تو فتوشاپ طرحش رو بزنم.اگر این مرحله رو انجام ندم موقع کار با فتوشاپ خیلی اذیت میشم چون ممکنه کل ایده تو ذهنم نباشه و قسمتی رو فراموش کرده باشم و باید فکر کنم ببینم چی تو ذهنم بوده.کلاً اعصاب رو بهم میریزه.بعداً میتونید یکبار امتحان کنید.
نکته : بهتره توی طرح روی کاغذ اندازه ها رو هم بنویسید.حدودی هم باشه خوبه.ضمناً بهتره یک کادر هم به عنوان مرورگر در نظر بگیرید تا بتونید یه مقیاس خوب از اندازه طرحتون به نسبتاً رزولیشن مرورگرتون داشته باشید.
* در مورد رزولیشن ها و سازگاری وبسایتها در رزولیشنهای مختلف بعداً توضیح خواهم داد.
سوم ) اجرای طرح گرافیکی در فتوشاپ
* چون اولین طرح رو میخواهیم کار کنیم ، طرح گرافیکی رو نسبتاً ساده تر اجرا میکنیم و اینشاالله در آموزشهای بعدی تو این قسمت دقیق تر میشیم و نکات جزیی تر رو هم بیان خواهیم کرد.
یک فایل جدید با عرض ۹۰۰ پیکسل و ارتفاع ۷۰۰ پیکسل ایجاد کنید و نامی دلخواه براش برگزینید.
رنگ پس زمینه اصلی کار رو بصورت زیر انتخاب کنید:
از ابزار Slice استفاده میکنیم و ابعاد اجزاء وبسایتمون رو در صفحه مشخص میکنیم. این کار رو با خطوط راهنما یا Guides هم میتونیم انجام بدیم.
حال میتونیم با استفاده از ابزار Rectangle اجزاء وبسایتمون رو ایجاد کنیم و رنگها و خطوط حاشیه مورد نظر رو برای اونها ایجاد کنیم.
روی لایه ی جدید اجاد شده در قسمت layers کلیک راست کنید و گزینه Blending Option را انتخاب کنید:
در پنجره باز شده stroke را انتخاب کنید تا یک حاشیه ی روشن با ضخامت ۱ پیکسل برای این لایه ایجاد کنیم.
بقیه اجزاء که شامل منوی سربرگ ، ستون کناری ، محتوای اصلی و پانوشت هستند را هم میتونید به همین صورت طراحی کنید.
من فایل لایه باز رو برای دانلود قرار دادم تا از این مرحله زودتر بگذریم.چون کار کردن روی این مرحله مستلزم آشنایی نسبتاً زیاد با فتوشاپ است و مناسب سطح این آموزش نیست. در این آموزش بیشتر هدف آشنایی با روند طراحی یک سایت هست.اینشالله در آموزش های بعدی به این قسمت توجه بیشتری خواهیم نمود.
برای جلسه بعد بهتره یک نرم افزار مناسب برای کدنویسی HTML و CSS فراهم کنید.اگر در این باره اطلاعاتی ندارید نگران نباشید و تا جلسه بعد صبر کنید.