سعید-رضایی-ساری-خونیرث-برنامه-نویسی-کد-نویسی-فروش-اسکریپت-دانلود-Saeid-rezaei-khunires-admin-manager
خونیرث مجموعه ای از داغ ترین ایده های ثروت ساز بین المللی و ایرانی در کنار کادری مجرب در زمینه های توسعه و طراحی سایت، اپلیکیشن، امور گرافیکی کاملاً اختصاصی می باشد. سهم خودتان را از وب بردارید...
برندها-ایرانسل-اسنپ-اپلیکیشن-اسکریپت-آپارات-همراه-اول-بانک-ملی-پاسارگاد-هواوی-دیجیاتو-زرین-پال-نت-برگ-دونیت-کافه-بازار-هدفون-آهنگ-عکس-فیلم-کد-نویسی-طراحی-وب-برنامه-نویسی-پونیشا-پاپکو-دیجی-کالا-ورزش-فوتبال-90-نتیجه-فوتبال-بازی-شیپور-دیوار-آگهی-رایگان-خونیرث

طراحی وبسایت
برگشت به لیست

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

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

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

 

میزان و اندازه تایپوگرافی به چه معنا می باشد؟

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

 

این میزان به مشخص کردن اندازه و مکان قرار گیری عوامل متنی در ارتباط با عوامل دیگر در طراحی وب سایت ها بسیار کمک می کند. برای طراحی سایت ها، میزان بصری فونت ها اغلب با تگ ها موجود در CSS مطابقت می یابد (مانند h1، h2، h3، p و غیره).

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

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

  1. از یک اندازه فونت پایه از 16 CSS PIXELS استفاده کنید. این اندازه را بر مبنای خصوصیت های فونتی که استفاده می شود، تطابق دهید.
  2. از اندازه های پایه استفاده کنید تا بتوانید میزان تایپوگرافی را در طراحی خود به خوبی مشخص نمایید.
  3. متن ها نیاز به فاصله های عمودی بین کاراکتر ها دارند؛ توصیه کلی در این زمینه این می باشد که از اندازه خط پیش فرض مرورگر 2/1 EM استفاده نمایید.
  4. شمار فونت های استفاده شده و میزان تایپوگرافی را محدود نمایید.

 

هارمونی و ریتم منحصر به فردی را در طراحی های خود ایجاد نمایید

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

بنابراین از کجا شروع می کنید؟

 

تحقیقات انجام شده درباره تجربه کاربری نشان می دهد که بنا بر هر اندازه ابزاری، باید حداقل ترین اندازه متن ها را به کار برد. توجه داشته باشید همان طور که اندازه متن اصلی در وب سایت ها و یا طراحی ها رو به افزایش می باشد، شما باید اندازه های بزرگ تری را برای شروع در نظر داشته باشید. STEVEN HOOBER توصیه می کند که از حداقل 40 درصد بزرگ تر از کمترین اندازه پیشنهادی شروع کنید. به علاوه، سبک های ارتقاء یافته محتوا می تواند تا 80 درصد بالای این حداقل ترین اندازه های توصیه شده پیش برود، اما شما باید از اندازه متناسبی برای فونت های خود به کار ببرید.

 

نوع ابزار

حداقل اندازه

40 درصد توصیه می شود (برای هر استفاده باید مطابقت یابد)

حداکثر 80 درصد (برای هر استفاده باید مطابقت یابد)

گوشی همراه کوچک

4

5.6 (6)

7.2 (7.5)

گوشی همراه بزرگ

6

8.4 (8.5)

10.8 (11)

فبلت

7

9.8 (10)

12.6 (13)

تبلت

8

11.2 (11.5)

14.4 (14.5)

لپ تاپ/ دسک تاپ

10

14 (14)

18 (18)

 

 

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

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

ساده ترین راه برای فکر کردن برای اندازه و میزان تیترها و دیگر عوامل متنی بزرگ تر، کار کردن بر اساس درصد نسبت به متن اصلی می باشد. در حالی که هر طراح دارای یک نقطه شروع می باشد، اما در هر صورت 250 درصد بزرگ تر از متن اصلی برای تیتر ها بسیار متناسب می باشد؛ 150 درصد برای H2، 75 درصد برای H3 و 50 درصد برای عواملی مانند کادرهای دارای نقل قول. (این مورد گفته شده یک قانون نیست، بلکه یک نقطه برای شروع محسوب می شود).

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

 

کاراکتر ها و دستورالعمل های فاصله بین آن ها.

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

  • دسک تاپ و ابزارهای بزرگ: 60 تا 75 کاراکتر در هر خط.
  • گوشی ها همراه و یا ابزارهای کوچک: 35 تا 40 درصد در هر خط.

 

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

 

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

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

 

توصیه هایی برای شروع کردن در این زمینه

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

 

 

بهترین گزینه استفاده از یک طراحی ریسپانسیو توسط مدیا کوری یا MEDIA QUERIES می باشد. این گزینه مورد محبوب طراحان و برنامه نویسان می باشد و برای آن ها کنترل بسیار بالایی را روی اندازه و مطابقت یافتن متن ها در انواع ابزارها و صفحه نمایش ها با اندازه های گوناگون فراهم می سازد. (در این جا می توانید بار دیگر به توصیه های گوگل که در بالا به آن اشاره نمودیم، رجوع نمایید).

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

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

 

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

 

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

  • TYPE SCALE: متن هایی را وارد کنید و با گزینه هایی مانند اندازه، نسبت و مکان صحیح آن ها کار کنید. CSS را درجه بندی کرده و یا کدهایی را از همین ابزار اصلاح کنید.
  • MODULAR SCALE: این میزان و اندازه گیری درست مانند یک قانون و اصولی عمل می کند که به شما راهنمای می نماید تا اندازه ها را برای انواع عوامل متنی مشخص نمایید. سپس می توانید نتایج را در قالب پلاگین SASS و یا JS دانلود نمایید و یا آن ها را در صفحه نمایش مشاهده نمایید.
  • GOLDEN RATIO TYPOGRAPHY CALCULATOR: این ابزار اندازه، ارتفاع خط، عرض و کاراکتر های هر خط را با استفاده از نسبت های طلایی و یا GOLDEN RATIO بهینه سازی می نماید.

 

نتیجه گیری

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

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


تگ ها : شیوه صحیح پیوست فونت به صفحه وب در CSS3 به همراه 40 مجموعه 94 فونت فارسی مخصوص طراحی ۵+۱ فونت فارسی رایگان برای طراحان گرافیک فونت برای طراحی پوستر – شهاب سیاوش 17 فونت برتر برای پروژه‌ی طراحی گرافیک در سال ۲۰۱۶ مجموعه فونت فارسی مخصوص تکست گرافی دانلود 95 فونت مخصوص طراحی سفارش طراحی فونت اختصاصی نقش فونت در طراحی لوگو فونت مناسب طراحی لوگوdopro برای طراحی سایت از چه فونتی استفاده کنیم؟ تصاویر برای فونت در طراحی فونت طراحی فونت فارسی بر اساس دست خط شخصی در کارگاه طراحی فونت ایران بهترین فونت برای استفاده در طراحی سایت چیست؟ آموزش ویدیویی آموزش طراحی فونت با دو نرم افزار FontCreator 25 قلم گرافیکی فارسی – اینفوگرافیک مجموعه 99 فونت از بهترین ها برای طراحان آموزش استفاده از فونت در طراحی font فونت وِیژه طراحی استفاده از فونت دلخواه در صفحات وب مجموعه فونت فارسی B در طراحی وب سایت css3 با Illustrator فونت مورد علاقه خود را طراحی کنید فونت های فارسی برای طراحی وب سایت فونت قشنگ برای طراحی پیوست فونت ها به صفحات وب دانلود فونت نام BNarm برای طراحی گرافیک و طراحی وب سایت کد فونت در طراحی سایت دانلود فونت بدر badr برای طراحی وب سایت استانداردهای انتخاب فونت طراحی فونت دست‌خط اینشتین! (+عکس) دانلود مجموعه فونت برای طراحی های گرافیکی و سایت ها نحوه انتخاب بهترین و مناسب ترین فونت در طراحی وب سایت فونت طراحی لوگو فارسی دانلود فونت انتظار، فونت تخصصی و رسمی طراحی پوستر فونت فارسی وزیر فونت هایی که هرگز نباید در طراحی استفاده کنید نرم افزار طراحی فونت font پکیج فونت های مطرح فارسی برای وبسایت ( کیفیت بسیار طراحی اولین فونت شهری مایکروسافت برای دبی ساخت و طراحی رایگان لوگو استفاده از فونت آیکون در طراحی سایت دغدغه طراحی فونت فارسی آموزش های برنامه نویسی و طراحی سایت انتخاب فونت مناسب در طراحی سایت اهمیت فونت ها در طراحی وب سایت قلم (رایانه) دانلود 30 فونت حرفه ای انگلیسی فونت یکان اصلاح شده برای طراحی وب سایت دانلود فونت های انگلیسی برگزیده طراحی اندازه فونت در طراحی سایت ریسپانسیو آموزش HTML طراحی قلم ( فونت ) معرفی بهترین وب فونت های فارسی اضافه کردن فونت به سایت دانلود فونت فارسی ثلث نسخه های 1 و 2 مناسب برای طراحی همه چیز دربارهٔ فونت‌های «چند رنگ»؛ دانلود ۱۱ نمونه، آموزش طراحی ایران فونت: فونت فارسی فونت برای طراحی • دانلود رایگان کج‌سلیقگی در رسانه‌ای کردن خبر راه اندازی آزمایشی شبکه فونت رایگان فارسی راهنمای طراحی فونت تماشا 15 فونت پرکاربرد که باید داشته باشید! + دانلود (ویندوز و استفاده از فونت فارسی در طراحی سایت مناسب ترین فونت در طراحی وب سایت چیست ؟ آموزش قرار دادن فونت فارسی در طراحی وب جستجوهای مربوط به فونت در طراحی

نظرات




نماد