روابط · ۵ دقیقه مطالعه
چطور مهربان بمانیم و مرز داشته باشیم؟
مرز گذاشتن میتواند از یک جمله روشن و محترمانه شروع شود.
خواندن یادداشتWARM EDITORIAL WELLNESS
آرامش، در جزئیات.
زبان بصری هامون از گرمای کاغذ، سکوت طبیعت و وضوح یک گفتوگوی انسانی میآید. مجموعهای هماهنگ برای تجربههایی که به آدمها، فضا و زمان میدهند.
راهنمای زنده طراحیفارسی و راستبهچپنسخه ۱.۰
رنگهایی با ریشه در طبیعت
زمینههای روشن و گرم، متن با کنتراست خوانا، و سبزی که مسیر را نشان میدهد. رنگ خاک رس، حضوری کم و حسابشده دارد.
کاغذ گرم
#F8F6F0--color-pageسفید آرام
#FFFEFB--color-surfaceسبز زیتونی
#485B3C--color-primaryجوهر عمیق
#30382C--color-textخاک رس
#9C5B43--color-clayسبز مهآلود
#E9EDDF--color-brand-softرنگ متن فرعی: #696F61 · خط جداکننده: #E1E3D8 · بژ مکمل: #E7DBC1. رنگهای وضعیت فقط همراه با متن توضیحی استفاده میشوند.
نوشتاری که نفس میکشد
وزیرمتن، برای پیوستگی و خوانایی فارسی. عنوانها روشن و متیناند؛ متنهای بلند فضای کافی برای خواندن دارند.
THE HAMOON TYPEFACEوزیرمتن
انسانی، روشن و آشنا.
ا ب پ ت ث ج چ ح خ
۰ ۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹
Vazirmatn · 100—900
جایی برای خودت.
Display
32—60 px · 500با هم، کمی نزدیکتر
Heading
24—32 px · 600برای شروع، لازم نیست همه پاسخها را بدانی. گاهی یک گفتوگو کافی است تا مسیر را کمی روشنتر ببینیم.
Body
16 px · 1.9 line-heightزمان تقریبی مطالعه: ۶ دقیقه
Supporting
14 px · 400فضای خالی، بخشی از تجربه است
ریتم فاصلهها بر پایه ۴ پیکسل است. سطوح، گوشههایی نرم دارند و کنترلها با فرم کپسولی، قابل تشخیص میمانند.
مقیاس فاصلهگذاری
--space-14 px--space-28 px--space-312 px--space-416 px--space-624 px--space-832 px--space-1248 px--space-1664 pxنرمی، با سه کاربرد روشن
12 px20 px999 px۱۲ پیکسل برای جزئیات، ۲۰ پیکسل برای کارتها و ۹۹۹ پیکسل برای دکمهها و نشانها. بخشهای شاخص از شعاع ۳۲ پیکسل استفاده میکنند.
عرض محتوا تا ۱۲۱۶ پیکسل و عرض متن خواندنی تا ۶۷۲ پیکسل است. فاصله میان بخشها با اندازه صفحه تغییر میکند.
پرسیدن، با احترام
هر ورودی یک عنوان همیشگی و توضیح نزدیک دارد. خطا میگوید چه چیزی نیاز به اصلاح دارد؛ با لحنی روشن و بدون سرزنش.
حالت معمولی
در این نمونه، اطلاعاتی ارسال نمیشود.
نمونه حالت خطا
نشانی را کامل کنید؛ مثلاً name@example.com
حالت غیرفعال
پیش از غیرفعالسازی، دلیل را روشن میکنیم.
بازخوردی که ابهام را کم میکند
وضعیتها علاوه بر رنگ، نام دارند. پیامها کوتاهاند و روشن میکنند چه اتفاقی افتاده و قدم بعدی چیست.
یادداشتمنتخب هامونتکمیلشدهنیاز به بررسینیاز به اصلاح
یک نکته پیش از شروع
اینها نمونههای بصری پیام هستند؛ عملی در حساب شما انجام نشده است.
نمونه پیام موفقیت
تغییر شما ثبت شد. هر زمان بخواهید میتوانید آن را ویرایش کنید.
نمونه پیام توجه
پیش از ادامه، زمان انتخابشده را دوباره بررسی کنید.
نمونه پیام خطا
ارسال انجام نشد. اطلاعات واردشده را بررسی و دوباره تلاش کنید.
اجزا، در کنار یکدیگر
یک کارت تحریریه: تصویر آرام، موضوع روشن، عنوان خوانا و یک مسیر مشخص برای ادامه. فضای خالی به هر بخش فرصت دیده شدن میدهد.
ساختار یک تجربه هماهنگ
- ۱
تصویر، همراه محتوا
رنگهای طبیعی و شکلهای ساده، با فضای کافی برای تنفس. تصویر تزئینی از خوانش صفحهخوان کنار گذاشته میشود.
- ۲
اطلاعات، به ترتیب اهمیت
موضوع و زمان مطالعه، سپس عنوان و توضیح. تصمیم گرفتن باید ساده باشد.
- ۳
یک دعوت روشن به ادامه
متن پیوند، مقصد را توضیح میدهد. جهت پیکان با جریان فارسی هماهنگ است.
- ۴
نشانههای کم و آشنا
آیکونهای خطی با ضخامت یکسان و بدون تزئین اضافه. کنترلهای آیکونی همیشه نام دسترسپذیر دارند.
آدمها، پیش از رابط کاربری
احساس امنیت فقط حاصل رنگ و تصویر نیست؛ از واژهها، اختیار داشتن و قابل پیشبینی بودن تجربه هم ساخته میشود.
گرم، بدون وعده قطعی
از تشخیص دادن، تضمین بهبود و ایجاد احساس گناه پرهیز میکنیم. هر فرد حق دارد انتخاب کند، مکث کند و مسیر متفاوتی داشته باشد.
فارسی، از ابتدا
چیدمان و مسیر نگاه راستبهچپاند. اعداد و متنهای لاتین جهت مستقل دارند؛ فاصلهها، شکست سطر و ترتیب کنترلها با فارسی بررسی میشوند.
دسترسپذیری، در جزئیات
تمرکز صفحهکلید پیدا است، کنترلها حداقل ۴۴ پیکسل سطح لمس دارند و حرکت با ترجیح کاربر کاهش مییابد. پیامها فقط به رنگ متکی نیستند.
این راهنما، همراه با اجزای واقعی تجربه هامون رشد میکند.
دیدن هامون