وبلاگ

وبلاگ

وبلاگ

معرفی 5 فونت Sans-Serif رایگان و بسیار زیبا برای طراحی وب

حسین قنبری
بررسی طراحی سایت
1398/6/14

تو این مطلب میخواهیم  5 فونت Sans-Serif رایگان و بسیار زیبا برای طراحی وب رو خدمت شما دوستان معرفی کنیم که با استفاده از اونها وبسایت های خیلی زیباتری داشته باشید.

 

Inter UI

1 . فونت Inter UI

دارای 7 استایل مختلف

 

2 . فونت Gillroy

دارای 2 استایل مختلف در نسخه رایگان

 

3 . فونت Josefin Sans

دارای 10 استایل مختلف

 

4 . فونت Metropolis

دارای 18 استایل مختلف

 

5 . فونت Glacial Indifference

دارای 3 استایل مختلف

8 دلیل برای استفاده از گرادیان در طراحی سایت

حسین قنبری
بررسی طراحی سایت
1398/6/16

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

1 . چشم نواز شدن بک گراند صفحه

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

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

2 . گرادیان شانس خوانده شدن متن را افزایش میدهد

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

برای این کار کنتراست رنگ ها را زیاد کنید تا متن ها خوانا شوند. 

3 . عکس های معمولی را جذاب می کند

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

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

4 . گرادیان مسیر حرکت چشم کاربر را مشخص میکند

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

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

مردمک چشمان ما به طور ناخودآگاه اول قسمت روشن تر را دیده و بعد به قسمت تاریک توجه می کند.

5 . بر برندینگ شما تاکید بیشتری می شود

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

6 . استفاده از گرادیان در طراحی سایت راحت است

امروزه دسترسی به ابزارهای گرافیکی بسیار آسان شده است و شما به راحتی می توانید به کمک فتوشاپ گرادیان مورد نظر خود را ایجاد کنید. برای این کار از ابزار Gradient Tool فتوشاپ استفاده می کنیم که در منوی سمت چپ برنامه قرار دارد.

دست شما در انتخاب نوع گرادیان باز است؛ مثلاً می توانید به صورت جهت دار (Directional) یا دایره ای (Radial) آنها را بسازید. همچنین می توانید با ترکیب کردن این دو نوع گرادیان طرح هایی زیبا و خلاقانه ایجاد کنید.

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

7 . گرادیان رنگی الهام گرفته شده از طبیعت است

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

اگر قصد دارید جلوه هایی طبیعی و منطبق با دنیای واقعی خلق کنید، اولین انتخاب گرادیان خواهد بود.

8 . استفاده از گرادیان در طراحی سایت ترند شده است

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

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

5 نکته طلایی تایپوگرافی در طراحی سایت

حسین قنبری
بررسی طراحی سایت
1398/6/16

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

تایپوگرافی در طراحی سایت

فواید تایپوگرافی:

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

1 . مهمترین عامل؛ خوانایی

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

2 . ساده اما تاثیرگذار

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

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

  • افزایش اندازه فونت
  • استفاده از رنگ های متضاد با محیط در تایپوگرافی برای ایجاد contrast
  • استفاده از حالت bold فونت ها

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

3 . Serif vs. Sans Serif

سریف (Serif) به خطوط کوچک یا زائده‌هایی گفته می‌شود که در نقاط پایانی یک حرف، رقم یا نماد افزوده می‌شود. فونت‌هایی که دارای این خطوط کوچک هستند را فونت‌های سریف می‌نامند.فونت‌های سنزسریف (Sans-serif) نیز به فونت‌هایی گفته می‌شود که دارای این زوائد نیستند. (sans به معنای “بدونِ …” می‌باشد و کلمه ای فرانسوی است)

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

چند نمونه از فونت های سریف محبوب:

  • Caslon
  • Garamond
  • Freight Text
  • Minion
  • FF Meta Serif

چند نمونه از فونت های سنزسریف محبوب:

  • Proxima Nova
  • Futura
  • Avenir
  • Open Sans
  • Helvetica Neue

4 . سبک دست نوشته بر روی لایه عکس

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

5 . عدم استفاده از چندین خانواده فونت

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

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

حسین قنبری
طراحی سایت آموزش
1398/8/23

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

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

۱. تعاملات را در هرمکان که توانستید قرار دهید

 

استفاده از حالت های Hover، Rollover، انیمیشن و چیزهایی از این قبیل باعث می شوند که وبسایت شما سرزنده و شاداب به نظر برسد. به وبسایت‌تان قابلیت های لمس کردن و تعاملات مناسب با آن را اضافه کنید. در کنار این مورد از انیمیشن و ایجاد تحرک در عناصر مختلف نیز استفاده کنید به این دلیل که باعث می شود بیشترین توجه کاربر به خود را جلب کند. یک صفحه ایستا هیچوقت به اندازه یک صفحه متحرک جذاب و سرزنده نیست. 

۲. استفاده از carousel را فراموش کنید

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

۳. ساختن در یک محدوده برای توسعه در آینده

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

۴. یادتان باشد که بعضی چیزها را کم کنید

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

۵. طراحی برای ساده بودن

 

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

۶. از یک ویژگی تاجایی که می توانید استفاده کنید

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

۷. به بهترین ها گوش دهید

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

۸. روی توانایی کاربران تمرکز کنید

 

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

۹. ترازبندی متون را به صورت خوانا قرار دهید

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

۱۰. ابزارها و المان های مورد نیاز را به خاطر بسپارید

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