مدرن سازی ظاهر وب سایت

سایتتون به نظر قدیمی میاد؟ انگار بروز نشده؟ با این 7 راهکار ساده، سایتتونو غبارروبی کنید و به عصر مدرن بیارید.

• طراحی تمام پهنا و تمام صفحه

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

• قالبهاتونو ترکیب کنید

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

• تصاویر متحرک و تحول

تصاویر متحرک و تحرک میتونه سایتتونو پاپ کنه اما استفاده بیش از حدش هم خوب نیست. برای اینکه منظورمو از تصاویر متحرک توضیح بدم به این مثالها توجه کنید:
1- تصاویری که در یک اسلاید گالری پشت سر هم ظاهر میشن
2- انیمیشن
3- جلوه دادن به تصاویر با استفاده از اثر چشمک زدن تصویر
و سایر موارد
هدف تصاویر متحرک اینه که از انتقال سریع و ناگهانی جلوگیری کنیم. برای بکارگیری تصاویر متحرک روی سایتتون از این روشها میتونید بهره ببرید:
CSS hover transitions که اجراش کاری خیلی ساده ایه و از نظر بصری هم اثر منفی روی عملکرد سایت نداره. باعث میشه چشمک زدن تصویر ناگهانی انجام نشه و به نرمی و زیبایی صورت بگیره. برای این کار کافیه یه خط کد اضافه کنید.
انتقال صفحه و preloaders افکت یا تصاویر متحرکی هستن که وقتی کاربر از یه صفحه به صفحه دیگه مسیریابی میکنه بوجود میان. معمولا با یه افزونه یا کد جاوااسکریپت اجرا میشن و چند کار انجام میدن:
موقع مسیریابی کاربر روی سایت، تجربه کاربری بی نظیری بوجود میارن.
با پوشش دادن صفحه در مدتی که هنوز صفحه کامل بارگذاری نشده، اثر منفی زمان بارگذاری طولانی رو به حداثل میرسونن.
توجه به جزئیاتی رو که میخواهید کاربر بهشون توجه کنه افزایش میدن.

• عمق

عمق بصری سایت میتونه خیلی چیزها باشه:
1- همپوشانی
عناصر همپوشانی میتونن قالبهای جداشده، کادربندی شده و سرد قدیمی رو بشکنن. برای این کار میتونید از تصاویر بزرگ با یه متن در بالای تصویر استفاده کنید، یا عناصری داشته باشید که بخشهای کادربندی شده رو بشکنن.
2- سایه ها
یه روش برای عمق دادن به صفحه استفاده از سایه است. با یه چشم تیزبین و شم دقیق میتونید به عناصر طراحیتون عمق بدید. طراحی متریال گوگل هم خیلی زیبا به کمک سایه ها عمق داده و میتونید استفاده از طراحی تجربه کاربری مدرن رو اونجا ببینید.
3- پارالاکس یا تضاد
یه روش مؤثر دیگه که به سادگی هم اجرا میشه. پارالاکس یعنی عناصر مختلفی داشته باشید که با سرعت های متفاوتی اسکرول بشن. اجرای این روش خیلی سادست، مثل وقتی که بخواهید تصویر پس زمینه آروم تر از عناصر جلوش اسکرول بشه، یا شکل پیشرفته ترش اینه که همه عناصر صفحه با سرعت های متفاوتی از هم اسکرول بشن. پارالاکس میتونه اثر منفی بر کارایی سایت داشته باشه و اگه زیادی استفاده بشه به نظر لوس میاد، بنابراین هدفمند ازش استفاده کنید.

• آیکون و تصاویر سفارشی

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

• آیکونها و تصاویر SVG

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

• تایپوگرافی

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

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