چگونه با CSS طراحی بهتری انجام دهیم ؟!؟

اگر قصد دارید تا یک وب سایت زیبا و شکیل داشته باشید ابتدا لازم است تا نکات مهمی را در قسمت طراحی قالب سایت در نظر بگیرید. همانطور که ممکن است اطلاع داشته باشید برای طراحی قالب یک وب سایت از زبان نشانه گذاری html و همچنین css استفاده می‌شود. اگر شما قصد دارید تا یک طراحی شکیل داشته باشید لازم است تا به css تسلط بیشتری داشته باشید البته که یادگیری زبان css ( آموزش css ) شاید چند هفته بیشتر زمان نیاز نداشته باشد اما اینکه شما چگونه از ابزارهایی که این زبان در اختیار شما قرار می‌دهد استفاده کنید موضوع مهمی است که طراح مبتدی و ماهر را از یکدیگر متمایز خواهد کرد.

در این مقاله قصد داریم تا چند نکته مهم در طراحی با css را خدمتتان عرض کنیم که باعث خواهد شد تا قالب‌هایی که برای وب سایت خود یا وب سایت‌های مشتریان خودتان طراحی می‌کنید بسیار شکیل و جذاب‌تر باشند.

افکت‌های گرادینت

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

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

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

استفاده به جا و مناسب از سایه

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

استفاده از پالت رنگ مناسب

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

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

به این دلیل که این دستور باعث کاهش شفافیت المان‌های داخل سایت می‌شود به همین ترتیب باعث کاهش ضخامت لایه رنگ نیز خواهد شد لذا باید دقت داشته باشیم که از دستور اپسیتی در چه بخش‌هایی استفاده می‌کنیم.

استفاده از آیکون‌ها بجای تصویر

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

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

استفاده از دستورات انیمیشن

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

در کل شما با زیاده‌روی در دستورات css نسخه ۳ نه تنها به جذابیت قالب اضافه نخواهید کرد بلکه بیشتر آن را به یک قالب دمده و نابسامان شبیه خواهید کرد لذا اگر شیفته امکانات بیشتر سی اس اس نسخه ۳ شدید دقت داشته باشید که این امکانات برای ایجاد ریزه کاری‌های بسیار دقیق در داخل قالب ارائه شده است و هدف از استفاده آنها ایجاد جذابیت در پروژه شما است و زیاده روی در استفاده از این ابزارها نتایج مناسبی را به همراه نخواهد داشت.

استفاده از ابعاد مناسب برای هر قسمت از وب سایت

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

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

استفاده زیاد از کتابخانه‌های مختلف css

استفاده بسیار زیاد از کتابخانه‌های مختلف css جهت ایجاد زیبایی در طراحی قالب باید به صورت هوشمندانه انجام شود. دقت کنید که استفاده از برخی کتابخانه‌ها همچون انیمیشن می‌تواند جذابیت قالب شما را بیشتر کند اما ترکیب ۲ کتابخانه انیمیشن در کنار یکدیگر ممکن است قالب شما را دچار نوسان در طراحی کند. به همین دلیل باید دقت داشته باشید که اگر قصد داشتید تا در قالب خودتان کمی افکت‌های زیبا ایجاد کنید از یک کتابخانه با امکانات حتی الامکان کامل استفاده کنید تا مجبور نباشید کتابخانه‌های مختلف را در کنار یکدیگر استفاده کنید.

ایجاد یک پالت رنگ منعطف

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

استفاده از فریمورک

استفاده از یک فریم ورک برای css می‌تواند سرعت شما در طراحی را چندین برابر افزایش دهد. علاوه بر افزایش سرعت در طراحی استانداردسازی پروژه که یکی از مباحث اصلی در طراحی است نیز به پروژه شما اضافه خواهد شد.

پس استفاده از فریم ورک علاوه بر افزایش سرعت بهینگی کد مسبب استانداردسازی آن نیز خواهد شد لذا استفاده از آن توصیه‌ای است که نمی‌توان به سادگی از کنار آن گذشت.

ترکیب چندین المان مختلف

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

یا برای مثال ایجاد تکرار در قسمت‌های مشابه باعث ایجاد یک طراحی ضعیف خواهد شد. برای مثال شما لیست آخرین محصول‌ها در داخل صفحه اصلی را یکبار در قالب اسلایدر و کمی پایین‌تر در قالب طراحی Grid ایجاد کنید.

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

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

امید قدیمی هستم ، 8 سال است که در زمینه طراحی و برنامه نویسی وب سایت فعالیت می کنم . توسعه دهنده فرانت اند ، طراح و برنامه نویس انواع وب سایت های وردپرسی ، فعال در زمینه تولید محتوا و سئو وب سایت

اشتراک گذاری محتوا