تو این مطلب میخواهیم 5 فونت Sans-Serif رایگان و بسیار زیبا برای طراحی وب رو خدمت شما دوستان معرفی کنیم که با استفاده از اونها وبسایت های خیلی زیباتری داشته باشید.
دارای 7 استایل مختلف
دارای 2 استایل مختلف در نسخه رایگان
دارای 10 استایل مختلف
دارای 18 استایل مختلف
دارای 3 استایل مختلف
اگر از طرفداران استفاده از گرادیان نیستید بهتر است این مقاله را بخوانید. در ادامه 8 دلیل قانع کننده برای استفاده از گرادیان در طراحی سایت آورده می شوند که می توانید از آنها برای طراحی سایت خود در سال جاری استفاده کنید.
استفاده از گرادیان در طراحی بک گراند صفحه موجب حرکت چشمان کاربر در تصویر میشود؛ مردمک چشم کاربر به یک نقطه از تصویر متمرکز می شود و به خاطر تغییر در طیف رنگ ها و سایه ها، چشمان او ناخودآگاه از یک طرف صفحه نمایش به سمت دیگر هدایت می شوند. گرادیان ابزار خوبی برای مجذوب کردن کاربران بوده و طرح های خسته کننده را زیبا و دلنشین می کند.
روش های مختلفی برای به کارگیری گرادیان در طراحی سایت وجود دارد، اما یکی از محبوب ترین روش ها گرادیان کردن پس زمینه سایت و قرار دادن تصویر، متن یا اِلمان های دیگر روی آن است.
علاوه بر استفاده بهینه در پس زمینه، میتوان از گرادیان در متن هایی که روی پس زمینه قرار گرفته اند نیز استفاده کرد. در این روش اگر هدف شما تمرکز به متن است نه تصویر، می توانید پس زمینه را ساده و با متن را همراه با گرادیان رنگ نمایش دهید تا توجه کاربران را به خواندن متون جلب کنید. این روش برای طراحی سایت شرکتی و خلاقانه توصیه میشود.
برای این کار کنتراست رنگ ها را زیاد کنید تا متن ها خوانا شوند.
اگر گرادیان را روی یک تصویر معمولی overlay کنید نتیجه کار باورنکردنی می شود! البته منظور از تصویر معمولی عکس بی کیفیت یا با رزولوشن پایین نیست، بلکه عکس های خسته کننده ای هستند که هیچ هیجانی در کاربر ایجاد نمی کنند.
در این روش استفاده از رنگ های روشن بهتر از رنگ های خنثی جواب می دهد. این تکنیک سایت و عکس اصلی آن را بسیار زیبا می کند ولی مشکل اصلی استفاده بیش از حد طراحان از این روش است. بنابراین اگر می خواهید از بقیه متمایز شوید بهتر است کمی خلاقیت چاشنی کار کنید تا طرح شما تکراری به نظر نیاید.
یکی از فاکتورهای مهم در طراحی وب سایت توجه به تجربه کاربری و دسترسی سریع به محتوا است. الگوی کاربران برای خواندن متن شبیه به حرف F است. یعنی از قسمت بالا سمت چپ شروع کرده و از وسط صفحه به سمت پایین می آیند.
برای حرکت دادن چشمان کاربر و جلب توجه او به قسمت های مختلف صفحه از قسمت های روشن گرادیان به عنوان نقطه شروع استفاده کنید و نگاه او را به سمت مراحل پایانی یا دکمه هدف هدایت کنید.
مردمک چشمان ما به طور ناخودآگاه اول قسمت روشن تر را دیده و بعد به قسمت تاریک توجه می کند.
اگر رنگ های برند شما به گونه ای هستند که می توان آنها را با هم ست کرد، به کمک گرادیان آنها را با هم ترکیب کنید. این تکنیک روش خوبی برای نمایش رنگ های سازمانی شما و حک کردن آن در ذهن مخاطب است. از گرادیان تولید شده در کمپین های تبلیغاتی، سایت، شبکه های اجتماعی یا متریال های چاپی خود استفاده کنید. وقتی از یک سبک یکسان در همه جا استفاده کنید ثبات خود را نشان داده و کاربران شما را با آن رنگ تشخیص می دهند.
امروزه دسترسی به ابزارهای گرافیکی بسیار آسان شده است و شما به راحتی می توانید به کمک فتوشاپ گرادیان مورد نظر خود را ایجاد کنید. برای این کار از ابزار Gradient Tool فتوشاپ استفاده می کنیم که در منوی سمت چپ برنامه قرار دارد.
دست شما در انتخاب نوع گرادیان باز است؛ مثلاً می توانید به صورت جهت دار (Directional) یا دایره ای (Radial) آنها را بسازید. همچنین می توانید با ترکیب کردن این دو نوع گرادیان طرح هایی زیبا و خلاقانه ایجاد کنید.
انتخاب رنگ مناسب برای گرادیان یکی از سخت ترین کارهاست، ساده ترین کار انتخاب کردن رنگ های قرار داده شده از پنل چرخ رنگ فتوشاپ است ولی همیشه نمی توان چنین کاری کرد، در بعضی اوقات باید آنقدر با رنگ ها بازی کنید تا نتیجه دلخواه به دست بیاید.
محوشدگی ها و سایه هایی که به کمک گرادیان ایجاد می شوند حس طبیعی بودن را به بیننده منتقل میکنند، علت هم این است که هیچ چیزی در طبیعت یک رنگ نیست و زندگی مملو از سایه ها و محوشدگی هاست.
اگر قصد دارید جلوه هایی طبیعی و منطبق با دنیای واقعی خلق کنید، اولین انتخاب گرادیان خواهد بود.
گرادیان ها دم دست ترین و راحت ترین راه حل برای چاشنی کردن عناصر بصری چشمگیر به تصاویر هستند و از گیج شدن کاربران سایت جلوگیری می کنند. با انواع مختلفی از تکنیک های گرادیان که بالاتر گفته شدند می توانید تصاویر شگفت انگیزی ایجاد کنید.
اگرچه استفاده از گرادیان در طراحی وب سایت در سالهای گذشته روندی سینوسی داشته و در مقاطعی از مد افتاده است، ولی پس از مدت کوتاهی و با پیشرفت تکنولوژی های طراحی سایت دوباره وارد عرضه طراحی وب سایت شده و نظر طراحان را به سمت خود جلب کرده است.
افزایش رزولوشن دستگاه ها،افزایش سرعت اینترنت و دسترسی طراحان به ابزارهایی برای تایپ در وب مانند Google Fonts و Adobe Typekitو … ، باعث شده تا این عصر به عصر طلایی تایپوگرافی تبدیل شود.تایپوگرافی هنری است که در آن طراح می کوشد با تغییر عناصر متن ، مثل اندازه ، فاصله حروف ، شکل حروف ، فاصله خطوط ، پاراگراف بندی و مواردی از این دست زبان بصری برای تایپ به وجود آورد.
فواید تایپوگرافی:
هیچگاه خوانایی را فدای یک فونت بهتر نکنید،طرح تایپوگرافیکی که قابل خواندن نباشد به کار کسی نمی آید.
یک تایپوگرافی ساده،خواندنش راحت تر و لود شدن آن کمتر زمان می برد اما این به معنی تاکید بر استفاده از سبک های مینیمالیستی در طراحی تایپوگرافی نیست.
نکات زیر را هنگام طراحی و استفاده از تایپوگرافی در طراحی سایت در نظر داشته باشید:
تایپوگرافی تاثیرگذار را با تایپوگرافی زرق و برق دار اشتباه نگیرید،فونت های ساده حس اعتماد و شفافیت را القا می کنند.
سریف (Serif) به خطوط کوچک یا زائده‌هایی گفته میشود که در نقاط پایانی یک حرف، رقم یا نماد افزوده میشود. فونت‌هایی که دارای این خطوط کوچک هستند را فونت‌های سریف می‌نامند.فونت‌های سنزسریف (Sans-serif) نیز به فونت‌هایی گفته میشود که دارای این زوائد نیستند. (sans به معنای “بدونِ …” می‌باشد و کلمه ای فرانسوی است)
هیچ شواهد قطعی وجود ندارد که نشان دهد یکی از آن ها خواناتر از دیگری است.تفاوت این دو فونت در استایل آن ها است،سریف متن را غنی تر و رسمی تر نشان می دهد در حالیکه سنزسریف سادگی بیشتری دارد.
چند نمونه از فونت های سریف محبوب:
چند نمونه از فونت های سنزسریف محبوب:
یکی از مکمل های خوب برای استفاده در کنار سبک به کاربردن نقاشی در طراحی سایت ها،دست نوشته ها می باشند.برای اینکه خوانایی دست نوشته ها می تواند مشکل ساز باشد،سعی کنید استفاده از آن را به تیتر های بزرگ بر روی لایه عکس ها محدود کنید.
در اکثر مواقع،شما برای هر سایت به بیش از دو خانواده فونت نیازی ندارید.برای ایجاد تنوع سعی کنید از سایزها و شکل های مختلف همان خانواده فونت استفاده کنید.
لایه ها، فرم ها، فونت ها و موارد دیگر، چیزهایی هستند که در هنگام طراحی وبسایت باید آنها را در نظر بگیرید. جدای از آن شما باید در رابطه با اینکه این المان ها به چه صورت نمایش می یابند نیز تصمیم بگیرید. حال اگر بازدید کننده از یک تلفن هوشمند استفاده کند این موضوع چندین برابر مهم می شود.
در این جا قسمت داریم نکات کلیدی را به شما بگویم که باعث می شوند به آن تجربه کاربری دلخواه خود دست پیدا کنید.
استفاده از حالت های Hover، Rollover، انیمیشن و چیزهایی از این قبیل باعث می شوند که وبسایت شما سرزنده و شاداب به نظر برسد. به وبسایت‌تان قابلیت های لمس کردن و تعاملات مناسب با آن را اضافه کنید. در کنار این مورد از انیمیشن و ایجاد تحرک در عناصر مختلف نیز استفاده کنید به این دلیل که باعث می شود بیشترین توجه کاربر به خود را جلب کند. یک صفحه ایستا هیچوقت به اندازه یک صفحه متحرک جذاب و سرزنده نیست.
هر وقت که در یک چرخه تصاویر از اسلایدر یکی از تصاویر عوض می شود تاثیر آن تصویر در صفحه نیز به سرعت پاک می شود. مطابق با آمار گوگل تنها یک درصد از کاربران موبایل از دیدن پیکان های تغییر تصویر در یک اسلایدر استفاده می کنند. هیچوقت سعی نکنید که مطالب کلیدی را در پشت یک اسلایدر مخفی کنید – در حالتی که این کار را کردید سعی کنید شرایطی را فراهم آورید که کاربر بتواند با استفاده از اسکرول طبیعی به صورت افقی تصاویر را تغییر دهد.
اگر رویکرد شما این است که به هر قیمتی شده در کوتاه‌ترین زمان ممکن نسخه ای را عرضه کنید، پس بهتر است روی ویژگی های حیاتی و کلیدی تمرکز کنید. مشکل این حالت در این است که اکثر توسعه دهندگان واقعا نمی توانند در یک محدوده خاص صرفا طراحی کنند. همیشه سعی در این داشته باشید که ابتدای کار چیزهای پیچیده را طراحی کنید.
یادتان باشد که حتما نیازی نیست همان تجربه‌ای را که به کاربر در نسخه دسکتاپ می دهید، عینا در نسخه موبایل نیز بدهید. گاهی اوقات نیاز است که بعضی ویژگی ها و محتوا را برای تناسب با اندازه صفحه کاربری از وبسایت در حالت موبایل کم یا حذف کنید. برای مثال یک بنر بزرگ طویل با موضوع محصولات فروشگاهی در نمای موبایل کمی خسته کننده و زشت است.
همیشه استرس و ریسکی وجود دارد که باعث می شود کاربران وبسایت اشتیاق و علاقه خود را از دست بدهند. این ریسک اغلب اوقات به دلیل استفاده از متغیرهای خارجی است. به صورت ایده‌آل همیشه به خاطر بسپارید که از رابط کاربری ساده استفاده کنید، از طراحی المنت های سنگین و به درد نخور دوری کنید و همه چیز را تا جایی که امکان دارد ساده نگه دارید.
یکی از کلیدی‌ترین ستون های تجربه کاربری مقاومت یا ثبات است. این مفهوم بدین معناست که تا جایی می توانید برای طراحی قسمت های مختلف وبسایت از یک کتابخانه استفاده کنید. حال آن کتاب خانه باید نسخه واکنشگرای وبسایت را نیز بسازد و با اندازه های مختلف صفحه نمایش سازگار باشد. واکنشگرا بودن وبسایت یکی از بخش های این ستون به حساب می آید.
اگر یکی از آن دست مدیران و توسعه دهندگانی هستید که با چالش های تجربه کاربری همراه نبوده‌اید باید بگویم که برای تجربه کاربری موبایل هر دو شرکت بزرگ گوگل و اپل مقالاتی در این رابطه ارائه داده‌اند. این مقالات بهترین مکان برای شروع به عنوان یک طراح است.
استفاده از کاربران حقیقی برای آزمایش یک پروژه که در حال کار است، بسیار مفید جلوه می کند. این کار باعث می شود که نتایج براساس نکات حقیقی و واقعی در نظر گرفته شود تا ترجیحات کاربران، هر چند این خود معایبی نیز دارد اما یکی از خوبی‌های این حالت این است که میزان سردرگمی کاربران را تا حد زیادی کاهش می دهد. آزمایشاتی که کاربران واقعی انجام می دهند حس درست تری در پیدا کردن خطاها و مشکلات به شما می دهند.
قرار دادن متون در قسمت مرکزی صفحه همیشه بد نیست. هرچند که یکی از نکات مهم این است که باید بدانید در چه حالتی از آن استفاده کنید. اگر محتوای یک مطلب بسیار زیاد است پس بهتر است آن را در جهت چپ یا راست قرار دهید. اگر می خواهید قابلیت خوانایی وبسایت را افزایش دهید (که باید حتما این کار را بکنید) پس بهتر است تنها برای بلاک های متنی کوچک از ترازبندی وسط استفاده کنید. برای مقالاتی که در صفحات تمام صفحه قرار دارند بهترین ترازبندی همان راست یا چپ است.
به یاد بسپارید که هر وبسایتی برای داشتن تجربه کاربری موفق باید دارای سرعت لود بسیار بالا، گواهینامه SSL، تصاویر کم حجم SVG و… باشد. هشدارهای امنیتی و تصاویر با حجم بالا تنها باعث می شود که کاربران از وبسایت شما دور شوند و از کاوش در وبسایت خودداری کنند.