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

برای سازگاری وب سایت ها با تلفن های همراه چند راه مختلف وجود دارد که یکی از آنها استفاده از Grid ها است

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

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

سیستم طراحی و ضرورت استفاده از آن در طراحی سایت

فاصله متناوب در محتوا تعادل بصری ایجاد می کند و برای بهبود کیفیت رابط کاربری UI مفید است

این عنصر نیز مانند Grid عمل می کند و به المان های در صفحه نظم می دهد

میزان فاصله با حاشیه صفحه نیز باید حفظ شود برای ایجاد فاصله می توان از چند روش استفاده نمود

اگر از Polaris با CSS استفاده می کنید مقادیر را با افزایش 4px تنظیم کنید

استفاده از Component های ارائه شده توسط Polaros React

سیستم طراحی و ضرورت استفاده از آن در طراحی سایت

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

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

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

با اعتبار سنجی تمامی کد های HTML , CSS از هر گونه خطای احتمالی عاری می شوند

از این رو مجموعه قوانین و استاندارد هایی تحت عنوان W3C

World Wide Web Consortium به وجود آمده است که با استفاده از آن می توان کد های معتبر HTML تولید نمود با مراجعه به سایت validator.w3.org می توانید از معتبر بودن کد های HTML صفحات سایت تان با خبر شوید

همچنین برای اعتبار سنجی کد های CSS که برای قالب سایت به کار می روند ، از سایت jigsaw.w3.org/css-validator استفاده نمایید

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

به همین دلیل توصیه می شود که کد ها اعتبار سنجی و معتبر شوند

قوانین نامگذاری متغییر ها Naming Conventions

یکی از قسمت های مهم سیستم طراحی ، نامگذاری متغییر ها می باشد

سیستم Color System این سیستم از متغیرهای Sass برای نام رنگ استفاده می کند

نام text style باید بعد از / (اسلش) قرار بگیرد
رنگ متن باید به طور پیش فرض $black50 باشد
استفاده از Sketch در تعیین text styles جدید برای رنگ های مختلف

( “Regular 2 /“, و “Regular 2 / $blue50” و “Regular 2 / $red50” )
همچنین در text style جدید برای Bold کردن ایجاد شود . مثلا ( “Regular 2 / ” یا “Regular 2 / $blue50 “)
Icongraphy

آیکون ها یکی از مهم ترین ابزارهای گرافیکی در سایت می باشد . نقش آیکون در جذب کاربر و موفقیت یک سایت اساسی است که کمتر کسی آن را می داند

در واقع آیکون ها نقش رابط کاربری را دارند و باعث ارتباط کاربران و صاحبان سایت ها می شوند

در طراحی آیکون ها باید به چند نکته دقت نمود

یک آیکون باید با رنگ و خط و پس زمینه ثابت ایجاد شود
ضخامت خطوط آیکون ها باید حداکثر 2px باشد

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

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

تایپوگرافی

مهمترین نکته فونت متن است

Font باید ساده و بدون کاراکتر اضافه و خوانا باشد . در تمام صفحات سایت باید از یک نوع فونت استفاده شود

می توان از Bold کردن قسمت هایی از متن ، تغییر اندازه قسمت های مهم و استفاده از رنگ های متضاد با پیش زمینه استفاده کنید

استفاده از سیتم های طراحی سایت

مشاهده پست مشابه : نگاهی به طراحی سایت تک صفحه ای