دسته‌ها
دسته‌بندی نشده

تایپوگرافی چیست و چرا اهمیت دارد؟ (قسمت دوم)

در قسمت اول درباره اهمیت تایپوگرافی سخن گفتیم و قواعد طراحی لوگو تایپوگرافی را با هم مرور کردیم. در این قسمت نیز به ادامه اصول طراحی تایپوگرافی خواهیم پرداخت.
در آرمکده درباره ساخت لوگو و طراحی مجدد لوگو بیشتر بخوانید.
ثبات
حفظ یکپارچگی حروف برای جلوگیری از یک رابط گیج کننده و آشفته کلیدی است. هنگام انتقال اطلاعات ، ضروری است که از همان سبک فونت استفاده کنید ، بنابراین خوانندگان شما بلافاصله آنچه را که می خوانند درک کرده و متوجه الگو می شوند. در حالی که بازی تا حدی با سطوح سلسله مراتبی خوب است ، ایجاد یک سلسله مراتب ثابت از حروف تایپ (یک فونت سازگار برای سرصفحه ها ، دیگری برای زیرعنوان) و عمل به آن مطلوب است.
 
فضای سفید
فضای سفید که اغلب به عنوان "فضای منفی" نامیده می شود ، فضای اطراف متن یا گرافیک است. اغلب نادیده گرفته می شود و معمولاً مورد توجه کاربر قرار نمی گیرد ، اما استفاده صحیح از فضای سفید تضمین می کند که رابط کاربری بدون مشکل و متن قابل خواندن است. فضای سفید حتی می تواند توجه را به متن جلب کند و یک تجربه کلی از نظر زیبایی را ارائه دهد. فضای سفید اغلب به صورت حاشیه ، پد یا مناطق بدون متن یا گرافیک ظاهر می شود.
هم ترازی
تراز کردن فرآیند یکپارچه سازی و ترکیب متن ، گرافیک و تصاویر برای اطمینان از وجود فضای مساوی ، اندازه و فاصله بین هر عنصر است. بسیاری از طراحان رابط کاربری حاشیه ایجاد می کنند تا اطمینان حاصل شود که لوگو ، سرصفحه و متن متن با یکدیگر همسو هستند. هنگام تراز کردن رابط کاربری خود ، توجه به استانداردهای صنعت خوب است. به عنوان مثال ، تراز کردن متن شما به راست برای خوانندگانی که از چپ به راست می خوانند ، غیرعادی به نظر می رسد.
رنگ
رنگ یکی از هیجان انگیزترین عناصر تایپوگرافی است. اینجاست که طراحان واقعاً می توانند خلاقانه عمل کرده و رابط کاربری را به سطح جدیدی ارتقا دهند. با این حال ، رنگ متن را نباید نادیده گرفت: میخ زدن رنگ فونت شما می تواند متن را برجسته و لحن پیام را منتقل کند - اما اشتباه گرفتن آن می تواند منجر به ایجاد رابط کاربری و متن متضاد با رنگ سایت شود.
 
رنگ دارای سه جزء کلیدی است: ارزش ، رنگ و اشباع. یک طراح خوب می داند که چگونه بین این سه جزء تعادل ایجاد کند تا متن هم چشم نواز باشد و هم خوانا ، حتی برای کسانی که مشکل بینایی دارند. اغلب ، طراحان با مشاهده متن در مقیاس خاکستری (بدون رنگ) و انجام ترفندها در صورتی که متن بیش از حد تیره یا بیش از حد روشن در برابر رنگ پس زمینه باشد ، آن را آزمایش می کنند.
 
سلسله مراتب
ایجاد سلسله مراتب یکی از مهمترین اصول تایپوگرافی است. سلسله مراتب تایپوگرافی با هدف ایجاد تمایز واضح بین قطعات برجسته ای از کپی که باید به آنها توجه شود و ابتدا خوانده شوند و کپی متن استاندارد ، ایجاد شود. در عصر توجهات کوتاه مدت که توسط رسانه های اجتماعی ایجاد شده است ، از طراحان خواسته می شود که مختصر باشند و حروف تایپی ایجاد کنند که به کاربران اجازه می دهد اطلاعات لازم را در مدت زمان کوتاهی مصرف کنند.
سلسله مراتب را می توان با استفاده از اندازه ، رنگ ، کنتراست و تراز ایجاد کرد. به عنوان مثال ، اگر خطی از کپی با نماد علامت تعجب در ابتدا دارید که به رنگ قرمز و بزرگتر از نسخه قبلی است ، این یک سرنخ تصویری برای خوانندگان است که یک دعوت به عمل است. معمولی ترین نمونه سلسله مراتب تایپی اندازه است: سرفصل ها همیشه باید بزرگتر از عناوین فرعی و متن استاندارد باشند.
 
4. چگونه حروف مناسب را برای وب سایت خود انتخاب می کنید؟
اکنون که ما با عناصر مختلف تایپوگرافی آشنا شده ایم ، بیایید در مورد روند انتخاب حروف تایپ برای رابط کاربری خود صحبت کنیم. با فونت ها و حروف تایپی مختلف برای انتخاب ، احساس غرق شدن آسان است. انتخاب صحیح به چیزهای بیشتری بستگی دارد تا فقط دیدن آنچه زیبا به نظر می رسد. در اینجا چند نکته مهم وجود دارد:
 
به شخصیت فکر کنید
چگونه می خواهید کاربران شما هنگام ورود به وب سایت شما چه احساسی داشته باشند. آیا می خواهید از فضایی دوستانه تقلید کنید؟ آیا می خواهید سایت احساس سطح بالا ، استقبال ، بازیگوش یا جدی داشته باشد؟ ضروری است که تایپوگرافی منعکس کننده شخصیت برند یا محصول باشد. یک نقطه شروع خوب در مواجهه با این چالش این است که ویژگی های اصلی نام تجاری خود را مشخص کنید و شروع به جمع آوری انواع حروف که منعکس کننده این ویژگی ها است کنید. از آنجا می توانید متوجه یک روند شوید.
 
در مورد لحن فکر کنید
به همان اندازه مهم است که چگونه فونت با لحن پیام هماهنگ شود. به عنوان مثال ، اگر می خواهید اطلاعات جدی یا مهمی را منتقل کنید ، یک فونت کمتر سبک یا تزئینی انتخاب کنید که هم به وضوح خوانا باشد و هم حواس پرتی را محدود کند.
 
در عملکرد کوتاهی نکنید
عملکرد نیز به همان اندازه حیاتی است: هیچ چیز بدتر از وب سایتی نیست که بسیار زیبا به نظر برسد اما کاملاً ناخوانا باشد ، زیرا شما را مجبور می کند روی دکمه اشتباه کلیک کنید یا به اشتباه بپیچید زیرا دستورالعمل ها نامشخص بودند. هنگام تصمیم گیری در مورد نوع حروف در رابط کاربری خود ، سبک ، زیبایی و صدا را کنار بگذارید و در مورد خوانا بودن ، خواندن و دسترسی فونت فکر کنید. آیا متن بدون فشار قابل خواندن است؟ آیا شخصیت ها به اندازه کافی متمایز هستند؟
عملکرد را در نظر بگیرید
یکی از مواردی که اغلب طراحان از آن غافل می شوند ، انتخاب نوع حروف مناسب برای مرورگر وب است. کتابخانه های فونت متداول مانند فونت های Google فایل های فونت مبتنی بر وب را ارائه می دهند که می توانند بدون هیچ مشکلی در مرورگر به طور کامل ارائه شوند. نکته حرفه ای: هنگام بارگیری فونت های وب ، هرگز مجموعه کاراکترهای بیشتری از آنچه که نیاز دارید بارگیری نکنید. به این ترتیب از اضافه وزن جلوگیری می کنید!
 
الهام گرفته
اگر مطمئن نیستید از کجا شروع کنید ، کمی وقت بگذارید تا ببینید دیگران چه کار می کنند. چشم خود را به تایپوگرافی که در اطراف خود می بینید باز کنید. آیا می توانید به الگوهای مشابه توجه کنید؟ آیا می توانید نمونه های خوب و بد تایپوگرافی را مشاهده کنید؟ حتی دنبال کردن هشتگ های تایپوگرافی در رسانه های اجتماعی یا جستجوی تایپوگرافی در Pinterest ، ایده های خوبی از آنچه در آنجا وجود دارد به شما می دهد. برای الهام بیشتر می توانید به این هشت گرایش تایپوگرافی مراجعه کنید.
 
کمی وقت بگذارید تا آزمایش شود
بهترین راه برای رمزگشایی از کدام فونت برای رابط کاربری شما استفاده می شود؟ آزمایش ، آزمایش و آزمایش! با جمع آوری بازخورد مفید از کاربران واقعی ، بینش واضح تری از آنچه کار می کند ، چه چیزی نیست ، چه چیزی خوانا است و چه چیزی غیرقابل تصور یا دست و پا گیر است به دست خواهید آورد.
 
5. نتیجه گیری
تایپوگرافی اغلب نادیده گرفته می شود ، اما جزء مهمی از طراحی رابط کاربر است. تسلط بر تایپوگرافی شما را در راه تبدیل شدن به یک طراح UI فوق العاده می بیند! اگر مطمئن نیستید از کجا شروع کنید ، چرا به وب سایت های مورد علاقه خود سر نزنید و یادداشت نگاری کنید که برای چه نوع حروفی رفته اند.

منبع: https://careerfoundry.com/en/blog/ui-design/beginners-guide-to-typography/