طراحی وب سایت دارای یک فرآیند فشرده و بسیار طولانی است که برای انتخاب و طراحی هر عنصر باید زمان زیادی را صرف کرد. فرآیند طراحی شامل: انتخاب و طراحی لوگو، طراحی صفحه، متن، انتخاب رنگ، نحوه چیدمان و … می باشد. اما شاید مشکلترین بخش طراحی یک وبسایت این است که همه این عناصر مختلف را در یکپارچگی منطقی، فشرده و متعادل قرار دهیم و بخش مهمی از این متعادل سازی مربوط به بخش انتخاب فونت برای سایت می باشد.
در توضیحات این مقاله، ما سعی کردهایم فرآیند متعادل سازی مربوط به انتخاب فونت سایت را برای شما کمی ساده تر توضیح دهیم. برای آگاهی بیشتر درباره “نکات مهم هنگام انتخاب فونت مناسب در طراحی سایت”، با ما همراه باشید و این مطلب را تا آخر بخوانید.
همان طور که در بخش قبل توضیح داده شد، انتخاب فونت مناسب برای سایت، گامی موثر در طراحی است. در مقاله “اصول طراحی وب سایت چیست“ توضیح داده شده است، وب سایت هایی که از ساختار مناسبی برخوردارند، دارای تجربه کاربری بهتر و در نتیجه بازدید بیشتری هستند. بنابراین، چه سایت شما یک نمونه کار، یک وبلاگ، یک فروشگاه اینترنتی یا یک وب سایت شرکتی بزرگ باشد، باید در انتخاب فونت آن دقت کنید. 7 نکته مهم که باید هنگام انتخاب فونت سایت به آن توجه کنید، عبارت اند از:
1. حفظ طرح و نام تجاری (برند)
با توجه به این نکته که فونت انتخابی شما باید طرح و حالت برند را حفظ کند. بنابراین، سعی کنید سبک فونت را با طرح برند خود مطابقت دهید. هرچند، ممکن است زمانی که به فونتی برخورد می کنید، تصمیم گیری در مورد این که آیا استفاده از آن برای شما مناسب است یا نه سخت باشد. اما، در اینجا چند سوال وجود دارد که به شما کمک می کند تا یک ایده کلی از آنچه می خواهید به دست آورید. سوالات شامل:
ماهیت برند شما چیست؟ (مثلاً رسمی است یا فانتزی)
اگر وب سایت شما حول یک پروژه می چرخد، چه نوع پروژه ای است. کوتاه مدت است یا بلند مدت؟ زیرا، این احتمال وجود دارد که یک پروژه بلندمدت (مثلاً یک مجله یا یک خبرنامه) نیاز های بیشتری نسبت به پروژه کوتاه مدت داشته باشد و ممکن است با گذشت زمان نیاز به تغییر تایپ فیس داشته باشد. بنابراین، بهتر است یک خانواده فونت بزرگ با انواع و وزن های مختلف انتخاب کنید تا گزینه های متفاوتی در اختیار داشته باشید. اما، اگر روی یک پروژه کوتاه مدت کار میکنید (مانند راهاندازی محصول یا یک کمپین بازاریابی)، پس پایبندی به نسخههای فونت ساده بدون وزن اضافی ممکن است کافی باشد.
2. توجه به کیفیت و خوانایی
بدیهی است که باید تایپ واضح و خوانا باشد. اگر مردم مجبور باشند زمان بیشتری را برای درک آنچه نوشته اند صرف کنند، طراحی شما را نادیده خواهند گرفت. در متن، از به کار بردن فونت های فانتزی یا متن بزرگ خودداری کنید. زیرا، باعث فشار بر چشم خواننده می شود. بنابراین، بهتر است از حروف تزئینی فقط برای عنوان و تیتر و طراحی تایپو گرافی استفاده کنید.
همچنین، بسیار مهم است که حروفی را انتخاب کنید که در اندازه ها و وزن های مختلف به خوبی کار کند تا خوانایی در هر اندازه حفظ شود (بررسی کنید که حروفی که انتخاب میکنید در صفحه های کوچک تر خوانا باشد!).
سعی کنید از به کار بردن فونت هایی که از خط شکسته استفاده می کنند. مانند: Vivaldi (در مثال زیر) اجتناب کنید. هرچند، زیبا هستند. اما خواندن آن ها دشوار است.
گرچه مکانهای زیادی وجود دارد که میتوانید فونت های با کیفیت را پیدا کنید. اما، به حروفی که انتخاب می کنید توجه داشته باشید تا خوانا، تمیز و در سمت راست باشد، بدون این که توجه کاربر را از بقیه طرحها منحرف کنید. هنگام تراز کردن متن خود، باید به طول خط (فاصله بین سمت چپ و راست بلوک متن) نیز توجه کنید. موثرترین روش برای اندازه گیری طول خط با میانگین کاراکترها در هر خط است. طول خط بهینه از 45 تا 80 کاراکتر با احتساب فاصله است.
3. انتخاب فونت Serif در مقابل Sans
معمولاً یکی از اولین تصمیماتی که هنگام انتخاب یک تایپ برای متن انجام می شود، انتخاب فونت Serif یا Sans است؟ در حالی که نوع انتخاب شما تا حد زیادی به مخاطب هدف شما و حالتی که می خواهید با طراحی فونت خود ایجاد کنید، بستگی دارد. مهم ترین نکات در انتخاب نوع آن بستگی به موارد زیر دارد که عبارت اند از:
یکی از مهم ترین نکات طول نسخه شما است و انتخاب فونت Serif برای کپی طولانی راحت تر از san ها خوانده می شوند. بنابراین، فونت های Serif به حرکت چشم در یک خط کمک می کنند، به خصوص اگر خطوط طولانی باشند. در اینجا چند تایپ Serif امن وجود دارد که عبارت اند از:
Georgia
Lucida
Times New Roman
همچنین در این بخش، در نظر گرفتن مخاطب هدف نیز مهم است. انتخاب Sans برای کودکان خردسال یا افرادی که تازه خواندن را یاد می گیرند، ترجیح داده می شود. همچنین، برای خوانندگانی که دارای اختلالات بینایی خاصی هستند، استفاده از آن مفید است.
در نهایت، فونت Times New Roman به طور ویژه در دسته فونت های کلاسیک ایمن وب قرار می گیرد. به طور کلی، در انتخاب انواع فونت پیشفرض مانند این اشتباه نمیکنید. زیرا، معمولاً خواندن آنها آسان است و برای مدت طولانی در دسترس بودهاند. بنابراین، بسیاری از کاربران اینترنت به آن ها عادت کردهاند.
با این حال، اگر ترجیح می دهید رویکرد جسورانه تری را امتحان کنید، توصیه می کنیم فونت هایی مانند: Noe Display، Freight Text یا مجموعه Portrait را بررسی کنید. البته، همیشه در گوگل فونت هایی مانند: Playfair Display، Cormorant Garamond یا Crimson Text وجود دارد که میتوانید به صورت رایگان از آن ها استفاده کنید.
هرچند، به کار بردن “فونت های امن وب” (فونت هایی که به طور پیش فرض توسط همه مرورگر های وب اصلی پشتیبانی می شوند) یک شرط مطمئن است. اما، در اینجا چند تایپ بدون ایمنی وجود دارد که می توانید با آن ها نیز شروع کنید:
Arial
Tahoma
Verdana
4. در نظر گرفتن هدف طراحی وب و مخاطبان
تایپ فیس های مختلفی در وب وجود دارد که میتوانید از بین آن ها فونت های مورد نظر را انتخاب کنید و انتخاب آن عملاً نامحدود است. اگرچه، این به خودی خود خوب است. اما، اگر هدف طراحی سایت و مخاطبان خود را در نظر نداشته باشید، این موضوع می تواند مسائل را بیش از حد پیچیده کند. به همین دلیل مهم است که هدف طراحی وب خود و همچنین نوع مخاطبی را که می خواهید جذب کنید، به دقت در نظر بگیرید.
آیا میخواهید کاربردی بودن را هدف قرار دهید؟ پس به سراغ یکی از فونت های ایمن وب بروید.
اما، اگر میخواهید از بقیه متمایز شوید؟ پس فونت منحصر به فرد تری را امتحان کنید؟
در نهایت، با در نظر گرفتن این که وب سایت شما بیشتر به صورت بصری هدایت می شود (گرافیک ها مانند عکس ها، انیمیشن ها و ویدیوها)، یا بیشتر شامل بخش های بزرگی از متن (ارائه اطلاعات زیادی در مورد برند یا محصولات) است؟ متوجه خواهید شد که تایپ فیسی را که در نظر دارید با پیام کلی که می خواهید به بازدیدکنندگان خود منتقل کنید مطابقت دارد یا خیر.
5. ایجاد تنوع بصری (از به کار بردن فونت مشابه خودداری کنید)
بیشتر مواقع در طراحی خود باید از یک تایپ فیس استفاده کنید. با این حال، موارد خاصی وجود دارد که برای ایجاد سلسله مراتب بصری خوب، می توانید از چند تایپ فیس استفاده کنید (یعنی یکی برای متن اصلی و دیگری برای عنوان). بنابراین، هنگام انتخاب فونت برای طرح های خود، لازم است بدانید که یک خانواده فونت باید چقدر بزرگ باشد تا نیاز های تایپوگرافی پروژه شما را برآورده کند.
برای ایجاد تنوع بصری تعداد کل فونت ها را محدود کنید و به ترکیب آن ها فکر کنید. توجه داشته باشید، هر چه فونت های مشابه بیشتر باشند، در هنگام ترکیب احتمال تداخل آن ها بیشتر می شود. به طور کلی، از به کار بردن بیش از 2 تا 3 فونت در طراحی خود اجتناب کنید. هر بار که فکر می کنید به یک فونت جدید نیاز دارید، با اندازه های مختلف فونت برای فونت های موجود بازی کنید. توجه داشته باشید انتخاب دو فونت که یکسان به نظر می رسند، فایده ای ندارد. زیرا، هدف کلی استفاده از فونت های متعدد در طراحی، ایجاد تنوع بصری است.
Open Sans و Source Sans Pro فونت های بسیار مشابهی هستند.
نکته:با وجود آنچه در اینجا گفته شد، هر برندی الزامات خاص خود را دارد. بنابراین، هیچ چیز واقعاً ثابت نیست. فقط به یاد داشته باشید که هر چه فونت های بیشتری داشته باشید، هماهنگ کردن آن ها با یکدیگر سخت تر خواهد بود. بنابراین، در صورت امکان سعی کنید تعداد فونت خود را به حداقل برسانید، مگر این که انجام این کار کاملاً ضروری باشد.
در اینجا چند نکته برای جفت کردن فونت وجود دارد:
برای ایجاد تنوع شما می توانید از به کار بردن فونت های خیلی مشابه خودداری کرده و به ترکیب فونت ها فکر کنید. از آنجا که هر فونتی ویژگی متمایز خود را دارد. بنابراین، هنگام جفت کردن فونت های مختلف باید چندین نکته را در نظر گرفت که عبارت اند از:
هنگام انتخاب دو فونت، از کنتراست استفاده کنید: انواع مختلف کنتراست شامل: اندازه، وزن (پررنگ جلوه دادن قسمتهای خاصی از متن)، رنگ، فرم (مثلاً حروف بزرگ یا کوچک) و ساختار (اشکال مختلف مخلوط با حروف مختلف) است و در طراحی وب تایپوگرافیک، از روش های مختلف کنتراست برای تأکید بر قسمت های مختلف متن (با این هدف که قسمت های مهم بیشتر برجسته شوند) استفاده می شود. بنابراین، هنگام ترکیب دو فونت بسیار متفاوت، ایجاد سلسله مراتب نکته کلیدی آن است. یکی از فونت ها باید برجسته تر از دیگری باشد و این را می توان با تغییر اندازه و وزن هر فونت به دست آورد. ترکیب سریف با sans serif یک حرکت کلاسیک است.
به عنوان مثال: ممکن است ترکیب دو فونت با حالت های مختلف (استفاده از فونت های متضاد) ایده خوبی باشد. بنابراین، سعی کنید انواع فونت های بی رنگ را با فونت های خنثی تر و ضعیف تر ترکیب کنید.
یکی دیگر از ترکیب های خوب که به ندرت می توانید از آن استفاده کنید، ترکیب فونت سریف و سان سریف است. جفت کردن فونتها تماماً به ایجاد کنتراست میپردازد، و ترکیب سریفها و سانسریفها برای ایجاد یک تفاوت ظریف، اما متمایز کافی هستند.
از فونت هایی با خانواده یکسان استفاده کنید: برخی از فونت ها جدیتر و برخی دقیقتر به نظر میرسند. اما، فونت ها در وهله اول به گونه ای ساخته شده اند که با هم ترکیب شوند. به همین دلیل جفت کردن فونت های یک خانواده میتواند به شما کمک کند تا حس سازگاری بیشتری داشته باشید. بنابراین، اگر هنوز مطمئن نیستید که چه فونت هایی را با هم ترکیب کنید، می توانید از فونت هایی که خانواده یکسانی دارند، استفاده کنید. این فرآیند طراحی یک وبسایت را بسیار آسان تر میکند.
استفاده از ابزار های آنلاین: همچنین، اگر برای جفت کردن فونت ها به کمک نیاز دارید، چندین ابزار آنلاین عالی مانند: fontpair وجود دارد که می تواند در یافتن و جفت کردن فونت ها کمک کند. از طرف دیگر، همیشه میتوانید ترکیب های فونت Google را بررسی کنید تا بدانید کدام فونت های مجموعه Google بهطور استثنایی با هم هماهنگ هستند.
یکی از فونت ها باید برجسته تر از دیگری باشد.
نکته: وقتی انتخاب میکنید از چند تایپ فیس استفاده کنید. مطمئن شوید، حروفی که استفاده میکنید، تفاوت های متضاد قابل توجهی دارند. اما، به یاد داشته باشید ترکیب ایده آل فونت ها باید هارمونی ایجاد کند. شما می توانید برای انجام آن از یک قانون ساده پیروی کنید. دو تایپ فیس را بیابید که در یک چیز مشترک هستند. سپس، با تغییر مواردی مانند: اندازه، یا وزن، با ترکیب کردن حروف معمولی با حروف کج و … در بین خانواده های فونت مشابه، تضاد ایجاد کنید.
6. نحوه جلوگیری از کاهش سرعت سایت، هنگام انتخاب فونت
امروزه، اکثر مخاطبان وقت و حوصله سایت های کند را ندارد. به همین دلیل است که اگر بارگذاری یک فونت بیش از حد طول بکشد، ممکن است برای شما خوب نباشد. در اینجا مواردی وجود دارد که می توانید در هنگام انتخاب فونت وب سایت برای جلوگیری از کاهش سرعت خود انجام دهید. از جمله:
به تعداد محدودی از حروف چاپی پایبند باشید. قبلاً اشاره کردهایم که چرا داشتن فونت های زیاد ممکن است بهترین ایده نباشد. سرعت بارگذاری یکی دیگر از دلایلی است که نباید در مورد شماره فونت خود زیاده روی کنید.
فقط سبک هایی را که نیاز دارید، انتخاب کنید. به این ترتیب اندازه فونت های شما حداقل خواهد بود و اندازه کمتر برابر با زمان بارگذاری کمتر است. به عنوان مثال: هنگام دانلود یک فونت، فقط سبک معمولی و پر رنگ را انتخاب کنید.
زبان هایی را که استفاده نمی کنید، دانلود نکنید. اگر فقط به یک یا چند زبان مختلف برای یک فونت خاص نیاز دارید، مطمئن شوید آن هایی را که مطمئن هستید هنگام دانلود به آن ها نیاز ندارید، از حالت انتخاب خارج کنید.
7. استفاده از سایر ابزارها برای الهام گرفتن در انتخاب فونت
در صورتی که در طول جستجوی فونت خود به کمک بیشتری نیاز داشته باشید، مکانهای زیادی در وب وجود دارد که میتوانند از فونت الهام بگیرند. به عنوان مثال:
“Typewolf” سایتی است که در آن می توانید تعداد زیادی توصیه و لیست فونت را پیدا کنید که می تواند خلاقیت شما را برانگیزد یا حداقل مسیری را به شما نشان دهد که می توانید طراحی فونت خود را در آن طی کنید. یکی دیگر از سایت های عالی برای شروع، “Fonts In Use” است. در اینجا میتوانید فونت هایی را که بسیاری از طراحان در دنیای واقعی و همچنین در وب استفاده میکنند، مرور کنید.
همچنین، مجموعه کاملی از منابع تایپوگرافی از جمله: کتاب ها و ابزار هایی که می توانند به شما در شناسایی فونت تا وبلاگ های تایپوگرافی مفید کمک کنند، در دسترس شما می باشد.
همچنین، اگر به صورت آنلاین به طرحی برخورد کرده اید که فونت بسیار جالبی دارد. اما، نام آن را نمی دانید و می خواهید این فونت را در صفحه وب خود استفاده کنید، می توانید برای شناسایی از ابزار های آنلاین مانند: ابزار “WhatTheFont” استفاده کنید. این یکی از این شناسه های فونت است که توسط یکی از بزرگترین مجموعههای فونت در وب ارائه میشود. تنها کاری که باید انجام دهید این است که یک عکس با فونت مورد نظر خود آپلود کرده و آن را برش دهید و نتایج نام فونت مورد نظر را به شما نشان می دهد.
یکی دیگر از برنامه های قابل استفاده بر روی مرورگر ها، برنامه “Fontface Ninja” است که به صورت رایگان به شما امکان می دهد هر فونتی را که به آن علاقه دارید بررسی و امتحان کنید و یا بخرید (وقتی ماوس را روی فونت می گذارید، نه تنها می توانید نام آـن را بررسی کنید، بلکه می توانید در مورد اندازه، هسته، ارتفاع خط و رنگ آن اطلاعات کسب کنید).
سخن آخر
حتی با وجود این که وب پر از عناصر طراحی گرافیکی زیبا مانند: موشن گرافیک، تصویرسازی و عکاسی است، اکثر اطلاعات آنلاین همچنان در متن یافت می شود. در واقع، تایپوگرافی حدود 90 درصد از محتوای وب سایت را تشکیل می دهد. بنابراین، اهمیت طراحی فونت را نباید نادیده گرفت. زیرا می تواند تأثیر مستقیمی بر تجربه کاربر داشته باشد و به همین ترتیب، می تواند باعث کاهش یا افزایش تجربه کاربری وب سایت شما شود. برای اطمینان از این که وب سایت شما به اندازه کافی خوانا و برای راحتی خواندن کاربران شما به اندازه کافی خوانا است، همیشه نحوه نمایش فونت های خود را در دستگاه ها و اندازه های مختلف صفحه نمایش آزمایش کنید.
زمانی که متوجه میشوید چه فونتی برای شما بهتر کار میکند، ابتدا به هدف طراحی خود فکر کنید. پس از تعیین جهت کلی که می خواهید در آن بروید، تعداد حروفی را که می خواهید داشته باشید انتخاب کنید و سپس شروع به مرور وب برای ترکیب فونت های احتمالی کنید. در انتخاب فونت سایت گزینه های زیادی وجود دارد، در نهایت چیزی را انتخاب کنید که برای شما مناسب باشد.
صنعت طراحی وب سایت هر سال تغییرات زیادی می کند، گرایشهای جدید میآیند و میروند، اما به نظر میرسد طراحی اسلایدر ها برای مدتی طولانی است که باقی ماندهاند، آن ها یک گرایش محبوب در طراحی وب هستند و دلیل خوبی هم برای این مسئله وجود دارد. اسلایدرها توانایی ارائه جذابی از محتوا را بدون نیاز به اشغال فضای زیادی از صفحه نمایش به کاربران ارائه می دهند. با این حال، آن ها همچنین دارای اشکالاتی هستند که قبل از تصمیم گیری در مورد اینکه آیا این گزینه برای سایت شما مناسب است یا خیر، باید از آن ها آگاه باشید.
اسلایدر ها را میتوان برای اهداف مختلف در وبسایتها طراحی و استفاده کرد، مانند بیرون کشیدن برخی ویژگیها از صفحات دیگر و ارائه آنها در یک مکان واحد یا بهعنوان یک صفحه مقدمه قبل از نمایش آنچه در بقیه وبسایت در دسترس است.
اسلایدر چیست؟
اسلایدر یا نوار لغزنده ابزاری است که میتواند برای نمایش محتوا به صورت کشیده با استفاده از فلشها، طراحی شود. آن ها اغلب در بالای صفحات وب یا در صفحه اصلی یافت می شوند و همانطور که ماوس خود را روی آن ها حرکت می دهید، کاری انجام می دهند یا اغلب به طور خودکار محتوا را تغییر می دهند، همچنین به صورت افقی حرکت می کنند. اسلایدر ها در طراحی وب معمولاً از یک عنوان، تصاویر، دکمههای پیمایش و متنی برای خواندن محتوای بیشتر ساخته میشوند. تصاویر اسلایدر و متن را می توان به صفحات دیگر در وب سایت لینک داد تا به کاربر اجازه دهد به مقالات یا منابع مرتبط پیمایش کند.
برخی از اسلایدر ها به کاربر اجازه میدهند با استفاده از کنترلهای مختلف حرکت کند، اما گاهی اوقات احساس میشود که بسیار با اسلایدر درگیر هستید زیرا محتوا یا تصویری که به آن علاقه دارید مدام ناپدید میشود تا با اسلاید دیگری جایگزین شود. این ویژگی، یک تجربه کاربری موبایل و دسکتاپ عالی را ارائه نمی دهد.
مزایا و معایب استفاده از اسلایدر
طراحان وب اسلایدر ها را برای طیف وسیعی از اهداف ایجاد می کنند. برخی استدلال می کنند که آن ها نوعی طراحی قدیمی هستند، در حالی که برخی دیگر آن ها را نوآورانه می دانند. با این حال وقتی که به آن ها نگاه می کنید، نمی توان انکار کرد که اسلایدر ها به شدت بر دنیای طراحی وب سایت به صورت مثبت و منفی تأثیر گذاشته اند.
مزیت 1 – افزایش تعامل کاربران
یکی از مزایای مهمی که اسلایدر ها در طراحی وب دارند این است که توجه را به خود جلب می کنند زیرا چشمان انسان به شدت با اجسام متحرک سازگار است. فقط فکر کنید چقدر سخت است دیدن یک مار بوآ استتار شده روی شاخه درخت نشسته در مقایسه با زمانی که برای حمله به طعمه خود حرکت می کند. برای عکس های موجود در صفحات وب شما هم همینطور است. متن یا تصاویر ایستا به اندازه تصاویر اسلایدر محتوا مورد توجه یا تمرکز قرار نمی گیرند.
اسلایدر ها حس حرکتی را ارائه می دهند که برای جلب توجه کاربر عالی است. بازدیدکنندگان سایت زمان بیشتری برای درگیر ماندن با وب سایت دارند زیرا حواس آن ها تحریک می شود. به علاوه، آنها به عنوان یک راه عالی برای نمایش بیش از یک تصویر در یک زمان عمل می کنند. این امر به ویژه هنگامی که به فضای محدود روی صفحه فکر می کنید بسیار مهم است. از اسلایدر ها میتوان برای ایجاد توازن کامل بین تصاویر با مجموعهای از عکسهای طراحی شده برای نمایش محصولات، خدمات، نمونه کارها یا هر چیزی که میخواهید استفاده کرد.
مزیت 2 – قابلیت نمایش تمام محصولات برتر
نرخ پرش بالا برای محتوای آنلاین یکی از دشوار ترین و خسته کننده ترین مسائل در بازاریابی دیجیتال است. هنگامی که بازدیدکنندگان وب سایت احساس درگیر شدن نمی کنند، بسیاری از اوقات به این دلیل است که آنها باید محتوای زیادی را جستجو کنند تا آنچه را که می خواهند پیدا کنند. طراحی وب با استفاده از اسلایدر های محتوا می تواند محبوب ترین و بهترین رتبه بندی را به سبکی مختصر ارائه دهد که به جذب بازدیدکننده کمک می کند.
معایب
یک انتقاد رایج از اسلایدر ها این است که آن ها با دادن گزینه های بسیار زیاد که همه وزن یکسانی دارند، کاربران را تحت تأثیر قرار می دهند. مشکلات دیگری که برای تجربه کاربری ایجاد می شود عبارتند از:
واضح نبودن بنر طراحی شده: بازدیدکنندگان اغلب اسلایدرها را به همان شیوه ای که تبلیغات انجام می دهند مشاهده می کنند و از روی آن ها می گذرند.
اسلایدر محتوا، کیفیت بارگذاری صفحه را کاهش می دهد و در نتیجه بر سئو وب سایت و نرخ تبدیل تأثیر می گذارد.
برخی از نوار های لغزنده در دستگاه های تلفن همراه به خوبی کار نمی کنند
به جای نمایش بهترین محصولات یا خدمات، ممکن است شرکتی اینگونه عمل کند که اگر همه چیز را در اسلایدر ها جای دهد، تصمیم بهتری خواهد بود.
بحث بر سر بهترین رویکرد برای طراحی صفحه سایت است، یک طراح وب ممکن است با بخشهای Hero که دارای تصاویر پسزمینه خیرهکننده با پوشش متن است، صفحات خود را مدیریت کند. برخی دیگر دوست دارند قسمت اول صفحه را با carousel جایگزین کنند که تصاویر و متن های مختلف را اسلاید می کند تا طرح خود را به کاربر ارائه دهد.
زمان استفاده از اسلایدر
اسلایدر ها همیشه برای یک وب سایت مناسب نیستند، اما می توان از آن ها برای تأثیرگذاری عالی استفاده کرد. با تجزیه و تحلیل آنچه کاربر شما از وب سایت شما می خواهد یا نیاز دارد و اینکه چگونه می توان از صفحات مختلف وب سایت برای رسیدن به آن هدف استفاده کرد، شروع کنید.
اسلایدرها در طراحی وب می توانند هویت برند را تقویت کرده و اعتماد کاربران را افزایش دهند.
اگر اسلایدر بد طراحی شده باشد و/یا سردرگمی یا حواسپرتی ایجاد کند، احتمالاً نرخ تبدیل را از دست خواهید داد.
هر کسب و کاری منحصر به فرد است، به این معنی که برخی از Slider ها از این مسئله سود می برند در حالی که دیگران ممکن است ضرر کنند.
یکی از راههای استفاده مؤثرتر از نوار لغزنده، تغییر افکتهای انتقال است. به عنوان مثال، میتوانید از بین انواع راه های عوض شدن اسلاید اضافی چند نمونه را انتخاب کنید، مانند محو کردن یا پاک کردن به جای اسلاید های افقی ناگهانی.
با ارائه دکمه های پیکان مانند برجسته برای حرکت به سمت عقب و جلو در یک اسلایدر، ناوبری را سریع و آسان کنید.
آیتم های یک اسلایدر باید به دقت در نظر گرفته شوند تا بهترین قابلیت استفاده، سبک پیمایش (استفاده از فلشهای بعدی و قبلی رایج است)، انواع مختلف محتوا برای استفاده، استفاده از فضای منفی و غیره مورد توجه قرار گیرد. به کاربران وبسایت تلفن همراه، تجربه کاربری عالی با قابلیت کشیدن انگشت روی اسلایدر ها به جای نمایش اتوماتیک اسلایدر، به کاربران ارائه دهید. استفاده از اسلایدر در تلفن همراه نباید اذیت کننده باشد.
اگر از Lazy loading استفاده شود، سئو و تجربه کاربری هر دو بهبود مییابند، عکسهایی که بعداً در Carousel ظاهر میشوند، نیازی به بارگذاری ندارند تا زمانی که به آن ها نیاز باشد. مطمئن شوید که طراحان وب سایت شما تصاویر را بهینه کرده و از کوچک ترین اندازه تصویر برای کاهش زمان بارگذاری صفحه استفاده می کنند.
نکات استفاده از اسلایدر در طراحی وب
فضای وب دارای نمونههای زیادی از وبسایتهایی است که از اسلایدر ها استفاده میکنند، اما همه آن ها مزیت خاصی برای سایتها ندارند. نوارهای لغزنده عناصر طراحی ظریفی هستند که می توانند نتایج زیبایی را به ارمغان بیاورند.
با این حال، اگر اسلایدر ها برای بازدیدکنندگان ارزش قائل نشوند، هیچ مزیتی نخواهند داشت و اگر باعث تضعیف تجربه کاربری شوند، می توانند عواقب منفی داشته باشند. برای دستیابی به نتایج عالی با اسلایدر، به این قوانین پایبند باشید:
همیشه ناوبری را ارائه دهید. مطمئن شوید که اسلایدر کاملا بصری است تا کاربران بتوانند به تنهایی در نمایش اسلاید پیمایش کنند. ارائه ناوبری ضروری است، هر چه واضح تر باشد، بهتر است. معمولاً برای این منظور از فلش های جانبی استفاده می شود. برای جلوگیری از UX ضعیف، این قرارداد های طراحی را دنبال کنید.
ناوبری باید برای صفحه نمایش لمسی و دستگاه های تلفن همراه به خوبی کار کند. به طور خاص، کاربران شما باید بتوانند یک اسلاید را از سمتی به سمت دیگر بکشند.
موارد مهم را در درجه اول قرار دهید. برخی از بازدیدکنندگان نمی خواهند برای دیدن یک نمایش اسلایدر کامل منتظر بمانند، بنابراین مهم ترین پیام ها را در ابتدا قرار دهید.
از افکت های زیاد استفاده نکنید. افکت های بیش از حد می تواند بازدیدکنندگان وب سایت را آزار دهد.
زمان تاخیر تعویض اسلاید را به درستی تنظیم کنید. اگر کاربران شما زمان کافی برای خواندن اطلاعات روی یک اسلاید نداشته باشند، احساس می کنند کنترلی ندارند و ممکن است سایت شما را ترک کنند.
اسلایدر خود را برای همه گروههای مردم در دسترس قرار دهید.
عملکرد اسلایدر را در تمام اندازههای صفحه نمایش، مرورگرها و دستگاهها آزمایش کنید تا تجربهای بهینه برای کاربران فراهم کنید.
فاوآیکون یک نشانگر بصری فوری است که ایجاد آن علاوه بر این که به سایت شما مشروعیت می بخشد، موجب تقویت برند و در نتیجه تقویت اعتماد مصرف کنندگان بالقوه می شود. به طور کلی، هنگام راه اندازی وب سایت تجاری، ایجاد فاوآیکون یک قدم کوچک، اما مهم است.هرچند استفاده از فاویکون ها مستقیماً به بهینه سازی موتور جستجو (SEO) کمک نمی کند. اما، از آنجا که امکان شناسایی، دسترسی آسان و سریع وب سایت شما را برای کابران فراهم می کند. بنابراین، به طور غیر مستقیم مانند طراحی حرفه ای لوگو در معرفی برند و افزایش تجربه کاربری تاثیر گذار است.
در ادامه به توضیح مختصری درباره فاوآیکون چیست؟ نحوه ایجاد آن در وردپرس و هم چنین، بررسی اهمیت استفاده از آن و … می پردازیم. برای کسب اطلاعات بیشتر به خواندن مطلب ادامه دهید.
فاوآیکون چیست؟
فاوآیکون یک نماد کوچک 16×16 پیکسلی است که برای وب سایت شما به عنوان برندعمل می کند (به دلیل اندازه و وضوح، فاویکون ها به عنوان تصاویر ساده یا یک تا سه کاراکتر متن بهترین عملکرد را دارند) و هدف اصلی استفاده از آن این است که به بازدیدکنندگان کمک کند تا زمانی که چندین برگه باز دارند، صفحه وب سایت شما را راحت تر پیدا کنند.
شما می توانید برای ساخت فاوآیکون از اندازه کوچکتر لوگو یا بخش مفهومی از لوگوی اصلی شرکت استفاده کنید. هرچند، گاهی اوقات فاوآیکون با لوگو یکسان می باشد. اما، نباید با لوگو اشتباه گرفته شوند.
نحوه افزودن فاوآیکون به وردپرس
شما می توانید به شیوه زیر فاوآیکون را به سایت وردپرسی خود بیافزایید.
زمان مورد نیاز: 4 روز.
مراحل “نحوه افزودن فاوآیکون به وردپرس” را به صورت گام به گام دنبال کنید.
گام اول
برای این که بتوانید فاویکون را به سایت وردپرس خود اضافه کنید، ابتدا به قسمت “Appearance” بروید و سپس گزینه “Customize” انتخاب کنید.
گام دوم
سپس، به منوی واقع در نوار کناری سمت چپ بروید. شناسه سایت را پیدا کرده و روی آن کلیک کنید.
گام سوم
فاویکون مورد نظر خود را برای نمایش اضافه کنید. گزینه “Site Icon” جایی است که می توانید تصویر مورد نظر خود را برای فاوآیکون انتخاب کنید.
گام چهارم
اگر موضوع شما به شما اجازه نمی دهد که فاویکون خود را در تنظیمات سفارشی سازی تم آپلود کنید، می توانید از یک تولید کننده فاویکون واقعی استفاده کنید و در افزونه “Insert Header & Footer” آپلود کنید.
گام پنجم
در اینجا، شما باید بر روی گزینه “Select your Favicon” کلیک کنید.
گام ششم
فاویکون خود را در رسانه وردپرس آپلود کنید تا بتوانید یک URL برای فاویکون خود ایجاد کنید. سپس، در این قسمت گزینه دوم را انتخاب کرده و URL خود را در کادر قرار دهید. روی “Generate your Favicons and HTML code” کلیک کنید.
گام هفتم
فاوآ یکون واقعی یک کد HTML ایجاد می کند و می توانید کل کد را کپی کنید.
گام هشتم
به افزونه “Insert Headers and Footers” بروید و در قسمت “Settings” در کادر “scriptsHeader” کد HTML خود را قرار دهید. سپس، بر روی گزینه “Save” کلیک کنید.
فاوآیکون ها در کجا دیده می شوند؟
فاویکون ها در کنار هر چیزی که وب سایت شما را شناسایی می کند، دیده می شود. این شامل: نشانکها، برگهها، برنامههای نوار ابزار، نتایج تاریخچه و نوارهای جستجو میشود. به نمونه های تصاویر زیر دقت کنید.
1. منوی کشویی نشانک ها
2. برگه های مرورگر
3. برنامههای نوار ابزار
4. منوی کشویی تاریخچه
5. تاریخچه مرورگر
6. نوار جستجو
7. پیشنهادات نوار جست وجو
استفاده از فاوآیکون ها چه اهمیتی دارد؟
آیا فاوآیکون ها برای سئو مهم هستند؟ همانطور که بخش قبل به آن اشاره کردیم، فاوآیکون ها مستقیماً بر بهینه سازی موتورهای جستجوی شما تاثیر گذار نیستند. اما، به طور غیرمستقیم ابزار مهمی برای بهبود رتبه شما در موتورهای جستجو هستند. در این بخش به توضیح مختصری درباره این که چگونه می تواند به سئوی شما کمک کند، آورده شده است. از جمله:
1. کاربر پسند شدن وب سایت
نمایشحرفه ای برند: استفاده از فاوآیکون علاوه بر افزایش بازدید، در نهایت به برند شما ظاهر حرفه ای تری می بخشد و اعتبار شما را تقویت می کند. طراحی فاوآیکون برجسته و زیبا می تواند منجر به بازدید مجدد کاربران از سایت شما شود. حتی زمانی که کاربران قصد بازدید از سایت شما را نداشته باشند.
دسترسی سریع کاربران به سایت: وجود فاوآیکون قابل مشاهده در برگههای مرورگر، نشانکها، بایگانیهای تاریخچه و … به کاربران سایت شما کمک میکند تا وبسایت را بدون مشکل شناسایی و مرور کنند. در نتیجه، تعامل کاربر با وبسایت شما افزایش می یابد. زیرا، دسترسی سریع موجب صرفه جویی وقت کاربران می شود.
به طور کلی، داشتن یک وب سایت کاربر پسند به طور غیر مستقیم رتبه شما را در موتورهای جستجو بهبود می بخشد. این امر زمان صرف شده و تعامل با وب سایت شما را بهبود می بخشد به این معنی که نشست های بیشتری به وب سایت شما برای مدت طولانی تر خواهد بود و در نتیجه سئوی شما را بهبود می بخشد.
2. نشانک ها
بوکمارک شدن (نشانک) توسط کاربران برای بازدید مجدد، وب سایت را در موقعیت بهتری قرار می دهد. زیرا، بوکمارک شدن با وجود فاوآیکون موجب متمایز شدن سایت شما در لیست نشانک ها می شود. بنابراین، به طور غیر مستقیم باعث افزایش بازدید و بهبود سئوی وب سایت شما می شود.
به عنوان مثال: در صورتی که سایت شما دارای فاوآیکون باشد. وقتی شخصی سایت شما را نشانک می کند، فاوآیکون شما در کنار عنوان صفحه شما در لیست نشانک های او ظاهر می شود و این به افراد کمک می کند تا از بین سایت های نشانک شده به راحتی به محتوای شما پیمایش کنند. در نتیجه موجب تقویت و بهبود تجربه کاربری می شود.
توجه داشته باشید از آنجا که مرورگر کروم توسط Google، به سایت هایی که از فاوآیکون استفاده می کنند، نسبت به وب سایت هایی که استفاده نمی کنند، امتیاز برتری می دهد. بنابراین، اگر در وب سایت خود فاوآیکون نداشته باشید، ممکن است شانس بوکمارک شدن در مرورگر کروم را از دست بدهید. در نتیجه به طور غیر مستقیم یکی از سیگنال های رتبه بندی گوگل را از دست خواهید داد.
3. برندسازی و دیده شدن
فاویکون یک نمایش بصری از وب سایت و کسب و کار شما است. بنابراین، کاربران بر اساس فاویکون مورد استفاده شما با برند شما شناسایی می شوند. سئو همه چیز در مورد برندسازی و بازاریابی است و هر چه وب سایت شما بیشتر دیده شود، کاربران بیشتری روی وب سایت شما کلیک می کنند و به یاد می آورند که شما چه کسی هستید.
نحوه ایجاد فاوآیکون خوب
هنگام ایجاد و طراحی فاوآیکون برای وب سایت خود باید موارد زیادی را در نظر گرفت. اگرچه کوچک و ساده است، اما می تواند (و باید) تأثیر زیادی داشته باشد. مهم است که مطمئن شوید بهترین فاویکون ممکن را تولید می کنید. زیرا، این همان چیزی است که کاربران برند شما را با آن شناسایی می کنند. در اینجا مواردی وجود دارد که باید هنگام ایجاد فاویکون خود در نظر داشته باشید. از جمله:
1. از فضا عاقلانه استفاده کنید
گاهی اوقات نمی توان برای ایجاد فاوآیکون از نسخه کوچکتر لوگوی شرکت استفاده کرد. باید به اندازه کلی فاویکون خود توجه کنید. شما باید به 16px پایبند باشید. زیرا این مورد برای همه مرورگرها قابل قبول است (اما می توانید نمونه های دیگری را در زیر بیابید).
2. سادگی
اگرچه فاویکون چهره بصری برند شما است، اما شما می خواهید طراحی خود را تا حد امکان ساده نگه دارید. بهترین فاویکون ها ساده ترین ها هستند. به دلیل اندازه کوچک و سادگی اشکال استفاده شده در فاوآیکون ها، برای جلب نظر مصرف کنندگان بالقوه و متمایز شدن آن از سایر فاوآیکون ها استفاده از رنگ های جذاب حیاتی می باشد. از شلوغی زیاد بپرهیزید. زیرا، جزئیات بیش از حد باعث می شود Favicon درهم و برهم به نظر برسد.
3. هویت نام تجاری
فاویکون شما، نماد بصری برند شما است. بنابراین باید به صورت بصری به کاربران بگوید که کسب و کار شما چه چیزی را نشان می دهد. این بلافاصله به آن ها می گوید که نام تجاری شما در مورد چیست و چه کاری انجام می دهد. اگرچه انجام این کار با چنین طراحی کوچک و ساده بسیار سخت است، اما سعی کنید خلاق باشید. مثالهای زیر قدرت فاویکونهای کوچک و خلاقانه را نشان میدهند. در نگاه اول می توانید فوراً متوجه شوید که هر نام تجاری در مورد چیست و چه چیزی را نشان می دهد.
4. مخفف کردن
در برخی موارد یافتن تصویر مرتبط با کسب و کار شما، عملی نمی باشد. بنابراین، یک راه حل رایج برای این کار استفاده از حرف اول نام کسب و کار یا نام های اختصاری است. همچنین می توانید از مخفف نام شرکت خود استفاده کنید. راه ای مختلف را امتحان کنید و یکی را انتخاب کنید که برای شما بهتر است.
5. هماهنگی رنگ
انتخاب رنگ نیز باید وارد عمل شود. رنگ های متضاد تشخیص اشکال و نقطه کانونی فاویکون را برای چشم آسان می کند. با توجه به ماهیت کوچک فاویکون ها، باید شرکت خود را به وضوح به کاربر نشان دهید و استفاده از رنگ می تواند حیاتی باشد. به خاطر داشته باشید که همه مرورگرها کمی متفاوت هستند. به عنوان مثال، برخی دارای پسزمینه خاکستری، سیاه یا سفید هستند که Favicon شما روی آن قرار میگیرد. بنابراین، در انتخاب رنگ دقت کنید تا با مشکل عدم نمایش صحیح و رو به رو نشوید.
فرمت مناسب فاوآیکون
در گذشته فاوآیکون باید در قالب ویندوز ICO قرار می گرفت. اما، هم اکنون چند گزینه قالب بندی مختلف وجود دارد که در ادامه به مختصری درباره آن می پردازیم. انواع فرمت ها شامل:
1. ویندوز ICO
ICO تا حد زیادی گسترده ترین فایل پشتیبانی شده است. مزایای ICO این است که می تواند دارای رزولوشن های متعدد و عمق بیت باشد که بسیار خوب کار می کند و به ویژه برای ویندوز مفید است. ICO همچنین یک نماد 32 پیکسلی را ارائه می دهد که برای نوار وظیفه اینترنت اکسپلورر ویندوز 7 مفید است. همچنین این تنها قالبی است که از عنصر استفاده نمی کند.
2. PNG
فرمت PNG به دلایل مختلف مفید است و برای ایجاد یک فایل PNG به ابزار خاصی نیاز ندارید و آن را بسیار کاربر پسند می کند. این کوچکترین اندازه فایل ممکن را به ما می دهد و از شفافیت آلفا پشتیبانی می کند. با این حال، یکی از معایب بزرگ این سبک این است که اینترنت اکسپلورر از فایل PNG پشتیبانی نمی کند. فقط از فایل های ICO پشتیبانی می کند.
3. SVG
فرمت svg قابل استفاده است و توسط مرورگرهای اپرا پشتیبانی می شود.
4. GIF
این فرمت هیچ گونه پیشنهادی برای استفاده در مرورگر های قدیمی ارائه نمی دهد. در حالی که آن ها توجه کاربران بیشتری را به خود جلب می کنند. اما، نظر کلی این است که استفاده از آن ها هیچ مزیتی ندارد.
5. JPG
اگرچه می توان برای ایجاد فاوآیکون از فرمت JPG استفاده کرد. اما، رایج نیست و کیفیت وضوح آن به خوبی PNG نمی باشد. علاوه بر این، به دلیل اندازه کوچک فاوآیکون، JPEG تمام مزایای خود را از دست می دهد.
6. APNG
این یک نسخه متحرک از PNG است و در حالی که ممکن است توسط فایرفاکس و اپرا پشتیبانی شود، مشکلاتی مشابه با GIF متحرک دارد و حواس کاربران را در حین نگاه کردن به رابط آن ها پرت می کند.
چه اندازه هایی برای فاویکون در هر مرورگر مورد نیاز است؟
همانطور که در بالا گفته شد، به طور معمول سایز 16px توصیه می شود. زیرا می تواند در همه مرورگرها استفاده شود. اما، اگر می خواهید برای هر استفاده ممکن یک فاوآیکون ایجاد کنید، موارد زیر را دنبال کنید:
16 پیکسل: برای استفاده عمومی در همه مرورگرها، می تواند در نمای نوار آدرس، برگه ها یا نشانک ها نمایش داده شود.
24 پیکسل: سایت پین شده در اینترنت اکسپلورر 9
32 پیکسل: صفحه برگه جدید در اینترنت اکسپلورر، دکمه نوار وظیفه در ویندوز 7+ و نوار کناری «بعداً بخوانید» سافاری
57 پیکسل: صفحه اصلی استاندارد iOS (iPod Touch، نسل اول آیفون تا 3G)
72 پیکسل: نماد صفحه اصلی iPad
96 پیکسل: فاوآیکون مورد استفاده پلتفرم Google TV
114 پیکسل: نماد صفحه اصلی iPhone 4+ (دو برابر اندازه استاندارد برای صفحه نمایش شبکیه چشم)
