۸ تکنیک مدرن در طراحی سایت – سئو مکانیک

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

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

1- از فونت بزرگ مخصوص استفاده کنید

در گذشته ای نه چندان دور فضای وب فارسی به چند فونت خاص از جمله Arial، Tahoma و در برخی موارد BYekan محدود می شد، اما خوشبختانه تنوع فونت های فارسی موجود برای طراحی سایت افزایش یافته است. با وجود تنوع بسیار زیاد، بسیاری از شرکت ها با طراحی فونت اختصاصی سایت و متمایز ساختن خود از دیگران، سعی در ارائه هویت برند خود دارند.

سئو مکانیک طی دو سال گذشته 4 فونت طراحی کرده است که یکی از آنها در این وب سایت قابل مشاهده است و بقیه در پروژه های طراحی سایت مشتریان استفاده می شود.

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

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

مشکلات طراحی وب سایت با فونت اختصاصی

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

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

2- تصاویر بزرگ و البته واکنش گرا

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

در مقالات سئو مکانیک قبلا در مورد تکنیک طراحی سایت با تصاویر قهرمان صحبت کرده ایم و پیشنهاد می کنیم برای شناخت بهتر این تکنیک مقاله اصلی را مطالعه کنید.

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

مشکلات استفاده از تصاویر بزرگ در طراحی وب

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

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

3- استفاده از ویدئو پس زمینه در صفحه اصلی

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

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

به عنوان مثال، اگر شما یک شرکت ارائه دهنده خدمات هاست هستید، نشان دادن فضای کاری، تیم فنی و سفارش کاری در شرکت می تواند اعتماد مشتری را افزایش دهد. البته اینها باید در چند ثانیه و عمدا نمایش داده شوند.

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

مشکلات استفاده از پس‌زمینه ویدیو

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

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

4- طراحی سایت با تکنیک نیمه تخت

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

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

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

مسائل تکنیک طراحی نیمه تخت

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

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

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