وب تایپوگرافی: قوانین، تکنیک ها و طراحی واکنشگرا – قسمت دوم

با قسمت دوم از وب تایپوگرافی در خدمتتون هستیم.

نکاتی که باید در وب تایپوگرافی در نظر بگیرید:

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

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

  1. نوع (Type)
  2. رنگ (Color)
  3. بافت (Texture)
  4. عکس (Image)

۴ عامل زیر میتونه به شما برای ایجاد یک وب تایپوگرافی قابل ارائه کمک کند:

۱ انتخاب بهترین typefaced که مربوط به موضوعتان باشد

امروزه اکثر سایت ها از typeface مشابه استفاده می کنند. بله، حدس شما درسته؛ در مورد فونت های Arial و Helvetica صحبت می کنم .

با این حال خیلی خوشایند می شود اگر شما بتوانید باتوجه به پیامی که می خواهید منتقل کنید، typeface ها را بچینید.

برای نمونه، شما سایتی در مورد کتاب های کودکان طراحی کرده اید؛ اگر از فونت DK Crayon Crumble یا Little Miss Priss برای متن هدر استفاده کنید، در نظر مخاطب جذاب جلوه می کند.

وب تایپوگرافی

وب تایپوگرافی

 

من به شما پیشنهاد نمی کنم که این کار رو همیشه انجام بدین ولی این لازمه که تایپوگرافی با هدف مخاطب شما هماهنگ باشد و متن روشن و قابل خواندن باشد.

۲ استفاده از وب فونت ها

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

وب تایپوگرافی

استفاده از @import :

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

استفاده از لینک دهی استاندارد:

<link href='http://fonts.googleapis.com/css?family=Open+Sans'
rel='stylesheet' type='text/css'>

این به این معنی است که شما می توانید از هر فونتی که روی هاست سایت های وب فونت از قبیل           Google font و Typekit موجود است، استفاده کنید.

مزایای استفاده از وب فونت ها:
  • صرفه جویی در پول: فونت های آنلاین نیاز به خریداری ندارند.
  • صرفه جویی در زمان: به جای این که فونت ها را به صورت دستی در فایل های خود وارد کنید، با گذاشتن یک خط کد می توانید از وب فونت ها استفاده کنید.
  • وب فونت ها با تمام ورژن های جدید مرورگرهای وب سازگار بوده و هم چنین SEO-friendly هم هستند.

۳ استفاده از ترکیب رنگ های مناسب

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

در طراحی نباید رنگ ها به صورت تصادفی انتخاب شوند. این کار در نظر مخاطبین، متن شما را غیرقابل خواندن و اذیت کننده نشان می دهد.

اما، چگونه از یک ترکیب رنگ مناسب استفاده میکنید در حالی که هیچ قائده کلی برای این موضوع وجود ندارد؟!

ما در این جا به بعضی از راهکارها اشاره می کنیم:

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

بررسی کنتراست

  • اگر برایتان مقدور است از رنگ های طراحی flat استفاده کنید.این رنگ ها روشن هستند و به نوعی هستند که برای چشم آزاردهنده نیست. برای این منظور و کسب اطلاعات بیش تر خوبه که یه سری هم به flatuicolors.com بزنید.

لینک مفید طراحی flat

۴ استفاده از متن به جای عکس

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

 

خب تا این جای کار بیش تر با وب تایپوگرافی آشنا شدیم. برای قسمت بعدی سراغ تایپوگرافی ریسپانسیو میریم. با ما همراه باشید.

 

موفق و مویذ باشید.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *