آموزش طراحی وب

قواعد انتخاب ابعاد اجزای طرح

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

GRAPHIC

سلامی دوباره به شما گرافیک دوستان عزیز ،

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

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

خب بگذریم 😉 پس شما دقت کنین که انشالله به خوبی متوجه بشید و بتونید موضوع رو درک کنید .

 

به مخاطب احترام بگذارید

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

 

به موضوع و هدف دقت کنید

قبل از اینکه شروع به اتود زنی کنین و در ذهنتون پرورش بدید که چه چیزی رو کجا قرار بدید و به چه شکلی ، به این مسئله دقت کنین که هدف این سایت از فعالیت خودش چیه و وقتی اینو به خوبی متوجه شدین اون موقع باید به این موضوع فکر کنین که من چه طوری میتونم با اجزایی که طراحی میکنم ، میتونم این مهم رو به بهترین شکل ممکن پیاده سازی کنم . به عنوان مثال اگه شما دارین برای یک وب سایت خبری طراحی انجام میدین ، باید به این نکته دقت کنین که در وب سایت های خبری ، زمانی که مخاطب وارد سایت میشه ، تمایل داره بتونه سریعتر خبر بخونه نه اینکه با یک هدر با ارتفاع بزرگ حدود ۴۰۰ پیکسل و منوی اصلی با ارتفاع ۳۰ پیکسل و فاصله ی چندئ پیکسلی بین این دو بخش رو به رو بشه !

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

layout-anatomy

اولویت بندی کنید

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

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

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

img_jquerydim

جلوه بصری مناسبی بوجود بیارید

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

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

 

ممنونم که هنوز با ما همراه هستین

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

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

دیدگاه ۵

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

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

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین