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

۸ فوت وفن موثر در طراحی سایت مدرن

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

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

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

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

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

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

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

طراحی سایت با فونت اختصاصی

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

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

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

۲- تصاویر بزرگ و البته ریسپانسیو

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

در مقالات وبسیما در مورد فوت وفن طراحی سایت با hero images قبلا صحبت کردیم و پیشنهاد میکنیم واسه آشنایی بهتر با این فوت وفن مقاله اصلی رو بخونین.

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

طراحی سایت مدرن با به کار گیری hero header

 

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

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

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

حتما بخوانید :
کد QR چیست؟

۳- به کار گیری ویدیو بک گراند در صفحه اصلی

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

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

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

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

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

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

طراحی سایت مدرن با به کار گیری ویدیو بک گراند

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

۴- طراحی سایت با فوت وفن نیمه فلت

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

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

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

به کار گیری متریال دیزاین در طراحی سایت مدرن

مشکلات فوت وفن طراحی نیمه فلت

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

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

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *