آیا تا به حال خود را با وجود دانش در حال رشد CSS ، در تلاش برای ایجاد صفحات وب بصری جذاب هستید؟ این مسئله اغلب نه در مهارت های CSS شما بلکه در درک شما از اصول طراحی است. به عنوان یک توسعه دهنده وب جلو ، ایجاد چشم مشتاق برای طراحی اساسی بسیار مهم است. این پست نکات عملی را برای راهنمایی شما در هنگام طراحی وب سایت های خود با CSS ارائه می دهد.
-
پالت رنگ خود را محدود کنید: هدف از یک طرح رنگی اولیه ، ثانویه و سوم ، با لهجه اختیاری. از متغیرهای CSS برای حفظ پایگاه کد خشک استفاده کنید.
-
HSL را برای طرح های رنگی پویا اهرم کنید: هنگام انتخاب رنگهای اصلی خود ، استفاده از مدل رنگ HSL (رنگ ، اشباع ، درخشندگی) را در نظر بگیرید. HSL روشی انعطاف پذیر برای دستکاری رنگ ها ارائه می دهد. رنگ از 0 تا 360 متغیر است ، در حالی که اشباع و درخشندگی از 0 تا 100 است.
نوک
برای یک رنگ تیره مانند
hsl(219, 80%, 10%)، حالت نور آن (یا معکوس)
معادل آن را می توان به راحتی محاسبه کردhsl(219, 80%, 90%)بشر این ساده
محاسبه ،hsl(hue, saturation, (100 - luminance)%)، به ویژه
برای اجرای ضامن های حالت تیره/نور یا ایجاد رنگ مفید است
تغییراتبا تنظیم مقدار درخشش برای ایجاد سایه ها و رنگ های رنگ انتخاب شده خود ، حفظ اشباع مداوم را آزمایش کنید.
-
یک رویکرد تک ستونی را برای پاسخگویی موبایل اتخاذ کنید: یک طرح یک ستونی مصرف محتوا را ساده می کند و قابلیت استفاده کلی در دستگاه های تلفن همراه را بهبود می بخشد.
-
ارتفاع خط را برای خوانایی بهینه کنید: از ارتفاع خط کاهش یافته برای عناصر و عناصر متن بزرگتر استفاده کنید ، در حالی که باعث افزایش ارتفاع خط برای متن بدن و مقالات طولانی برای تقویت خوانایی می شود.
-
اولویت بندی تراز چپ برای بلوک های متن گسترده: برای بهبود خوانایی ، از متن متمرکز کردن بیش از دو خط خودداری کنید. در عوض ، متن را با توجه به جهت نوشتن زبان تراز کنید.
-
وضوح دکمه را با متن جسورانه تقویت کنید: استفاده از قالب بندی جسورانه در برچسب های دکمه ، تمایز بصری و درک کاربر را بهبود می بخشد.
-
اولویت بندی وزن قلم بیش از اندازه در طرح بندی کارت: این تأکید ظریف در فضاهای محدود ایجاد می کند.
-
Flexbox یا شبکه با
gapویژگی برای فاصله یکنواخت: برای دستیابی به فاصله مداوم بین عناصر موجود در مؤلفه ها ، Flex یا شبکه را با اولویت قرار دهیدgapبیش از حاشیه هنگام ساخت طرح بندی سایت ، طرح را به بخش های اصلی تقسیم کرده و Flex یا Grid را با آن اعمال کنیدgapبرای توزیع فضای سفید به طور مساوی. -
برای ایجاد برجستگی متن از درخشندگی استفاده کنید: برای جلب توجه به متن حیاتی ، از لحاظ استراتژیک درخشندگی عناصر ثانویه را کاهش می دهد. نقطه کانونی را با در نظر گرفتن: “پیام فوری که می خواهم به نگاه اولیه کاربر منتقل کنم چیست؟”
تجزیه و تحلیل طرح های وب سایت از طریق ابزارهای توسعه دهنده مرورگر: با بررسی CSS در پانل سبک ابزارهای DEV مرورگر خود ، می توانید بینش های عملی را در مورد استراتژی های طرح بندی و بهترین روش های CSS بدست آورید.
