نوشته های مانایید

15 تکنیک‌ طراحی خلاقانه سایت

مانایید — Sun, 25 Aug 2024 19:48:44 +0330

وقتی صحبت از طراحی خلاقانه سایت میشه ناخداگاه فکر آدم به سمت طرح های عجیب و غریبی میره که در حد پروتوتایپ در پورتفلوی طراحان دریبل، بیهنس یا پینترست باقی میونه و هیچ وقت اجرایی نمیشه! یا افکت های فضایی و عجبیبی که در فیلم های هالیوودی میبینیم! اما خلاقیت می‌تونه خیلی ساده تر از این چیز ها باشه به سادگی استفاده از یک ترکیب رنگ جدید و البته متفاوت در طراحی! در این مقاله ابتدا با مفهوم خلاقیت و طراحی خلاقانه آشنا می‌شیم و پس از اون با مثال های عینی چند راهکار کاربردی برای طراحی خلاقانه سایت رو بررسی می کنیم.خلاقیت چیست ؟اگر همین سوال رو گوگل کنید متوجه می‌شید که به تعداد آدم های روی کره زمین پاسخ برای این سوال وجود داره! اما طبق گفته ویکی‌پدیا خلاقیت یا آفرینندگی توان ساختن یا خلق نمودن چیزی نو است، راهکاری نو برای حل یک مشکل، یک روش یا یک دستگاه نو، یا یک شیء یا فرم نو هنری.بسیار از طراحان سایت منظور از خلاقیت در طراحی سایت را معادل اولین قسمت جمله فوق قلمداد می‌کنند در حالی که وقتی در طراحی صحبت از خلاقیت می‌شه منظور گزاره دوم یعنی ” راهکاری نو برای حل یک مشکل” است.تکنیک‌های طراحی خلاقانه سایت خلاقیت محتوایی در طراحی سایتخلاقیت محتوایی یعنی ارایه یک محتوا به شکلی متفاوت و جذابتر برای مخاطب که می‌توان به اشکال گوناگونی مانند خلاقیت در موضوع، لحن گفتگو، شیوه روایت، روش ارایه محتوا(درگیر کردن کاربر) و …. اون رو اجرا کرد؛خلاقیت در موضوع:دیگه همه می‌دونیم که باید در انتخاب عناوین واژه های مثل “چرا”، “چگونه”، “چطور” یا اعداد و پسوند های “تر” و “ترین” رو استفاده کنیم. اما وقتی قرار است کمی خلاق تر باشیم قضیه کمی سخت تر میشه. چند راهکار برای کاربرد خلاقیت در انتخاب یک موضوع وجود داره؛استفاده از تکه کلام های ترند شده:امروزه به لطف شبکه های اجتماعی مختلف یک جمله یا یک تکه کلام ممکن است تا مدت‌ها بر سر زبان ها باشد. استفاده از این میم‌های کلامی در موضوع محتوا یکی از اشکال خلاقیت محتوایی است.شروع داستانی:انسان‌ها ذاتا علاقه مند به داستان سرایی و داستان شنیدن هستن شروع کردن محتوا با یک داستان کوتاه علاوه بر آماده ساختن ذهن مخاطب اون رو درگیر محتوا می‌کنه و باعث میشه کاربر با اشتیاق بیشتری محتوا رو دنبال کنه. حتی برای جذابتر شده محتوا می‌تونید بخش روایی داستان رو قبل از محتوای اصلی قرار بدید و پایان بندی داستان رو در پایان محتوا.با یک پرسش شروع کنید:شروع کردن یک محتوا با یک پرسش یا چالش مخاطب را روی محتوا قفل می‌کنه. انسان ها عاشق حل کردن معما و چالش ها هستند . اگر شما با یک پرسش مطلب خود را شروع کنید، تقریبا می توانید مطمئن باشید که مخاطب تا انتها، مطلب شما رو دنبال می‌کنه به شرطی که پاسخ و یا راه حل رو در انتهای محتوا قرار بدید.لحن عامیانه:گاهی اگر همونطور که صحبت می‌کنید، بنویسید، حس صمیمیت و همدلی رو در مخاطب بیشتر می‌کنه و شانس این که مطلب شما رو تا انتها دنبال کنه بیشتر میشه ( مثل همین مقاله).ارایه آمار و اعداد به شکلی متفاوت:اعداد و ارقام همیشه برای آدم‌ها کسل کننده و گاهی ترسناک است (البته به جز قشر خاصی از انسان ها!) برای ارایه ارقام و اعداد می‌تونید از مقیاس های جذاب و البته آشنا استفاده کنید تا علاوه بر ایجاد جذابیت، این اعداد و ارقام رو برای مخاطب قابل درک تر بکنید. این جمله رو رو ببینید : در اروپا هر انسان به طور متوسط سه تن زباله در ماه تولید می‌کند” و با این جمله مقایسه کنید: ” در اروپا هر آدم به طور متوسط معادل وزن دو ماشین سمند در ماه زباله تولید می‌کند” (واقعا؟)محتوای ترکیبی استفاده کنید:برای محتوا و مقالات خود فقط از متن استفاده نکنید. از تصاویر متحرک(gif)، نمودار های جذاب و میم ها تصویری در بین محتوای خود استفاده کنید.محتوای خشک و زبر تولید نکنید:حتی اگر برای یک شرکت رسمی و بزرگ یا کسب و کار حرفه ای تولید محتوا می‌کنید صرفا ادبیاتی ننویسید و از تکه شوخی های ریز و جملات محاوره ای کوتاه غافل نشید. گاهی لازمه برای شکستن فضا و درگر نگه داشتن مخاطب با محتوا کمی از شکل رسمی و ادبیات دور شد.خلاقیت بصری در طراحی سایتوقتی از طراحی سایت خلاقانه صحبت می‌کنیم معموملا جنبه های بصری سایت بیشتر در نظر تداعی میشه، تصاویر خلاقانه که با انیمیشن های جذاب یک یکی وارد صحنه می‌شن افکت‌های انیمیشنی، تصاویر سه بعدی و یا تصاویر تعاملی همه و همه بخشی از خلاقیت بصری هستند. خلاقیت بصری مثل یک چاقوی تیزه همون اندازه که مفید و کار راه اندازه می‌تونه مشکل ساز هم باشه. اگر قراره از انیمشین استفاده کنیم باید به مدت زمانش هم دقت کنیم. به هر حال مخاطب برای تماشای انیمیشن به سایت ما نیومده! یا اگر قراره از فونت خاصی استفاده کنیم باید به خوانایی آن هم توجه کنیم و …در ادامه با چند راهکار برای خلاق تر کردن ظاهر سایت رو بررسی می‌کنیم؛استفاده از تصاویر تعاملی:معمولا از کد‌های svg در ایجاد تصاویر تعاملی استفاده میشه. منظور از تصاویر تعاملی، تصاویری هستند که نسبت به کنش ها کاربر با سایت واکنش‌های خاصی نشان می‌دهند. برای درک بهتر صفحه نخست سایت مانایید رو نظاره کنید. معمولا برای ایجاد تصاویر تعاملی از فایل‌های ویدیویی یا کد ها svg با کمک جاوا اسکریپت استفاده می‌کنند.اول پرده ها را کنار بزنید:ما وقتی بچه بودیم و می‌رفتیم سینما یکی از قسمت های جذاب و مسحور کننده وقتی بود که اون پرد‌ه‌های بلند کنار می رفت. همیشه جای سوال بود برام که چه کسی این پرده ها رو کنار میزنه. خوبه که در سایت هایی که طراحی می‌کنیم از همین تکنیک استفاده کنیم. استفاده از انیمیشن های پیش بارگذاری (preload) و ظاهر شدن المانها با انیمیشن، دو تا راهکار عالی برای کنار زدن پرده هاست. (دقت کردید که تو این بخش یکی از تکنیک های خلاقیت محتوایی رو استفاده کردیم؟ )تصاویر و آیکونهای منحصر به فرد:سعی کنید در سایت‌هایی که طراحی می‌کنید از تصاویر اختصاصی استفاده کنید نه تصاویر آماده یا در حد امکان تصاویری با تم رنگی مشابه ایجاد کنید. این کار علاوه بر افزایش اعتبار، سایت شما رو متمایز و منحصر به فرد می‌کنه در مورد آیکون ها و سایر المان های وکتور هم همینطور. از آیکونها با رنگ بندی متناسب با تم کلی سایت و استایل یکسان استفاده کنید. اگر هم از آیکون‌های آماده استفاده می‌کنید، سعی کنید آیکون‌های هم خانواده یا استایل مشابه داشته باشند.فیلتر، برش، ماسک، بوووم!:اگر با نرم افزارهای گرافیکی آشنا باشید با قدرت فیلترها هم آشنایید. اگر هم آشنا نیستید حتما در اینستاگرام با فیلتر تصاویر آشنا شدید. به کمک Css3 علاوه بر ایجاد فیلتر روی تصاویر می‌تونید اونها رو به اشکال مختلف برش بزنید (با استفاده از قابلیت ماسک) با ترکیب ویژگی هایی مانند فیلتر تصاویر و ماسک می‌تونید تصاویر رو از شکل معمول چهار گوش خارج کنید و وب‌سایت‌هایی با ظاهری متفاوت تر و جذاب تر طراحی کنید و به قول دوستان حسابی بترکونید!فضای سفید عنصر پنجم طراحی:در کنار رنگ، تصاویر، متن و فرم ، یکی از اجزای طراحی که معمولا جدی گرفته نمیشه فضای سفیده. فضای سفید علاوه بر نظم بخشید به طراحی، به عنوان ابزاری برای دسته بندی و همچنین زیبا سازی طرح نیز کاربرد داره اما نباید در کاربرد آن زیاده روی کرد چون عملا کاربردش رو از دست میده. استفاده به اندازه و حساب شده از فضای سفید باعث می‌شه طراحی شما برای مخاطب جذاب تر و قابل فهم تر باشه. البته منظور از فضا سفید الزاما فضایی با رنگ سفید نیست بلکه منظور یک فاصله فضایی بدون هیچگونه المان طراحی است.خلاقیت طراحی در طراحی سایت !احتمالا الان شما هم مثل خودم یکم گیج شدید و با خودتون بگید عجب طراحی تو طراحی شد. پس اجازه بدید قبل از پرداختن به خلاقیت در طراحی سایت، با مفهوم و فرآیند طراحی بیشتر آشنا بشیم. طراحی به مجموعه‌ای از فرآیندها در جهت ایجاد یک روش یا بازنگری در روش‌های موجود و خلق روشی نوین برای حل یک مشکل، گفته می‌شود. بنابراین به زبان خیلی ساده طراحی یعنی پیدا کردن یک راه‌حل نو یا بهتر برای حل یک مشکل است. برای درک بهتر پیشنهاد می‌کنم مقاله تفکر طراحی رو مطالعه کنید.بنابراین اگر بخواهیم از طراحی استفاده کنیم ابتدا باید مشکل را مشخص کنیم و سپس راه حلی برای آن پیدا کنیم یا راه حلی تازه و بهتر برای رفع آن پیدا کنیم.تا اینجا متوجه شدیم طراحی یعنی چی. اما چطور به صورت خلاقانه از آن در طراحی وب سایت یا هر رابط کاربری دیگه استفاده کنیم. برای طراحی خلاقانه سایت به کمک طراحی ابتدا باید مشکلات طراحی را شناسایی کنیم و سپس راه حلی برای رفع هر کدام بیابیم.این مشکلات شامل محتوا، ظاهر بصری، چگونگی کارکرد و چیدمان اجزای سایت میشه در واقع خلاقیت در طراحی یعنی یافتن چهارچوبی متفاوت تر برای چیدمان اجزا در کنار هم و قرار دادن آن در فضای در دسترس به طوری که علاوه بر حفظ زیبایی و انسجام طرح، کاربردی هم باشه در ادامه سعی می‌کنیم چند نمونه از این نوع خلاقیت را بررسی کنیم.صفحه کلید موبایل بلای جان طراح و کاربر:احتمالا شما هم برای یک بار شده به یک صفحه لاگین برخورد کردید که قسمتی که باید نام کاربری یا رمز ورود رو وارد کنید، پشت صفحه کلید پنهان میشه. (یکی از اعصاب رنده کننده ترین اتفاقات). شما می‌تونید با جایگذاری مناسب ورودی ها این مشکل رو حل کنه. همچنین میتونید با تنظیم کردن درست ویژگی type در ورودی ها نوع مناسب صفحه کلید را برای کاربر تنظیم کنید.خطاهایم رو به رویم بیار!چند وقت پیش در یک سامانه اینترنتی قصد ثبت نام داشتم اما هر بار ورودی های مورد نیاز رو تکمیل می‌کردم و دگمه ثبت نام رو می‌زدم عملا هیچ اتفاقی نمی افتاد. در یکی از آخرین تلاشها در حالی که آماده انفجار بودم متوجه شدم طراح سایت، بنده خدا با کاربر رودر بایستی داشته و یک خطاب کوچولو رو پایین صفحه و فقط برای چند ثانیه نمایش میداده. اکلیلی شدم و کیبورد رو…مشکل این بود که یکی از قوانین مربوط به انتخاب رمز ورود رو رعایت نکرده بودم اما محل قرار گرفتن پیام خطا واقعا دور از دید بود. به عنوان طراحی باید به کار بفهمانید کجا اشتباه کرده و این کار را می‌توانید با ایجاد پیام های شفاف و صریح یا المانهابی بصری مانند تغییر رنگ قسمتی که خطا اتفاق افتاده مشخص کنید. اینجا جاییه که دقیقا باید خطای کاربر رو به رویش بیارید.بپر‌بپر غدقن!حتما شما هم به سایت‌هایی برخوردید که عکس‌های اونها به دلیل حجم زیاد یا قابلیت Lazy loading دیرتر از بقیه‌ی محتوا باگذاری و نمایش داده می‌شن و باعث میشه که محتواهای بعد از اون مدام دچار پرش بشه ( این کار اعصاب کابر رو واقعا ریز ریز میکنه) و کاربر برای خوندن محتوا دچار مشکل میشه. یک راه حل برای بر طرف کردن این مشکل بارگذاری پیش ساختار( خودم ترجمه کردم) یا همون Skelton است. این ویژگی علاوه بر اینکه مشکل پرش سایر المانها موقع لود شدن یک المنت رو حل می‌کنه نقش یک لودینگ رو هم بازی می‌کنه.جمع بندیخلاقیت هیچ حد و مرزی نداره اما باید در به کاربردن اون به ویژه در طراحی سایت دقت کرد و حد اعتدال رو رعایت کرد. امیدوارم این مقاله بتونه ایده ای به شما بده تا بتونید موتور خلاقیتتون رو به کار بیاندازید. اگر شما هم در تجاربتون موردی از کاربرد خلاقیت داشتید. می‌تونید از طریق کامنتها با ما به اشتراک بگذارید.

تاثیر UI و UX در سئو – آنچه که به عنوان یک طراح سایت باید بدانید

مانایید — Fri, 05 Apr 2024 12:50:15 +0330

واژه سئو امروز فراتر از کلمات کلید مناسب، بک لینک و لینک سازی است. امروزه گوگل به عنوان سرآمد موتورهای جستجو بر روی علایق و تجربیات کاربران در وب سایت‌ها متمرکز شده و بیشتر بر روی کیفیت و کمیت تعامل کاربر با وب سایت‌ها توجه دارد. به همین دلیل امروزه طراحی UI و UX نیز بخشی قابل توجه و تاثیر گذار در بهینه سازی رتبه یک وب سایت یا همان سئو دارد. شاید برای خیلی از شما طراحان این سوال پیش بیاید که آیا UX در سئو تاثیردارد؟ در این مقاله به این سوالا پاسخ می دهیم و تاثیر UI و UX در سئو را بررسی می‌کنیم.طراحی UI و UX چیست؟ (این بخش برای افرادی است که تازه با دنیای طراحی وب سایت آشنا شده اند)تاثیر UI و UX در سئوقبل از اینکه به اثر طراحی UI و UX بر سئو بپردازیم بهتر است با واژه‌های UX و UI کمی آشنا شویم.به نحوه‌ی تعامل کاربر با وب سایت و احساس و تجربه ای که از این تعامل به وجود می‌آید ، UX یا تجربه کاربری می گویند. معمولا وقتی می‌گوییم یک سایت UX خوبی دارد منظور این است که کاربر به راحتی می تواند آنچه که به دنبالش بوده را پیدا کند و یا کاری را که باید، با کمترین میزان پیجیدگی انجام دهد. از نقطه نظر فنی، UX شامل عناصر مختلفی مانند ناوبری سایت، عملکرد منو‌ها، محتوا و میزان تعامل دو طرفه کاربر و سایت است. از سوی دیگر، UI یا رابط کاربری، به ظاهر بصری رابط وب سایت اشاره دارد. این رابط شامل دکمه ها، متون، تصاویر، فیلدها، انیمیشن ها و هر چیز دیگری است که کاربر آنها را در سایت می بیند و با آنها تعامل دارد (به طور کلی به هر محصول بصری که به وسیله آن انسان می تواند یک ماشین را کنترل کند UI گفته می شود). هرچند طراحی UX و طراحی UI ارتباط نزدیکی دارند و هدف آنها ایجاد تجربه خوب برای مخاطبان سایت است، اما در عمل متفاوت از هم عمل می‌کنند. طراحی UX بیشتر بر جنبه های روانشناختی مخاطبان تمرکز دارد در حالی که طراحی UI بر روی جنبه های زیبا شناختی متمرکز است. به طور کلی، تفاوت های بین UI و UX را می توان به صورت زیر خلاصه کرد:هدف از طراحی UI زیبایی وب سایت است، در حالی که در طراحی UX به دنبال کاربردی تر کردن وب سایت هستیم.طراحی UI از طریق تصاویر بصری احساسات را برمی‌انگیزد، در حالی که طراحی UX با ساده تر کردن اقدامات لازم برای رسیدن به هدف.طراحی UI فقط با طراحی رابط کاربری وب سایت یا اپلیکیشن سروکار دارد، در حالی که دامنه کاربرد UX فراتر از آن بوده و معمولا شامل برندینگ، محصولات و غیره… می‌شود.با این حال، UI و UX جزء لاینفک یک وب سایت جذاب و کاربردی هستند. یک وب سایت با ناوبری گیج کننده (UX ضعیف) حتی اگر زیباترین طراحی (UI عالی) را داشته باشد نمی‌تواند کاربر را نگه دارد. از سوی دیگر یک وب سایت با کاربری بالا (UX عالی)، با طراحی بصری ضعیف (UI ضعیف) توی ذوق می زند و ممکن است کاربر همان لحظه اول مواجه شدن با چنین سایتی از آن خارج شود. از این رو طراحی UX و UI مانند دو بال پرواز یک وب سایت به سوی کسب رتبه های بالا در نتایج جستجو ( SERP ) هستند!آیا UX در سئو تاثیردارد؟آیا UX در سئو تاثیردارد؟ طراحی UX و UI مکمل یکدیگر هستند و بهینه سازی و توجه به هر دو برای موفقیت یک وب سایت در کسب موقعیت خوب در نتایج جستجو مهم و حیاتی است. UX و UI خوب باعث می شود؛بازدیدکننده زمان بیشتری در سایت بگذراند این مورد به ربات‌های خزنده می‌فهماند که این سایت ممکن است مشکل کاربر را برطرف کرده باشد. پس شایسته رتبه‌ی بالاتر است.افزایش تعداد کاربران بازگشتی که درنهایت منجر به افزایش نرخ تبدیل و فروش بالاتر می‌شود.زمان صرف شده برای رسیدن به نقطه سود دهی یک محصول به طور کلی بین 50-33٪ کاهش یابد.سوای تمام موارد بالا طراحی UX و UI جزء ضروری برندسازی دیجیتال است و می تواند اعتبار کسب و کار و حتی وفاداری مشتریان را افزایش دهد. مطالعان موردی در وب سایت toptal که با عنوان مطالعات موردی در باب نرخ بازگشت در باز طراحی UX منتشر شده نشان می‌دهد باز طراحی وب سایت‌های ارایه دهنده خدمات، می‌تواند نتایج مستقیمی بر روی افزایش نرخ تبدیل و وفاداری مشتریان داشته باشد. یکی از نمونهه‌های جالب توجه، شرکت ویرجین آمریکاست که پس از طراحی مجدد وب سایت خود شاهد افزایش 14درصدی نرخ تبدیل بود و سرعت رزرو بلیط ها تقریبا دو برابر شد. از طرفی بخش خدمات تلفنی کاهش 20 درصدی تماس ها را گزارش نمود. بررسی این مطالعات موردی اهمیت طراحی UX و UI را مشخص می کند.طراحی UX خوب همچنین نقش مهمی در مقابله با نرخ رها شدگی سبد خرید (شرایطی که کاربر اقلام مورد نیاز خود را به سبد خرید اضافه می‌کند اما به دلایل مختلف از تکمیل خرید سر باز می‌زند) ایفا می‌کند. طبق تحقیقات موسسه بایمرد یرخی از دلایل اصلی عدم ادامه خرید کاربران در وب سایت‌های فروشگاهی عبارتند از:زیاد بودن هزینه‌های اضافی ( بسته بندی و ارسال) (48%)اجباری بودن ایجاد حساب حین نهایی کردن خرید (24%)زیاد بودن زمان تحویل (22%)عدم اعتماد به سایت جهت ارایه اطلاعات کارت خرید (18%)طولانی یا پیچیده بودن فرآیند خرید (17%)عدم شفافیت هزینه ها و توانایی کاربر در محاسبه مبلغ تمام شده کالای خریداری شده قبل از تکمیل خرید (16%)وجود باگ یا خطا و یا عدم کارکرد درست سایت (13%)رضایت بخش نبودن سیاست های بازگشت (مرجوع نمودن) کالا (12%)عدم وجود روش های پرداخت کافی (9%)خطاهای عملیاتی درگاه بانکی (4%)کمی که دقت کنیم متوجه می‌شویم تقریباً نیمی از این مسائل (ایجاد حساب کاربری اجباری!، فرآیند پرداخت پیچیده، عدم اعتماد به اشتراک گذاری اطلاعات کارت اعتباری، عدم شفافیت در ارایه هزینه تمام شده، خطاهای وب سایت) با بهبود تجربه کاربری، قابل حل است. به گفته کارشناسان این حوزه ، طراحی مجدد تجربه کاربری در صفحات پرداخت می تواند تا 35 درصد نرخ تبدیل (میزان فروش) را افزایش دهد. تا اینجا دیدیم که کیفیت UX در سئو تاثیر دارد بنابراین صرف زمان و سرمایه برای بهبود طراحی UI و UX را می‌توان نوعی سرمایه گذاری به حساب آورد نه هزینه.تاثیر UX یا تجربه کاربری بر سئو و راهکارهایی برای بهبود آنتاثیر UX یا تجربه کاربری بر سئو تا اینجا ما در باره خوبی های بهبود طراحی UX صحبت کردیم. اما سوال اساسی اینه که اثر طراحی UI و UX بر سئو چگونه است؟ آیا کیفیت طراحیUI یا UX بر روی SEO تاثیری داره؟ در یک جمله نه و بله، باید بدانیم که هنوز گوگل و هیچ یگ از موتورهای جستجو نتوانسته اند الگوریتمی پیاده سازی کنند تا میزان کیفیت UI یا UX سایت را اندازه گیری کنند. حتی معیاری هم برای این کار تا این زمان وجود ندارد. پس UI و UX نمی‌توانند معیارهایی باشند برای افزایش سئو در واقع تاثیر آنها بر مخاطب و ربات های جتسجوگر است که می تواند نقش تعیین کننده بر رتبه سئو داشته باشد. امروزه موتورهای جستجو، به ویژه گوگل، به تجربه کاربری بیشتر اهمیت می‌دهند و تلاش می‌کنند با راهکارهایی توجه به تجربه کاربران خود را در اولویت قرار دهند، در نتیجه وب سایت هایی که UX بهتری ارائه می دهند یا بهتر بگوییم اصول UX را بیشتر رعایت می‌کنند ، احتمالاً در نتایج جستجو رتبه بالاتری دارند.هنگامی که یک کاربر یک سایت را به دلیل UX ضعیف به سرعت ترک می کند، موتورهای جستجو این را به عنوان نشانه ای از عدم رضایت بخش بودن محتوا یا تجربه ارائه شده تفسیر می کنند. برعکس، صرف زمان بیشتر در یک وب سایت، کاوش در چندین صفحه و درگیر شدن با عناصر آن، یک تجربه کاربری مثبت را نشان می دهد، که می تواند رتبه بندی جستجو را تا حد زیادی افزایش دهد.اقداماتی مانند طراحی واکنشگرا ، فشرده سازی تصاویر ، کش کردن حافظه، کوچک سازی فایل‌های مورد نیاز، منوی ناوبر و راهنما (breadcrumbs) لینک‌های اشتراک گذاری در شبکه‌های اجتماعی، قالب بندی متن‌ها و غیره … می‌تواند به بهبود UX سایت کمک کند و میزان کاربر پسندی و در نتیجه جایگاه سایت شما در نتایج جستجو را به میزان قابل توجهی نسبت به سایر رقبا افزایش دهد.با SXO بیشتر آشنا شویم ؟ ارتباط سئو و UX چیز تازهای نیست و همواره با هم در ارتباط بوده‌اند .حاصل این پیوند مفهومی است به نام SXO ( search experience optimization) یا بهینه‌سازی تجربه‌ی جستجو. SXO اصول UX و SEO را به منظور دستیابی به رتبه بندی بالاتر و افزایش تعامل کاربر با هم ادغام میکند و هدف آن ایجاد وب سایت‌هایی است که هم برای موتورهای جستجو جذابیت داشته باشد و هم برای کاربران! در واقع SXO عبارت است دستیابی به رتبه های بالا تر در نتایج جستجو و افزایش ترافیک ارگانیک سایت به وسیله خلق یک سفر دلپذیر برای کاربر از زمانی که صفحه نتایج موتور جستجو را ترک می‌کند تا زمانی که با وب سایت تعامل برقرار کرده و دستیابی به هدفی که داشته است .SXO مفهومترفند هایی برای بهبود SXO محتوای مناسب برای کلمات کلیدی: تحقیقات کاملی برای کلمات کلیدی انجام دهید و رفتار کاربر را تجزیه و تحلیل کنید تا متوجه شوید کاربرانتان به دنبال چه هستند و محتوایی ایجاد کنید که دقیقا نیازهای آنها را برطرف کند. ابزار گوگل سرچ کنسول در این زمینه بسیار کمک کننده است.تولید محتوای با کیفیت: محتوای با کیفیت محتوایی بکر است که از پایگاه‌های دانش شخصی یا عمومی استخراج شده باشد. محتوای های آموزشی، مرتبط و جذابی تولید کنید که کاربران را جذب کند و به موتورهای جستجو نشان دهد که وب سایت شما به مخاطبانش محتوای با ارزش ارائه می‌دهد.بهینه سازی فنی: SXO به تسلط کاملی از بهینه سازی فنی نیاز دارد. بهبود عملکرد وب سایت (به لحاظ سرعت بارگذاری، پاسخگویی سریع به تعاملات کاربر و غیره…)، اطمینان از فهرست شدن صفحات در موتورهای جستجو، بررسی و عیب زدایی وب سایت به طور پیوسته، همگی به روان‌تر شدن تجربه جستجوی کاربر و بهبود رتبه بندی کمک می کنند.طراحی UI و UX خوب: تمرکز بر طراحی یک وب سایت با رعایت اصول و قوانین طراحی UX ، ساختار قابل درک برای مخاطب به کمک سیستم ناوبری بصری، متون خوانا و مرتب شده و سایر ویژگی های کاربر پسند برای بهبود تجربه کلی کاربر. با تمرکز بر این جنبه‌های SXO، می‌توانید سایتی طراحی کنید که علاوه بر رفع نیازهای کاربر و الزامات موتورهای جستجو، اهداف تجاری شما را نیز فراهم نماید.راهکارهایی بهبود سئو از طریق طراحی UX یا تجربه کاربریآنچه که مشخص است الگو های جدید گوگل تمرکز زیادی بر تجربه کاربران در تعامل با وب سایت ها دارند و تمام تلاش گوگل این است که وب سایت‌هایی با تجربه کاربری بهتر جایگاه‌های بالاتر را از آن خود کنند. از این رو چگونگی رابطه بین UX و SEO جایگاه شما در نتایج جستجو را مشخص می‌کند. در ادامه چند راهکار برای طراحی بهتر UX آوردیم که تاثیر خوبی در بهبود سئوی سایت خواهند داشت.معماری و ناوبری سایت چگونگی سازماندهی و پیوند صفحات با یکدیگر معماری وب سایت شما را تشکیل می‌دهد. از نظر سئو، داشتن یک معماری روان و خوب تضمین می‌کند که ربات‌های موتورهای جستجو به راحتی به صفحات سایت شما دسترسی دارند و می‌توانند آنها را ایندکس کنند. از نقطه نظر UI و UX، معماری خوب به کاربران کمک می کند تا به سرعت و بدون هزینه تعاملی بالا صفحات مورد نظر خود را پیدا کنند. طبق یک نظرسنجی سال 2021 وب سایت Clutch ، حدود 94 درصد شرکت کنندگان معماری وب سایت و ناوبری آسان را از مهمترین ویژگی های یک سایت خوب عنوان کردند. این بدان معناست که قطعاً باید زمان و تلاش خود را برای ساختن وب سایتی صرف کنید که به راحتی قابل پیمایش باشد در غیر این صورت، کاربران به سراغ سایت دیگری می روند که از قبل این کار را کرده است!یکی از شاخص‌های قابل اندازه‌گیری برای بررسی معماری سایت شاخص عمق کلیک یا فاصله کلیک است و به تعداد کلیک های مورد نیاز برای هدایت کاربر از صفحه نخست به یک صفحه خاص اشاره دارد. ایده آل این است که هر صفحه باید کمتر از چهار کلیک با صفحه اصلی فاصله داشته باشد. از آنجایی که کاربران ترجیح می دهند با کمترین تعداد کلیک به آنچه می‌خواهند دسترسی داشته باشند. به عنوان یک طراح UX باید به این نکته توجه داشته باشیم.اقدامات پیشنهادی برای بهبود معماری و سیستم ناوبری سایت :ایجاد یه ساختار شفاف و روان برای منوهای ناوبری به لحاظ جایگاه قرار گیری، شکل و ظاهر و متن.گروه بندی صفحات در دسته‌بندی‌های مشخص و ساختارمند به عنوان مثال دسته بندی بر اساس موضوعات ( مثلا، محل مصرف محصول) و یا ویژگی‌های خاص (مثلا رنگ محصول).ایجاد یک منوی ساده با عنوان هایی مختصر، گویا و قابل درک برای عموم (تسلط به UX Writing خیلی کمک کننده است).ایجاد یک ساختار پیوند به خوبی بهینه شده برای توزیع متعادل پیوند ها. ساختار مناسب لینک دهی درونی سایت جهت ایجاد تعادل در توزیع میزان اعتبار یا ارزش منتقل شده (Link juice).چیدمان و تعادلپر واضح است که طراحی یک چیدمان خوب در سایت در میزان جذب کاربران و ایجاد تجربه مثبت در تعامل آنها با سایت تاثیر زیادی داشته و نقش مهمی در ارتقاء مؤثر سئو دارد. منظور از چیدمان خوب استفاده از تگ گذاری مناسب و به جا برای اینکه ربات‌های جستجو بتوانند ساختار یک صفحه را درک کنند و جانمایی کلیه المانها به صورتی که کاربر بتواند به راحتی اطلاعات مورد نیازش را بیابد و یا اقدام مورد نظر را به راحتی انجام دهد. برخی طراحان سایت به دلیل عدم آگاهی کافی به اصول سئو گاهی دچار اشتباهاتی می شوند.به عنوان مثال سه مورد که طبق گزارشات SERanking بیشترین اشتباهات رخ داده توسط طراحان عنوان شده عبارتند از؛1- استفاده از چند تگ H1 در یک صفحه: هر چند شما در استفاده از تگ H1 آزاد هستید اما توصیه شده که در هر صفحه فقط یک تگ H1 داشته باشید و حتما برای نشان دادن عنوان اصلی صفحه باشد.2- عدم رعایت سلسله مراتب در تیتر بندی: رعایت سلسله مراتب در عنوان بندی تیترها (تصویر زیر) . هرگز یک تگ H1 را زیر یک تگ H2 قرار ندهید.3- عدم استفاده از ویژگی alt در تصاویر: عدم استفاده از ویژگی alt در عناصر گرافیکی و یا عدم مقدار دهی صحیح آن متناسب با برند و موضوع کلی سایت اشتباه دیگری است که معمولا طراحان مرتکب می شوند.سرعت بارگذاری و گزاره Core Web Vitals تا چند سال پیش سرعت تنها به زمان بارگذاری سایت خلاصه می شد. اما از سال 2020 به بعد سرعت بارگذاری، تجربه کاربر و سئو به هم گره خوردند و گوگل معیار(های) جدیدی را برای اندازه گیری سرعت یک صفحه در نظر گرفت. Core Web Vitals یا به اختصار (CWV ) مجموعه ای از معیارهاست که گوگل از آنها برای بررسی سرعت بارگذاری و در نهایت امتیاز دادن به سایت شما استفاده می کند. بنابراین برای بهینه سازی سرعت بارگذاری باید با این معیارها آشنا باشیم.الف) FCP یا First Contentful Paint : مدت زمانی که طول می‌کشد تا اولین محتوا به کاربر نشان داده شود.ب) Speed Index یا به اختصار SI : اسپید ایندکس کمی تعریف پیچیده تری دارد. بیشتر مواقع یک صفحه سایت معمولا ارتفاعی بیشتر از صفحه نمایش دارد . به قسمتی از سایت که در نگاه اول و بدون اسکرول در معرض دید کاربر قرار می‌گیرد Above the fold گفته می شود. اسپید ایندکس به مدت زمانی که اولین عنصر سایت در صفحه بارگذاری می‌شود تا زمانی که دیگر تغییری در Above the fold رخ ندهد، اشاره دارد. SI معمولا به صورت انتگرال محاسبه می‌شود. مثلا ممکن است 50 درصد محتوا در 30 ثانیه و 50 درصد باقی‌مانده در 1 دقیقه و 30 ثانیه بارگذاری شود. اما در نهایت گوگل به ما یک عدد می‌دهد.ج) Largest Contentful Paint یاLCP : مدت زمانی که بزرگترین المان صفحه بارگذاری شده و در معرض دید کاربر قرار می‌گیرد برای مثال در صفحه مربوط به یک مقاله ممکن است بزرگترین المان تصویر مربوط به مقاله و یا عنوان اصلی آن باشد.د) Cumulative Layout Shift یا به اختصار ( CLS ): به معنی پرش‌های ناگهانی المان‌ها در یک صفحه است. احتملا برای شما هم پیش آمده که هنگام اسکرول کردن برخی تصاویر به صورت lazy روی صفحه بارگزاری می شوند . این کار باعث می شود عناصر بعد از آنها با یک جهش مواجه شوند که بر روی CLS اثر مستقیم می‌گذارد.ه) Time TO Interactive یا TTI : پارامتر بعدی که گوگل آن را اندازه گیری و در رتبه شما تاثیر می دهد TTI یا Time TO Interactive است و مدت زمانی است که کاربر بتواند با صفحه تعامل داشته باشد. در واقع این پارمتر فاصله زمانی بین کلیک کردن یک کاربر تا زمانی آماده شدن پاسخ سایت می‌باشد.و) TBT یا Total Blocking Time: مربوط به بارگزاری قطعه کد‌های یک صفحه است؛ هر صفحه HTML شامل سه بخش Head، Body و Footer می‌باشد که به همین ترتیب بارگذاری می شوند بنابراین اکر در بلاک Head کدهایی مثل اسکیما، جاوا اسکریپت و یا فونت‌ها وجود داشته باشد. تا زمانی که این کدها بارگذاری نشوند کد‌های بلاک body بارگذاری نخواهند شد این موضوع روی TBT تاثیر منفی خواهد داشت.شاید یک کاربر نتواند تمام این پارامترها را اندازه گیری کند اما از هنگامی که بر روی لینک سایت شما در صفحه نتایج جستجو کلیک می‌کند تا زمانی که اولین المان در صفحه شما ظاهر شود را می تواند به عنوان سرعت بارگذاری درک کند طبق تحقیقات صورت گرفته در حالت ایده آل، زمان بارگذاری صفحه نباید بیش از 2.5 ثانیه باشد. اگر بارگذاری یک صفحه به طور کامل بیش از این مدت طول بکشد احتمال اینکه کاربر به صفحه نتایج جستجو برگردد بسیار زیاد است این مشکل می‌تواند بر روی نرخ تبدیل شما نیز اثر بدی داشته باشد. برای بررسی عملکرد بارگذاری وب سایت خود می توانید از ابزارهای موجود در web.dev و یا بخش Core Web Vitals در گوگل سرچ کنسول استفاده کنید.طبق تحقیقات صورت گرفته در حالت ایده آل، زمان بارگذاری صفحه نباید بیش از 2.5 ثانیه باشد. اگر بارگزاری یک صفحه به طور کامل بیش از این مدت طول بکشد احتمال اینکه کاربر به صفحه نتایج جستجو برگردد بسیار زیاد است این مشکل می تواند بر روی نرخ تبدیل شما نیز اثر بدی داشته باشد.طراحی موبایل محور (Mobile-first) و ریسپانسیو امروزه بیش از نیمی از حجم وب گردی در سطح جهانی توسط موبایل‌ها انجام می‌شود. گوگل هم امتیازات ویژه‌ای برای وب سایت‌هایی که ریسپانسیو بوده و تجربه مثبتی برای کاربران موبایل ایجاد می‌کنند در نظر گرفته. در واقع گوگل با پیاده سازی الگوریتمی با نام Mobile First Index ( که بر اساس آن صفحاتی که از حالت موبایل پپشتیبانی می‌کنند و یا به عبارتی ریسپانسیو هستند در الویت بالاتری نسب به صفحات فاقد این ویژگی قرار می‌گیرند. ) به دنبال این بود که ویژگی ریسپانسیو بودن صفحات وب را از یک ویژگی رقابتی به یکی از ارکان اصلی طراحی سایت و UX تبدیل کند. تمام این موارد منجر به ابداع سبکی در طراحی وب‌سایت شد به نام طراحی موبایل محور ( یا Mobile-first) . طراحی موبایل محور در واقع یک استراتژی در طراحی UI و UX است که به زبان ساده بیان می‌کند ابتدا صفحات را بر اساس اسکرین های کوچک – موبایل- طراحی نموده و سپس آن را برای صفحات بزرگتر توسعه دهید.با این حال هنوز هم طراحی های صورت گرفته برای موبایل جای کار داردو باعث می‌شود اثر طراحی UI و UX بر سئو آنچنان که باید چشمگیر نباشد. طبق مطالعاتی که توسط موسسه Baynard انجام گرفته رایج ترین مشکلات در طراحی موبایل محور عبارتند از؛82 درصد طرح‌های بررسی شده دارای المانهای تعاملی (مانند دگمه) بسیار نزدیک به هم هستند به گونه ای که باعث ایجاد مشکل در پیمایش صفحه و کلیک اشتباهی می شود.65 درصد از وب سایتهای بررسی شده فاقد طرح بندی مناسب برای حالت موبایل هنگامی که صفحه کلید فعال است می‌باشند.این مسئله منجر به بالا رفتن میزان خطاهای تایپی و تجربه های خسته کننده در کاربر می شود (یکی از روی مخ ترین مشکلات! وقتی که جایی که باید در آن تایپ کنیم پشت صفحه کلید پنهان می شود!).64 درصد صفحات بررسی شده نیز پیام های خطا را در جایگاه، یا استایل نامناسب نمایش می‌دهند و یا متن خطا بسیار کوتاه و نامفهوم بوده به صورتی که باعث سردرگمی کاربران می شود.خوشبخانه با ابزارهای آنلاین مانند lighthouse یا گوگل سرچ کنسول می‌توانید عملکرد صفحات یک وب سایت را در نمایه موبایل بررسی کنید.تاثیر UX بر بهینه‌سازی نرخ تبدیلبهینه‌سازی نرخ تبدیل یا Conversion rate optimization (به اختصار CRO) به مجموعه اقدامات و فرآیندهایی گفته می‌شود که منجر به افزایش تعداد مخاطبان به مشتریان و در نهایت افزایش میزان فروش می‌شود. باز‌طراحیUI و UX یکی از اصلی‌ترین و تاثیر گذارترین اقدامات برای بهبود این شاخص است.هنگامی که کاربران در کارکردن با وب سایت شما با مشکلی مواجه نشوند و به راحتی بتوانند با آن کار کنند و آنچه را که به دنبالش هستند به راحتی بیابند و یا کاری را که باید، بتوانند به راحتی انجام دهند. احتمال پاسخ دادن به عملیات فراخوان ( CTA) افزایش می‌باید . از سوی دیگر اشتباهات طراحی UI و UX مانند چیدمان نامناسب در صفحات موبایل، منوی‌های ناوبری نامناسب و سردرگم کننده، سرعت بارگذاری زیاد و غیره… به سرعت می تواند تعداد مخاطبان و مشتریان بالقوه شما را کاهش دهد.معیارهای سنجش میزان اثر طراحی UI و UX بر سئو :پس از اجرای طراحی یا باز طراحی UI و UX بر روی وب سایت، گام بعدی بررسی اثر بخشی اقدامات انجام شده است. در این مرحله می بایست عملکرد وب سایت را با استفاده از شاخص‌ها و معیار‌های طراحی تجربه کاربری سنجیده و تاثیر آن بر سئو را ارزیابی کنید. به طور کلی دو دسته معیار برای بررسی عملکرد UX سایت می توان در نظر گرفت؛1- معیارهای رفتاری UX که رفتارهای کاربر در تعامل با وب سایت را بررسی می‌کند.2- معیارهای فنی UX که رفتار موتورها و ربات های جستجو را در سایت بررسی می‌کند. معیارهای رفتاری UXزمان ماندن: Dwell time یا زمان ماندن به زمان صرف شده در یک صفحه از لحظه خروج از صفحه نتایج جستجو تا بازگشت به آن توسط کاربر، گفته می شود. این شاخص به طور مشخص توسط Google Analytics ارائه نمی‌شود، اما می‌توانید با مشاهده میانگین مدت نشست ها (session) ، یک ارزیابی کلی دریافت کنید. (البته این سنجه تنها شامل نشست هایی می شود که کاربر از طریق صفحات نتایج جستجو به سایت شما هدایت شده باشد).نرخ پرش: یا Bounce rate نشان دهنده درصد کاربرانی است که از وب سایت شما بازدید می کنند اما بدون بازکردن یا رفتن به صفحه دیگری از سایت خارج شده اند. یکی از شاخص های مهم که کیفیت محتوا ،ناوبری ( UX ) و حتی ظاهر ( UI ) وب سایت شما را نشان می دهد. می‌توانید نرخ پرش را با استفاده از Google Analytics پیگیری کنید. این قابلیت از لیست شاخص های پیس فرض در GA4 حذف شده اما شما می توانید به صورت دستی آن را اضافه کنید.میانگین زمان تعامل: یا Average engagement time نشانگر میانگین زمانی است که صفحه وب شما در کانون توجه مرورگر باقی می‌ماند (یعنی تبی که حاوی صفحه شماست، فعال است). این شاخص بینشی در مورد تجربه کاربر و سیر او در میان صفحات سایت شما ایجاد می کند که به طور مشخص زمان‌های تعامل طولانی‌تر نشان‌دهنده علاقه و مشارکت بیشتر کاربر است و نشان می‌دهد که وب‌سایت شما توجه‌اش را به خود جلب می‌کند. علاوه بر Google Analytics، ابزارهای ویژه دیگری مانند Hotjar یا Clarity هستند که به کمک آنها می‌توانید رفتار کاربر و چگونگی تعامل آنها با صفحات سایت تان را ارزیابی کنید. این ابزارها با ارائه ویژگی هایی مانند نقشه های حرارتی یا سایر ابزارهای بصری دیگر می‌توانند بینشی از رفتارکاربران در صفحات سایت شما ایجاد کنند.معیارهای UX فنیجنبه های حیاتی یا Core Web Vitals به اختصار (CWV) : معیار های عملکردی خاصی که توسط گوگل برای اندازه گیری جنبه های مهم و حیاتی UX طراحی شده اند. این معیار‌ها عبارتند از؛ سرعت بارگیری عناصر در معرض دید ( Largest Contentful Paint) ، میزان تعامل با صفحه ( First Input Delay ) و پایستگی بصری ( Cumulative Layout Shift ) که قبلا در مورد آنها صحبت کردیم. اینها معیاری برای صاحبان وب سایت فراهم می‌کند تا تجربه کاربران را ارزیابی و بهبود ببخشند. علاوه بر آن گوگل سال 2022 معیار دیگری با نام Interaction to Next Paint یا به اختصار INP را برای رفع محدودیت‌ها FID معرفی کرد که بیان گر سرعت پاسخگویی صفحه وب سایت به تعاملات کاربر خواهد بود. این معیار طبق اعلام گوگل در سال 2024 جایگزین FID خواهد شد اما FID همچنان به عنوان یکی از معیار ها تاثیر گذار خواهد بود. میزان قابل پذیرش به عنوان عملکرد ایده آل برای این معیار کمتر از 200 میلی ثانیه می باشد.توزیع لینک های داخلی یکی: دیگر از معیار های فنی UX است که در سئوی سایت تاثیر مستقیم می‌گذارد. توزیع لینک‌های داخلی به تعداد لینک‌های موجود در یک صفحه سایت که به صفحات دیگر همان سایت متصل هستند، اشاره می‌کند. تجربه نشان داده احتمال ایندکس شدن صفحاتی که لینک داخلی ندارند بسیار ضعیف است. عمق کلیک: این معیار به تعداد کلیک های مورد نیاز برای پیمایش از صفحه اصلی به یک صفحه یا محتوای خاص اشاره دارد. این پارامتر گامها یا مراحلی را که کاربران برای رسیدن به مقصد مورد نظر خود باید طی کند،اندازه گیری می کند. این معیار معمولاً نباید از چهار کلیک تجاوز کند، زیرا صفحات نزدیک به صفحه اصلی امتیاز بالاتری از فاصله کلیک در الگوریتم های موتورهای جستجو دریافت می کنند.منبع: وب سایت مانایید - مقاله تاثیر UI و UX در سئو – آنچه که به عنوان یک طراح سایت باید بدانید

روش های استفاده از تصاویر SVG

مانایید — Sun, 16 Apr 2023 21:26:56 +0330

چکیده:در پست قبلی در باره اینکه svg چیست و چرا باید از اون استفاده کنیم، صحبت کردیم. در این پست یاد میگیریم چطور از یک تصویر SVG استفاده کنیم .چندیدن روش برای استفاده از تصاویر SVG وجود داره؛روش Inlineاولین روش روش مستقیم و بی دردسرِ کد زیر مربوط به یک گل هست که تقدیم به شما میشه و نتیجه اش رو پایینش میبینید .اینکه این کدها چی هستن و ازچه چیزایی درست شدهرو در جلسات بعدی یاد میگیریم.مزیا و معایب: این روش برای وقتی که بخواهیم با تصویر تعاملی داشته باشیم (توسط CSS یا JavaScrip) مناسبه اگر میخواهید درکی از تعامل داشته باشید انتهای صفحه طراحی سایت رو ببینید، درخواست اضافه به سرور وجود نداره و مرورگر تصویر رو کش نمی کنه (مگر اینکه فایل html کش بشه) تنها عیبش هم اینه که کمی سوس کد رو چِرک میکنه. استفاده از تگ اگر کد بالا رو در یک فایل متنی کپی کنیم و با فرمت svg. ذخیره اش کنیم میتونی با استفاده از تگ اون رو وارد صفحه کنیم https://virgool.io/d/edhtq7ejedfp/%3Cimgsrc= اگر بادقت به تکه کد SVG در بالای نگاه کنیم دو ویژگی width و height را برای گلی که تقدیمتون کردیم! می بینید. زمانی که از تگ img برای نمایش این طرح استفاده کنیم دقیقا به اندازه مشخص شده در کد SVG نمایش داده می شود اما اگر بخواهیم، می توانیم با تعیین عرض و ارتفاع برای عنصر img (در HTML یا CSS) اندازه نهایی را تغییر دهیم.مزایا و معایب: استفاده از این روش مزیت خاصی نداره جز اینکه کد HTML تون تمیز تره اما دیگه نمیتونید با تصویر تعاملی داشته باشید(مثلا وقتی موس رفت روی اون، رنگش تغییر کنه) و انیمیشنها زمانی که داخل تگ

آموزش کار با تصاویر SVG قسمت صفر

مانایید — Wed, 12 Apr 2023 14:41:44 +0330

چکیده:کار با تصاویر همیشه برای طراحان وبسایت یک دغدغه و چالش برانگیز بوده و هست. فقط تصور کنید میخواهید برای کاور یک پست یک تصویر انتخاب یا طراحی کنید. در صفحه بلاگ تصویر باید به صورت تمام عرض و با نسبت 16:9 باشه و در قسمت آخرین مطالب در ساید بار باید با عرض 250PX و با نسبت 1:1 و یا در جایی دیگر ممکنه با عرض و نسبت دیگر نمایش داده بشه. اگر با وردپرس کار کرده باشید میدونید که وردپرس این مشکل را با برش زدن عکس و ذخیره کردن آن با ابعاد متفاوت حل کرده. اما اینجا مشکل دیگری به وجود می آید حجم فضای اشغال شده و تصاویر برش خورده. در نهایت آرزو میکنیم ای کاش تصاویر با کیفیتی داشتیم که میشد تا هر اندازه ای که بخواهیم اون رو بزرگ کنیم بدون اینکه نگران افت کیفیت، سرعت بارگزاری و غیره… باشیم. اینجاست که SVGمثل یک منجی ظهور میکنه! حالا این SVG چی هست ؟عبارت Scalable Vector Graphics است که می توان معادل “نگاره‌سازی برداری مقیاس‌پذیر” را در فارسی برای آن در نظر گرفت?!تمام گرافیکهای دنیای دیجیتال دونوعند RASTER و VECTORفرمت png بزرگنمایی 10 برابر ( حجم فایل حدود 46 کیلو بایت) فرمت svg بزرگنمایی 10 برابر ( حجم فایل حدود 1/3 کیلو بایت) برای ایجاد گرافیک های RASTERیا گرافیک شطرنجی از پیکسل ها استفاده میشه این تصاویر به صورت مجموعه‌ای از پیکسل‌ها ذخیره میشه ( رنگ هر پیکسل به طور جداگانه ذخیره میشه). تغییر اندازه این تصاویر کیفیت آنها را تحث تاثیر قرار می دهد. اکثر فرمت‌های رایج فایل‌های تصویری مانند jpg، gif، و png بر مبنای گرافیک شطرنجی هستند.اما گرافیک‌های Vector یا گرافیک برداری روشی در تولید و ذخیرهٔ فایل‌های تصویری کامپیوتری است که در آن تصویر در قالب مجموعه‌ای از مشخصات هندسی نقاط، خط‌ها، منحنی‌ها و چندضلعی‌ها ذخیره می‌شود. تصاویر تعریف شده به کمک گرافیک برداری، از خطوط و منحنی‌هایی به نام بردار تشکیل شده‌اند که به صورت ریاضی تعریف می‌شوند. اجزای این تصاویر را می‌توان بدون از دست دادن کیفیت به راحتی جا به جا کرد یا تغییر اندازه داد. این تصاویر مستقل از رزولوشن هستند و می‌توان آنها را بزرگ و کوچک کرد و در هر رزولوشن بدون از دست دادن جزئیات و وضوح چاپ کرد. یکی از شناخته شده ترین فرمت‌های ذخیرهٔ فایل‌های گرافیک برداری، فرمت SVG است. خبر خوب اینه که SVG بر اساس XML است این یعنی سینتکس آن خیلی هم عجیب و غریب نخواهد بود و به HTML شباهت دارد. به این صورت که برای ترسیم شکل های مختلف تگ های مختلف وجود دارد مثلا برای ترسیم دایره از تگ استفاده می شود و در نهایت همه اشکال، درون یک تگ قرار می گیرند.چرا باید از SVG در صفحات وب استفاده کنیم؟مستقل از رزولوشنیکی از نقاط قوت SVG این است که در صفحه نمایش هایی با کیفیت بسیار بالا هم به بهترین شکل نمایش داده می شود و کیفیتش تغییر نمی کند. برخلاف تصاویر Raster که کیفیت خود را از دست می دهند و مجبوریم برای صفحه نمایش هایی با کیفیت بالاتر نسخه با کیفیت تری از تصویر را نمایش دهیم.روی تصویر زیرکلیک کنید و تاجایی که امکان داره اون رو زوم کنید.دیگر مهم نیست اندازه تصویر چه باشد، یا چقدر کاربر Zoom کند و یا اینکه کیفیت صفحه نمایش کاربر چه اندازه باشد. در همه این موارد SVG با هماهن کیفیت تند و تیز نمایش داده میشه!سازگار با CSSاز اونجایی که SVG هم مثل HTML یک مارکاپ است و برای تولید آن میشه از تگ های استاندارد استفاده نمود پس می توان برای اون Class یا id منحصر به فرد تعیین کرد باشد و از طریق در CSS برخی از ویژگی های آن را تغییر دارد عمرا بشه این کار رو با یک تصویر raster انجام داد!تعامل پذیری ساده از طریق جاوااسکریپتبه همان دلیلی که SVG با CSS سازگار است می توان گفت که به راحتی می توان از طریق جاواسکریپت با آن تعامل داشت و مواردی مثل انیمیشن و غیره را به راحتی پیاده و در نتیجه تجربه کاربری و تعاملی خوبی را به سادگی برای کاربر مهیا کرد.درخواست HTTPهر زمان که بواسطه تگ از تصویری به صورت عادی در یک صفحه وب استفاده کنید مرورگر برای ترسیم آن تصویر یک درخواست HTTP به سرور می فرستد تا تصویر را از سرور گرفته و نمایش دهد. اگر از روش خطی برای SVG استفاده کنیم SVG بصورت مستقیم در فایل HTML قرار دارد و دیگر نیازی به یک درخواست جداگانه برای تصویر ما نخواهد بود. (البته اگر تصویر SVG را مستقیما در فایل HTML قرار داده باشیم)افزایش دسترس پذیریتصور کنید شخصی به هر دلیلی مجبور باشد که از یک صفحه خوان برای مرور کردن صفحه وب استفاده کند (مثلا مشکلات بینایی داشته باشد) در حالت عادی آیکونی که از طریق یک فونت آیکونی ساخته شده باشد و یا یک تصویر ساده باشد هیچ معنایی برایش نخواهد داشت اما وقتی از SVG استفاده کنیم می توانیم برای آن شخص هم نوشته ای برای آن آیکون قرار دهیم که او را راهنمایی کند. در دنیای وب موضوعات این چنینی را با عنوان Accessibility مطرح می کنند و SVG در این زمینه بصورت های مختلفی کمک بسیار بزرگی خواهد بود.با نرم افزار و بدون نرم افزار! قابل ویرایشهبرای ایجاد و یا ویرایش تصاویر SVG می توان از نرم افزارهای گرافیک برداری مثل Adobe Illustrator استفاده کرد. اما اگر به این نرم افزارها دسترسی نداشتید هم مهم نیست با یک ویرایشگر متن باز هم میتوان تصاویر SVG ساده را تغییر داد. ابزارهای آنلاین هم که به وفور در دسترس است. اگر یک تصویر Raster را بخواهیم ویرایش کنیم باید به فوتوشاب یا مشابه آن پناه ببریم.حجم فایل کمتر زندگی راحت ترترسیمات وکتور معمولا حجم کمتری را می گیرند مخصوصا اگر شکل و طرح ساده ای داشته باشند. پس فایل تصویر ما سایز کمتری خواهد داشت. همچنین فشرده سازی بصورت بهتری روی SVG اعمال می شود. پس می توان از نظر سایز صفحه وب هم با استفاده از SVG صرفه جویی داشته باشیم که از نظر کارایی کمک بسیار خوبی برای سایت ما خواهد بود.طراحی واکنشگرا با خونریزی کمتردر طراحی واکنشگرا، واکنشگرا کردن تصاویر یک درد سر بزرگ است. اگر تصویر شما می تواند بصورت SVG باشد دیگر نگرانی برای واکنشگرا بودن آن نخواهید داشت. ولی در صورت استفاده از تصاویری با فرمت PNG یا JPG شاید مجبور شوید تا در صفحه نمایش های مختلف نسخه های مختلفی از آن تصاویر را قرار دهید. چه موقع SVG؟استفاده از تصاویر SVG و قابلیتهاش میتونه کاربردهای زیادی داشته باشه که به مهارت و خلاقیت شما بستگی داره ما سعی میکنیم توی دوره های آموزشی SVG هم مهارت و هم خلاقت شما رو افزایش بدیم تا بهتر در طرحاتون از این تصاویر استفاده کنید اما اگر بخواهم فهرست وار بگم بهترین موارد استفاده SVG عبارتند از:• آیکون ها• ترسیمات ساده مثل شکل های مختلف• بنرهای تبلیغاتی• ترسیمات متحرک• اینفوگراف ها و مصورسازی داده ها• ایجاد تصاویر تعاملیمی باشند.واضح است که اگر تصویری از یک منظره داشته باشیم که توسط یک عکاس گرفته شده است، نمایش آن بوسیله SVG منطقی نخواهد بود چرا که در این مورد حجم فایل به مراتب بیشتر از فرمت PNG یا JPG خواهد بود.ادامه دارد…<br/>

آموزش طراحی یک منوی زیبا و جذاب به کمک css و JavaScript

مانایید — Sat, 01 Apr 2023 15:25:04 +0330

در این نوشته می خوام ایجاد یک منوبار مثل منوبار مانایید رو آموزش بدم. برای یکی از پروژه های طراحی سایت میخواستم منویی طراحی کنم که وقتی کاربر موس رو روی لینکها میبره( hover کردن) یک خط متحرک زیر منو ها نمایش داده بشه. چالش پروژه این بود که تعداد آیتمهای داخل منو مشخص نبود و ممکن بود بعد از تحویل پروژه تغییر کنه پس استفاده از CSS به تنهایی چاره ساز نبود. اول از همه به سراغ افزونه lavalamp جی کوئری رفتم. بعد با خودم گفتم چرا باید برای یک قسمت کوچیک از پروژه از جی کوئری استفاده کنم؟ پس دست به کار شدمکد های HTMLمثل همیشه با کد کذاری html شروع میکنیم. این بخش چیز خاصی نداره و فقط شامل کدهای استاندار html برای اینجاد یک منو ناوبری است.کدهای Cssچالش بعدی همینجاست. برای نشان دادن خط زیر منو باید از سودو کد before:: استفاده می کردم اما متاسفانه توسط جاوا اسکریپت نمیشه مستقیما به ویژگی ها سودوکدهای Css دسترسی داشت.راه حل: تعریف دو متغیر در Css برای نگه داری عرض (width) و محل (position) خط زیر منو متناسب با لینک هاور شده است.کدهای JavaScriptفقط سه گام دیگه مونده تا منوی ما کامل بشه؛ اول: باید چک کنیم کدوم آیتم منو در حالت انتخاب (Hover) قرار گرفته. دوم: موقعیت افقی اون آیتم و عرضش رو مشخص کنیم و سوم: مقادیر مورد نیاز را برای نگه دارنده لیست منوها (menu__list.) تعیین کنیم.اول از همه باید منوی را در یک متغییر نگه داریم؛بعد از اون باید یک رویداد (Event) mouseover برای اون تعریف کنیمداخل اون رویداد (Event) تعریف میکنیم که اگر آیتمی که موس روی اون رفته یکی از آیتمهای منو باشه عرض و موقعیت اون رو بگیر و در متغیرهای CSS که قبلا تعریف کردیم قرار بده:در آخر هم رویداد mouseleave ر و برای منو تعریف میکنیم که وقتی اجرا شد عرض خط زیر منو برابر با صفر بشه و در اصل دیگه نشون داده نشهاین یک مقاله ار وب سایت مانایید است سورس کد را می تواندی از اینجا دریافت کنید

2/5 نکته برای جایگزینی صفحه‌بندی پَجینِیشِن در صفحات فهرست و دسته‌بندی

مانایید — Sat, 25 Feb 2023 18:49:39 +0330

چکیده:بسیاری از سایت‌های فروشگاهی برای صفحه بندی محصولات خود از روشهایی با “نرخ تعامل کمتر” نسبت به صفحه‌بندی سنتی (پجینیشن) استفاده می کنند.موقع طراحی یک صفحه برای بارگزاری پستها یا محصولات زیاد، حتما این سوال برای شما پیش اومده که برای این صفحه باید از کدام روش صفحه بندی استفاده کنم؟ پاسخ کوتاه: بستگی به تعداد محصولات قابل نمایش شما دارد.صفحه‌بندی سنتی (پجینیشن)صفحه‌بندی سنتی شامل تقسیم فهرستی از آیتم‌ها به چند صفحه است که هر صفحه شامل تعداد ثابتی از آیتم‌ها است. برای دیدن گزینه های بیشتر، کاربران باید معمولاً با کلیک کردن “بعدی” یا شماره بعدی در بالا یا پایین صفحه موجود به صفحه بعدی بروند –. هر صفحه شماره گذاری شده است و کاربران می توانند با انتخاب دکمه های مربوطه به صفحات شماره خاصی حرکت کنند.فروشگاههای بزرگ مانند دیجیکالا با تعداد زیاد آیتم به منظور کنترل‌ بهتر محصولات ارایه شده و راحتی کاربر بهتر است از همین کنترل کننده صفحه‌بندی سنتی ( پجینیشن Pagination ) استفاده کنند چرا که این کنترل‌ها هنگام جستجو و مرور مجموعه‌های عظیم محصولاتشان، کنترل دقیقی را ارائه می‌دهند. سایت فروشگاهی زنبیل از این روش برای صفحه بندی محصولات خود استفاده میکند. سایت‌هایی با تعداد محصولات کم یا عملکرد بارگیری خوب ممکن است بتوانند به سادگی همه محصولات را به صورت بارگزاری تدریجی (معادل lazy loading ) دریک صفحه بارگیری کنند. در این روش وقتی کاربر به انتهای لیست محصولات بارگزاری شده می رسد، به طور اتوماتیک تعداد بیشتری از محصولات بارگزاری می شوند. این فروشگاه قهوه ملو از این روش استفاده میکند.به طور کلی اگر صفحه شما قرار است تعداد کمی آیتم ( به طور میانگین کمتر از 100) یا متوسط (بین 100 تا 300) را بارگزاری کند ، بهتر است به جای پجینیشن از “دکمه های بارگذاری تدریجی” یا “نمایش محصولات بیشتر” و یا بارگزاری تدریجی (lazy loading)استفاده کنید.صفحه بندی سنتی یا pagination نمایش دکمه های بیشتربرخی دیگر از سایتهای فروشگاهی به جای صفحه‌بندی سنتی یا بارگذاری بی‌نهایت، دکمه‌ “بارگزاری موارد بیشتر” را در پایین صفحات فهرست خود قرار می‌دهند. برچسب این دگمه ها می تواند “بیشتر ببینید” “بارگذاری بیشتر” ” مشاهده محصولات بیشتر ” یا ” بارگزاری موارد بیشتر ” باشد. این روش در مقایسه با صفحه بندی سنتی به لحاظ تجربه کاربری (UX) بارشناختی و نرخ تعامل کمتری دارد، چرا که معمولا پیمایش خطی محصولات برای کاربر راحتتر است. علاوه بر این، کلیک کردن بر روی یک دگمه تنها و بزرگ پیچیدگی کمتری نسبت به تعداد زیادی دگمه کوچک و درهم دارد. تفاوت اساسی بین این روش و روش بارگذاری تدریجی این است که مخاطب باید برای بارگیری مجموعه بعدی محصولات، به جای بارگیری خودکار آنها، خودش اقدام کند. بنابراین، در مقایسه با بارگذاری بی‌نهایت، دکمه‌های “بارگزاری بیشتر” مدیریت بارگزاری موارد بیشتر را در اختیار کاربر گذاشته و علاوه بر آن اجازه دسترسی به فوتر سایت را می‌دهند. استفاده از این روش روز به روز محبوبتر و فراگیر تر می شود ، حتی Google هم به‌جای صفحه‌بندی در صفحات نتایج تلفن همراه شروع به استفاده از این روش کرده است ( البته روش گوگل در اصل تلفیقی از بارگزاری خودکار و بارگزاری به وسیله دگمه است).ما همیشه گفتیم کار شرکتهای دیگه رو (به دلایل زیادی) کپی نکنید اما گوگل یک استثنا است. صرفاً به دلیل اینکه طراحی و تغییرات طراحی در محصولات گوگل نتیجه بازخورد تعداد زیادی کاربر با طیف گسترده ای از سطح ویژگی ها است.این روش به کاربران امکان می‌دهد بدلخواه موارد بیشتری را بارگیری کنند یا نه. از این رو برای آن دسته از کسانی که از اینترنت همراه استفاده میکنند و نمیخواهند محصولات اضافی را به دلیل مصرف اینترنت یا سرعت بارگزاری پایین به طور مداوم بارگیری کنند، خوب است. همانند متد بارگزاری خودکار بهتر است برای خلق تجربه کاربری بهتر موارد مانند “تعداد کل اقلام موجود در مجموعه”، “تعداد محصول بارگزاری شده ” و ” تعداد محصول برای بارگذاری در مجموعه “ را در معرض دید کاربر قرار دهید. اینگونه کاربر متوجه می شود کجای لیست محصولات قرار دارد و چه موقع به انتهای لیست رسیده است.چه از بارگزاری تدریجی استفاده میکنید چه از دگمه “بارگزاری بیشتر“، مطمئن شوید که صفحات فهرست شما از pogo sticking پشتیبانی می‌کنند . منظور این است وقتی کاربر پس از پیمایش لیست ،محصولی را انتخاب کرد و وارد صفحه آن شد. چنانچه دگمه برگشت را زد به همان قسمت از لیست برگردد و برای یافتن موقعیت خود مجبور به اسکرول کردن دوباره یا زدن دگمه بارگزاری ببیشتر به صورت پیاپی نشود. این کار به ویژه برای کاربرانی که عادت ندارند جزییات محصولات را در تب جدید باز کنند، بسیار کلافه کننده خواهد بودبارگذاری تدریجیبرخی از وب سایتهای فروشگاهی تنهایک صفحه فهرست محصول طراحی می‌کنند که به طور مداوم و خودکار موارد بیشتری را هنگام حرکت کاربران به پایین صفحه بارگیری می‌کند. پیمایش بی نهایت یا بارگزاری تدریجی (که با اسکرول کردن کاربر به انتهای صفحه به صورت خودکار اتقاق می افتد) برای سایت های فروشگاهی با قابلیت زیر کاربردی تر است:تعداد نسبتاً کمی از محصولات در هر مجموعه (معمولاً کمتر از 40 محصول)ارایه گزینه های مناسب برای فیلتر کردن و کمک به کاربران برای محدود کردن مجموعه نتایجبارگزاری تعداد مشخصی از آیتمها (“مثلا 50 مورد”)این راه‌حل برای سایت‌هایی با دسته بندی هایی که دارای تعداد محدودی محصول هستند عالی است اما برای سایت‌هایی با محصولات زیاد باید از اسکرول بی‌نهایت به دو دلیل اجتناب شود؛دسترسی کاربران به فوتر و اطلاعات آن سخت و عذاب آور می شود.وقتی صفحه شامل تعداد زیادی محصول است کاربران ممکن است دچار سردرگمی شوند و متوجه نشوند که در کجای لیست محصولات قرار دارند.مشکل دسترسی به فوتراز آنجایی که در بارگزاری بینهایت همواره با اسکرول کردن کاربر به پایین صفحه موارد جدیدی اضافه می‌شوند، کاربران نمی‌توانند به قسمت فوتر دسترسی پیدا کنند. در سایت‌هایی که از بارگزاری تدریجی استفاده میکنند، اغلب برای کاربرانی که قصد دسترسی به فوتر را دارند خسته کننده و مشکل‌زامی شود. وقتی از بارگذاری تدریجی برای تعداد زیادی محصول استفاده کنید وب سایت شما تبدیل به یک کابوس برای کاربر می شود. چرا که کاربر مجبور می شود برای رسیدن به فوتر (پاورقی) به مدت 15 دقیقه اسکرول کند! در حالی که پاورقی بنا بر رسالت خود (سیاست بازگشت کاربر به سایت) میبایست به راحتی در دسترس باشد تا بتواند اطلاعات مربوط به فرآیند خرید حمل و نقل و بازگشت محصول، اطلاعات تماس و غیره … را در اختیار کاربر قرار دهد.نقشه راهنما داشته باشید!یکی از نکات مهم در متد بارگزاری تدریجی نمایش تعداد کل محصولات در صفحه دسته بندی است که متاسفانه اغلب نادیده گرفته می شود ( تصور کنید کاربر نمی داند چه تعداد محصول در این صفحه نمایش داده می شود و در میانه بارگزاری به دلیل وجود ترافیک بالا، افت سرعت اینترنت و مسائل دیگر بارگذاری کمی با تاخیر انجام شود. در این حالت ممکن است کاربر صفحه را به تصور اینکه کل محصولات نمایش داده شده اند ترک کند بدون اینکه محصول مورد نظر خود را پیدا کرده باشد) پیشنهاد ما مشخص کردن تعداد محصولات در بالای هر صفحه سمت راست ( برای سایتهای فارسی زبان) یا در کنار گزینه های فیلتر می باشد. (متاسقانه من در وب سایتهای فارسی ندیدم نمونه ای اگر کسی نمونه ای سراغ داره لطفا به من هم اطلاع بدید.)ترفند: بهتراست تعداد محصولات را به صورت نشانگری بصری با قابلیت چسبان (Sticky) یا ثابت (fixed) در گوشه صفحه همواره در معرض دید کاربر قرار داده و همچنین موقعیت فعلی کاربر را به صورت المانهای متحرک به نمایش بگذارید. این نشانگر به کاربران کمک می‌کند موقعیت فعلی خود را ببیند و همچنین بفهمند که قبلاً چند مورد را مشاهده کرده و چند مورد برای دیده شدن باقی مانده‌است. با افزوده شدن موارد جدید به صفحات دارای، نوار اسکرول استاندارد مرورگر مدام شکسته و پرش میکند، بنابراین کاربران نمی توانند برای تعیین مکان خود در یک صفحه به آن تکیه کنند. چرا که ممکن است دستگیره آن از میانه صفحه به ناگاه به یک سوم بالای صفحه جهش کند. از این رو نمایش یک نشانگر سفارشی برای مشخص کردن مکان فعلی از سردرگمی کابر می کاهد.گاهی لازم است علاوه بر بارگزاری خودکار از یک دگمه برای مواقع غیر قابل پیشبینی استفاده کرد جمع بندیعلاوه بر آنچه گفته شد روشهای ترکیبی مانند صفخات موبایل در گوگل می توانید از روشهای ترکیبی استفاده کنید. برای مثال وب سایت دیجیکالا و یا سایت مدیسه از روشهای بارگزاری تدریجی و پجینیشن به طور همزمان استفاده میکند. از هر متدی که استفاده میکنید قبل از همه خودتان صفحه ای که طراحی کرده اید را امتحان کنید و با فرض اینکه یک کاربر عادی هستید ببینید با آن چه طراحی کرده اید احساس راختی میکنید و میتوانید به راختی چیزی که دنبال آن هستید را بیابید همه اشکالات را چک کنید مانند عدم دسترسی به فوتر یا مشخص نبودن دکمه نمایش بیشترو غیره …

3 نکته مهم برای داشتن طرحی که خوب به نظر برسه!

مانایید — Sat, 25 Feb 2023 18:29:22 +0330

چکیده:در این مقاله بررسی میکنیم که چطور استفاده درست از ابزارهایی مانند تایپوگرافی ، سلسله مراتب بصری، پالت رنگی و شبکه بندی تراز باعث می‌شوند یک طرح خوب به نظر برسد.جزییات بصری مانند قلم‌ها، رنگ‌ها و ترازبندی، در خلق یک تجربه و در نهایت ارزیابی کاربر از نام و نشان شما نقش داشته و ویژگی‌های برند را (مانند دوستی یا قابلیت اطمینان) بیان می‌کنند. به راحتی می توان با یک نگاه متوجه شد که یک طرح خوب به نظر می رسد یا نه؟ اما اغلب تشخیص اینکه چرا خوب به نظر می رسد بسیار سخت است. در این مقاله ما سه طراحی رابط کاربری را تجزیه و تحلیل و اصول طراحی بصری که آنها را جذاب می‌کند را بررسی میکنیم.یک – تایپوگرافی و فاصله گذاری:اولین مثال ما از وبسایت مدیوم است. این وب سایت با استفاده از طراحی یک شبکه، فضای سفید و یک سیستم تایپوگرافی با حفظ زیبایی و سادگی، تجربه ای لذت بخش ازخواندن راحت مقالات که هدف اصلی این سایت است برای مخاطب ایجاد میکند.طراحی مدیوم ساده، اما جذاب است. سیستم تایپوگرافی متفکرانه، فاصله گذاری، و ترازبندی ثابت از سمت چپ، خواندن را برای کاربران آسان می کند، در حالی که اطلاعات اضافی در یک نوار کناری به صورت منسجم ارائه می شود. در طراحی از یک شبکه 3 ستونی استفاده شده است. هر عنصر متنی با یک خط شبکه تراز می شود. یک واحد ثابت از فاصله گذاری( با استفاده از ویژگی padding ) به عنوان فضای سفید عناصر هر بخش را به صورت عمودی از هم جدا می کند. آیکون ها در نوار کناری سمت چپبا یک واحد ثابت جدا کننده از هم جدا شده اند با فاصله گذاری دو برابر برای جدا کردن گروه‌ها استفاده شده است. عنوان WRITTEN BY به صورت کاپیتال آن را از بقیه متن متمایز می‌کنداستفاده از فضای سفید زیاد تجربه خواند را لذت بخش تر میکند. چیدمان بر اساس یک شبکه، یک شبکه شامل دو ستون در این طرح (خطوط صورتی در تصویر بالا) دیده می شود. شبکه ستونی اول به عنوان لنگر عمودی برای تراز کردن المانهای موجود در سمت چپ وجود دارد از آنجایی که محتواهای نوار کناری به صورت چپ چین قرار گرفته اسکن آنها توسط کاربر راحتر و سریعتر است ( توجه داشته باشید که این یک نمونه سایت انگلیسی زبان است که نوشتار طراحی واضح به نظر می رسد و محتوای نوار کناری اسکن آسان است. متن مقاله نیز در یک ستون دیگر و به صورت چپ چین تراز شده است تراز کردن متن های بلند اهمیت زیادی در تجربه خوب برای مخاطب ایجاد میکند چرا که خوانند به راحتی مب تواند شروع خط بعد را قبل از آنکه آخرین کلمه خط قبلی از ذهنش بپرد، پیدا کند. شما در طراحی ها یتان می توانید از یک شبکه تراز بندی منظم و منسجم استفاده کنید با این تفاوت که تراز بندی در صفحات فارسی می بایست از سمت راست باشد.تنوع در قلمهای استفاده شده در سایت Medium شامل سبکهای متفاوت از یک خانواده قلم (حروف کوچک، پررنگ، مورب، زیرخط دار) با تغییرات جزئی در رنگ (مشکی در مقابل خاکستری) می باشددر واقع در این سایت از یک قلم استفاده شده و برای ایجاد تمایز در بین انواع محتوا از تغییرات رنگ و سبک های مختلف قلم استفاده میکند. چرا که استفاده از قلمها یی با سبکهای متفاوت مانند استفاده از تعداد زیاد رنگ، علاوه بر مختل کردن انسجام و یکپارچگی طرح باعث سردرگمی کاربر می شود. این کار باعث می شود که کاربر در طرح صفحه نتواند هیچ نظم و الگویی را شناسایی کند و در نتیجه طرح شما را تصادفی و بی قاعده ارزیابی می کند. برای مثال در تیتر WRITTEN BY استفاده از حروف کاپیتال علاوه بر ایجاد توجه، نسبت به بقیه متن تمایز ایجاد میکند به عنوان یک قاعده کلی، یک سیستم تایپوگرافی را شناسایی کنید و طراحی خود را به 1 یا 2 قلم محدود کنید. همیشه از نوع یکسانی (مورب، پررنگ، حروف کوچک) برای هدف های مشابه استفاده کنیدوب سایت ویرگول با پیروی از اصولی مشابه (شکل زیر) یک نمونه خوب در وب پارسی با خوانایی بالاست.....اگه این مقاله رو دوست داری امیتونی اینجا ادامه مقاله رو مطالعه کنی