استاندارد های طراحی گرافیک وب

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

ابعاد عرض و ارتفاع

ابتدا باید واسه خوتون مشخص کنین که طرحی که دارید کار میکنید قرار هست به چه صورتی کدنویسی بشه ! منظورم این هست که شما دارید طرح واکنشگرا ( Responsive ) کار میکنید یا طرح معمولی که اگر طراحی ریسپانسیو کار میکنین باید اول این موضوع رو مشخص کنین که برای چه Device هایی قرار هست طراحی کنید . به عنوان مثال اگر بزرگترین دیوایسی که ما قرار هست براش طراحی کنیم ، مانیتور ۲۲ اینج با رزولوشن ۱۰۸۰×۱۹۲۰ پیکسل هست میتونید به صورت Full Width و یا در عرض مناسب مثل ۱۸۶۰ پیکسل کارتونو طراحی کنین . به همین ترتیب طبق عرض Device هایی که داریم باید عرض طرح رو تغییر بدیم و محتوا رو داخل اون طرح قرار بدیم .

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

حالا اگر دارید طراحیتون رو به صورت عرض ثابت مثل طرح های عادی و عمومی کار میکنید ، باید دقت داشته باشید که مبنای عرضی شما باید مانیتور های CRT 17 اینج باشه که نهایت عرضی که پشتیبانی میکنند ۷۶۸×۱۰۲۴ پیکسل هست .
پس اگر عرض کلی مانیتور ما ۱۰۲۴ باشه ما عرض استانداردی که میتونیم برای عرض طرحمون استفاده کنیم باید ۹۸۰ یا ۹۶۰ پیکسل باشه ، چون باید عرض نوار اسکرول ویندوز رو هم در نظر گرفته باشیم . البته این بدین معنی نیست که اگر شما عرض کمتری انتخاب کنید کار اشتباهی کردید ولی خب استاندارد ها مفاهیمی هستند که باید از اونها پیروی کنیم .

رزولوشن فایل

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

واحد اندازه گیری

واحد اندازه گیری در کلیه بخش های نرم افزار فتوشاپ ما باید بر حسب پیکسل ( Pixel ) یا PX باشه . پس زمانی که دارید فایل خودتون رو در فتوشاپ ایجاد میکنید باید واحد اندازه گیری ابعاد طرح رو روی Pixels قرار بدید . همچنین برای سایر بخش ها مثل اندازه فونت ها و … هم از همین واحد اندازه گیری استفاده کنید .

کانال رنگی

در نوشته بعدی من به صورت کامل کانال های رنگی رو برای شما توضیح میدم ولی فعلا در همین حد اطلاع داشته باشید که در هنگام ایجاد فایل گرافیکی در فتوشاپ شما می بایست از کانال رنگی یا به عبارتی Color Mode ، RGB استفاده کنید . منظور از RGB به ترتیب : R رنگ قرمز ، G رنگ سبز و B رنگ آبی رو مشخص میکنه . ترکیب های رنگی موجود در وب طبق کانال رنگی RGB به وجود میارن ما هم باطبع از همین کانال رنگی استفاده میکنیم . در حقیقت کلیه رنگ های موجود در وب توسط این سه رنگ اصلی به وجود خواهند اومد ولی خب با ترکیب های مختلف !

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

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