چگونه یک طراح وب شویم

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

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

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

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

اندازه های طراحی :

برای طراحی وب اندازه هایی که باید سایت را بر اساس آنها طراحی کنید بسیار متفاوت است ولی اندازه های اصلی که هر گرافیستی باید در طراحی خود در نظر بگیرد عبارتند از:

Width>1024
Width=<1024
Width=<768
Width=<320

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

رعایت شبکه بندی :

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

برای اصول شبکه بندی یک سایت از دو سیستم bootstrap و یا 960 میتوانید استفاده کنید.

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

سیستم 960 درجه یک فایل PSD برای شبکه بندی ارائه میدهد که باید طبق همان شبکه بندی سایت را انجام دهید.

مثال : میخواهیم برای یک سایت یک قسمت سمت راست برای تبلیغات و یک قسمت در سمت چپ برای محتوا طراحی کنیم. پنل سمت راست در طراحی ما قرار است که یک سوم پنل سمت چپ باشد به این ترتیب عرض پنل سمت راست در طراحی برای بوت استرپ برابر با 33.333% خواهد بود. عرض قسمت سمت چپ نیز برابر با 66.666% میباشد.

افکت ها

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

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

نکته: هنگام نمایش یک سایت روی موبایل اغلب افکت ها با یک تصویر ساده جایگزین میشوند برای این حالت هم ایده ای داشته باشید تا عکس شما تاثیر لازم را بگذارد.

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

ایکون ها و سایر المان های گرافیکی

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